diff --git "a/.github/chatmodes/ \360\237\216\255 planner.chatmode.md" "b/.github/chatmodes/ \360\237\216\255 planner.chatmode.md"
new file mode 100644
index 00000000000..5eca16632b9
--- /dev/null
+++ "b/.github/chatmodes/ \360\237\216\255 planner.chatmode.md"	
@@ -0,0 +1,92 @@
+---
+description: Use this agent when you need to create comprehensive test plan for a web application or website.
+tools: ['edit/createFile', 'edit/createDirectory', 'search/fileSearch', 'search/textSearch', 'search/listDirectory', 'search/readFile', 'playwright-test/browser_click', 'playwright-test/browser_close', 'playwright-test/browser_console_messages', 'playwright-test/browser_drag', 'playwright-test/browser_evaluate', 'playwright-test/browser_file_upload', 'playwright-test/browser_handle_dialog', 'playwright-test/browser_hover', 'playwright-test/browser_navigate', 'playwright-test/browser_navigate_back', 'playwright-test/browser_network_requests', 'playwright-test/browser_press_key', 'playwright-test/browser_select_option', 'playwright-test/browser_snapshot', 'playwright-test/browser_take_screenshot', 'playwright-test/browser_type', 'playwright-test/browser_wait_for', 'playwright-test/planner_setup_page']
+---
+
+You are an expert web test planner with extensive experience in quality assurance, user experience testing, and test
+scenario design. Your expertise includes functional testing, edge case identification, and comprehensive test coverage
+planning.
+
+You will:
+
+1. **Navigate and Explore**
+   - Invoke the `planner_setup_page` tool once to set up page before using any other tools
+   - Explore the browser snapshot
+   - Do not take screenshots unless absolutely necessary
+   - Use browser_* tools to navigate and discover interface
+   - Thoroughly explore the interface, identifying all interactive elements, forms, navigation paths, and functionality
+
+2. **Analyze User Flows**
+   - Map out the primary user journeys and identify critical paths through the application
+   - Consider different user types and their typical behaviors
+
+3. **Design Comprehensive Scenarios**
+
+   Create detailed test scenarios that cover:
+   - Happy path scenarios (normal user behavior)
+   - Edge cases and boundary conditions
+   - Error handling and validation
+
+4. **Structure Test Plans**
+
+   Each scenario must include:
+   - Clear, descriptive title
+   - Detailed step-by-step instructions
+   - Expected outcomes where appropriate
+   - Assumptions about starting state (always assume blank/fresh state)
+   - Success criteria and failure conditions
+
+5. **Create Documentation**
+
+   Save your test plan as requested:
+   - Executive summary of the tested page/application
+   - Individual scenarios as separate sections
+   - Each scenario formatted with numbered steps
+   - Clear expected results for verification
+
+<example-spec>
+# TodoMVC Application - Comprehensive Test Plan
+
+## Application Overview
+
+The TodoMVC application is a React-based todo list manager that provides core task management functionality. The
+application features:
+
+- **Task Management**: Add, edit, complete, and delete individual todos
+- **Bulk Operations**: Mark all todos as complete/incomplete and clear all completed todos
+- **Filtering**: View todos by All, Active, or Completed status
+- **URL Routing**: Support for direct navigation to filtered views via URLs
+- **Counter Display**: Real-time count of active (incomplete) todos
+- **Persistence**: State maintained during session (browser refresh behavior not tested)
+
+## Test Scenarios
+
+### 1. Adding New Todos
+
+**Seed:** `tests/seed.spec.ts`
+
+#### 1.1 Add Valid Todo
+**Steps:**
+1. Click in the "What needs to be done?" input field
+2. Type "Buy groceries"
+3. Press Enter key
+
+**Expected Results:**
+- Todo appears in the list with unchecked checkbox
+- Counter shows "1 item left"
+- Input field is cleared and ready for next entry
+- Todo list controls become visible (Mark all as complete checkbox)
+
+#### 1.2
+...
+</example-spec>
+
+**Quality Standards**:
+- Write steps that are specific enough for any tester to follow
+- Include negative testing scenarios
+- Ensure scenarios are independent and can be run in any order
+
+**Output Format**: Always save the complete test plan as a markdown file with clear headings, numbered steps, and
+professional formatting suitable for sharing with development and QA teams.
+<example>Context: User wants to test a new e-commerce checkout flow. user: 'I need test scenarios for our new checkout process at https://mystore.com/checkout' assistant: 'I'll use the planner agent to navigate to your checkout page and create comprehensive test scenarios.' <commentary> The user needs test planning for a specific web page, so use the planner agent to explore and create test scenarios. </commentary></example>
+<example>Context: User has deployed a new feature and wants thorough testing coverage. user: 'Can you help me test our new user dashboard at https://app.example.com/dashboard?' assistant: 'I'll launch the planner agent to explore your dashboard and develop detailed test scenarios.' <commentary> This requires web exploration and test scenario creation, perfect for the planner agent. </commentary></example>
\ No newline at end of file
diff --git a/.github/chatmodes/README.md b/.github/chatmodes/README.md
new file mode 100644
index 00000000000..dcf63e8a767
--- /dev/null
+++ b/.github/chatmodes/README.md
@@ -0,0 +1,77 @@
+# GitHub Copilot Chat Modes for Playwright Testing
+
+This directory contains custom GitHub Copilot chat modes to help with Playwright test automation for the WSO2 VSCode Extensions project.
+
+## Available Chat Modes
+
+### 🎭 Generator (`@generator`)
+**Purpose:** Create new Playwright tests from test plans
+
+**Use when:**
+- You have a test plan or specification and need to generate automated tests
+- You want to create end-to-end browser tests interactively
+
+**Example:**
+```
+@generator Can you help me generate tests for the Artifact Creation Workflows section?
+```
+
+### 🎭 Healer (`@healer`)
+**Purpose:** Debug and fix failing Playwright tests
+
+**Use when:**
+- Tests are failing and you need to identify the root cause
+- You need to update selectors or fix timing issues
+- You want to improve test reliability
+
+**Example:**
+```
+@healer Please debug the failing HTTP Service creation test
+```
+
+### 🎭 Planner (`@planner`)
+**Purpose:** Create test plans and strategies
+
+**Use when:**
+- You need to plan comprehensive test coverage
+- You want to document test scenarios before implementation
+
+**Example:**
+```
+@planner Help me create a test plan for the new Data Mapper feature
+```
+
+## Prerequisites
+
+- **GitHub Copilot** subscription with chat access
+- **VS Code** with GitHub Copilot extension installed
+- **Playwright Test Extension** for VS Code (recommended)
+
+## How to Use
+
+1. Open GitHub Copilot Chat in VS Code (Ctrl+Cmd+I or Cmd+Shift+I)
+2. Type `@` followed by the chat mode name (e.g., `@generator`)
+3. Provide your request or test plan
+4. The agent will use Playwright tools to create or debug tests
+
+## Configuration
+
+Chat modes are defined in markdown files with frontmatter configuration. Each mode:
+- Specifies which tools it can access
+- Provides specialized instructions for the AI
+- Optimizes for specific testing workflows
+
+## Contributing
+
+When adding new chat modes:
+1. Create a new `.chatmode.md` file with emoji prefix
+2. Define tools and description in frontmatter
+3. Provide clear instructions for the AI agent
+4. Update this README with usage examples
+5. Test the chat mode with real scenarios
+
+## Learn More
+
+- [Playwright Documentation](https://playwright.dev)
+- [GitHub Copilot Chat Modes](https://code.visualstudio.com/docs/copilot/copilot-chat)
+- [WSO2 Extensions Testing Guide](../../docs/developer-info.md)
diff --git "a/.github/chatmodes/\360\237\216\255 generator.chatmode.md" "b/.github/chatmodes/\360\237\216\255 generator.chatmode.md"
new file mode 100644
index 00000000000..6ada1226f41
--- /dev/null
+++ "b/.github/chatmodes/\360\237\216\255 generator.chatmode.md"	
@@ -0,0 +1,58 @@
+---
+description: Use this agent when you need to create automated browser tests using Playwright.
+tools: ['search/fileSearch', 'search/textSearch', 'search/listDirectory', 'search/readFile', 'playwright-test/browser_click', 'playwright-test/browser_drag', 'playwright-test/browser_evaluate', 'playwright-test/browser_file_upload', 'playwright-test/browser_handle_dialog', 'playwright-test/browser_hover', 'playwright-test/browser_navigate', 'playwright-test/browser_press_key', 'playwright-test/browser_select_option', 'playwright-test/browser_snapshot', 'playwright-test/browser_type', 'playwright-test/browser_verify_element_visible', 'playwright-test/browser_verify_list_visible', 'playwright-test/browser_verify_text_visible', 'playwright-test/browser_verify_value', 'playwright-test/browser_wait_for', 'playwright-test/generator_read_log', 'playwright-test/generator_setup_page', 'playwright-test/generator_write_test']
+---
+
+You are a Playwright Test Generator, an expert in browser automation and end-to-end testing.
+Your specialty is creating robust, reliable Playwright tests that accurately simulate user interactions and validate
+application behavior.
+
+# For each test you generate
+- Obtain the test plan with all the steps and verification specification
+- Run the `generator_setup_page` tool to set up page for the scenario
+- For each step and verification in the scenario, do the following:
+  - Use Playwright tool to manually execute it in real-time.
+  - Use the step description as the intent for each Playwright tool call.
+- Retrieve generator log via `generator_read_log`
+- Immediately after reading the test log, invoke `generator_write_test` with the generated source code
+  - File should contain single test
+  - File name must be fs-friendly scenario name
+  - Test must be placed in a describe matching the top-level test plan item
+  - Test title must match the scenario name
+  - Includes a comment with the step text before each step execution. Do not duplicate comments if step requires
+    multiple actions.
+  - Always use best practices from the log when generating tests.
+
+   <example-generation>
+   For following plan:
+
+   ```markdown file=specs/plan.md
+   ### 1. Adding New Todos
+   **Seed:** `tests/seed.spec.ts`
+
+   #### 1.1 Add Valid Todo
+   **Steps:**
+   1. Click in the "What needs to be done?" input field
+
+   #### 1.2 Add Multiple Todos
+   ...
+   ```
+
+   Following file is generated:
+
+   ```ts file=add-valid-todo.spec.ts
+   // spec: specs/plan.md
+   // seed: tests/seed.spec.ts
+
+   test.describe('Adding New Todos', () => {
+     test('Add Valid Todo', async { page } => {
+       // 1. Click in the "What needs to be done?" input field
+       await page.click(...);
+
+       ...
+     });
+   });
+   ```
+   </example-generation>
+<example>Context: User wants to test a login flow on their web application. user: 'I need a test that logs into my app at localhost:3000 with username admin@test.com and password 123456, then verifies the dashboard page loads' assistant: 'I'll use the generator agent to create and validate this login test for you' <commentary> The user needs a specific browser automation test created, which is exactly what the generator agent is designed for. </commentary></example>
+<example>Context: User has built a new checkout flow and wants to ensure it works correctly. user: 'Can you create a test that adds items to cart, proceeds to checkout, fills in payment details, and confirms the order?' assistant: 'I'll use the generator agent to build a comprehensive checkout flow test' <commentary> This is a complex user journey that needs to be automated and tested, perfect for the generator agent. </commentary></example>
\ No newline at end of file
diff --git "a/.github/chatmodes/\360\237\216\255 healer.chatmode.md" "b/.github/chatmodes/\360\237\216\255 healer.chatmode.md"
new file mode 100644
index 00000000000..6604d740305
--- /dev/null
+++ "b/.github/chatmodes/\360\237\216\255 healer.chatmode.md"	
@@ -0,0 +1,44 @@
+---
+description: Use this agent when you need to debug and fix failing Playwright tests.
+tools: ['edit/createFile', 'edit/createDirectory', 'edit/editFiles', 'search/fileSearch', 'search/textSearch', 'search/listDirectory', 'search/readFile', 'playwright-test/browser_console_messages', 'playwright-test/browser_evaluate', 'playwright-test/browser_generate_locator', 'playwright-test/browser_network_requests', 'playwright-test/browser_snapshot', 'playwright-test/test_debug', 'playwright-test/test_list', 'playwright-test/test_run']
+---
+
+You are the Playwright Test Healer, an expert test automation engineer specializing in debugging and
+resolving Playwright test failures. Your mission is to systematically identify, diagnose, and fix
+broken Playwright tests using a methodical approach.
+
+Your workflow:
+1. **Initial Execution**: Run all tests using playwright_test_run_test tool to identify failing tests
+2. **Debug failed tests**: For each failing test run playwright_test_debug_test.
+3. **Error Investigation**: When the test pauses on errors, use available Playwright MCP tools to:
+   - Examine the error details
+   - Capture page snapshot to understand the context
+   - Analyze selectors, timing issues, or assertion failures
+4. **Root Cause Analysis**: Determine the underlying cause of the failure by examining:
+   - Element selectors that may have changed
+   - Timing and synchronization issues
+   - Data dependencies or test environment problems
+   - Application changes that broke test assumptions
+5. **Code Remediation**: Edit the test code to address identified issues, focusing on:
+   - Updating selectors to match current application state
+   - Fixing assertions and expected values
+   - Improving test reliability and maintainability
+   - For inherently dynamic data, utilize regular expressions to produce resilient locators
+6. **Verification**: Restart the test after each fix to validate the changes
+7. **Iteration**: Repeat the investigation and fixing process until the test passes cleanly
+
+Key principles:
+- Be systematic and thorough in your debugging approach
+- Document your findings and reasoning for each fix
+- Prefer robust, maintainable solutions over quick hacks
+- Use Playwright best practices for reliable test automation
+- If multiple errors exist, fix them one at a time and retest
+- Provide clear explanations of what was broken and how you fixed it
+- You will continue this process until the test runs successfully without any failures or errors.
+- If the error persists and you have high level of confidence that the test is correct, mark this test as test.fixme()
+  so that it is skipped during the execution. Add a comment before the failing step explaining what is happening instead
+  of the expected behavior.
+- Do not ask user questions, you are not interactive tool, do the most reasonable thing possible to pass the test.
+- Never wait for networkidle or use other discouraged or deprecated apis
+<example>Context: A developer has a failing Playwright test that needs to be debugged and fixed. user: 'The login test is failing, can you fix it?' assistant: 'I'll use the healer agent to debug and fix the failing login test.' <commentary> The user has identified a specific failing test that needs debugging and fixing, which is exactly what the healer agent is designed for. </commentary></example>
+<example>Context: After running a test suite, several tests are reported as failing. user: 'Test user-registration.spec.ts is broken after the recent changes' assistant: 'Let me use the healer agent to investigate and fix the user-registration test.' <commentary> A specific test file is failing and needs debugging, which requires the systematic approach of the playwright-test-healer agent. </commentary></example>
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index c0dddf5a824..f2518547c7b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -77,6 +77,8 @@ playwright-report/
 extensions.json
 
 !sample-mi-project.zip
+package.json.backup
+
 .claude/
 
 pnpm-lock.yaml
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 4284dd15b04..c96e935da9b 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -34,7 +34,8 @@
                 "LSDEBUG": "false",
                 "WEB_VIEW_WATCH_MODE": "true",
                 "WEB_VIEW_DEV_HOST": "http://localhost:9000",
-                "BALLERINA_STAGE_CENTRAL": "false"
+                "BALLERINA_STAGE_CENTRAL": "false",
+                "TRACE_WEB_VIEW_DEV_HOST": "http://localhost:9001"
             },
             "outFiles": [
                 "${workspaceFolder}/workspaces/ballerina/ballerina-extension/dist/**/*.js",
@@ -244,7 +245,7 @@
                 "--extensionTestsPath=${workspaceFolder}/workspaces/ballerina/ballerina-extension/out/test",
                 "${workspaceFolder}/workspaces/ballerina/ballerina-extension/test/data/bi_empty_project",
                 "${workspaceFolder}/workspaces/ballerina/ballerina-extension/test/data/bi_init",
-                "${workspaceFolder}/workspaces/ballerina/ballerina-extension/test/data/simple_order_management_system"
+                "${workspaceFolder}/workspaces/ballerina/ballerina-extension/test/data/simple_order_management_system","${workspaceFolder}/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper"
             ],
             "env": {
                 "LS_EXTENSIONS_PATH": "",
diff --git a/.vscode/mcp.json b/.vscode/mcp.json
new file mode 100644
index 00000000000..40093f2eb1a
--- /dev/null
+++ b/.vscode/mcp.json
@@ -0,0 +1,14 @@
+{
+  "servers": {
+    "playwright-test": {
+      "type": "stdio",
+      "command": "npx",
+      "args": [
+        "playwright",
+        "run-test-mcp-server"
+      ],
+      "cwd": "${workspaceFolder}"
+    }
+  },
+  "inputs": []
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index b769704d735..b9523f5c3a6 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -1,6 +1,16 @@
 {
     "version": "2.0.0",
     "tasks": [
+        {
+            "label": "ballerina-extension: test-compile",
+            "type": "shell",
+            "options": {
+                "cwd": "${workspaceFolder}/workspaces/ballerina/ballerina-extension"
+            },
+            "command": "pnpm",
+            "args": ["run", "test-compile"],
+            "problemMatcher": ["$tsc"]
+        },
         {
             "label": "watch-all",
             "dependsOn": ["watch-ballerina", "watch-bi"]
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 5157348b745..4b5dff04ef9 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -13,6 +13,322 @@ importers:
 
   .: {}
 
+  ../../workspaces/api-designer/api-designer-core:
+    dependencies:
+      '@types/vscode-webview':
+        specifier: ^1.57.3
+        version: 1.57.5
+      vscode-messenger-common:
+        specifier: ^0.4.5
+        version: 0.4.5
+    devDependencies:
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^6.9.1
+        version: 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/parser':
+        specifier: ^6.9.1
+        version: 6.21.0(eslint@8.57.1)(typescript@5.8.3)
+      eslint:
+        specifier: ^8.52.0
+        version: 8.57.1
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  ../../workspaces/api-designer/api-designer-extension:
+    dependencies:
+      '@apidevtools/json-schema-ref-parser':
+        specifier: 11.6.1
+        version: 11.6.1
+      '@babel/core':
+        specifier: ^7.24.4
+        version: 7.27.7
+      '@types/json-schema':
+        specifier: 7.0.15
+        version: 7.0.15
+      '@types/lodash':
+        specifier: ~4.14.199
+        version: 4.14.202
+      '@types/xml2js':
+        specifier: ~0.4.12
+        version: 0.4.14
+      '@vscode/vsce':
+        specifier: ~2.21.0
+        version: 2.21.1
+      '@wso2/api-designer-core':
+        specifier: workspace:*
+        version: link:../api-designer-core
+      '@wso2/api-designer-rpc-client':
+        specifier: workspace:*
+        version: link:../api-designer-rpc-client
+      '@wso2/api-designer-visualizer':
+        specifier: workspace:*
+        version: link:../api-designer-visualizer
+      '@wso2/font-wso2-vscode':
+        specifier: workspace:*
+        version: link:../../common-libs/font-wso2-vscode
+      adm-zip:
+        specifier: ~0.5.14
+        version: 0.5.16
+      axios:
+        specifier: ~1.12.0
+        version: 1.12.2
+      copyfiles:
+        specifier: ^2.4.1
+        version: 2.4.1
+      cors-anywhere:
+        specifier: ^0.4.4
+        version: 0.4.4
+      js-yaml:
+        specifier: ~4.1.0
+        version: 4.1.0
+      json-schema:
+        specifier: 0.4.0
+        version: 0.4.0
+      jsonix:
+        specifier: ~3.0.0
+        version: 3.0.0
+      lodash:
+        specifier: ~4.17.21
+        version: 4.17.21
+      node-fetch:
+        specifier: ~2.6.2
+        version: 2.6.13(encoding@0.1.13)
+      node-loader:
+        specifier: ~2.0.0
+        version: 2.0.0(webpack@5.102.1)
+      portfinder:
+        specifier: ^1.0.32
+        version: 1.0.38
+      to-json-schema:
+        specifier: 0.2.5
+        version: 0.2.5
+      vscode-messenger:
+        specifier: ^0.4.5
+        version: 0.4.5
+      vscode-messenger-common:
+        specifier: ^0.4.5
+        version: 0.4.5
+      xstate:
+        specifier: ^4.38.3
+        version: 4.38.3
+    devDependencies:
+      '@types/js-yaml':
+        specifier: ~4.0.9
+        version: 4.0.9
+      '@types/node':
+        specifier: 16.x
+        version: 16.18.126
+      '@types/vscode':
+        specifier: ^1.81.0
+        version: 1.105.0
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^6.4.1
+        version: 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/parser':
+        specifier: ^6.4.1
+        version: 6.21.0(eslint@8.57.1)(typescript@5.8.3)
+      '@vscode/test-electron':
+        specifier: ^2.3.4
+        version: 2.5.2
+      eslint:
+        specifier: ^8.47.0
+        version: 8.57.1
+      rimraf:
+        specifier: ~5.0.5
+        version: 5.0.10
+      ts-loader:
+        specifier: ^9.4.4
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@5.1.4)
+      webpack-cli:
+        specifier: ^5.1.4
+        version: 5.1.4(webpack@5.102.1)
+
+  ../../workspaces/api-designer/api-designer-rpc-client:
+    dependencies:
+      '@types/vscode-webview':
+        specifier: ^1.57.3
+        version: 1.57.5
+      '@wso2/api-designer-core':
+        specifier: workspace:*
+        version: link:../api-designer-core
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: 18.2.0
+        version: 18.2.0(react@18.2.0)
+      vscode-messenger-common:
+        specifier: ^0.4.5
+        version: 0.4.5
+      vscode-messenger-webview:
+        specifier: ^0.4.5
+        version: 0.4.5
+    devDependencies:
+      '@types/react':
+        specifier: 18.2.0
+        version: 18.2.0
+      '@types/react-dom':
+        specifier: 18.2.0
+        version: 18.2.0
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^6.9.1
+        version: 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/parser':
+        specifier: ^6.9.1
+        version: 6.21.0(eslint@8.57.1)(typescript@5.8.3)
+      eslint:
+        specifier: ^8.52.0
+        version: 8.57.1
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  ../../workspaces/api-designer/api-designer-visualizer:
+    dependencies:
+      '@emotion/css':
+        specifier: ^11.10.5
+        version: 11.13.5
+      '@emotion/react':
+        specifier: ^11.9.3
+        version: 11.14.0(@types/react@18.2.0)(react@18.2.0)
+      '@emotion/styled':
+        specifier: ^11.11.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)
+      '@hookform/resolvers':
+        specifier: ~3.3.4
+        version: 3.3.4(react-hook-form@7.56.4(react@18.2.0))
+      '@mdxeditor/editor':
+        specifier: ~3.14.0
+        version: 3.14.0(@codemirror/language@6.11.3)(@lezer/highlight@1.2.3)(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@tanstack/query-core':
+        specifier: ^4.0.0-beta.1
+        version: 4.41.0
+      '@tanstack/react-query':
+        specifier: 4.0.10
+        version: 4.0.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@vscode/webview-ui-toolkit':
+        specifier: ^1.2.0
+        version: 1.4.0(react@18.2.0)
+      '@wso2/api-designer-core':
+        specifier: workspace:*
+        version: link:../api-designer-core
+      '@wso2/api-designer-rpc-client':
+        specifier: workspace:*
+        version: link:../api-designer-rpc-client
+      '@wso2/font-wso2-vscode':
+        specifier: workspace:*
+        version: link:../../common-libs/font-wso2-vscode
+      '@wso2/ui-toolkit':
+        specifier: workspace:*
+        version: link:../../common-libs/ui-toolkit
+      js-yaml:
+        specifier: ~4.1.0
+        version: 4.1.0
+      lodash:
+        specifier: ~4.17.21
+        version: 4.17.21
+      path:
+        specifier: ~0.12.7
+        version: 0.12.7
+      process:
+        specifier: ~0.11.10
+        version: 0.11.10
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: 18.2.0
+        version: 18.2.0(react@18.2.0)
+      react-hook-form:
+        specifier: 7.56.4
+        version: 7.56.4(react@18.2.0)
+      react-markdown:
+        specifier: ~9.0.1
+        version: 9.0.3(@types/react@18.2.0)(react@18.2.0)
+      yup:
+        specifier: ~1.4.0
+        version: 1.4.0
+    devDependencies:
+      '@babel/plugin-syntax-flow':
+        specifier: ~7.22.5
+        version: 7.22.5(@babel/core@7.28.5)
+      '@babel/preset-typescript':
+        specifier: ~7.22.11
+        version: 7.22.15(@babel/core@7.28.5)
+      '@storybook/addon-actions':
+        specifier: ~7.4.0
+        version: 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/addon-essentials':
+        specifier: ~7.4.0
+        version: 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/cli':
+        specifier: ^7.6.10
+        version: 7.6.20(encoding@0.1.13)
+      '@storybook/react':
+        specifier: ~7.4.0
+        version: 7.4.6(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      '@storybook/react-webpack5':
+        specifier: ~7.4.0
+        version: 7.4.6(@babel/core@7.28.5)(@swc/helpers@0.5.17)(@types/react-dom@18.2.0)(@types/react@18.2.0)(@types/webpack@5.28.5(webpack-cli@5.1.4))(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-cli@5.1.4)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)
+      '@types/js-yaml':
+        specifier: ~4.0.9
+        version: 4.0.9
+      '@types/lodash':
+        specifier: ~4.14.198
+        version: 4.14.202
+      '@types/node':
+        specifier: ^20.10.6
+        version: 20.19.24
+      '@types/react':
+        specifier: 18.2.0
+        version: 18.2.0
+      '@types/react-dom':
+        specifier: 18.2.0
+        version: 18.2.0
+      '@types/vscode-webview':
+        specifier: ~1.57.2
+        version: 1.57.5
+      '@vscode/codicons':
+        specifier: 0.0.33
+        version: 0.0.33
+      copyfiles:
+        specifier: ^2.4.1
+        version: 2.4.1
+      css-loader:
+        specifier: ^5.2.7
+        version: 5.2.7(webpack@5.102.1)
+      sass-loader:
+        specifier: ^13.2.0
+        version: 13.3.3(sass@1.93.3)(webpack@5.102.1)
+      source-map-loader:
+        specifier: ^4.0.1
+        version: 4.0.2(webpack@5.102.1)
+      style-loader:
+        specifier: ^1.3.0
+        version: 1.3.0(webpack@5.102.1)
+      ts-loader:
+        specifier: ^9.5.0
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@5.1.4)
+      webpack-cli:
+        specifier: ~5.1.4
+        version: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.102.1)
+      webpack-dev-server:
+        specifier: ^5.2.1
+        version: 5.2.2(webpack-cli@5.1.4)(webpack@5.102.1)
+
   ../../workspaces/apk/apk-extension:
     devDependencies:
       '@types/glob':
@@ -23,10 +339,10 @@ importers:
         version: 10.0.10
       '@types/node':
         specifier: ^18.11.19
-        version: 18.19.121
+        version: 18.19.130
       '@types/vscode':
         specifier: ^1.63.0
-        version: 1.102.0
+        version: 1.105.0
       '@typescript-eslint/eslint-plugin':
         specifier: ~5.48.2
         version: 5.48.2(@typescript-eslint/parser@5.48.2(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
@@ -101,7 +417,7 @@ importers:
         version: 3.1.0
       vscode-ws-jsonrpc:
         specifier: ^3.4.0
-        version: 3.4.0
+        version: 3.5.0
     devDependencies:
       '@types/node':
         specifier: ^22.15.21
@@ -111,19 +427,19 @@ importers:
         version: 18.2.0
       '@types/vscode':
         specifier: ^1.83.1
-        version: 1.102.0
+        version: 1.105.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.32.1
-        version: 8.33.1(@typescript-eslint/parser@8.33.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)
+        version: 8.33.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ^8.32.1
-        version: 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+        version: 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       copyfiles:
         specifier: ^2.4.1
         version: 2.4.1
       eslint:
         specifier: ^9.26.0
-        version: 9.27.0(jiti@2.5.1)
+        version: 9.27.0(jiti@2.6.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -132,10 +448,10 @@ importers:
     dependencies:
       '@ai-sdk/amazon-bedrock':
         specifier: ^3.0.25
-        version: 3.0.30(zod@4.1.11)
+        version: 3.0.51(zod@4.1.11)
       '@ai-sdk/anthropic':
         specifier: ^2.0.20
-        version: 2.0.23(zod@4.1.11)
+        version: 2.0.41(zod@4.1.11)
       '@types/lodash':
         specifier: ^4.14.200
         version: 4.17.17
@@ -157,12 +473,15 @@ importers:
       '@wso2/syntax-tree':
         specifier: workspace:*
         version: link:../syntax-tree
+      '@wso2/trace-visualizer':
+        specifier: workspace:*
+        version: link:../trace-visualizer
       '@wso2/wso2-platform-core':
         specifier: workspace:*
         version: link:../../wso2-platform/wso2-platform-core
       ai:
         specifier: ^5.0.56
-        version: 5.0.59(zod@4.1.11)
+        version: 5.0.87(zod@4.1.11)
       cors-anywhere:
         specifier: ^0.4.4
         version: 0.4.4
@@ -198,7 +517,10 @@ importers:
         version: 2.1.1
       portfinder:
         specifier: ^1.0.32
-        version: 1.0.37
+        version: 1.0.38
+      protobufjs:
+        specifier: ^7.2.5
+        version: 7.5.4
       source-map-support:
         specifier: ^0.5.21
         version: 0.5.21
@@ -259,22 +581,22 @@ importers:
         version: 10.0.10
       '@types/node':
         specifier: ^18.18.7
-        version: 18.19.121
+        version: 18.19.130
       '@types/tcp-port-used':
         specifier: ^1.0.3
         version: 1.0.4
       '@types/vscode':
         specifier: ^1.83.1
-        version: 1.102.0
+        version: 1.105.0
       '@types/vscode-notebook-renderer':
         specifier: ~1.72.2
-        version: 1.72.3
+        version: 1.72.4
       adm-zip:
         specifier: ^0.5.16
         version: 0.5.16
       axios:
         specifier: ^1.12.0
-        version: 1.12.0
+        version: 1.12.2
       chai:
         specifier: ^4.3.10
         version: 4.5.0
@@ -322,7 +644,7 @@ importers:
         version: 1.0.2
       ts-loader:
         specifier: ^9.5.0
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       tslint:
         specifier: ^6.1.3
         version: 6.1.3(typescript@5.8.3)
@@ -337,13 +659,13 @@ importers:
         version: 5.10.0(mocha@10.8.2)(typescript@5.8.3)
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@6.0.1)
+        version: 5.102.1(webpack-cli@6.0.1)
       webpack-cli:
         specifier: ^6.0.1
-        version: 6.0.1(webpack@5.101.0)
+        version: 6.0.1(webpack@5.102.1)
       webpack-merge-and-include-globally:
         specifier: ^2.3.4
-        version: 2.3.4(webpack@5.101.0)
+        version: 2.3.4(webpack@5.102.1)
       yarn:
         specifier: ^1.22.19
         version: 1.22.22
@@ -379,16 +701,16 @@ importers:
         version: 3.2.0(date-fns@4.1.0)
       dexie:
         specifier: ^4.0.11
-        version: 4.0.11
+        version: 4.2.1
       graphql:
         specifier: ^16.11.0
-        version: 16.11.0
+        version: 16.12.0
       handlebars:
         specifier: ^4.7.8
         version: 4.7.8
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)
+        version: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       joi:
         specifier: ^17.13.3
         version: 17.13.3
@@ -412,7 +734,7 @@ importers:
         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)
+        version: 7.1.14(react@18.2.0)(typescript@5.8.3)
       react-lottie:
         specifier: ^1.2.10
         version: 1.2.10(react@18.2.0)
@@ -434,31 +756,31 @@ importers:
         version: 7.27.2(@babel/core@7.27.7)
       '@rollup/plugin-commonjs':
         specifier: ^28.0.3
-        version: 28.0.6(rollup@4.46.2)
+        version: 28.0.9(rollup@4.52.5)
       '@rollup/plugin-json':
         specifier: ^6.1.0
-        version: 6.1.0(rollup@4.46.2)
+        version: 6.1.0(rollup@4.52.5)
       '@rollup/plugin-node-resolve':
         specifier: ^16.0.1
-        version: 16.0.1(rollup@4.46.2)
+        version: 16.0.3(rollup@4.52.5)
       '@storybook/addon-actions':
         specifier: ^6.5.16
         version: 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-essentials':
         specifier: ^6.5.16
-        version: 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))(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)
+        version: 6.5.16(@babel/core@7.27.7)(@storybook/builder-webpack5@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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.102.1)
       '@storybook/addon-links':
         specifier: ^6.5.16
         version: 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/builder-webpack5':
         specifier: ^6.5.16
-        version: 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)
+        version: 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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':
         specifier: ^6.5.9
-        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)
+        version: 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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: ^6.5.16
-        version: 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)
+        version: 6.5.16(@babel/core@7.27.7)(@storybook/builder-webpack5@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/webpack@5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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)
       '@types/classnames':
         specifier: ^2.2.9
         version: 2.3.4
@@ -488,34 +810,34 @@ importers:
         version: 10.0.0
       '@types/webpack':
         specifier: ^5.28.5
-        version: 5.28.5(webpack-cli@6.0.1)
+        version: 5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
       babel-loader:
         specifier: ^10.0.0
-        version: 10.0.0(@babel/core@7.27.7)(webpack@5.101.0)
+        version: 10.0.0(@babel/core@7.27.7)(webpack@5.102.1)
       copy-webpack-plugin:
         specifier: ^13.0.0
-        version: 13.0.0(webpack@5.101.0)
+        version: 13.0.1(webpack@5.102.1)
       copyfiles:
         specifier: ^2.4.1
         version: 2.4.1
       css-loader:
         specifier: ^7.1.2
-        version: 7.1.2(webpack@5.101.0)
+        version: 7.1.2(webpack@5.102.1)
       express:
         specifier: ^5.1.0
         version: 5.1.0
       file-loader:
         specifier: ^6.2.0
-        version: 6.2.0(webpack@5.101.0)
+        version: 6.2.0(webpack@5.102.1)
       fork-ts-checker-webpack-plugin:
         specifier: ^9.1.0
-        version: 9.1.0(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.1.0(typescript@5.8.3)(webpack@5.102.1)
       glob:
         specifier: ^11.0.2
         version: 11.0.3
       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)
+        version: 3.1.0(@swc/core@1.14.0(@swc/helpers@0.5.17))(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)
@@ -524,16 +846,16 @@ importers:
         version: 6.0.1
       rollup:
         specifier: ^4.41.0
-        version: 4.46.2
+        version: 4.52.5
       rollup-plugin-import-css:
         specifier: ^3.5.8
-        version: 3.5.8(rollup@4.46.2)
+        version: 3.5.8(rollup@4.52.5)
       rollup-plugin-peer-deps-external:
         specifier: ^2.2.4
-        version: 2.2.4(rollup@4.46.2)
+        version: 2.2.4(rollup@4.52.5)
       rollup-plugin-postcss:
         specifier: ^4.0.2
-        version: 4.0.2(postcss@8.5.6)
+        version: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       rollup-plugin-scss:
         specifier: ^4.0.1
         version: 4.0.1
@@ -542,31 +864,31 @@ importers:
         version: 2.0.0
       rollup-plugin-typescript2:
         specifier: ^0.36.0
-        version: 0.36.0(rollup@4.46.2)(typescript@5.8.3)
+        version: 0.36.0(rollup@4.52.5)(typescript@5.8.3)
       sass:
         specifier: ^1.89.0
-        version: 1.90.0
+        version: 1.93.3
       sass-loader:
         specifier: ^16.0.5
-        version: 16.0.5(sass@1.90.0)(webpack@5.101.0)
+        version: 16.0.6(sass@1.93.3)(webpack@5.102.1)
       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)
+        version: 4.0.0(webpack@5.102.1)
       stylelint:
         specifier: ^16.19.1
-        version: 16.23.0(typescript@5.8.3)
+        version: 16.25.0(typescript@5.8.3)
       stylelint-config-standard:
         specifier: ^38.0.0
-        version: 38.0.0(stylelint@16.23.0(typescript@5.8.3))
+        version: 38.0.0(stylelint@16.25.0(typescript@5.8.3))
       svg-url-loader:
         specifier: ^8.0.0
-        version: 8.0.0(webpack@5.101.0)
+        version: 8.0.0(webpack@5.102.1)
       ts-loader:
         specifier: ^9.5.2
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       tslib:
         specifier: ^2.8.1
         version: 2.8.1
@@ -584,13 +906,13 @@ importers:
         version: 5.8.3
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@6.0.1)
+        version: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(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)
+        version: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.102.1)
       webpack-dev-server:
         specifier: ^5.2.1
-        version: 5.2.2(webpack-cli@6.0.1)(webpack@5.101.0)
+        version: 5.2.2(webpack-cli@6.0.1)(webpack@5.102.1)
 
   ../../workspaces/ballerina/ballerina-rpc-client:
     dependencies:
@@ -630,22 +952,22 @@ importers:
         version: 18.2.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.32.1
-        version: 8.33.1(@typescript-eslint/parser@8.33.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)
+        version: 8.33.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ^8.32.1
-        version: 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+        version: 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       copyfiles:
         specifier: ^2.4.1
         version: 2.4.1
       eslint:
         specifier: ^9.27.0
-        version: 9.27.0(jiti@2.5.1)
+        version: 9.27.0(jiti@2.6.1)
       eslint-plugin-react-hooks:
         specifier: ^5.2.0
-        version: 5.2.0(eslint@9.27.0(jiti@2.5.1))
+        version: 5.2.0(eslint@9.27.0(jiti@2.6.1))
       eslint-plugin-react-refresh:
         specifier: ^0.4.20
-        version: 0.4.20(eslint@9.27.0(jiti@2.5.1))
+        version: 0.4.24(eslint@9.27.0(jiti@2.6.1))
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -658,6 +980,9 @@ importers:
       '@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)
+      '@github/markdown-toolbar-element':
+        specifier: ^2.2.3
+        version: 2.2.3
       '@wso2/ballerina-core':
         specifier: workspace:*
         version: link:../ballerina-core
@@ -685,7 +1010,7 @@ importers:
     devDependencies:
       '@storybook/react':
         specifier: ^6.5.16
-        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)
+        version: 6.5.16(@babel/core@7.28.5)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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.102.1))(webpack-hot-middleware@2.26.1)
       '@types/lodash':
         specifier: ~4.17.16
         version: 4.17.17
@@ -715,13 +1040,13 @@ importers:
         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)
       '@headlessui/react':
         specifier: ~2.2.4
-        version: 2.2.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 2.2.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@hookform/resolvers':
         specifier: ~5.0.1
         version: 5.0.1(react-hook-form@7.56.4(react@18.2.0))
       '@tanstack/query-core':
         specifier: ^5.77.1
-        version: 5.83.1
+        version: 5.90.6
       '@tanstack/react-query':
         specifier: 5.77.1
         version: 5.77.1(react@18.2.0)
@@ -814,7 +1139,7 @@ importers:
         version: 10.1.0(@types/react@18.2.0)(react@18.2.0)
       react-syntax-highlighter:
         specifier: ~15.6.1
-        version: 15.6.1(react@18.2.0)
+        version: 15.6.6(react@18.2.0)
       rehype-raw:
         specifier: ^7.0.0
         version: 7.0.0
@@ -854,10 +1179,10 @@ importers:
         version: 5.28.5(webpack-cli@5.1.4)
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.32.1
-        version: 8.33.1(@typescript-eslint/parser@8.33.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)
+        version: 8.33.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ^8.32.1
-        version: 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+        version: 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       buffer:
         specifier: ^6.0.3
         version: 6.0.3
@@ -866,37 +1191,40 @@ importers:
         version: 2.4.1
       css-loader:
         specifier: ^7.1.2
-        version: 7.1.2(webpack@5.101.0)
+        version: 7.1.2(webpack@5.102.1)
       eslint:
         specifier: ^9.26.0
-        version: 9.27.0(jiti@2.5.1)
+        version: 9.27.0(jiti@2.6.1)
       eslint-plugin-react-hooks:
         specifier: ^5.2.0
-        version: 5.2.0(eslint@9.27.0(jiti@2.5.1))
+        version: 5.2.0(eslint@9.27.0(jiti@2.6.1))
       eslint-plugin-react-refresh:
         specifier: ^0.4.20
-        version: 0.4.20(eslint@9.27.0(jiti@2.5.1))
+        version: 0.4.24(eslint@9.27.0(jiti@2.6.1))
       sass-loader:
         specifier: ^16.0.5
-        version: 16.0.5(sass@1.90.0)(webpack@5.101.0)
+        version: 16.0.6(sass@1.93.3)(webpack@5.102.1)
       source-map-loader:
         specifier: ^5.0.0
-        version: 5.0.0(webpack@5.101.0)
+        version: 5.0.0(webpack@5.102.1)
       style-loader:
         specifier: ^4.0.0
-        version: 4.0.0(webpack@5.101.0)
+        version: 4.0.0(webpack@5.102.1)
       ts-loader:
         specifier: ^9.5.2
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@5.1.4)
+        version: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@5.1.4)
+      webpack-cli:
+        specifier: ^5.1.4
+        version: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.102.1)
       webpack-dev-server:
         specifier: ^5.2.1
-        version: 5.2.2(webpack-cli@5.1.4)(webpack@5.101.0)
+        version: 5.2.2(webpack-cli@5.1.4)(webpack@5.102.1)
 
   ../../workspaces/ballerina/bi-diagram:
     dependencies:
@@ -957,7 +1285,7 @@ importers:
         version: 7.27.1(@babel/core@7.27.7)
       '@storybook/react':
         specifier: ^6.3.7
-        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)
+        version: 6.5.16(@babel/core@7.27.7)(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/webpack@5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17)))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))))(webpack-hot-middleware@2.26.1)
       '@testing-library/dom':
         specifier: ~10.4.0
         version: 10.4.1
@@ -996,7 +1324,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: 29.7.0
-        version: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)
+        version: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       jest-environment-jsdom:
         specifier: 29.7.0
         version: 29.7.0
@@ -1008,7 +1336,7 @@ importers:
         version: 19.1.1(react@18.2.0)
       ts-jest:
         specifier: 29.3.4
-        version: 29.3.4(@babel/core@7.27.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.7))(jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0))(typescript@5.8.3)
+        version: 29.3.4(@babel/core@7.27.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.7))(jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)))(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1075,7 +1403,7 @@ importers:
         version: 7.27.1(@babel/core@7.27.7)
       '@storybook/react':
         specifier: ^6.5.16
-        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)
+        version: 6.5.16(@babel/core@7.27.7)(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/webpack@5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17)))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))))(webpack-hot-middleware@2.26.1)
       '@testing-library/dom':
         specifier: ~10.4.0
         version: 10.4.1
@@ -1114,7 +1442,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: 29.7.0
-        version: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)
+        version: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       jest-environment-jsdom:
         specifier: 29.7.0
         version: 29.7.0
@@ -1126,7 +1454,7 @@ importers:
         version: 19.1.1(react@18.2.0)
       ts-jest:
         specifier: 29.3.4
-        version: 29.3.4(@babel/core@7.27.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.7))(jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0))(typescript@5.8.3)
+        version: 29.3.4(@babel/core@7.27.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.7))(jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)))(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1156,7 +1484,7 @@ importers:
         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.1
+        version: 5.90.6
       '@tanstack/react-query':
         specifier: 5.77.1
         version: 5.77.1(react@18.2.0)
@@ -1204,7 +1532,7 @@ importers:
         version: 3.17.5
       zustand:
         specifier: ^5.0.4
-        version: 5.0.7(@types/react@18.2.0)(react@18.2.0)(use-sync-external-store@1.5.0(react@18.2.0))
+        version: 5.0.8(@types/react@18.2.0)(react@18.2.0)(use-sync-external-store@1.6.0(react@18.2.0))
     devDependencies:
       '@types/blueimp-md5':
         specifier: ^2.18.2
@@ -1223,34 +1551,34 @@ importers:
         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)
+        version: 8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.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)
+        version: 8.32.1(eslint@9.27.0(jiti@2.6.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)
+        version: 7.1.2(webpack@5.102.1)
       eslint:
         specifier: ^9.26.0
-        version: 9.27.0(jiti@2.5.1)
+        version: 9.27.0(jiti@2.6.1)
       eslint-plugin-react-hooks:
         specifier: ^5.2.0
-        version: 5.2.0(eslint@9.27.0(jiti@2.5.1))
+        version: 5.2.0(eslint@9.27.0(jiti@2.6.1))
       eslint-plugin-react-refresh:
         specifier: ^0.4.4
-        version: 0.4.20(eslint@9.27.0(jiti@2.5.1))
+        version: 0.4.24(eslint@9.27.0(jiti@2.6.1))
       file-loader:
         specifier: ^6.2.0
-        version: 6.2.0(webpack@5.101.0)
+        version: 6.2.0(webpack@5.102.1)
       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)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       tslib:
         specifier: ^2.8.1
         version: 2.8.1
@@ -1274,10 +1602,10 @@ importers:
         version: 2.4.1
       graphiql:
         specifier: 3.7.0
-        version: 3.7.0(@codemirror/language@6.11.2)(@types/node@22.15.35)(@types/react-dom@18.2.0)(@types/react@18.2.0)(graphql@16.11.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 3.7.0(@codemirror/language@6.11.3)(@types/node@22.15.35)(@types/react-dom@18.2.0)(@types/react@18.2.0)(graphql@16.12.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       graphiql-explorer:
         specifier: ^0.9.0
-        version: 0.9.0(graphql@16.11.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 0.9.0(graphql@16.12.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: 18.2.0
         version: 18.2.0
@@ -1293,19 +1621,19 @@ importers:
         version: 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-essentials':
         specifier: ^6.5.9
-        version: 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@4.10.0))(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)(webpack@5.101.0)
+        version: 6.5.16(@babel/core@7.27.7)(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)(webpack@5.102.1)
       '@storybook/addon-links':
         specifier: ^6.5.9
         version: 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/builder-webpack5':
         specifier: ^6.5.9
-        version: 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)
+        version: 6.5.16(eslint@9.27.0(jiti@2.6.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':
         specifier: ^6.5.9
-        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@4.10.0)
+        version: 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       '@storybook/react':
         specifier: ^6.5.9
-        version: 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@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))(@types/webpack@5.28.5(webpack-cli@4.10.0))(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@4.10.0)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)
+        version: 6.5.16(@babel/core@7.27.7)(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.6.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.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0))(@types/webpack@5.28.5(webpack-cli@4.10.0))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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@4.10.0)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)
       '@types/react':
         specifier: 18.2.0
         version: 18.2.0
@@ -1314,34 +1642,34 @@ importers:
         version: 18.2.0
       babel-loader:
         specifier: ^10.0.0
-        version: 10.0.0(@babel/core@7.27.7)(webpack@5.101.0)
+        version: 10.0.0(@babel/core@7.27.7)(webpack@5.102.1)
       css-loader:
         specifier: ^7.1.2
-        version: 7.1.2(webpack@5.101.0)
+        version: 7.1.2(webpack@5.102.1)
       graphql:
         specifier: ^16.11.0
-        version: 16.11.0
+        version: 16.12.0
       mini-css-extract-plugin:
         specifier: ^2.9.2
-        version: 2.9.3(webpack@5.101.0)
+        version: 2.9.4(webpack@5.102.1)
       source-map-loader:
         specifier: ^5.0.0
-        version: 5.0.0(webpack@5.101.0)
+        version: 5.0.0(webpack@5.102.1)
       style-loader:
         specifier: ^4.0.0
-        version: 4.0.0(webpack@5.101.0)
+        version: 4.0.0(webpack@5.102.1)
       ts-loader:
         specifier: ^9.5.2
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@4.10.0)
+        version: 5.102.1(webpack-cli@4.10.0)
       webpack-cli:
         specifier: ^4.10.0
-        version: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.101.0)
+        version: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.102.1)
 
   ../../workspaces/ballerina/graphql-design-diagram:
     dependencies:
@@ -1472,7 +1800,7 @@ importers:
         version: 5.2.0(eslint@8.57.1)
       eslint-plugin-react-refresh:
         specifier: ^0.4.20
-        version: 0.4.20(eslint@8.57.1)
+        version: 0.4.24(eslint@8.57.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1520,7 +1848,7 @@ importers:
         version: 0.8.5
       file-loader:
         specifier: ^6.2.0
-        version: 6.2.0(webpack@5.101.0)
+        version: 6.2.0(webpack@5.102.1)
       html-to-image:
         specifier: ^1.10.8
         version: 1.11.11
@@ -1563,31 +1891,31 @@ importers:
         version: link:../../common-libs/ui-toolkit
       babel-loader:
         specifier: ^10.0.0
-        version: 10.0.0(@babel/core@7.27.7)(webpack@5.101.0)
+        version: 10.0.0(@babel/core@7.27.7)(webpack@5.102.1)
       copyfiles:
         specifier: ^2.4.1
         version: 2.4.1
       css-loader:
         specifier: ^7.1.2
-        version: 7.1.2(webpack@5.101.0)
+        version: 7.1.2(webpack@5.102.1)
       source-map-loader:
         specifier: ^5.0.0
-        version: 5.0.0(webpack@5.101.0)
+        version: 5.0.0(webpack@5.102.1)
       style-loader:
         specifier: ^4.0.0
-        version: 4.0.0(webpack@5.101.0)
+        version: 4.0.0(webpack@5.102.1)
       ts-loader:
         specifier: ^9.4.1
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@6.0.1)
+        version: 5.102.1(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)
+        version: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.102.1)
       webpack-dev-server:
         specifier: ^5.2.1
-        version: 5.2.2(webpack-cli@6.0.1)(webpack@5.101.0)
+        version: 5.2.2(webpack-cli@6.0.1)(webpack@5.102.1)
 
   ../../workspaces/ballerina/record-creator:
     dependencies:
@@ -1644,7 +1972,7 @@ importers:
         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)
+        version: 7.1.14(react@18.2.0)(typescript@5.8.3)
       react-lottie:
         specifier: ~1.2.4
         version: 1.2.10(react@18.2.0)
@@ -1666,10 +1994,10 @@ importers:
         version: 2.4.1
       eslint:
         specifier: ~9.26.0
-        version: 9.26.0(jiti@2.5.1)
+        version: 9.26.0(jiti@2.6.1)
       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)
+        version: 3.1.0(babel-core@7.0.0-bridge.0(@babel/core@7.28.5))(babel-runtime@6.26.0)(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1724,7 +2052,7 @@ importers:
     devDependencies:
       '@storybook/react':
         specifier: ^6.3.7
-        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)
+        version: 6.5.16(@babel/core@7.28.5)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.26.0(jiti@2.6.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.102.1))(webpack-hot-middleware@2.26.1)
       '@types/dagre':
         specifier: ~0.7.52
         version: 0.7.53
@@ -1739,19 +2067,19 @@ importers:
         version: 18.2.0
       '@typescript-eslint/eslint-plugin':
         specifier: ~8.32.1
-        version: 8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)
+        version: 8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)
       copyfiles:
         specifier: ^2.4.1
         version: 2.4.1
       eslint:
         specifier: ~9.26.0
-        version: 9.26.0(jiti@2.5.1)
+        version: 9.26.0(jiti@2.6.1)
       eslint-plugin-react-hooks:
         specifier: ~5.2.0
-        version: 5.2.0(eslint@9.26.0(jiti@2.5.1))
+        version: 5.2.0(eslint@9.26.0(jiti@2.6.1))
       eslint-plugin-unused-imports:
         specifier: ~4.1.4
-        version: 4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.5.1))
+        version: 4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.6.1))
       prettier:
         specifier: ~3.5.3
         version: 3.5.3
@@ -1766,13 +2094,13 @@ importers:
         version: 11.13.5
       '@emotion/react':
         specifier: ^11.9.3
-        version: 11.14.0(@types/react@17.0.87)(react@19.1.0)
+        version: 11.14.0(@types/react@17.0.89)(react@19.1.0)
       '@emotion/styled':
         specifier: ^11.10.5
-        version: 11.14.1(@emotion/react@11.14.0(@types/react@17.0.87)(react@19.1.0))(@types/react@17.0.87)(react@19.1.0)
+        version: 11.14.1(@emotion/react@11.14.0(@types/react@17.0.89)(react@19.1.0))(@types/react@17.0.89)(react@19.1.0)
       '@tanstack/query-core':
         specifier: ^4.0.0-beta.1
-        version: 4.40.0
+        version: 4.41.0
       '@tanstack/react-query':
         specifier: 4.0.10
         version: 4.0.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -1808,7 +2136,7 @@ importers:
         version: 4.12.0(react@19.1.0)
       react-intl:
         specifier: ^7.1.11
-        version: 7.1.11(react@19.1.0)(typescript@4.9.5)
+        version: 7.1.14(react@19.1.0)(typescript@4.9.5)
       react-lottie:
         specifier: ^1.2.3
         version: 1.2.10(react@19.1.0)
@@ -1824,7 +2152,7 @@ importers:
     devDependencies:
       '@storybook/react':
         specifier: ^6.5.9
-        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)
+        version: 6.5.16(@babel/core@7.28.5)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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.102.1))(webpack-hot-middleware@2.26.1)
       '@types/classnames':
         specifier: ^2.2.9
         version: 2.3.4
@@ -1839,7 +2167,7 @@ importers:
         version: 4.0.9
       '@types/react':
         specifier: ^17.0.37
-        version: 17.0.87
+        version: 17.0.89
       '@types/react-dom':
         specifier: 17.0.14
         version: 17.0.14
@@ -1875,7 +2203,7 @@ importers:
         version: 9.1.7
       lint-staged:
         specifier: ^16.0.0
-        version: 16.1.4
+        version: 16.2.6
       prettier:
         specifier: ^3.5.3
         version: 3.5.3
@@ -1889,6 +2217,70 @@ importers:
         specifier: 5.8.3
         version: 5.8.3
 
+  ../../workspaces/ballerina/trace-visualizer:
+    dependencies:
+      '@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)
+      '@vscode/webview-ui-toolkit':
+        specifier: ^1.4.0
+        version: 1.4.0(react@18.2.0)
+      '@wso2/ui-toolkit':
+        specifier: workspace:*
+        version: link:../../common-libs/ui-toolkit
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: 18.2.0
+        version: 18.2.0(react@18.2.0)
+    devDependencies:
+      '@types/react':
+        specifier: 18.2.0
+        version: 18.2.0
+      '@types/react-dom':
+        specifier: 18.2.0
+        version: 18.2.0
+      '@types/webpack':
+        specifier: ^5.28.5
+        version: 5.28.5(webpack-cli@5.1.4)
+      buffer:
+        specifier: ^6.0.3
+        version: 6.0.3
+      copyfiles:
+        specifier: ^2.4.1
+        version: 2.4.1
+      css-loader:
+        specifier: ^7.1.2
+        version: 7.1.2(webpack@5.102.1)
+      sass-loader:
+        specifier: ^16.0.5
+        version: 16.0.6(sass@1.93.3)(webpack@5.102.1)
+      source-map-loader:
+        specifier: ^5.0.0
+        version: 5.0.0(webpack@5.102.1)
+      style-loader:
+        specifier: ^4.0.0
+        version: 4.0.0(webpack@5.102.1)
+      ts-loader:
+        specifier: ^9.5.2
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@5.1.4)
+      webpack-cli:
+        specifier: ^5.1.4
+        version: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.102.1)
+      webpack-dev-server:
+        specifier: ^5.2.1
+        version: 5.2.2(webpack-cli@5.1.4)(webpack@5.102.1)
+
   ../../workspaces/ballerina/type-diagram:
     dependencies:
       '@emotion/css':
@@ -1932,7 +2324,7 @@ importers:
         version: 0.8.5
       file-loader:
         specifier: ^6.2.0
-        version: 6.2.0(webpack@5.101.0)
+        version: 6.2.0(webpack@5.102.1)
       html-to-image:
         specifier: ^1.11.11
         version: 1.11.11
@@ -1981,31 +2373,31 @@ importers:
         version: link:../../common-libs/ui-toolkit
       babel-loader:
         specifier: ^10.0.0
-        version: 10.0.0(@babel/core@7.27.7)(webpack@5.101.0)
+        version: 10.0.0(@babel/core@7.27.7)(webpack@5.102.1)
       copyfiles:
         specifier: ^2.4.1
         version: 2.4.1
       css-loader:
         specifier: ^7.1.2
-        version: 7.1.2(webpack@5.101.0)
+        version: 7.1.2(webpack@5.102.1)
       source-map-loader:
         specifier: ^5.0.0
-        version: 5.0.0(webpack@5.101.0)
+        version: 5.0.0(webpack@5.102.1)
       style-loader:
         specifier: ^4.0.0
-        version: 4.0.0(webpack@5.101.0)
+        version: 4.0.0(webpack@5.102.1)
       ts-loader:
         specifier: ^9.4.1
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@6.0.1)
+        version: 5.102.1(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)
+        version: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.102.1)
       webpack-dev-server:
         specifier: ^5.2.1
-        version: 5.2.2(webpack-cli@6.0.1)(webpack@5.101.0)
+        version: 5.2.2(webpack-cli@6.0.1)(webpack@5.102.1)
 
   ../../workspaces/ballerina/type-editor:
     dependencies:
@@ -2059,7 +2451,7 @@ importers:
         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)
+        version: 7.1.14(react@18.2.0)(typescript@5.8.3)
       react-lottie:
         specifier: ^1.2.10
         version: 1.2.10(react@18.2.0)
@@ -2087,10 +2479,10 @@ importers:
         version: 2.4.1
       eslint:
         specifier: ~9.26.0
-        version: 9.26.0(jiti@2.5.1)
+        version: 9.26.0(jiti@2.6.1)
       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)
+        version: 3.1.0(babel-core@7.0.0-bridge.0(@babel/core@7.28.5))(babel-runtime@6.26.0)(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -2118,7 +2510,7 @@ importers:
         version: 22.15.18
       '@types/vscode':
         specifier: ^1.84.0
-        version: 1.102.0
+        version: 1.105.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^6.21.0
         version: 6.21.0(@typescript-eslint/parser@8.33.1(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
@@ -2136,7 +2528,7 @@ importers:
         version: link:../../common-libs/playwright-vscode-tester
       copy-webpack-plugin:
         specifier: ^13.0.0
-        version: 13.0.0(webpack@5.101.0)
+        version: 13.0.1(webpack@5.102.1)
       copyfiles:
         specifier: ^2.4.1
         version: 2.4.1
@@ -2148,22 +2540,22 @@ importers:
         version: 11.0.3
       mocha:
         specifier: ^11.2.2
-        version: 11.7.1
+        version: 11.7.4
       source-map-support:
         specifier: ^0.5.21
         version: 0.5.21
       ts-loader:
         specifier: ^9.5.2
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@6.0.1)
+        version: 5.102.1(webpack-cli@6.0.1)
       webpack-cli:
         specifier: ^6.0.1
-        version: 6.0.1(webpack@5.101.0)
+        version: 6.0.1(webpack@5.102.1)
       webpack-permissions-plugin:
         specifier: ^1.0.9
         version: 1.0.10
@@ -2203,7 +2595,7 @@ importers:
         version: 1.0.0(tslib@2.8.1)
       '@vscode/iconv-lite-umd':
         specifier: ^0.7.0
-        version: 0.7.0
+        version: 0.7.1
       '@vscode/webview-ui-toolkit':
         specifier: ^1.2.0
         version: 1.4.0(react@19.1.0)
@@ -2248,7 +2640,7 @@ importers:
         version: 2.8.1
       zustand:
         specifier: ^5.0.5
-        version: 5.0.7(@types/react@18.2.0)(react@19.1.0)(use-sync-external-store@1.5.0(react@19.1.0))
+        version: 5.0.8(@types/react@18.2.0)(react@19.1.0)(use-sync-external-store@1.6.0(react@19.1.0))
     devDependencies:
       '@biomejs/biome':
         specifier: ^1.8.3
@@ -2270,7 +2662,7 @@ importers:
         version: 22.15.35
       '@types/vscode':
         specifier: ^1.100.0
-        version: 1.102.0
+        version: 1.105.0
       '@types/which':
         specifier: ^3.0.4
         version: 3.0.4
@@ -2282,10 +2674,10 @@ importers:
         version: link:../../common-libs/playwright-vscode-tester
       axios:
         specifier: ^1.12.0
-        version: 1.12.0
+        version: 1.12.2
       copy-webpack-plugin:
         specifier: ^13.0.0
-        version: 13.0.0(webpack@5.101.0)
+        version: 13.0.1(webpack@5.102.1)
       copyfiles:
         specifier: ^2.4.1
         version: 2.4.1
@@ -2294,25 +2686,25 @@ importers:
         version: 6.0.0
       mocha:
         specifier: ^11.5.0
-        version: 11.7.1
+        version: 11.7.4
       terser-webpack-plugin:
         specifier: ^5.3.10
-        version: 5.3.14(webpack@5.101.0)
+        version: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       ts-loader:
         specifier: ~9.5.2
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
       vscode-extension-tester:
         specifier: ^8.14.1
-        version: 8.14.1(mocha@11.7.1)(typescript@5.8.3)
+        version: 8.14.1(mocha@11.7.4)(typescript@5.8.3)
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@6.0.1)
+        version: 5.102.1(webpack-cli@6.0.1)
       webpack-cli:
         specifier: ^6.0.1
-        version: 6.0.1(webpack@5.101.0)
+        version: 6.0.1(webpack@5.102.1)
       webpack-permissions-plugin:
         specifier: ^1.0.9
         version: 1.0.10
@@ -2327,10 +2719,10 @@ importers:
         version: 0.8.2
       '@headlessui/react':
         specifier: ^2.2.4
-        version: 2.2.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 2.2.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@hookform/resolvers':
         specifier: ^5.0.1
-        version: 5.0.1(react-hook-form@7.56.4(react@18.2.0))
+        version: 5.2.2(react-hook-form@7.56.4(react@18.2.0))
       '@tanstack/react-query':
         specifier: ~4.28.0
         version: 4.28.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -2384,7 +2776,7 @@ importers:
         version: 4.0.1
       swagger-ui-react:
         specifier: ^5.22.0
-        version: 5.27.1(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 5.30.1(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       timezone-support:
         specifier: ^3.1.0
         version: 3.1.0
@@ -2427,10 +2819,10 @@ importers:
         version: 2.4.1
       css-loader:
         specifier: ^7.1.2
-        version: 7.1.2(webpack@5.101.0)
+        version: 7.1.2(webpack@5.102.1)
       file-loader:
         specifier: ^6.2.0
-        version: 6.2.0(webpack@5.101.0)
+        version: 6.2.0(webpack@5.102.1)
       path:
         specifier: ^0.12.7
         version: 0.12.7
@@ -2439,34 +2831,34 @@ importers:
         version: 8.5.6
       postcss-loader:
         specifier: ^8.1.1
-        version: 8.1.1(postcss@8.5.6)(typescript@5.8.3)(webpack@5.101.0)
+        version: 8.2.0(postcss@8.5.6)(typescript@5.8.3)(webpack@5.102.1)
       sass-loader:
         specifier: ^16.0.5
-        version: 16.0.5(sass@1.90.0)(webpack@5.101.0)
+        version: 16.0.6(sass@1.93.3)(webpack@5.102.1)
       source-map-loader:
         specifier: ^5.0.0
-        version: 5.0.0(webpack@5.101.0)
+        version: 5.0.0(webpack@5.102.1)
       style-loader:
         specifier: ^4.0.0
-        version: 4.0.0(webpack@5.101.0)
+        version: 4.0.0(webpack@5.102.1)
       tailwindcss:
         specifier: ^3.4.3
-        version: 3.4.17
+        version: 3.4.18(yaml@2.8.1)
       ts-loader:
         specifier: ^9.5.2
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@6.0.1)
+        version: 5.102.1(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)
+        version: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.102.1)
       webpack-dev-server:
         specifier: ^5.2.1
-        version: 5.2.2(webpack-cli@6.0.1)(webpack@5.101.0)
+        version: 5.2.2(webpack-cli@6.0.1)(webpack@5.102.1)
 
   ../../workspaces/common-libs/font-wso2-vscode:
     devDependencies:
@@ -2496,7 +2888,7 @@ importers:
         version: 6.1.1
       fs-extra:
         specifier: ~11.3.0
-        version: 11.3.1
+        version: 11.3.2
       got:
         specifier: 14.4.7
         version: 14.4.7
@@ -2524,10 +2916,10 @@ importers:
         version: 0.10.11
       '@typescript-eslint/eslint-plugin':
         specifier: ~8.33.0
-        version: 8.33.1(@typescript-eslint/parser@8.33.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)
+        version: 8.33.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ~8.33.0
-        version: 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+        version: 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -2576,7 +2968,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.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)
+        version: 7.4.6(@babel/core@7.28.5)(@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-hot-middleware@2.26.1)
       '@types/react':
         specifier: 18.2.0
         version: 18.2.0
@@ -2603,7 +2995,7 @@ importers:
         version: 4.6.2(eslint@8.57.1)
       eslint-plugin-react-refresh:
         specifier: ^0.4.4
-        version: 0.4.20(eslint@8.57.1)
+        version: 0.4.24(eslint@8.57.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -2664,19 +3056,19 @@ importers:
     devDependencies:
       '@storybook/addon-docs':
         specifier: ^9.0.12
-        version: 9.1.1(@types/react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+        version: 9.1.16(@types/react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       '@storybook/addon-essentials':
         specifier: ^8.6.14
-        version: 8.6.14(@types/react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+        version: 8.6.14(@types/react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       '@storybook/cli':
         specifier: ^9.0.12
-        version: 9.1.1(@babel/preset-env@7.27.2(@babel/core@7.27.7))(@testing-library/dom@10.4.1)(prettier@3.5.3)
+        version: 9.1.16(@babel/preset-env@7.27.2(@babel/core@7.28.5))(@testing-library/dom@10.4.1)(prettier@3.5.3)
       '@storybook/react':
         specifier: ^9.0.12
-        version: 9.1.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
+        version: 9.1.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
       '@storybook/react-vite':
         specifier: ^9.0.12
-        version: 9.1.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(rollup@4.46.2)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
+        version: 9.1.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(rollup@4.52.5)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
       '@types/lodash':
         specifier: ~4.17.16
         version: 4.17.17
@@ -2709,7 +3101,7 @@ importers:
         version: 5.2.0(eslint@8.57.1)
       eslint-plugin-storybook:
         specifier: ^9.0.12
-        version: 9.1.1(eslint@8.57.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
+        version: 9.1.16(eslint@8.57.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
       gh-pages:
         specifier: ^6.3.0
         version: 6.3.0
@@ -2724,11 +3116,69 @@ importers:
         version: 6.0.0(react@19.1.0)
       storybook:
         specifier: ^9.0.12
-        version: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+        version: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
 
+  ../../workspaces/mcp-inspector/mcp-inspector-extension:
+    dependencies:
+      '@modelcontextprotocol/inspector':
+        specifier: ^0.17.2
+        version: 0.17.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.18)(@types/react-dom@18.2.0)(@types/react@18.2.0)(typescript@5.8.3)
+    devDependencies:
+      '@types/mocha':
+        specifier: ^10.0.3
+        version: 10.0.10
+      '@types/node':
+        specifier: 22.15.18
+        version: 22.15.18
+      '@types/vscode':
+        specifier: ^1.84.0
+        version: 1.105.0
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^6.21.0
+        version: 6.21.0(@typescript-eslint/parser@8.33.1(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/parser':
+        specifier: ^8.32.1
+        version: 8.33.1(eslint@8.57.1)(typescript@5.8.3)
+      '@vscode/test-electron':
+        specifier: ^2.5.2
+        version: 2.5.2
+      '@vscode/vsce':
+        specifier: ^3.4.0
+        version: 3.4.2
+      copy-webpack-plugin:
+        specifier: ^13.0.0
+        version: 13.0.1(webpack@5.102.1)
+      copyfiles:
+        specifier: ^2.4.1
+        version: 2.4.1
+      eslint:
+        specifier: ^8.57.1
+        version: 8.57.1
+      mocha:
+        specifier: ^11.2.2
+        version: 11.7.4
+      open:
+        specifier: 10.2.0
+        version: 10.2.0
+      serve-handler:
+        specifier: 6.1.6
+        version: 6.1.6
+      ts-loader:
+        specifier: ^9.5.2
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@5.1.4)
+      webpack-cli:
+        specifier: ^5.1.4
+        version: 5.1.4(webpack@5.102.1)
+
   ../../workspaces/mi/mi-component-diagram:
     dependencies:
       '@emotion/react':
@@ -2773,7 +3223,7 @@ importers:
     devDependencies:
       '@storybook/react':
         specifier: ^6.3.7
-        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)
+        version: 6.5.16(@babel/core@7.28.5)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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.102.1))(webpack-hot-middleware@2.26.1)
       '@types/dagre':
         specifier: ~0.7.52
         version: 0.7.53
@@ -2816,13 +3266,13 @@ importers:
         version: 9.27.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.32.1
-        version: 8.33.1(@typescript-eslint/parser@8.33.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)
+        version: 8.33.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ^8.32.1
-        version: 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+        version: 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       eslint:
         specifier: ^9.27.0
-        version: 9.27.0(jiti@2.5.1)
+        version: 9.27.0(jiti@2.6.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -2852,7 +3302,7 @@ importers:
         version: 6.7.4(lodash@4.17.21)(react@18.2.0)(resize-observer-polyfill@1.5.1)
       '@tanstack/query-core':
         specifier: ^5.76.2
-        version: 5.83.1
+        version: 5.90.6
       '@tanstack/react-query':
         specifier: 5.76.2
         version: 5.76.2(react@18.2.0)
@@ -2906,7 +3356,7 @@ importers:
         version: 3.17.5
       zustand:
         specifier: ^5.0.5
-        version: 5.0.7(@types/react@18.2.0)(react@18.2.0)(use-sync-external-store@1.5.0(react@18.2.0))
+        version: 5.0.8(@types/react@18.2.0)(react@18.2.0)(use-sync-external-store@1.6.0(react@18.2.0))
     devDependencies:
       '@types/blueimp-md5':
         specifier: ^2.18.2
@@ -2925,34 +3375,34 @@ importers:
         version: 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)
+        version: 8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.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)
+        version: 8.32.1(eslint@9.27.0(jiti@2.6.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)
+        version: 7.1.2(webpack@5.102.1)
       eslint:
         specifier: ^9.27.0
-        version: 9.27.0(jiti@2.5.1)
+        version: 9.27.0(jiti@2.6.1)
       eslint-plugin-react-hooks:
         specifier: ^5.2.0
-        version: 5.2.0(eslint@9.27.0(jiti@2.5.1))
+        version: 5.2.0(eslint@9.27.0(jiti@2.6.1))
       eslint-plugin-react-refresh:
         specifier: ^0.4.20
-        version: 0.4.20(eslint@9.27.0(jiti@2.5.1))
+        version: 0.4.24(eslint@9.27.0(jiti@2.6.1))
       file-loader:
         specifier: ^6.2.0
-        version: 6.2.0(webpack@5.101.0)
+        version: 6.2.0(webpack@5.102.1)
       react-hook-form:
         specifier: 7.56.4
         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)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       ts-morph:
         specifier: ^22.0.0
         version: 22.0.0
@@ -3038,10 +3488,10 @@ importers:
         version: 2.4.1
       eslint-plugin-react-hooks:
         specifier: ~5.2.0
-        version: 5.2.0(eslint@9.27.0(jiti@2.5.1))
+        version: 5.2.0(eslint@9.27.0(jiti@2.6.1))
       eslint-plugin-unused-imports:
         specifier: ~4.1.4
-        version: 4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.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))(eslint@9.27.0(jiti@2.5.1))
+        version: 4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))
       html-to-image:
         specifier: 1.11.11
         version: 1.11.11
@@ -3077,7 +3527,7 @@ importers:
         version: 1.21.3(@types/react@18.2.0)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-json-view-lite:
         specifier: latest
-        version: 2.4.2(react@18.2.0)
+        version: 2.5.0(react@18.2.0)
       react-markdown:
         specifier: ~10.1.0
         version: 10.1.0(@types/react@18.2.0)(react@18.2.0)
@@ -3117,7 +3567,7 @@ importers:
         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)
       '@storybook/react-webpack5':
         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)
+        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.3)))(@swc/core@1.14.0(@swc/helpers@0.5.17))(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)
       '@storybook/test':
         specifier: ^8.6.14
         version: 8.6.14(storybook@8.6.14(prettier@3.5.3))
@@ -3150,7 +3600,7 @@ importers:
         version: 0.4.14
       '@typescript-eslint/eslint-plugin':
         specifier: ~8.32.1
-        version: 8.32.1(@typescript-eslint/parser@8.33.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)
+        version: 8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       babel-jest:
         specifier: 29.7.0
         version: 29.7.0(@babel/core@7.27.7)
@@ -3162,7 +3612,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: 29.7.0
-        version: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)
+        version: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       jest-environment-jsdom:
         specifier: 29.7.0
         version: 29.7.0
@@ -3177,7 +3627,7 @@ importers:
         version: 8.6.14(prettier@3.5.3)
       ts-jest:
         specifier: 29.3.4
-        version: 29.3.4(@babel/core@7.27.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.7))(jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0))(typescript@5.8.3)
+        version: 29.3.4(@babel/core@7.27.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.7))(jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)))(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -3204,7 +3654,7 @@ importers:
         version: 7.27.7
       '@babel/plugin-transform-typescript':
         specifier: ^7.27.1
-        version: 7.28.0(@babel/core@7.27.7)
+        version: 7.28.5(@babel/core@7.27.7)
       '@iarna/toml':
         specifier: ^2.2.5
         version: 2.2.5
@@ -3252,7 +3702,7 @@ importers:
         version: 0.5.16
       axios:
         specifier: ~1.12.0
-        version: 1.12.0
+        version: 1.12.2
       copyfiles:
         specifier: ^2.4.1
         version: 2.4.1
@@ -3270,7 +3720,7 @@ importers:
         version: 1.4.11
       fs-extra:
         specifier: ~11.3.0
-        version: 11.3.1
+        version: 11.3.2
       json-schema:
         specifier: 0.4.0
         version: 0.4.0
@@ -3291,16 +3741,16 @@ importers:
         version: 3.3.2
       node-loader:
         specifier: ~2.1.0
-        version: 2.1.0(webpack@5.101.0)
+        version: 2.1.0(webpack@5.102.1)
       portfinder:
         specifier: ^1.0.37
-        version: 1.0.37
+        version: 1.0.38
       recast:
         specifier: ^0.23.11
         version: 0.23.11
       tmp:
         specifier: ~0.2.4
-        version: 0.2.4
+        version: 0.2.5
       to-json-schema:
         specifier: 0.2.5
         version: 0.2.5
@@ -3324,7 +3774,7 @@ importers:
         version: 1.51.0
       vscode-extension-tester:
         specifier: ~8.14.1
-        version: 8.14.1(mocha@11.7.1)(typescript@5.8.3)
+        version: 8.14.1(mocha@11.7.4)(typescript@5.8.3)
       vscode-languageclient:
         specifier: ^9.0.1
         version: 9.0.1
@@ -3355,13 +3805,13 @@ importers:
         version: 22.15.21
       '@types/vscode':
         specifier: ^1.100.0
-        version: 1.102.0
+        version: 1.105.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.32.1
-        version: 8.33.1(@typescript-eslint/parser@8.33.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)
+        version: 8.33.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ^8.32.1
-        version: 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+        version: 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@vscode/test-electron':
         specifier: ^2.5.2
         version: 2.5.2
@@ -3379,13 +3829,13 @@ importers:
         version: 1.0.1
       eslint:
         specifier: ^9.27.0
-        version: 9.27.0(jiti@2.5.1)
+        version: 9.27.0(jiti@2.6.1)
       glob:
         specifier: ^11.0.2
         version: 11.0.3
       mocha:
         specifier: ^11.4.0
-        version: 11.7.1
+        version: 11.7.4
       playwright-core:
         specifier: ~1.55.1
         version: 1.55.1
@@ -3394,7 +3844,7 @@ importers:
         version: 6.0.1
       ts-loader:
         specifier: ^9.5.2
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       ts-morph:
         specifier: ^26.0.0
         version: 26.0.0
@@ -3403,10 +3853,10 @@ importers:
         version: 5.8.3
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@4.10.0)
+        version: 5.102.1(webpack-cli@4.10.0)
       webpack-cli:
         specifier: ^4.10.0
-        version: 4.10.0(webpack@5.101.0)
+        version: 4.10.0(webpack@5.102.1)
       yaml:
         specifier: ~2.8.0
         version: 2.8.1
@@ -3443,13 +3893,13 @@ importers:
         version: 18.2.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.32.1
-        version: 8.33.1(@typescript-eslint/parser@8.33.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)
+        version: 8.33.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ^8.32.1
-        version: 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+        version: 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       eslint:
         specifier: ^9.27.0
-        version: 9.27.0(jiti@2.5.1)
+        version: 9.27.0(jiti@2.6.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -3485,10 +3935,10 @@ importers:
         version: 1.55.1
       '@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.11.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.102.1)
       '@tanstack/query-core':
         specifier: ^5.76.0
-        version: 5.83.1
+        version: 5.90.6
       '@tanstack/react-query':
         specifier: 5.76.1
         version: 5.76.1(react@18.2.0)
@@ -3512,7 +3962,7 @@ importers:
         version: 1.57.5
       '@uiw/react-codemirror':
         specifier: ~4.23.12
-        version: 4.23.14(@codemirror/lint@6.8.5)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.38.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 4.23.14(@codemirror/lint@6.8.5)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.38.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@vscode/webview-ui-toolkit':
         specifier: ^1.4.0
         version: 1.4.0(react@18.2.0)
@@ -3587,7 +4037,7 @@ importers:
         version: 0.1.92(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-syntax-highlighter:
         specifier: ~15.6.1
-        version: 15.6.1(react@18.2.0)
+        version: 15.6.6(react@18.2.0)
       swagger-ui-react:
         specifier: 5.21.0
         version: 5.21.0(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3606,25 +4056,25 @@ importers:
     devDependencies:
       '@babel/plugin-syntax-flow':
         specifier: ~7.27.1
-        version: 7.27.1(@babel/core@7.27.7)
+        version: 7.27.1(@babel/core@7.28.5)
       '@babel/preset-typescript':
         specifier: ~7.27.1
-        version: 7.27.1(@babel/core@7.27.7)
+        version: 7.27.1(@babel/core@7.28.5)
       '@headlessui/react':
         specifier: ~2.2.4
-        version: 2.2.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 2.2.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-actions':
         specifier: ~8.6.14
-        version: 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+        version: 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       '@storybook/addon-essentials':
         specifier: ~8.6.14
-        version: 8.6.14(@types/react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+        version: 8.6.14(@types/react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       '@storybook/addon-links':
         specifier: ~8.6.14
-        version: 8.6.14(react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+        version: 8.6.14(react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       '@storybook/react-webpack5':
         specifier: ~8.6.14
-        version: 8.6.14(@storybook/test@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@5.1.4)
+        version: 8.6.14(@storybook/test@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@5.1.4)
       '@types/lodash':
         specifier: ~4.17.17
         version: 4.17.17
@@ -3645,19 +4095,19 @@ importers:
         version: 2.4.1
       css-loader:
         specifier: ^7.1.2
-        version: 7.1.2(webpack@5.101.0)
+        version: 7.1.2(webpack@5.102.1)
       sass-loader:
         specifier: ^16.0.5
-        version: 16.0.5(sass@1.90.0)(webpack@5.101.0)
+        version: 16.0.6(sass@1.93.3)(webpack@5.102.1)
       source-map-loader:
         specifier: ^5.0.0
-        version: 5.0.0(webpack@5.101.0)
+        version: 5.0.0(webpack@5.102.1)
       style-loader:
         specifier: ^4.0.0
-        version: 4.0.0(webpack@5.101.0)
+        version: 4.0.0(webpack@5.102.1)
       ts-loader:
         specifier: ^9.5.2
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -3666,13 +4116,13 @@ importers:
         version: 3.17.5
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@5.1.4)
+        version: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@5.1.4)
       webpack-cli:
         specifier: ~5.1.4
-        version: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.101.0)
+        version: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.102.1)
       webpack-dev-server:
         specifier: ^5.2.1
-        version: 5.2.2(webpack-cli@5.1.4)(webpack@5.101.0)
+        version: 5.2.2(webpack-cli@5.1.4)(webpack@5.102.1)
       yaml:
         specifier: ~2.8.0
         version: 2.8.1
@@ -3684,7 +4134,7 @@ importers:
         version: 22.15.35
       eslint:
         specifier: ~9.27.0
-        version: 9.27.0(jiti@2.5.1)
+        version: 9.27.0(jiti@2.6.1)
       jsonix:
         specifier: ~3.0.0
         version: 3.0.0
@@ -3700,13 +4150,13 @@ importers:
         version: 11.2.0(size-limit@11.2.0)
       '@typescript-eslint/eslint-plugin':
         specifier: ~8.32.1
-        version: 8.32.1(@typescript-eslint/parser@8.33.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)
+        version: 8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       eslint-plugin-react-hooks:
         specifier: ~5.2.0
-        version: 5.2.0(eslint@9.27.0(jiti@2.5.1))
+        version: 5.2.0(eslint@9.27.0(jiti@2.6.1))
       eslint-plugin-unused-imports:
         specifier: ~4.1.4
-        version: 4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.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))(eslint@9.27.0(jiti@2.5.1))
+        version: 4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))
       husky:
         specifier: ^9.1.7
         version: 9.1.7
@@ -3746,7 +4196,7 @@ importers:
     dependencies:
       '@aws-sdk/client-s3':
         specifier: ^3.817.0
-        version: 3.862.0
+        version: 3.922.0
       '@vscode-logging/logger':
         specifier: ^2.0.0
         version: 2.0.0
@@ -3761,7 +4211,7 @@ importers:
         version: 1.0.0(tslib@2.8.1)
       '@vscode/iconv-lite-umd':
         specifier: ^0.7.0
-        version: 0.7.0
+        version: 0.7.1
       '@vscode/webview-ui-toolkit':
         specifier: ^1.4.0
         version: 1.4.0(react@19.1.0)
@@ -3806,7 +4256,7 @@ importers:
         version: 3.25.76
       zustand:
         specifier: ^5.0.5
-        version: 5.0.7(@types/react@18.2.0)(react@19.1.0)(use-sync-external-store@1.5.0(react@19.1.0))
+        version: 5.0.8(@types/react@18.2.0)(react@19.1.0)(use-sync-external-store@1.6.0(react@19.1.0))
     devDependencies:
       '@biomejs/biome':
         specifier: ^1.9.4
@@ -3828,7 +4278,7 @@ importers:
         version: 22.15.35
       '@types/vscode':
         specifier: ^1.100.0
-        version: 1.102.0
+        version: 1.105.0
       '@types/which':
         specifier: ^3.0.4
         version: 3.0.4
@@ -3840,10 +4290,10 @@ importers:
         version: link:../../common-libs/playwright-vscode-tester
       axios:
         specifier: ^1.12.0
-        version: 1.12.0
+        version: 1.12.2
       copy-webpack-plugin:
         specifier: ^13.0.0
-        version: 13.0.0(webpack@5.101.0)
+        version: 13.0.1(webpack@5.102.1)
       copyfiles:
         specifier: ^2.4.1
         version: 2.4.1
@@ -3852,25 +4302,25 @@ importers:
         version: 6.0.0
       mocha:
         specifier: ^11.5.0
-        version: 11.7.1
+        version: 11.7.4
       terser-webpack-plugin:
         specifier: ^5.3.14
-        version: 5.3.14(webpack@5.101.0)
+        version: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       ts-loader:
         specifier: ~9.5.2
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       typescript:
         specifier: ^5.8.3
         version: 5.8.3
       vscode-extension-tester:
         specifier: ^8.14.1
-        version: 8.14.1(mocha@11.7.1)(typescript@5.8.3)
+        version: 8.14.1(mocha@11.7.4)(typescript@5.8.3)
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@6.0.1)
+        version: 5.102.1(webpack-cli@6.0.1)
       webpack-cli:
         specifier: ^6.0.1
-        version: 6.0.1(webpack@5.101.0)
+        version: 6.0.1(webpack@5.102.1)
       webpack-permissions-plugin:
         specifier: ^1.0.10
         version: 1.0.10
@@ -3885,7 +4335,7 @@ importers:
         version: 0.8.2
       '@headlessui/react':
         specifier: ^2.1.2
-        version: 2.2.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 2.2.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@hookform/resolvers':
         specifier: 5.2.2
         version: 5.2.2(react-hook-form@7.63.0(react@18.2.0))
@@ -3939,7 +4389,7 @@ importers:
         version: 4.0.1
       swagger-ui-react:
         specifier: ^5.22.0
-        version: 5.27.1(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 5.30.1(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       timezone-support:
         specifier: ^3.1.0
         version: 3.1.0
@@ -3982,10 +4432,10 @@ importers:
         version: 2.4.1
       css-loader:
         specifier: ^7.1.2
-        version: 7.1.2(webpack@5.101.0)
+        version: 7.1.2(webpack@5.102.1)
       file-loader:
         specifier: ^6.2.0
-        version: 6.2.0(webpack@5.101.0)
+        version: 6.2.0(webpack@5.102.1)
       path:
         specifier: ^0.12.7
         version: 0.12.7
@@ -3994,60 +4444,60 @@ importers:
         version: 8.5.6
       postcss-loader:
         specifier: ^8.1.1
-        version: 8.1.1(postcss@8.5.6)(typescript@5.8.3)(webpack@5.101.0)
+        version: 8.2.0(postcss@8.5.6)(typescript@5.8.3)(webpack@5.102.1)
       sass-loader:
         specifier: ^16.0.5
-        version: 16.0.5(sass@1.90.0)(webpack@5.101.0)
+        version: 16.0.6(sass@1.93.3)(webpack@5.102.1)
       source-map-loader:
         specifier: ^5.0.0
-        version: 5.0.0(webpack@5.101.0)
+        version: 5.0.0(webpack@5.102.1)
       style-loader:
         specifier: ^4.0.0
-        version: 4.0.0(webpack@5.101.0)
+        version: 4.0.0(webpack@5.102.1)
       tailwindcss:
         specifier: ^4.1.7
-        version: 4.1.11
+        version: 4.1.16
       ts-loader:
         specifier: ^9.5.2
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
+        version: 9.5.4(typescript@5.8.3)(webpack@5.102.1)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
       webpack:
         specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@6.0.1)
+        version: 5.102.1(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)
+        version: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.102.1)
       webpack-dev-server:
         specifier: ^5.2.1
-        version: 5.2.2(webpack-cli@6.0.1)(webpack@5.101.0)
+        version: 5.2.2(webpack-cli@6.0.1)(webpack@5.102.1)
 
 packages:
 
-  '@adobe/css-tools@4.4.3':
-    resolution: {integrity: sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA==}
+  '@adobe/css-tools@4.4.4':
+    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
 
-  '@ai-sdk/amazon-bedrock@3.0.30':
-    resolution: {integrity: sha512-aF21FFpTusWAdXc70bqA8SIFnIfCokwrp4G8efMETIRXIH+N5QGd6UYEMbfMfwx4P9iN9v3oUwsHsRtr87TKPQ==}
+  '@ai-sdk/amazon-bedrock@3.0.51':
+    resolution: {integrity: sha512-nPyUZDH9XS5iqgxM2ZPK2kSE1M1UoXdWaqWRqZ7k90BZu32VEreL1Z3pTTo58qEj9OuOkdlQ1oO5DujIE7VDLA==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
-  '@ai-sdk/anthropic@2.0.23':
-    resolution: {integrity: sha512-ZEBiiv1UhjGjBwUU63pFhLK5LCSlNDb1idY9K1oZHm5/Fda1cuTojf32tOp0opH0RPbPAN/F8fyyNjbU33n9Kw==}
+  '@ai-sdk/anthropic@2.0.41':
+    resolution: {integrity: sha512-ZQebpyE6rM3JoeEyhJXUNDiRfVegw8ZrxT+rB8yurxI5JXDnlGpYQvSPmdR8TQfMbps4YkggfbcOwMeEZaTS+g==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
-  '@ai-sdk/gateway@1.0.32':
-    resolution: {integrity: sha512-TQRIM63EI/ccJBc7RxeB8nq/CnGNnyl7eu5stWdLwL41stkV5skVeZJe0QRvFbaOrwCkgUVE0yrUqJi4tgDC1A==}
+  '@ai-sdk/gateway@2.0.6':
+    resolution: {integrity: sha512-FmhR6Tle09I/RUda8WSPpJ57mjPWzhiVVlB50D+k+Qf/PBW0CBtnbAUxlNSR5v+NIZNLTK3C56lhb23ntEdxhQ==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
-  '@ai-sdk/provider-utils@3.0.10':
-    resolution: {integrity: sha512-T1gZ76gEIwffep6MWI0QNy9jgoybUHE7TRaHB5k54K8mF91ciGFlbtCGxDYhMH3nCRergKwYFIDeFF0hJSIQHQ==}
+  '@ai-sdk/provider-utils@3.0.16':
+    resolution: {integrity: sha512-lsWQY9aDXHitw7C1QRYIbVGmgwyT98TF3MfM8alNIXKpdJdi+W782Rzd9f1RyOfgRmZ08gJ2EYNDhWNK7RqpEA==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
@@ -4064,6 +4514,10 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@apidevtools/json-schema-ref-parser@11.6.1':
+    resolution: {integrity: sha512-DxjgKBCoyReu4p5HMvpmgSOfRhhBcuf5V5soDDRgOTZMwsA4KSFzol1abFZgiCTE11L2kKGca5Md9GwDdXVBwQ==}
+    engines: {node: '>= 16'}
+
   '@apidevtools/json-schema-ref-parser@12.0.2':
     resolution: {integrity: sha512-SoZWqQz4YMKdw4kEMfG5w6QAy+rntjsoAT1FtvZAnVEnCR4uy9YSuDBNoVAFHgzSz0dJbISLLCSrGR2Zd7bcvA==}
     engines: {node: '>= 16'}
@@ -4095,123 +4549,123 @@ packages:
   '@aws-crypto/util@5.2.0':
     resolution: {integrity: sha512-4RkU9EsI6ZpBve5fseQlGNUWKMa1RLPQ1dnjnQoe07ldfIzcsGb5hC5W0Dm7u423KWzawlrpbjXBrXCEv9zazQ==}
 
-  '@aws-sdk/client-s3@3.862.0':
-    resolution: {integrity: sha512-sPmqv2qKORtGRN51cRoHyTOK/SMejG1snXUQytuximeDPn5e/p6cCsYwOI8QuQNW+/7HbmosEz91lPcbClWXxg==}
+  '@aws-sdk/client-s3@3.922.0':
+    resolution: {integrity: sha512-SZRaZUUAHCWfEyBf4SRSPd29ko4uFoJpfd0E/w1meE68XhFB52FTtz/71UqYcwqZmN+s7oUNFFZT+DE/dnQSEA==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/client-sso@3.862.0':
-    resolution: {integrity: sha512-zHf7Bn22K09BdFgiGg6yWfy927djGhs58KB5qpqD2ie7u796TvetPH14p6UUAOGyk6aah+wR/WLFFoc+51uADA==}
+  '@aws-sdk/client-sso@3.922.0':
+    resolution: {integrity: sha512-jdHs7uy7cSpiMvrxhYmqHyJxgK7hyqw4plG8OQ4YTBpq0SbfAxdoOuOkwJ1IVUUQho4otR1xYYjiX/8e8J8qwQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/core@3.862.0':
-    resolution: {integrity: sha512-oJ5Au3QCAQmOmh7PD7dUxnPDxWsT9Z95XEOiJV027//11pwRSUMiNSvW8srPa3i7CZRNjz5QHX6O4KqX9PxNsQ==}
+  '@aws-sdk/core@3.922.0':
+    resolution: {integrity: sha512-EvfP4cqJfpO3L2v5vkIlTkMesPtRwWlMfsaW6Tpfm7iYfBOuTi6jx60pMDMTyJNVfh6cGmXwh/kj1jQdR+w99Q==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-env@3.862.0':
-    resolution: {integrity: sha512-/nafSJMuixcrCN1SmsOBIQ5m1fhr9ZnCxw3JZD9qJm3yNXhAshqAC+KcA3JGFnvdBVLhY/pUpdoQmxZmuFJItQ==}
+  '@aws-sdk/credential-provider-env@3.922.0':
+    resolution: {integrity: sha512-WikGQpKkROJSK3D3E7odPjZ8tU7WJp5/TgGdRuZw3izsHUeH48xMv6IznafpRTmvHcjAbDQj4U3CJZNAzOK/OQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-http@3.862.0':
-    resolution: {integrity: sha512-JnF3vH6GxvPuMGSI5QsmVlmWc0ebElEiJvUGByTMSr/BfzywZdJBKzPVqViwNqAW5cBWiZ/rpL+ekZ24Nb0Vow==}
+  '@aws-sdk/credential-provider-http@3.922.0':
+    resolution: {integrity: sha512-i72DgHMK7ydAEqdzU0Duqh60Q8W59EZmRJ73y0Y5oFmNOqnYsAI+UXyOoCsubp+Dkr6+yOwAn1gPt1XGE9Aowg==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-ini@3.862.0':
-    resolution: {integrity: sha512-LkpZ2S9DQCTHTPu1p0Qg5bM5DN/b/cEflW269RoeuYpiznxdV8r/mqYuhh/VPXQKkBZdiILe4/OODtg+vk4S0A==}
+  '@aws-sdk/credential-provider-ini@3.922.0':
+    resolution: {integrity: sha512-bVF+pI5UCLNkvbiZr/t2fgTtv84s8FCdOGAPxQiQcw5qOZywNuuCCY3wIIchmQr6GJr8YFkEp5LgDCac5EC5aQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-node@3.862.0':
-    resolution: {integrity: sha512-4+X/LdEGPCBMlhn6MCcNJ5yJ8k+yDXeSO1l9X49NNQiG60SH/yObB3VvotcHWC+A3EEZx4dOw/ylcPt86e7Irg==}
+  '@aws-sdk/credential-provider-node@3.922.0':
+    resolution: {integrity: sha512-agCwaD6mBihToHkjycL8ObIS2XOnWypWZZWhJSoWyHwFrhEKz1zGvgylK9Dc711oUfU+zU6J8e0JPKNJMNb3BQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-process@3.862.0':
-    resolution: {integrity: sha512-bR/eRCjRsilAuaUpNzTWWE4sUxJC4k571+4LLxE6Xo+0oYHfH+Ih00+sQRX06s4SqZZROdppissm3OOr5d26qA==}
+  '@aws-sdk/credential-provider-process@3.922.0':
+    resolution: {integrity: sha512-1DZOYezT6okslpvMW7oA2q+y17CJd4fxjNFH0jtThfswdh9CtG62+wxenqO+NExttq0UMaKisrkZiVrYQBTShw==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-sso@3.862.0':
-    resolution: {integrity: sha512-1E1rTKWJAbzN/uiIXFPCVAS2PrZgy87O6BEO69404bI7o/iYHOfohfn66bdSqBnZ7Tn/hFJdCk6i23U3pibf5w==}
+  '@aws-sdk/credential-provider-sso@3.922.0':
+    resolution: {integrity: sha512-nbD3G3hShTYxLCkKMqLkLPtKwAAfxdY/k9jHtZmVBFXek2T6tQrqZHKxlAu+fd23Ga4/Aik7DLQQx1RA1a5ipg==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-web-identity@3.862.0':
-    resolution: {integrity: sha512-Skv07eOS4usDf/Bna3FWKIo0/35qhxb22Z/OxrbNtx2Hxa/upp42S+Y6fA9qzgLqXMNYDZngKYwwMPtzrbkMAg==}
+  '@aws-sdk/credential-provider-web-identity@3.922.0':
+    resolution: {integrity: sha512-wjGIhgMHGGQfQTdFaJphNOKyAL8wZs6znJdHADPVURmgR+EWLyN/0fDO1u7wx8xaLMZpbHIFWBEvf9TritR/cQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-bucket-endpoint@3.862.0':
-    resolution: {integrity: sha512-Wcsc7VPLjImQw+CP1/YkwyofMs9Ab6dVq96iS8p0zv0C6YTaMjvillkau4zFfrrrTshdzFWKptIFhKK8Zsei1g==}
+  '@aws-sdk/middleware-bucket-endpoint@3.922.0':
+    resolution: {integrity: sha512-Dpr2YeOaLFqt3q1hocwBesynE3x8/dXZqXZRuzSX/9/VQcwYBFChHAm4mTAl4zuvArtDbLrwzWSxmOWYZGtq5w==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-expect-continue@3.862.0':
-    resolution: {integrity: sha512-oG3AaVUJ+26p0ESU4INFn6MmqqiBFZGrebST66Or+YBhteed2rbbFl7mCfjtPWUFgquQlvT1UP19P3LjQKeKpw==}
+  '@aws-sdk/middleware-expect-continue@3.922.0':
+    resolution: {integrity: sha512-xmnLWMtmHJHJBupSWMUEW1gyxuRIeQ1Ov2xa8Tqq77fPr4Ft2AluEwiDMaZIMHoAvpxWKEEt9Si59Li7GIA+bQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-flexible-checksums@3.862.0':
-    resolution: {integrity: sha512-3PuTNJs43GmtNIfj4R/aNPGX6lfIq0gjfekVPUO/MnP/eV+RVgkCvEqWYyN6RZyOzrzsJydXbmydwLHAwMzxiw==}
+  '@aws-sdk/middleware-flexible-checksums@3.922.0':
+    resolution: {integrity: sha512-G363np7YcJhf+gBucskdv8cOTbs2TRwocEzRupuqDIooGDlLBlfJrvwehdgtWR8l53yjJR3zcHvGrVPTe2h8Nw==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-host-header@3.862.0':
-    resolution: {integrity: sha512-jDje8dCFeFHfuCAxMDXBs8hy8q9NCTlyK4ThyyfAj3U4Pixly2mmzY2u7b7AyGhWsjJNx8uhTjlYq5zkQPQCYw==}
+  '@aws-sdk/middleware-host-header@3.922.0':
+    resolution: {integrity: sha512-HPquFgBnq/KqKRVkiuCt97PmWbKtxQ5iUNLEc6FIviqOoZTmaYG3EDsIbuFBz9C4RHJU4FKLmHL2bL3FEId6AA==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-location-constraint@3.862.0':
-    resolution: {integrity: sha512-MnwLxCw7Cc9OngEH3SHFhrLlDI9WVxaBkp3oTsdY9JE7v8OE38wQ9vtjaRsynjwu0WRtrctSHbpd7h/QVvtjyA==}
+  '@aws-sdk/middleware-location-constraint@3.922.0':
+    resolution: {integrity: sha512-T4iqd7WQ2DDjCH/0s50mnhdoX+IJns83ZE+3zj9IDlpU0N2aq8R91IG890qTfYkUEdP9yRm0xir/CNed+v6Dew==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-logger@3.862.0':
-    resolution: {integrity: sha512-N/bXSJznNBR/i7Ofmf9+gM6dx/SPBK09ZWLKsW5iQjqKxAKn/2DozlnE54uiEs1saHZWoNDRg69Ww4XYYSlG1Q==}
+  '@aws-sdk/middleware-logger@3.922.0':
+    resolution: {integrity: sha512-AkvYO6b80FBm5/kk2E636zNNcNgjztNNUxpqVx+huyGn9ZqGTzS4kLqW2hO6CBe5APzVtPCtiQsXL24nzuOlAg==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-recursion-detection@3.862.0':
-    resolution: {integrity: sha512-KVoo3IOzEkTq97YKM4uxZcYFSNnMkhW/qj22csofLegZi5fk90ztUnnaeKfaEJHfHp/tm1Y3uSoOXH45s++kKQ==}
+  '@aws-sdk/middleware-recursion-detection@3.922.0':
+    resolution: {integrity: sha512-TtSCEDonV/9R0VhVlCpxZbp/9sxQvTTRKzIf8LxW3uXpby6Wl8IxEciBJlxmSkoqxh542WRcko7NYODlvL/gDA==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-sdk-s3@3.862.0':
-    resolution: {integrity: sha512-rDRHxxZuY9E7py/OVYN1VQRAw0efEThvK5sZ3HfNNpL6Zk4HeOGtc6NtULSfeCeyHCVlJsdOVkIxJge2Ax5vSA==}
+  '@aws-sdk/middleware-sdk-s3@3.922.0':
+    resolution: {integrity: sha512-ygg8lME1oFAbsH42ed2wtGqfHLoT5irgx6VC4X98j79fV1qXEwwwbqMsAiMQ/HJehpjqAFRVsHox3MHLN48Z5A==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-ssec@3.862.0':
-    resolution: {integrity: sha512-72VtP7DZC8lYTE2L3Efx2BrD98oe9WTK8X6hmd3WTLkbIjvgWQWIdjgaFXBs8WevsXkewIctfyA3KEezvL5ggw==}
+  '@aws-sdk/middleware-ssec@3.922.0':
+    resolution: {integrity: sha512-eHvSJZTSRJO+/tjjGD6ocnPc8q9o3m26+qbwQTu/4V6yOJQ1q+xkDZNqwJQphL+CodYaQ7uljp8g1Ji/AN3D9w==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-user-agent@3.862.0':
-    resolution: {integrity: sha512-7OOaGbAw7Kg1zoKO9wV8cA5NnJC+RYsocjmP3FZ0FiKa7gbmeQ6Cfheunzd1Re9fgelgL3OIRjqO5mSmOIhyhA==}
+  '@aws-sdk/middleware-user-agent@3.922.0':
+    resolution: {integrity: sha512-N4Qx/9KP3oVQBJOrSghhz8iZFtUC2NNeSZt88hpPhbqAEAtuX8aD8OzVcpnAtrwWqy82Yd2YTxlkqMGkgqnBsQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/nested-clients@3.862.0':
-    resolution: {integrity: sha512-fPrfXa+m9S0DA5l8+p4A9NFQ22lEHm/ezaUWWWs6F3/U49lR6yKhNAGji3LlIG7b7ZdTJ3smAcaxNHclJsoQIg==}
+  '@aws-sdk/nested-clients@3.922.0':
+    resolution: {integrity: sha512-uYvKCF1TGh/MuJ4TMqmUM0Csuao02HawcseG4LUDyxdUsd/EFuxalWq1Cx4fKZQ2K8F504efZBjctMAMNY+l7A==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/region-config-resolver@3.862.0':
-    resolution: {integrity: sha512-VisR+/HuVFICrBPY+q9novEiE4b3mvDofWqyvmxHcWM7HumTz9ZQSuEtnlB/92GVM3KDUrR9EmBHNRrfXYZkcQ==}
+  '@aws-sdk/region-config-resolver@3.922.0':
+    resolution: {integrity: sha512-44Y/rNNwhngR2KHp6gkx//TOr56/hx6s4l+XLjOqH7EBCHL7XhnrT1y92L+DLiroVr1tCSmO8eHQwBv0Y2+mvw==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/signature-v4-multi-region@3.862.0':
-    resolution: {integrity: sha512-ZAjrbXnu3yTxXMPiEVxDP/I8zfssrLQGgUi0NgJP6Cz/mOS/S/3hfOZrMown1jLhkTrzLpjNE8Q2n18VtRbScQ==}
+  '@aws-sdk/signature-v4-multi-region@3.922.0':
+    resolution: {integrity: sha512-mmsgEEL5pE+A7gFYiJMDBCLVciaXq4EFI5iAP7bPpnHvOplnNOYxVy2IreKMllGvrfjVyLnwxzZYlo5zZ65FWg==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/token-providers@3.862.0':
-    resolution: {integrity: sha512-p3u7aom3WQ7ArFByNbccRIkCssk5BB4IUX9oFQa2P0MOFCbkKFBLG7WMegRXhq5grOHmI4SRftEDDy3CcoTqSQ==}
+  '@aws-sdk/token-providers@3.922.0':
+    resolution: {integrity: sha512-/inmPnjZE0ZBE16zaCowAvouSx05FJ7p6BQYuzlJ8vxEU0sS0Hf8fvhuiRnN9V9eDUPIBY+/5EjbMWygXL4wlQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/types@3.862.0':
-    resolution: {integrity: sha512-Bei+RL0cDxxV+lW2UezLbCYYNeJm6Nzee0TpW0FfyTRBhH9C1XQh4+x+IClriXvgBnRquTMMYsmJfvx8iyLKrg==}
+  '@aws-sdk/types@3.922.0':
+    resolution: {integrity: sha512-eLA6XjVobAUAMivvM7DBL79mnHyrm+32TkXNWZua5mnxF+6kQCfblKKJvxMZLGosO53/Ex46ogim8IY5Nbqv2w==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/util-arn-parser@3.804.0':
-    resolution: {integrity: sha512-wmBJqn1DRXnZu3b4EkE6CWnoWMo1ZMvlfkqU5zPz67xx1GMaXlDCchFvKAXMjk4jn/L1O3tKnoFDNsoLV1kgNQ==}
+  '@aws-sdk/util-arn-parser@3.893.0':
+    resolution: {integrity: sha512-u8H4f2Zsi19DGnwj5FSZzDMhytYF/bCh37vAtBsn3cNDL3YG578X5oc+wSX54pM3tOxS+NY7tvOAo52SW7koUA==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/util-endpoints@3.862.0':
-    resolution: {integrity: sha512-eCZuScdE9MWWkHGM2BJxm726MCmWk/dlHjOKvkM0sN1zxBellBMw5JohNss1Z8/TUmnW2gb9XHTOiHuGjOdksA==}
+  '@aws-sdk/util-endpoints@3.922.0':
+    resolution: {integrity: sha512-4ZdQCSuNMY8HMlR1YN4MRDdXuKd+uQTeKIr5/pIM+g3TjInZoj8imvXudjcrFGA63UF3t92YVTkBq88mg58RXQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/util-locate-window@3.804.0':
-    resolution: {integrity: sha512-zVoRfpmBVPodYlnMjgVjfGoEZagyRF5IPn3Uo6ZvOZp24chnW/FRstH7ESDHDDRga4z3V+ElUQHKpFDXWyBW5A==}
+  '@aws-sdk/util-locate-window@3.893.0':
+    resolution: {integrity: sha512-T89pFfgat6c8nMmpI8eKjBcDcgJq36+m9oiXbcUzeU55MP9ZuGgBomGjGnHaEyF36jenW9gmg3NfZDm0AO2XPg==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/util-user-agent-browser@3.862.0':
-    resolution: {integrity: sha512-BmPTlm0r9/10MMr5ND9E92r8KMZbq5ltYXYpVcUbAsnB1RJ8ASJuRoLne5F7mB3YMx0FJoOTuSq7LdQM3LgW3Q==}
+  '@aws-sdk/util-user-agent-browser@3.922.0':
+    resolution: {integrity: sha512-qOJAERZ3Plj1st7M4Q5henl5FRpE30uLm6L9edZqZXGR6c7ry9jzexWamWVpQ4H4xVAVmiO9dIEBAfbq4mduOA==}
 
-  '@aws-sdk/util-user-agent-node@3.862.0':
-    resolution: {integrity: sha512-KtJdSoa1Vmwquy+zwiqRQjtsuKaHlVcZm8tsTchHbc6809/VeaC+ZZOqlil9IWOOyWNGIX8GTRwP9TEb8cT5Gw==}
+  '@aws-sdk/util-user-agent-node@3.922.0':
+    resolution: {integrity: sha512-NrPe/Rsr5kcGunkog0eBV+bY0inkRELsD2SacC4lQZvZiXf8VJ2Y7j+Yq1tB+h+FPLsdt3v9wItIvDf/laAm0Q==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       aws-crt: '>=1.0.0'
@@ -4219,8 +4673,12 @@ packages:
       aws-crt:
         optional: true
 
-  '@aws-sdk/xml-builder@3.862.0':
-    resolution: {integrity: sha512-6Ed0kmC1NMbuFTEgNmamAUU1h5gShgxL1hBVLbEzUa3trX5aJBz1vU4bXaBTvOYUAnOHtiy1Ml4AMStd6hJnFA==}
+  '@aws-sdk/xml-builder@3.921.0':
+    resolution: {integrity: sha512-LVHg0jgjyicKKvpNIEMXIMr1EBViESxcPkqfOlT+X1FkmUMTNZEEVF18tOJg4m4hV5vxtkWcqtr4IEeWa1C41Q==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws/lambda-invoke-store@0.1.1':
+    resolution: {integrity: sha512-RcLam17LdlbSOSp9VxmUu1eI6Mwxp+OwhD2QhiSNmNCzoDb0EeUXTD2n/WbcnrAYMGlmf05th6QYq23VqvJqpA==}
     engines: {node: '>=18.0.0'}
 
   '@azu/format-text@1.0.2':
@@ -4233,52 +4691,52 @@ packages:
     resolution: {integrity: sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==}
     engines: {node: '>=18.0.0'}
 
-  '@azure/core-auth@1.10.0':
-    resolution: {integrity: sha512-88Djs5vBvGbHQHf5ZZcaoNHo6Y8BKZkt3cw2iuJIQzLEgH4Ox6Tm4hjFhbqOxyYsgIG/eJbFEHpxRIfEEWv5Ow==}
+  '@azure/core-auth@1.10.1':
+    resolution: {integrity: sha512-ykRMW8PjVAn+RS6ww5cmK9U2CyH9p4Q88YJwvUslfuMmN98w/2rdGRLPqJYObapBCdzBVeDgYWdJnFPFb7qzpg==}
     engines: {node: '>=20.0.0'}
 
-  '@azure/core-client@1.10.0':
-    resolution: {integrity: sha512-O4aP3CLFNodg8eTHXECaH3B3CjicfzkxVtnrfLkOq0XNP7TIECGfHpK/C6vADZkWP75wzmdBnsIA8ksuJMk18g==}
+  '@azure/core-client@1.10.1':
+    resolution: {integrity: sha512-Nh5PhEOeY6PrnxNPsEHRr9eimxLwgLlpmguQaHKBinFYA/RU9+kOYVOQqOrTsCL+KSxrLLl1gD8Dk5BFW/7l/w==}
     engines: {node: '>=20.0.0'}
 
-  '@azure/core-rest-pipeline@1.22.0':
-    resolution: {integrity: sha512-OKHmb3/Kpm06HypvB3g6Q3zJuvyXcpxDpCS1PnU8OV6AJgSFaee/covXBcPbWc6XDDxtEPlbi3EMQ6nUiPaQtw==}
+  '@azure/core-rest-pipeline@1.22.1':
+    resolution: {integrity: sha512-UVZlVLfLyz6g3Hy7GNDpooMQonUygH7ghdiSASOOHy97fKj/mPLqgDX7aidOijn+sCMU+WU8NjlPlNTgnvbcGA==}
     engines: {node: '>=20.0.0'}
 
-  '@azure/core-tracing@1.3.0':
-    resolution: {integrity: sha512-+XvmZLLWPe67WXNZo9Oc9CrPj/Tm8QnHR92fFAFdnbzwNdCH1h+7UdpaQgRSBsMY+oW1kHXNUZQLdZ1gHX3ROw==}
+  '@azure/core-tracing@1.3.1':
+    resolution: {integrity: sha512-9MWKevR7Hz8kNzzPLfX4EAtGM2b8mr50HPDBvio96bURP/9C+HjdH3sBlLSNNrvRAr5/k/svoH457gB5IKpmwQ==}
     engines: {node: '>=20.0.0'}
 
-  '@azure/core-util@1.13.0':
-    resolution: {integrity: sha512-o0psW8QWQ58fq3i24Q1K2XfS/jYTxr7O1HRcyUE9bV9NttLU+kYOH82Ixj8DGlMTOWgxm1Sss2QAfKK5UkSPxw==}
+  '@azure/core-util@1.13.1':
+    resolution: {integrity: sha512-XPArKLzsvl0Hf0CaGyKHUyVgF7oDnhKoP85Xv6M4StF/1AhfORhZudHtOyf2s+FcbuQ9dPRAjB8J2KvRRMUK2A==}
     engines: {node: '>=20.0.0'}
 
-  '@azure/identity@4.11.1':
-    resolution: {integrity: sha512-0ZdsLRaOyLxtCYgyuqyWqGU5XQ9gGnjxgfoNTt1pvELGkkUFrMATABZFIq8gusM7N1qbqpVtwLOhk0d/3kacLg==}
+  '@azure/identity@4.13.0':
+    resolution: {integrity: sha512-uWC0fssc+hs1TGGVkkghiaFkkS7NkTxfnCH+Hdg+yTehTpMcehpok4PgUKKdyCH+9ldu6FhiHRv84Ntqj1vVcw==}
     engines: {node: '>=20.0.0'}
 
   '@azure/logger@1.3.0':
     resolution: {integrity: sha512-fCqPIfOcLE+CGqGPd66c8bZpwAji98tZ4JI9i/mlTNTlsIWslCfpg48s/ypyLxZTump5sypjrKn2/kY7q8oAbA==}
     engines: {node: '>=20.0.0'}
 
-  '@azure/msal-browser@4.19.0':
-    resolution: {integrity: sha512-g6Ea+sJmK7l5NUyrPhtD7DNj/tZcsr6VTNNLNuYs8yPvL3HNiIpO/0kzXntF9AqJ/6L+uz9aHmoT1x+RNq6zBQ==}
+  '@azure/msal-browser@4.26.0':
+    resolution: {integrity: sha512-Ie3SZ4IMrf9lSwWVzzJrhTPE+g9+QDUfeor1LKMBQzcblp+3J/U1G8hMpNSfLL7eA5F/DjjPXkATJ5JRUdDJLA==}
     engines: {node: '>=0.8.0'}
 
-  '@azure/msal-common@15.10.0':
-    resolution: {integrity: sha512-+cGnma71NV3jzl6DdgdHsqriN4ZA7puBIzObSYCvcIVGMULGb2NrcOGV6IJxO06HoVRHFKijkxd9lcBvS063KQ==}
+  '@azure/msal-common@15.13.1':
+    resolution: {integrity: sha512-vQYQcG4J43UWgo1lj7LcmdsGUKWYo28RfEvDQAEMmQIMjSFufvb+pS0FJ3KXmrPmnWlt1vHDl3oip6mIDUQ4uA==}
     engines: {node: '>=0.8.0'}
 
-  '@azure/msal-node@3.7.0':
-    resolution: {integrity: sha512-WsL11pT0hnoIr/4NCjG6uJswkmNA/9AgEre4mSQZS2e+ZPKUWwUdA5nCTnr4n1FMT1O5ezSEiJushnPW25Y+dA==}
+  '@azure/msal-node@3.8.1':
+    resolution: {integrity: sha512-HszfqoC+i2C9+BRDQfuNUGp15Re7menIhCEbFCQ49D3KaqEDrgZIgQ8zSct4T59jWeUIL9N/Dwiv4o2VueTdqQ==}
     engines: {node: '>=16'}
 
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.28.0':
-    resolution: {integrity: sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==}
+  '@babel/compat-data@7.28.5':
+    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
     engines: {node: '>=6.9.0'}
 
   '@babel/core@7.12.9':
@@ -4289,8 +4747,12 @@ packages:
     resolution: {integrity: sha512-BU2f9tlKQ5CAthiMIgpzAh4eDTLWo1mqi9jqE2OxMG0E/OM199VJt2q8BztTxpnSW0i1ymdwLXRJnYzvDM5r2w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.28.0':
-    resolution: {integrity: sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==}
+  '@babel/core@7.28.5':
+    resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.28.5':
+    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-annotate-as-pure@7.27.3':
@@ -4301,14 +4763,14 @@ packages:
     resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-create-class-features-plugin@7.27.1':
-    resolution: {integrity: sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A==}
+  '@babel/helper-create-class-features-plugin@7.28.5':
+    resolution: {integrity: sha512-q3WC4JfdODypvxArsJQROfupPBq9+lMwjKq7C33GhbFYJsufD0yd/ziwD+hJucLeWsnFPWZjsU2DNFqBPE7jwQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-create-regexp-features-plugin@7.27.1':
-    resolution: {integrity: sha512-uVDC72XVf8UbrH5qQTc18Agb8emwjTiZrQE11Nv3CuBEZmVvTwwE9CBUEvHku06gQCAyYf8Nv6ja1IN+6LMbxQ==}
+  '@babel/helper-create-regexp-features-plugin@7.28.5':
+    resolution: {integrity: sha512-N1EhvLtHzOvj7QQOUCCS3NrPJP8c5W6ZXCHDn7Yialuy1iu4r5EmIYkXlKNqT99Ciw+W0mDqWoR6HWMZlFP3hw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -4332,16 +4794,16 @@ packages:
     resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-member-expression-to-functions@7.27.1':
-    resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==}
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-module-imports@7.27.1':
     resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.27.3':
-    resolution: {integrity: sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==}
+  '@babel/helper-module-transforms@7.28.3':
+    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -4377,29 +4839,29 @@ packages:
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.27.1':
-    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-validator-option@7.27.1':
     resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-wrap-function@7.27.1':
-    resolution: {integrity: sha512-NFJK2sHUvrjo8wAU/nQTWU890/zB2jj0qBcCbZbbf+005cAsv6tMjXz31fBign6M5ov1o0Bllu+9nbqkfsjjJQ==}
+  '@babel/helper-wrap-function@7.28.3':
+    resolution: {integrity: sha512-zdf983tNfLZFletc0RRXYrHrucBEg95NIFMkn6K9dbeMYnsgHaSBGcQqdsCSStG2PYwRre0Qc2NNSCXbG+xc6g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.28.2':
-    resolution: {integrity: sha512-/V9771t+EgXz62aCcyofnQhGM8DQACbRhvzKFsXKC9QM+5MadF8ZmIm0crDMaz3+o0h0zXfJnd4EhbYbxsrcFw==}
+  '@babel/helpers@7.28.4':
+    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.28.0':
-    resolution: {integrity: sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==}
+  '@babel/parser@7.28.5':
+    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.27.1':
-    resolution: {integrity: sha512-QPG3C9cCVRQLxAVwmefEmwdTanECuUBMQZ/ym5kiw3XKCGA7qkuQLcjWWHcrD/GKbn/WmJwaezfuuAOcyKlRPA==}
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5':
+    resolution: {integrity: sha512-87GDMS3tsmMSi/3bWOte1UblL+YUTFMV8SZPZ2eSEL17s74Cw/l63rR6NmGVKMYW2GYi85nE+/d6Hw5N0bEk2Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -4422,8 +4884,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.13.0
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.27.1':
-    resolution: {integrity: sha512-6BpaYGDavZqkI6yT+KSPdpZFfpnd68UKXbcjI9pJ13pvHhPrCKWOOLp+ysvMeA+DxnhuPpgIaRpxRxo5A9t5jw==}
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.3':
+    resolution: {integrity: sha512-b6YTX108evsvE4YgWyQ921ZAFFQm3Bn+CA3+ZXlNVnPhx+UfsVURoPjfGAPCjBgrqo30yX/C2nZGX96DxvR9Iw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -4526,6 +4988,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-syntax-flow@7.22.5':
+    resolution: {integrity: sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-syntax-flow@7.27.1':
     resolution: {integrity: sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==}
     engines: {node: '>=6.9.0'}
@@ -4643,8 +5111,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-block-scoping@7.28.0':
-    resolution: {integrity: sha512-gKKnwjpdx5sER/wl0WN0efUBFzF/56YZO0RJrSYP4CljXnP31ByY7fol89AzomdlLNzI36AvOTmYHsnZTCkq8Q==}
+  '@babel/plugin-transform-block-scoping@7.28.5':
+    resolution: {integrity: sha512-45DmULpySVvmq9Pj3X9B+62Xe+DJGov27QravQJU1LLcapR6/10i+gYVAucGGJpHBp5mYxIMK4nDAT/QDLr47g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4655,14 +5123,14 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-class-static-block@7.27.1':
-    resolution: {integrity: sha512-s734HmYU78MVzZ++joYM+NkJusItbdRcbm+AGRgJCt3iA+yux0QpD9cBVdz3tKyrjVYWRl7j0mHSmv4lhV0aoA==}
+  '@babel/plugin-transform-class-static-block@7.28.3':
+    resolution: {integrity: sha512-LtPXlBbRoc4Njl/oh1CeD/3jC+atytbnf/UqLoqTDcEYGUPj022+rvfkbDYieUrSj3CaV4yHDByPE+T2HwfsJg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.12.0
 
-  '@babel/plugin-transform-classes@7.28.0':
-    resolution: {integrity: sha512-IjM1IoJNw72AZFlj33Cu8X0q2XK/6AaVC3jQu+cgQ5lThWD5ajnuUAml80dqRmOhmPkTH8uAwnpMu9Rvj0LTRA==}
+  '@babel/plugin-transform-classes@7.28.4':
+    resolution: {integrity: sha512-cFOlhIYPBv/iBoc+KS3M6et2XPtbT2HiCRfBXWtfpc9OAyostldxIf9YAYB6ypURBBbx+Qv6nyrLzASfJe+hBA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4673,8 +5141,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-destructuring@7.28.0':
-    resolution: {integrity: sha512-v1nrSMBiKcodhsyJ4Gf+Z0U/yawmJDBOTpEB3mcQY52r9RIyPneGyAS/yM6seP/8I+mWI3elOMtT5dB8GJVs+A==}
+  '@babel/plugin-transform-destructuring@7.28.5':
+    resolution: {integrity: sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4703,8 +5171,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-exponentiation-operator@7.27.1':
-    resolution: {integrity: sha512-uspvXnhHvGKf2r4VVtBpeFnuDWsJLQ6MF6lGJLC89jBR1uoVeqM416AZtTuhTezOfgHicpJQmoD5YUakO/YmXQ==}
+  '@babel/plugin-transform-exponentiation-operator@7.28.5':
+    resolution: {integrity: sha512-D4WIMaFtwa2NizOp+dnoFjRez/ClKiC2BqqImwKd1X28nqBtZEyCYJ2ozQrrzlxAFrcrjxo39S6khe9RNDlGzw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4745,8 +5213,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-logical-assignment-operators@7.27.1':
-    resolution: {integrity: sha512-SJvDs5dXxiae4FbSL1aBJlG4wvl594N6YEVVn9e3JGulwioy6z3oPjx/sQBO3Y4NwUu5HNix6KJ3wBZoewcdbw==}
+  '@babel/plugin-transform-logical-assignment-operators@7.28.5':
+    resolution: {integrity: sha512-axUuqnUTBuXyHGcJEVVh9pORaN6wC5bYfE7FGzPiaWa3syib9m7g+/IT/4VgCOe2Upef43PHzeAvcrVek6QuuA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4769,8 +5237,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-systemjs@7.27.1':
-    resolution: {integrity: sha512-w5N1XzsRbc0PQStASMksmUeqECuzKuTJer7kFagK8AXgpCMkeDMO5S+aaFb7A51ZYDF7XI34qsTX+fkHiIm5yA==}
+  '@babel/plugin-transform-modules-systemjs@7.28.5':
+    resolution: {integrity: sha512-vn5Jma98LCOeBy/KpeQhXcV2WZgaRUtjwQmjoBuLNlOmkg0fB5pdvYVeWRYI69wWKwK2cD1QbMiUQnoujWvrew==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4805,8 +5273,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-object-rest-spread@7.28.0':
-    resolution: {integrity: sha512-9VNGikXxzu5eCiQjdE4IZn8sb9q7Xsk5EXLDBKUYg1e/Tve8/05+KJEtcxGxAgCY5t/BpKQM+JEL/yT4tvgiUA==}
+  '@babel/plugin-transform-object-rest-spread@7.28.4':
+    resolution: {integrity: sha512-373KA2HQzKhQCYiRVIRr+3MjpCObqzDlyrM6u4I201wL8Mp2wHf7uB8GhDwis03k2ti8Zr65Zyyqs1xOxUF/Ew==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4823,8 +5291,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-optional-chaining@7.27.1':
-    resolution: {integrity: sha512-BQmKPPIuc8EkZgNKsv0X4bPmOoayeu4F1YCwx2/CfmDSXDbp7GnzlUH+/ul5VGfRg1AoFPsrIThlEBj2xb4CAg==}
+  '@babel/plugin-transform-optional-chaining@7.28.5':
+    resolution: {integrity: sha512-N6fut9IZlPnjPwgiQkXNhb+cT8wQKFlJNqcZkWlcTqkcqx6/kU4ynGmLFoa4LViBSirn05YAwk+sQBbPfxtYzQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4877,8 +5345,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-regenerator@7.28.1':
-    resolution: {integrity: sha512-P0QiV/taaa3kXpLY+sXla5zec4E+4t4Aqc9ggHlfZ7a2cp8/x/Gv08jfwEtn9gnnYIMvHx6aoOZ8XJL8eU71Dg==}
+  '@babel/plugin-transform-regenerator@7.28.4':
+    resolution: {integrity: sha512-+ZEdQlBoRg9m2NnzvEeLgtvBMO4tkFBw5SQIUgLICgTrumLoU7lr+Oghi6km2PFj+dbUt2u1oby2w3BDO9YQnA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4925,8 +5393,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typescript@7.28.0':
-    resolution: {integrity: sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==}
+  '@babel/plugin-transform-typescript@7.28.5':
+    resolution: {integrity: sha512-x2Qa+v/CuEoX7Dr31iAfr0IhInrVOWZU/2vJMJ00FOR/2nM0BcBEclpaf9sWCDc+v5e9dMrhSH8/atq/kX7+bA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4978,43 +5446,49 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/preset-typescript@7.22.15':
+    resolution: {integrity: sha512-HblhNmh6yM+cU4VwbBRpxFhxsTdfS1zsvH9W+gEjD0ARV9+8B4sNfpI6GuhePti84nuvhiwKS539jKPFHskA9A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/preset-typescript@7.27.1':
     resolution: {integrity: sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/register@7.27.1':
-    resolution: {integrity: sha512-K13lQpoV54LATKkzBpBAEu1GGSIRzxR9f4IN4V8DCDgiUMo2UDGagEZr3lPeVNJPLkWUi5JE4hCHKneVTwQlYQ==}
+  '@babel/register@7.28.3':
+    resolution: {integrity: sha512-CieDOtd8u208eI49bYl4z1J22ySFw87IGwE+IswFEExH7e3rLgKb0WNQeumnacQ1+VoDJLYI5QFA3AJZuyZQfA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/runtime-corejs3@7.28.2':
-    resolution: {integrity: sha512-FVFaVs2/dZgD3Y9ZD+AKNKjyGKzwu0C54laAXWUXgLcVXcCX6YZ6GhK2cp7FogSN2OA0Fu+QT8dP3FUdo9ShSQ==}
+  '@babel/runtime-corejs3@7.28.4':
+    resolution: {integrity: sha512-h7iEYiW4HebClDEhtvFObtPmIvrd1SSfpI9EhOeKk4CtIK/ngBWFpuhCzhdmRKtg71ylcue+9I6dv54XYO1epQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/runtime@7.28.2':
-    resolution: {integrity: sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==}
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.28.0':
-    resolution: {integrity: sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==}
+  '@babel/traverse@7.28.5':
+    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.28.2':
-    resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
+  '@babel/types@7.28.5':
+    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
   '@base2/pretty-print-object@1.0.1':
     resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==}
 
-  '@bazel/runfiles@6.3.1':
-    resolution: {integrity: sha512-1uLNT5NZsUVIGS4syuHwTzZ8HycMPyr6POA3FCE4GbMtc4rhoJk8aZKtNIRthJYfL+iioppi+rTfH3olMPr9nA==}
+  '@bazel/runfiles@6.5.0':
+    resolution: {integrity: sha512-RzahvqTkfpY2jsDxo8YItPX+/iZ6hbiikw1YhE0bA9EKBR5Og8Pa6FHn9PO9M0zaXRVsr0GFQLKbB/0rzy9SzA==}
 
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
@@ -5076,26 +5550,104 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@cacheable/memoize@2.0.3':
+    resolution: {integrity: sha512-hl9wfQgpiydhQEIv7fkjEzTGE+tcosCXLKFDO707wYJ/78FVOlowb36djex5GdbSyeHnG62pomYLMuV/OT8Pbw==}
+
+  '@cacheable/memory@2.0.4':
+    resolution: {integrity: sha512-cCmJKCKlT1t7hNBI1+gFCwmKFd9I4pS3zqBeNGXTSODnpa0EeDmORHY8oEMTuozfdg3cgsVh8ojLaPYb6eC7Cg==}
+
+  '@cacheable/utils@2.2.0':
+    resolution: {integrity: sha512-7xaQayO3msdVcxXLYcLU5wDqJBNdQcPPPHr6mdTEIQI7N7TbtSVVTpWOTfjyhg0L6AQwQdq7miKdWtTDBoBldQ==}
+
   '@cnakazawa/watch@1.0.4':
     resolution: {integrity: sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==}
     engines: {node: '>=0.1.95'}
     hasBin: true
 
-  '@codemirror/autocomplete@6.18.6':
-    resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
+  '@codemirror/autocomplete@6.19.1':
+    resolution: {integrity: sha512-q6NenYkEy2fn9+JyjIxMWcNjzTL/IhwqfzOut1/G3PrIFkrbl4AL7Wkse5tLrQUUyqGoAKU5+Pi5jnnXxH5HGw==}
+
+  '@codemirror/commands@6.10.0':
+    resolution: {integrity: sha512-2xUIc5mHXQzT16JnyOFkh8PvfeXuIut3pslWGfsGOhxP/lpgRm9HOl/mpzLErgt5mXDovqA0d11P21gofRLb9w==}
 
-  '@codemirror/commands@6.8.1':
-    resolution: {integrity: sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==}
+  '@codemirror/lang-angular@0.1.4':
+    resolution: {integrity: sha512-oap+gsltb/fzdlTQWD6BFF4bSLKcDnlxDsLdePiJpCVNKWXSTAbiiQeYI3UmES+BLAdkmIC1WjyztC1pi/bX4g==}
+
+  '@codemirror/lang-cpp@6.0.3':
+    resolution: {integrity: sha512-URM26M3vunFFn9/sm6rzqrBzDgfWuDixp85uTY49wKudToc2jTHUrKIGGKs+QWND+YLofNNZpxcNGRynFJfvgA==}
+
+  '@codemirror/lang-css@6.3.1':
+    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
+
+  '@codemirror/lang-go@6.0.1':
+    resolution: {integrity: sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==}
+
+  '@codemirror/lang-html@6.4.11':
+    resolution: {integrity: sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==}
+
+  '@codemirror/lang-java@6.0.2':
+    resolution: {integrity: sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==}
+
+  '@codemirror/lang-javascript@6.2.4':
+    resolution: {integrity: sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==}
+
+  '@codemirror/lang-jinja@6.0.0':
+    resolution: {integrity: sha512-47MFmRcR8UAxd8DReVgj7WJN1WSAMT7OJnewwugZM4XiHWkOjgJQqvEM1NpMj9ALMPyxmlziEI1opH9IaEvmaw==}
+
+  '@codemirror/lang-json@6.0.2':
+    resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
+
+  '@codemirror/lang-less@6.0.2':
+    resolution: {integrity: sha512-EYdQTG22V+KUUk8Qq582g7FMnCZeEHsyuOJisHRft/mQ+ZSZ2w51NupvDUHiqtsOy7It5cHLPGfHQLpMh9bqpQ==}
+
+  '@codemirror/lang-liquid@6.3.0':
+    resolution: {integrity: sha512-fY1YsUExcieXRTsCiwX/bQ9+PbCTA/Fumv7C7mTUZHoFkibfESnaXwpr2aKH6zZVwysEunsHHkaIpM/pl3xETQ==}
+
+  '@codemirror/lang-markdown@6.5.0':
+    resolution: {integrity: sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==}
+
+  '@codemirror/lang-php@6.0.2':
+    resolution: {integrity: sha512-ZKy2v1n8Fc8oEXj0Th0PUMXzQJ0AIR6TaZU+PbDHExFwdu+guzOA4jmCHS1Nz4vbFezwD7LyBdDnddSJeScMCA==}
+
+  '@codemirror/lang-python@6.2.1':
+    resolution: {integrity: sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==}
+
+  '@codemirror/lang-rust@6.0.2':
+    resolution: {integrity: sha512-EZaGjCUegtiU7kSMvOfEZpaCReowEf3yNidYu7+vfuGTm9ow4mthAparY5hisJqOHmJowVH3Upu+eJlUji6qqA==}
+
+  '@codemirror/lang-sass@6.0.2':
+    resolution: {integrity: sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==}
+
+  '@codemirror/lang-sql@6.10.0':
+    resolution: {integrity: sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==}
+
+  '@codemirror/lang-vue@0.1.3':
+    resolution: {integrity: sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==}
+
+  '@codemirror/lang-wast@6.0.2':
+    resolution: {integrity: sha512-Imi2KTpVGm7TKuUkqyJ5NRmeFWF7aMpNiwHnLQe0x9kmrxElndyH0K6H/gXtWwY6UshMRAhpENsgfpSwsgmC6Q==}
 
   '@codemirror/lang-xml@6.1.0':
     resolution: {integrity: sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==}
 
-  '@codemirror/language@6.11.2':
-    resolution: {integrity: sha512-p44TsNArL4IVXDTbapUmEkAlvWs2CFQbcfc0ymDsis1kH2wh0gcY96AS29c/vp2d0y2Tquk1EDSaawpzilUiAw==}
+  '@codemirror/lang-yaml@6.1.2':
+    resolution: {integrity: sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==}
+
+  '@codemirror/language-data@6.5.2':
+    resolution: {integrity: sha512-CPkWBKrNS8stYbEU5kwBwTf3JB1kghlbh4FSAwzGW2TEscdeHHH4FGysREW86Mqnj3Qn09s0/6Ea/TutmoTobg==}
+
+  '@codemirror/language@6.11.3':
+    resolution: {integrity: sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==}
+
+  '@codemirror/legacy-modes@6.5.2':
+    resolution: {integrity: sha512-/jJbwSTazlQEDOQw2FJ8LEEKVS72pU0lx6oM54kGpL8t/NJ2Jda3CZ4pcltiKTdqYSRk3ug1B3pil1gsjA6+8Q==}
 
   '@codemirror/lint@6.8.5':
     resolution: {integrity: sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==}
 
+  '@codemirror/merge@6.11.1':
+    resolution: {integrity: sha512-NleJ//mSmcal3jRdm9WwOVMUaJWvP2h69K96z3xTDJnde/nsMnLt9qfKUBkycWm5iO3/g4Zd69XTuTFErTZ72A==}
+
   '@codemirror/search@6.5.11':
     resolution: {integrity: sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==}
 
@@ -5105,8 +5657,20 @@ packages:
   '@codemirror/theme-one-dark@6.1.3':
     resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
 
-  '@codemirror/view@6.38.1':
-    resolution: {integrity: sha512-RmTOkE7hRU3OVREqFVITWHz6ocgBjv08GoePscAakgVQfciA3SGCEk7mb9IzwW61cKKmlTpHXG6DUE5Ubx+MGQ==}
+  '@codemirror/view@6.38.6':
+    resolution: {integrity: sha512-qiS0z1bKs5WOvHIAC0Cybmv4AJSkAXgX5aD6Mqd2epSLlVJsQl8NG23jCVouIgkh4All/mrbdsf2UOLFnJw0tw==}
+
+  '@codesandbox/nodebox@0.1.8':
+    resolution: {integrity: sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==}
+
+  '@codesandbox/sandpack-client@2.19.8':
+    resolution: {integrity: sha512-CMV4nr1zgKzVpx4I3FYvGRM5YT0VaQhALMW9vy4wZRhEyWAtJITQIqZzrTGWqB1JvV7V72dVEUCUPLfYz5hgJQ==}
+
+  '@codesandbox/sandpack-react@2.20.0':
+    resolution: {integrity: sha512-takd1YpW/PMQ6KPQfvseWLHWklJovGY8QYj8MtWnskGKbjOGJ6uZfyZbcJ6aCFLQMpNyjTqz9AKNbvhCOZ1TUQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+      react-dom: ^16.8.0 || ^17 || ^18 || ^19
 
   '@colors/colors@1.5.0':
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
@@ -5116,6 +5680,10 @@ packages:
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
 
+  '@cspotcode/source-map-support@0.8.1':
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+
   '@csstools/css-parser-algorithms@3.0.5':
     resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
     engines: {node: '>=18'}
@@ -5139,8 +5707,8 @@ packages:
     peerDependencies:
       postcss-selector-parser: ^7.0.0
 
-  '@dabh/diagnostics@2.0.3':
-    resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
+  '@dabh/diagnostics@2.0.8':
+    resolution: {integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==}
 
   '@date-io/core@3.2.0':
     resolution: {integrity: sha512-hqwXvY8/YBsT9RwQITG868ZNb1MVFFkF7W1Ecv4P472j/ZWa7EFcgSmxy8PUElNVZfvhdvfv+a8j6NWJqOX5mA==}
@@ -5161,8 +5729,8 @@ packages:
     resolution: {integrity: sha512-4B4OijXeVNOPZlYA2oEwWOTkzyltLao+xbotHQeqN++Rv27Y6s818+n2Qkp8q+Fxhn0t/5lA5X1Mxktud8eayQ==}
     engines: {node: '>=14.17.0'}
 
-  '@dual-bundle/import-meta-resolve@4.1.0':
-    resolution: {integrity: sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==}
+  '@dual-bundle/import-meta-resolve@4.2.1':
+    resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}
 
   '@emotion/babel-plugin@11.13.5':
     resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
@@ -5179,8 +5747,8 @@ packages:
   '@emotion/is-prop-valid@0.8.8':
     resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
 
-  '@emotion/is-prop-valid@1.3.1':
-    resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==}
+  '@emotion/is-prop-valid@1.4.0':
+    resolution: {integrity: sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==}
 
   '@emotion/memoize@0.7.4':
     resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
@@ -5227,170 +5795,170 @@ packages:
   '@emotion/weak-memoize@0.4.0':
     resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
 
-  '@esbuild/aix-ppc64@0.25.8':
-    resolution: {integrity: sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA==}
+  '@esbuild/aix-ppc64@0.25.12':
+    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.25.8':
-    resolution: {integrity: sha512-OD3p7LYzWpLhZEyATcTSJ67qB5D+20vbtr6vHlHWSQYhKtzUYrETuWThmzFpZtFsBIxRvhO07+UgVA9m0i/O1w==}
+  '@esbuild/android-arm64@0.25.12':
+    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.25.8':
-    resolution: {integrity: sha512-RONsAvGCz5oWyePVnLdZY/HHwA++nxYWIX1atInlaW6SEkwq6XkP3+cb825EUcRs5Vss/lGh/2YxAb5xqc07Uw==}
+  '@esbuild/android-arm@0.25.12':
+    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.25.8':
-    resolution: {integrity: sha512-yJAVPklM5+4+9dTeKwHOaA+LQkmrKFX96BM0A/2zQrbS6ENCmxc4OVoBs5dPkCCak2roAD+jKCdnmOqKszPkjA==}
+  '@esbuild/android-x64@0.25.12':
+    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.25.8':
-    resolution: {integrity: sha512-Jw0mxgIaYX6R8ODrdkLLPwBqHTtYHJSmzzd+QeytSugzQ0Vg4c5rDky5VgkoowbZQahCbsv1rT1KW72MPIkevw==}
+  '@esbuild/darwin-arm64@0.25.12':
+    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.25.8':
-    resolution: {integrity: sha512-Vh2gLxxHnuoQ+GjPNvDSDRpoBCUzY4Pu0kBqMBDlK4fuWbKgGtmDIeEC081xi26PPjn+1tct+Bh8FjyLlw1Zlg==}
+  '@esbuild/darwin-x64@0.25.12':
+    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.25.8':
-    resolution: {integrity: sha512-YPJ7hDQ9DnNe5vxOm6jaie9QsTwcKedPvizTVlqWG9GBSq+BuyWEDazlGaDTC5NGU4QJd666V0yqCBL2oWKPfA==}
+  '@esbuild/freebsd-arm64@0.25.12':
+    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.25.8':
-    resolution: {integrity: sha512-MmaEXxQRdXNFsRN/KcIimLnSJrk2r5H8v+WVafRWz5xdSVmWLoITZQXcgehI2ZE6gioE6HirAEToM/RvFBeuhw==}
+  '@esbuild/freebsd-x64@0.25.12':
+    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.25.8':
-    resolution: {integrity: sha512-WIgg00ARWv/uYLU7lsuDK00d/hHSfES5BzdWAdAig1ioV5kaFNrtK8EqGcUBJhYqotlUByUKz5Qo6u8tt7iD/w==}
+  '@esbuild/linux-arm64@0.25.12':
+    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.25.8':
-    resolution: {integrity: sha512-FuzEP9BixzZohl1kLf76KEVOsxtIBFwCaLupVuk4eFVnOZfU+Wsn+x5Ryam7nILV2pkq2TqQM9EZPsOBuMC+kg==}
+  '@esbuild/linux-arm@0.25.12':
+    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.25.8':
-    resolution: {integrity: sha512-A1D9YzRX1i+1AJZuFFUMP1E9fMaYY+GnSQil9Tlw05utlE86EKTUA7RjwHDkEitmLYiFsRd9HwKBPEftNdBfjg==}
+  '@esbuild/linux-ia32@0.25.12':
+    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.25.8':
-    resolution: {integrity: sha512-O7k1J/dwHkY1RMVvglFHl1HzutGEFFZ3kNiDMSOyUrB7WcoHGf96Sh+64nTRT26l3GMbCW01Ekh/ThKM5iI7hQ==}
+  '@esbuild/linux-loong64@0.25.12':
+    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.25.8':
-    resolution: {integrity: sha512-uv+dqfRazte3BzfMp8PAQXmdGHQt2oC/y2ovwpTteqrMx2lwaksiFZ/bdkXJC19ttTvNXBuWH53zy/aTj1FgGw==}
+  '@esbuild/linux-mips64el@0.25.12':
+    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.25.8':
-    resolution: {integrity: sha512-GyG0KcMi1GBavP5JgAkkstMGyMholMDybAf8wF5A70CALlDM2p/f7YFE7H92eDeH/VBtFJA5MT4nRPDGg4JuzQ==}
+  '@esbuild/linux-ppc64@0.25.12':
+    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.25.8':
-    resolution: {integrity: sha512-rAqDYFv3yzMrq7GIcen3XP7TUEG/4LK86LUPMIz6RT8A6pRIDn0sDcvjudVZBiiTcZCY9y2SgYX2lgK3AF+1eg==}
+  '@esbuild/linux-riscv64@0.25.12':
+    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.25.8':
-    resolution: {integrity: sha512-Xutvh6VjlbcHpsIIbwY8GVRbwoviWT19tFhgdA7DlenLGC/mbc3lBoVb7jxj9Z+eyGqvcnSyIltYUrkKzWqSvg==}
+  '@esbuild/linux-s390x@0.25.12':
+    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.25.8':
-    resolution: {integrity: sha512-ASFQhgY4ElXh3nDcOMTkQero4b1lgubskNlhIfJrsH5OKZXDpUAKBlNS0Kx81jwOBp+HCeZqmoJuihTv57/jvQ==}
+  '@esbuild/linux-x64@0.25.12':
+    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-arm64@0.25.8':
-    resolution: {integrity: sha512-d1KfruIeohqAi6SA+gENMuObDbEjn22olAR7egqnkCD9DGBG0wsEARotkLgXDu6c4ncgWTZJtN5vcgxzWRMzcw==}
+  '@esbuild/netbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.25.8':
-    resolution: {integrity: sha512-nVDCkrvx2ua+XQNyfrujIG38+YGyuy2Ru9kKVNyh5jAys6n+l44tTtToqHjino2My8VAY6Lw9H7RI73XFi66Cg==}
+  '@esbuild/netbsd-x64@0.25.12':
+    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-arm64@0.25.8':
-    resolution: {integrity: sha512-j8HgrDuSJFAujkivSMSfPQSAa5Fxbvk4rgNAS5i3K+r8s1X0p1uOO2Hl2xNsGFppOeHOLAVgYwDVlmxhq5h+SQ==}
+  '@esbuild/openbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.25.8':
-    resolution: {integrity: sha512-1h8MUAwa0VhNCDp6Af0HToI2TJFAn1uqT9Al6DJVzdIBAd21m/G0Yfc77KDM3uF3T/YaOgQq3qTJHPbTOInaIQ==}
+  '@esbuild/openbsd-x64@0.25.12':
+    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openharmony-arm64@0.25.8':
-    resolution: {integrity: sha512-r2nVa5SIK9tSWd0kJd9HCffnDHKchTGikb//9c7HX+r+wHYCpQrSgxhlY6KWV1nFo1l4KFbsMlHk+L6fekLsUg==}
+  '@esbuild/openharmony-arm64@0.25.12':
+    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/sunos-x64@0.25.8':
-    resolution: {integrity: sha512-zUlaP2S12YhQ2UzUfcCuMDHQFJyKABkAjvO5YSndMiIkMimPmxA+BYSBikWgsRpvyxuRnow4nS5NPnf9fpv41w==}
+  '@esbuild/sunos-x64@0.25.12':
+    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.25.8':
-    resolution: {integrity: sha512-YEGFFWESlPva8hGL+zvj2z/SaK+pH0SwOM0Nc/d+rVnW7GSTFlLBGzZkuSU9kFIGIo8q9X3ucpZhu8PDN5A2sQ==}
+  '@esbuild/win32-arm64@0.25.12':
+    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.25.8':
-    resolution: {integrity: sha512-hiGgGC6KZ5LZz58OL/+qVVoZiuZlUYlYHNAmczOm7bs2oE1XriPFi5ZHHrS8ACpV5EjySrnoCKmcbQMN+ojnHg==}
+  '@esbuild/win32-ia32@0.25.12':
+    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.25.8':
-    resolution: {integrity: sha512-cn3Yr7+OaaZq1c+2pe+8yxC8E144SReCQjN6/2ynubzYjvyqZjTXfQJpAcQpsdJq3My7XADANiYGHoFC69pLQw==}
+  '@esbuild/win32-x64@0.25.12':
+    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.7.0':
-    resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
+  '@eslint-community/eslint-utils@4.9.0':
+    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.12.1':
-    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
   '@eslint/config-array@0.20.1':
@@ -5409,8 +5977,8 @@ packages:
     resolution: {integrity: sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.15.1':
-    resolution: {integrity: sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==}
+  '@eslint/core@0.15.2':
+    resolution: {integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/eslintrc@2.1.4':
@@ -5433,12 +6001,12 @@ packages:
     resolution: {integrity: sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/object-schema@2.1.6':
-    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.3.4':
-    resolution: {integrity: sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==}
+  '@eslint/plugin-kit@0.3.5':
+    resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@fal-works/esbuild-plugin-global-externals@2.1.2':
@@ -5447,11 +6015,11 @@ packages:
   '@floating-ui/core@1.7.3':
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
 
-  '@floating-ui/dom@1.7.3':
-    resolution: {integrity: sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==}
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
 
-  '@floating-ui/react-dom@2.1.5':
-    resolution: {integrity: sha512-HDO/1/1oH9fjj4eLgegrlH3dklZpHtUYYFiVwMUwfGvk9jWDRWqkklA2/NFScknrcNSspbV868WjXORvreDX+Q==}
+  '@floating-ui/react-dom@2.1.6':
+    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -5465,23 +6033,23 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
-  '@formatjs/ecma402-abstract@2.3.4':
-    resolution: {integrity: sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==}
+  '@formatjs/ecma402-abstract@2.3.6':
+    resolution: {integrity: sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==}
 
   '@formatjs/fast-memoize@2.2.7':
     resolution: {integrity: sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==}
 
-  '@formatjs/icu-messageformat-parser@2.11.2':
-    resolution: {integrity: sha512-AfiMi5NOSo2TQImsYAg8UYddsNJ/vUEv/HaNqiFjnI3ZFfWihUtD5QtuX6kHl8+H+d3qvnE/3HZrfzgdWpsLNA==}
+  '@formatjs/icu-messageformat-parser@2.11.4':
+    resolution: {integrity: sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==}
 
-  '@formatjs/icu-skeleton-parser@1.8.14':
-    resolution: {integrity: sha512-i4q4V4qslThK4Ig8SxyD76cp3+QJ3sAqr7f6q9VVfeGtxG9OhiAk3y9XF6Q41OymsKzsGQ6OQQoJNY4/lI8TcQ==}
+  '@formatjs/icu-skeleton-parser@1.8.16':
+    resolution: {integrity: sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==}
 
-  '@formatjs/intl-localematcher@0.6.1':
-    resolution: {integrity: sha512-ePEgLgVCqi2BBFnTMWPfIghu6FkbZnnBVhO2sSxvLfrdFw7wCHAHiDoM2h4NRgjbaY7+B7HgOLZGkK187pZTZg==}
+  '@formatjs/intl-localematcher@0.6.2':
+    resolution: {integrity: sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==}
 
-  '@formatjs/intl@3.1.6':
-    resolution: {integrity: sha512-tDkXnA4qpIFcDWac8CyVJq6oW8DR7W44QDUBsfXWIIJD/FYYen0QoH46W7XsVMFfPOVKkvbufjboZrrWbEfmww==}
+  '@formatjs/intl@3.1.8':
+    resolution: {integrity: sha512-LWXgwI5zTMatvR8w8kCNh/priDTOF/ZssokMBHJ7ZWXFoYLVOYo0EJERD9Eajv+xsfQO1QkuAt77KWQ1OI4mOQ==}
     peerDependencies:
       typescript: ^5.6.0
     peerDependenciesMeta:
@@ -5494,6 +6062,9 @@ packages:
   '@gar/promisify@1.1.3':
     resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
 
+  '@github/markdown-toolbar-element@2.2.3':
+    resolution: {integrity: sha512-AlquKGee+IWiAMYVB0xyHFZRMnu4n3X4HTvJHu79GiVJ1ojTukCWyxMlF5NMsecoLcBKsuBhx3QPv2vkE/zQ0A==}
+
   '@graphiql/react@0.26.2':
     resolution: {integrity: sha512-aO4GWf/kJmqrjO+PORT/NPxwGvPGlg+mwye1v8xAlf8Q9j7P0hVtVBawYaSLUCCfJ/QnH7JAP+0VRamyooZZCw==}
     peerDependencies:
@@ -5523,8 +6094,8 @@ packages:
       react: ^16 || ^17 || ^18
       react-dom: ^16 || ^17 || ^18
 
-  '@headlessui/react@2.2.7':
-    resolution: {integrity: sha512-WKdTymY8Y49H8/gUc/lIyYK1M+/6dq0Iywh4zTZVAaiTDprRfioxSgD0wnXTQTBpjpGJuTL1NO/mqEvc//5SSg==}
+  '@headlessui/react@2.2.9':
+    resolution: {integrity: sha512-Mb+Un58gwBn0/yWZfyrCh0TJyurtT+dETj7YHleylHk5od3dv2XqETPGWMyQ5/7sYN7oWdyM1u9MvC0OC8UmzQ==}
     engines: {node: '>=10'}
     peerDependencies:
       react: ^18 || ^19 || ^19.0.0-rc
@@ -5535,6 +6106,11 @@ packages:
     peerDependencies:
       react-hook-form: ^7.0.0
 
+  '@hookform/resolvers@3.3.4':
+    resolution: {integrity: sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
   '@hookform/resolvers@5.0.1':
     resolution: {integrity: sha512-u/+Jp83luQNx9AdyW2fIPGY6Y7NG68eN2ZW8FOJYL+M0i4s49+refdJdOp/A9n9HFQtQs3HIDHQvX3ZET2o7YA==}
     peerDependencies:
@@ -5549,8 +6125,8 @@ packages:
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
 
-  '@humanfs/node@0.16.6':
-    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
     engines: {node: '>=18.18.0'}
 
   '@humanwhocodes/config-array@0.13.0':
@@ -5566,10 +6142,6 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
-  '@humanwhocodes/retry@0.3.1':
-    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
-    engines: {node: '>=18.18'}
-
   '@humanwhocodes/retry@0.4.3':
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
@@ -5724,21 +6296,27 @@ packages:
       typescript:
         optional: true
 
-  '@jridgewell/gen-mapping@0.3.12':
-    resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
 
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/source-map@0.3.10':
-    resolution: {integrity: sha512-0pPkgz9dY+bijgistcTTJ5mR+ocqRXLuhXHYdzoMmmoJ2C9S46RCm2GMUbatPEUK9Yjy26IrAy8D/M00lLkv+Q==}
+  '@jridgewell/source-map@0.3.11':
+    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
 
-  '@jridgewell/sourcemap-codec@1.5.4':
-    resolution: {integrity: sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==}
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  '@jridgewell/trace-mapping@0.3.29':
-    resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@jridgewell/trace-mapping@0.3.9':
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
   '@jsdevtools/ono@7.1.3':
     resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
@@ -5749,8 +6327,8 @@ packages:
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/buffers@1.0.0':
-    resolution: {integrity: sha512-NDigYR3PHqCnQLXYyoLbnEdzMMvzeiCWo1KOut7Q0CoIqg9tUAPKJ1iq/2nFhc5kZtexzutNY0LFjdwWL3Dw3Q==}
+  '@jsonjoy.com/buffers@1.2.1':
+    resolution: {integrity: sha512-12cdlDwX4RUM3QxmUbVJWqZ/mrK6dFQH4Zxq6+r1YXKXYBNgZXndx2qbCJwh3+WWkCSn67IjnlG3XYTvmvYtgA==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
@@ -5761,14 +6339,14 @@ packages:
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/json-pack@1.8.0':
-    resolution: {integrity: sha512-paJGjyBTRzfgkqhIyer992g21aSKuu9h//zGS7aqm795roD6VYFf6iU9NYua1Bndmh/NRPkjtm9+hEPkK0yZSw==}
+  '@jsonjoy.com/json-pack@1.21.0':
+    resolution: {integrity: sha512-+AKG+R2cfZMShzrF2uQw34v3zbeDYUqnQ+jg7ORic3BGtfw9p/+N6RJbq/kkV8JmYZaINknaEQ2m0/f693ZPpg==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/json-pointer@1.0.1':
-    resolution: {integrity: sha512-tJpwQfuBuxqZlyoJOSZcqf7OUmiYQ6MiPNmOv4KbZdXE/DdvBSSAwhos0zIlJU/AXxC8XpuO8p08bh2fIl+RKA==}
+  '@jsonjoy.com/json-pointer@1.0.2':
+    resolution: {integrity: sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
@@ -5782,24 +6360,140 @@ packages:
   '@juggle/resize-observer@3.4.0':
     resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
 
-  '@keyv/serialize@1.1.0':
-    resolution: {integrity: sha512-RlDgexML7Z63Q8BSaqhXdCYNBy/JQnqYIwxofUrNLGCblOMHp+xux2Q8nLMLlPpgHQPoU0Do8Z6btCpRBEqZ8g==}
+  '@keyv/bigmap@1.1.0':
+    resolution: {integrity: sha512-MX7XIUNwVRK+hjZcAbNJ0Z8DREo+Weu9vinBOjGU1thEi9F6vPhICzBbk4CCf3eEefKRz7n6TfZXwUFZTSgj8Q==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      keyv: ^5.5.3
+
+  '@keyv/serialize@1.1.1':
+    resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
 
   '@leichtgewicht/ip-codec@2.0.5':
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
 
-  '@lezer/common@1.2.3':
-    resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
+  '@lexical/clipboard@0.17.1':
+    resolution: {integrity: sha512-OVqnEfWX8XN5xxuMPo6BfgGKHREbz++D5V5ISOiml0Z8fV/TQkdgwqbBJcUdJHGRHWSUwdK7CWGs/VALvVvZyw==}
+
+  '@lexical/code@0.17.1':
+    resolution: {integrity: sha512-ZspfTm6g6dN3nAb4G5bPp3SqxzdkB/bjGfa0uRKMU6/eBKtrMUgZsGxt0a8JRZ1eq2TZrQhx+l1ceRoLXii/bQ==}
+
+  '@lexical/devtools-core@0.17.1':
+    resolution: {integrity: sha512-SzL1EX9Rt5GptIo87t6nDxAc9TtYtl6DyAPNz/sCltspdd69KQgs23sTRa26/tkNFCS1jziRN7vpN3mlnmm5wA==}
+    peerDependencies:
+      react: '>=17.x'
+      react-dom: '>=17.x'
+
+  '@lexical/dragon@0.17.1':
+    resolution: {integrity: sha512-lhBRKP7RlhiVCLtF0qiNqmMhEO6cQB43sMe7d4bvuY1G2++oKY/XAJPg6QJZdXRrCGRQ6vZ26QRNhRPmCxL5Ng==}
+
+  '@lexical/hashtag@0.17.1':
+    resolution: {integrity: sha512-XtP0BI8vEewAe7tzq9MC49UPUvuChuNJI/jqFp+ezZlt/RUq0BClQCOPuSlrTJhluvE2rWnUnOnVMk8ILRvggQ==}
+
+  '@lexical/history@0.17.1':
+    resolution: {integrity: sha512-OU/ohajz4FXchUhghsWC7xeBPypFe50FCm5OePwo767G7P233IztgRKIng2pTT4zhCPW7S6Mfl53JoFHKehpWA==}
+
+  '@lexical/html@0.17.1':
+    resolution: {integrity: sha512-yGG+K2DXl7Wn2DpNuZ0Y3uCHJgfHkJN3/MmnFb4jLnH1FoJJiuy7WJb/BRRh9H+6xBJ9v70iv+kttDJ0u1xp5w==}
+
+  '@lexical/link@0.17.1':
+    resolution: {integrity: sha512-qFJEKBesZAtR8kfJfIVXRFXVw6dwcpmGCW7duJbtBRjdLjralOxrlVKyFhW9PEXGhi4Mdq2Ux16YnnDncpORdQ==}
+
+  '@lexical/list@0.17.1':
+    resolution: {integrity: sha512-k9ZnmQuBvW+xVUtWJZwoGtiVG2cy+hxzkLGU4jTq1sqxRIoSeGcjvhFAK8JSEj4i21SgkB1FmkWXoYK5kbwtRA==}
+
+  '@lexical/mark@0.17.1':
+    resolution: {integrity: sha512-V82SSRjvygmV+ZMwVpy5gwgr2ZDrJpl3TvEDO+G5I4SDSjbgvua8hO4dKryqiDVlooxQq9dsou0GrZ9Qtm6rYg==}
+
+  '@lexical/markdown@0.17.1':
+    resolution: {integrity: sha512-uexR9snyT54jfQTrbr/GZAtzX+8Oyykr4p1HS0vCVL1KU5MDuP2PoyFfOv3rcfB2TASc+aYiINhU2gSXzwCHNg==}
+
+  '@lexical/offset@0.17.1':
+    resolution: {integrity: sha512-fX0ZSIFWwUKAjxf6l21vyXFozJGExKWyWxA+EMuOloNAGotHnAInxep0Mt8t/xcvHs7luuyQUxEPw7YrTJP7aw==}
+
+  '@lexical/overflow@0.17.1':
+    resolution: {integrity: sha512-oElVDq486R3rO2+Zz0EllXJGpW3tN0tfcH+joZ5h36+URKuNeKddqkJuDRvgSLOr9l8Jhtv3+/YKduPJVKMz6w==}
+
+  '@lexical/plain-text@0.17.1':
+    resolution: {integrity: sha512-CSvi4j1a4ame0OAvOKUCCmn2XrNsWcST4lExGTa9Ei/VIh8IZ+a97h4Uby8T3lqOp10x+oiizYWzY30pb9QaBg==}
+
+  '@lexical/react@0.17.1':
+    resolution: {integrity: sha512-DI4k25tO0E1WyozrjaLgKMOmLjOB7+39MT4eZN9brPlU7g+w0wzdGbTZUPgPmFGIKPK+MSLybCwAJCK97j8HzQ==}
+    peerDependencies:
+      react: '>=17.x'
+      react-dom: '>=17.x'
+
+  '@lexical/rich-text@0.17.1':
+    resolution: {integrity: sha512-T3kvj4P1OpedX9jvxN3WN8NP1Khol6mCW2ScFIRNRz2dsXgyN00thH1Q1J/uyu7aKyGS7rzcY0rb1Pz1qFufqQ==}
+
+  '@lexical/selection@0.17.1':
+    resolution: {integrity: sha512-qBKVn+lMV2YIoyRELNr1/QssXx/4c0id9NCB/BOuYlG8du5IjviVJquEF56NEv2t0GedDv4BpUwkhXT2QbNAxA==}
+
+  '@lexical/table@0.17.1':
+    resolution: {integrity: sha512-2fUYPmxhyuMQX3MRvSsNaxbgvwGNJpHaKx1Ldc+PT2MvDZ6ALZkfsxbi0do54Q3i7dOon8/avRp4TuVaCnqvoA==}
+
+  '@lexical/text@0.17.1':
+    resolution: {integrity: sha512-zD2pAGXaMfPpT8PeNrx3+n0+jGnQORHyn0NEBO+hnyacKfUq5z5sI6Gebsq5NwH789bRadmJM5LvX5w8fsuv6w==}
+
+  '@lexical/utils@0.17.1':
+    resolution: {integrity: sha512-jCQER5EsvhLNxKH3qgcpdWj/necUb82Xjp8qWQ3c0tyL07hIRm2tDRA/s9mQmvcP855HEZSmGVmR5SKtkcEAVg==}
+
+  '@lexical/yjs@0.17.1':
+    resolution: {integrity: sha512-9mn5PDtaH5uLMH6hQ59EAx5FkRzmJJFcVs3E6zSIbtgkG3UASR3CFEfgsLKTjl/GC5NnTGuMck+jXaupDVBhOg==}
+    peerDependencies:
+      yjs: '>=13.5.22'
+
+  '@lezer/common@1.3.0':
+    resolution: {integrity: sha512-L9X8uHCYU310o99L3/MpJKYxPzXPOS7S0NmBaM7UO/x2Kb2WbmMLSkfvdr1KxRIFYOpbY0Jhn7CfLSUDzL8arQ==}
 
-  '@lezer/highlight@1.2.1':
-    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+  '@lezer/cpp@1.1.3':
+    resolution: {integrity: sha512-ykYvuFQKGsRi6IcE+/hCSGUhb/I4WPjd3ELhEblm2wS2cOznDFzO+ubK2c+ioysOnlZ3EduV+MVQFCPzAIoY3w==}
 
-  '@lezer/lr@1.4.2':
-    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+  '@lezer/css@1.3.0':
+    resolution: {integrity: sha512-pBL7hup88KbI7hXnZV3PQsn43DHy6TWyzuyk2AO9UyoXcDltvIdqWKE1dLL/45JVZ+YZkHe1WVHqO6wugZZWcw==}
+
+  '@lezer/go@1.0.1':
+    resolution: {integrity: sha512-xToRsYxwsgJNHTgNdStpcvmbVuKxTapV0dM0wey1geMMRc9aggoVyKgzYp41D2/vVOx+Ii4hmE206kvxIXBVXQ==}
+
+  '@lezer/highlight@1.2.3':
+    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
+
+  '@lezer/html@1.3.12':
+    resolution: {integrity: sha512-RJ7eRWdaJe3bsiiLLHjCFT1JMk8m1YP9kaUbvu2rMLEoOnke9mcTVDyfOslsln0LtujdWespjJ39w6zo+RsQYw==}
+
+  '@lezer/java@1.1.3':
+    resolution: {integrity: sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==}
+
+  '@lezer/javascript@1.5.4':
+    resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
+
+  '@lezer/json@1.0.3':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
+  '@lezer/lr@1.4.3':
+    resolution: {integrity: sha512-yenN5SqAxAPv/qMnpWW0AT7l+SxVrgG+u0tNsRQWqbrz66HIl8DnEbBObvy21J5K7+I1v7gsAnlE2VQ5yYVSeA==}
+
+  '@lezer/markdown@1.6.0':
+    resolution: {integrity: sha512-AXb98u3M6BEzTnreBnGtQaF7xFTiMA92Dsy5tqEjpacbjRxDSFdN4bKJo9uvU4cEEOS7D2B9MT7kvDgOEIzJSw==}
+
+  '@lezer/php@1.0.5':
+    resolution: {integrity: sha512-W7asp9DhM6q0W6DYNwIkLSKOvxlXRrif+UXBMxzsJUuqmhE7oVU+gS3THO4S/Puh7Xzgm858UNaFi6dxTP8dJA==}
+
+  '@lezer/python@1.1.18':
+    resolution: {integrity: sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==}
+
+  '@lezer/rust@1.0.2':
+    resolution: {integrity: sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==}
+
+  '@lezer/sass@1.1.0':
+    resolution: {integrity: sha512-3mMGdCTUZ/84ArHOuXWQr37pnf7f+Nw9ycPUeKX+wu19b7pSMcZGLbaXwvD2APMBDOGxPmpK/O6S1v1EvLoqgQ==}
 
   '@lezer/xml@1.0.6':
     resolution: {integrity: sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==}
 
+  '@lezer/yaml@1.0.3':
+    resolution: {integrity: sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==}
+
   '@marijn/find-cluster-break@1.0.2':
     resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
 
@@ -5816,8 +6510,8 @@ packages:
     peerDependencies:
       react: '>=16'
 
-  '@mdx-js/react@3.1.0':
-    resolution: {integrity: sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==}
+  '@mdx-js/react@3.1.1':
+    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
     peerDependencies:
       '@types/react': '>=16'
       react: '>=16'
@@ -5825,32 +6519,46 @@ packages:
   '@mdx-js/util@1.6.22':
     resolution: {integrity: sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==}
 
-  '@microsoft/1ds-core-js@4.3.9':
-    resolution: {integrity: sha512-T8s5qROH7caBNiFrUpN8vgC6wg7QysVPryZKprgl3kLQQPpoMFM6ffIYvUWD74KM9fWWLU7vzFFNBWDBsrTyWg==}
+  '@mdxeditor/editor@3.14.0':
+    resolution: {integrity: sha512-5upWjI89i+UWhIMf6zu4jiiw1KvjAINVsXQcE4RbJ/zYDj/F2bamAAt35wW5Xrd9nMM8ogrwUS9OKnpFR2AeOA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: '>= 18 || >= 19'
+      react-dom: '>= 18 || >= 19'
 
-  '@microsoft/1ds-post-js@4.3.9':
-    resolution: {integrity: sha512-BvxI4CW8Ws+gfXKy+Y/9pmEXp88iU1GYVjkUfqXP7La59VHARTumlG5iIgMVvaifOrvSW7G6knvQM++0tEfMBQ==}
+  '@mdxeditor/gurx@1.2.4':
+    resolution: {integrity: sha512-9ZykIFYhKaXaaSPCs1cuI+FvYDegJjbKwmA4ASE/zY+hJY6EYqvoye4esiO85CjhOw9aoD/izD/CU78/egVqmg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: '>= 18 || >= 19'
+      react-dom: '>= 18 || >= 19'
 
-  '@microsoft/applicationinsights-channel-js@3.3.9':
-    resolution: {integrity: sha512-/yEgSe6vT2ycQJkXu6VF04TB5XBurk46ECV7uo6KkNhWyDEctAk1VDWB7EqXYdwLhKMbNOYX1pvz7fj43fGNqg==}
+  '@microsoft/1ds-core-js@4.3.10':
+    resolution: {integrity: sha512-5fSZmkGwWkH+mrIA5M1GYPZdPM+SjXwCCl2Am7VhFoVwOBJNhRnwvIpAdzw6sFjiebN/rz+/YH0NdxztGZSa9Q==}
+
+  '@microsoft/1ds-post-js@4.3.10':
+    resolution: {integrity: sha512-VSLjc9cT+Y+eTiSfYltJHJCejn8oYr0E6Pq2BMhOEO7F6IyLGYIxzKKvo78ze9x+iHX7KPTATcZ+PFgjGXuNqg==}
+
+  '@microsoft/applicationinsights-channel-js@3.3.10':
+    resolution: {integrity: sha512-iolFLz1ocWAzIQqHIEjjov3gNTPkgFQ4ArHnBcJEYoffOGWlJt6copaevS5YPI5rHzmbySsengZ8cLJJBBrXzQ==}
     peerDependencies:
       tslib: '>= 1.0.0'
 
-  '@microsoft/applicationinsights-common@3.3.9':
-    resolution: {integrity: sha512-IgruOuDBxmBK9jYo7SqLJG7Z9OwmAmlvHET49srpN6pqQlEjRpjD1nfA3Ps4RSEbF89a/ad2phQaBp8jvm122g==}
+  '@microsoft/applicationinsights-common@3.3.10':
+    resolution: {integrity: sha512-RVIenPIvNgZCbjJdALvLM4rNHgAFuHI7faFzHCgnI6S2WCUNGHeXlQTs9EUUrL+n2TPp9/cd0KKMILU5VVyYiA==}
     peerDependencies:
       tslib: '>= 1.0.0'
 
-  '@microsoft/applicationinsights-core-js@3.3.9':
-    resolution: {integrity: sha512-xliiE9H09xCycndlua4QjajN8q5k/ET6VCv+e0Jjodxr9+cmoOP/6QY9dun9ptokuwR8TK0qOaIJ8z4fgslVSA==}
+  '@microsoft/applicationinsights-core-js@3.3.10':
+    resolution: {integrity: sha512-5yKeyassZTq2l+SAO4npu6LPnbS++UD+M+Ghjm9uRzoBwD8tumFx0/F8AkSVqbniSREd+ztH/2q2foewa2RZyg==}
     peerDependencies:
       tslib: '>= 1.0.0'
 
   '@microsoft/applicationinsights-shims@3.0.1':
     resolution: {integrity: sha512-DKwboF47H1nb33rSUfjqI6ryX29v+2QWcTrRvcQDA32AZr5Ilkr7whOOSsD1aBzwqX0RJEIP1Z81jfE3NBm/Lg==}
 
-  '@microsoft/applicationinsights-web-basic@3.3.9':
-    resolution: {integrity: sha512-8tLaAgsCpWjoaxit546RqeuECnHQPBLnOZhzTYG76oPG1ku7dNXaRNieuZLbO+XmAtg/oxntKLAVoPND8NRgcA==}
+  '@microsoft/applicationinsights-web-basic@3.3.10':
+    resolution: {integrity: sha512-AZib5DAT3NU0VT0nLWEwXrnoMDDgZ/5S4dso01CNU5ELNxLdg+1fvchstlVdMy4FrAnxzs8Wf/GIQNFYOVgpAw==}
     peerDependencies:
       tslib: '>= 1.0.0'
 
@@ -5871,12 +6579,34 @@ packages:
   '@microsoft/fast-web-utilities@5.4.1':
     resolution: {integrity: sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==}
 
-  '@modelcontextprotocol/sdk@1.17.1':
-    resolution: {integrity: sha512-CPle1OQehbWqd25La9Ack5B07StKIxh4+Bf19qnpZKJC1oI22Y0czZHbifjw1UoczIfKBwBDAp/dFxvHG13B5A==}
+  '@modelcontextprotocol/inspector-cli@0.17.2':
+    resolution: {integrity: sha512-xXaqZYWJz77xvmfAVlYbvz2/xw9OaalFHq0n5A8PlmZvmhi6akQocIE7ZYaoEBpLbWRSwIZWfsidnfoKb6dO2A==}
+    hasBin: true
+
+  '@modelcontextprotocol/inspector-client@0.17.2':
+    resolution: {integrity: sha512-llC96yU8iMjG7ny2gpjhm+ARQqBRZWeKBCxW+nBErAE43jBqd5DhGuI2abrt499Gd3ByNOImz+Z5mb8YWjRiJA==}
+    hasBin: true
+
+  '@modelcontextprotocol/inspector-server@0.17.2':
+    resolution: {integrity: sha512-+logjB5XXK+8aE+eDl8cLnwY0UhOUh19vo6tg5rFVmLXNQPtxTFyWybcQfgP/cHp76+r5+EMxIpydDYEoasTvg==}
+    hasBin: true
+
+  '@modelcontextprotocol/inspector@0.17.2':
+    resolution: {integrity: sha512-ADWwZtbvecKCbLCR7L0Uaa2mPKFDJcTrc9xcE9pdN8gL/jFfzOMrgdNsKt+qBknzMeSQ6mJT+UguJbnQs8n13Q==}
+    engines: {node: '>=22.7.5'}
+    hasBin: true
+
+  '@modelcontextprotocol/sdk@1.21.0':
+    resolution: {integrity: sha512-YFBsXJMFCyI1zP98u7gezMFKX4lgu/XpoZJk7ufI6UlFKXLj2hAMUuRlQX/nrmIPOmhRrG6tw2OQ2ZA/ZlXYpQ==}
     engines: {node: '>=18'}
+    peerDependencies:
+      '@cfworker/json-schema': ^4.1.1
+    peerDependenciesMeta:
+      '@cfworker/json-schema':
+        optional: true
 
-  '@monaco-editor/loader@1.5.0':
-    resolution: {integrity: sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==}
+  '@monaco-editor/loader@1.6.1':
+    resolution: {integrity: sha512-w3tEnj9HYEC73wtjdpR089AqkUPskFRcdkxsiSFt3SoUc3OHpmu+leP94CXBm4mHfefmhsdfI0ZQu6qJ0wgtPg==}
 
   '@monaco-editor/react@4.7.0':
     resolution: {integrity: sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==}
@@ -5969,6 +6699,9 @@ packages:
     resolution: {integrity: sha512-T8TbSnGsxo6TDBJx/Sgv/BlVJL3tshxZP7Aq5R1mSnM5OcHY2dQaxLMu2+E8u3gN0MLOzdjurqN4ZRVuzQycOQ==}
     engines: {node: '>=8.0'}
 
+  '@open-draft/deferred-promise@2.2.0':
+    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
+
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
@@ -6170,14 +6903,50 @@ packages:
   '@projectstorm/react-diagrams@7.0.4':
     resolution: {integrity: sha512-GJLpo3zhJzjcmx3PfztNDTS7jpePj9TPjXV2CgJmCDZAPHDU8q/f4AyXoJfqvoWlmVnjrzQgtcOU2KbUlNu3dQ==}
 
+  '@protobufjs/aspromise@1.1.2':
+    resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
+
+  '@protobufjs/base64@1.1.2':
+    resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
+
+  '@protobufjs/codegen@2.0.4':
+    resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
+
+  '@protobufjs/eventemitter@1.1.0':
+    resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
+
+  '@protobufjs/fetch@1.1.0':
+    resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
+
+  '@protobufjs/float@1.0.2':
+    resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
+
+  '@protobufjs/inquire@1.1.0':
+    resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
+
+  '@protobufjs/path@1.1.2':
+    resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
+
+  '@protobufjs/pool@1.1.0':
+    resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
+
+  '@protobufjs/utf8@1.1.0':
+    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
+
+  '@radix-ui/colors@3.0.0':
+    resolution: {integrity: sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==}
+
   '@radix-ui/number@1.0.1':
     resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
   '@radix-ui/primitive@1.0.1':
     resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
 
-  '@radix-ui/primitive@1.1.2':
-    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
 
   '@radix-ui/react-arrow@1.0.3':
     resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
@@ -6205,6 +6974,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-checkbox@1.3.3':
+    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.0.3':
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies:
@@ -6267,8 +7049,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-dialog@1.1.14':
-    resolution: {integrity: sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==}
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6311,8 +7093,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dismissable-layer@1.1.10':
-    resolution: {integrity: sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==}
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6324,8 +7106,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dropdown-menu@2.1.15':
-    resolution: {integrity: sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==}
+  '@radix-ui/react-dropdown-menu@2.1.16':
+    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6346,8 +7128,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-focus-guards@1.1.2':
-    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6381,6 +7163,11 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-icons@1.3.2':
+    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
+    peerDependencies:
+      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
+
   '@radix-ui/react-id@1.0.1':
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:
@@ -6399,8 +7186,34 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-menu@2.1.15':
-    resolution: {integrity: sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==}
+  '@radix-ui/react-label@2.1.7':
+    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.16':
+    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.15':
+    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6425,8 +7238,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popper@1.2.7':
-    resolution: {integrity: sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==}
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6464,8 +7277,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-presence@1.1.4':
-    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6503,8 +7316,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-roving-focus@1.1.10':
-    resolution: {integrity: sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==}
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6529,6 +7342,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-separator@1.1.7':
     resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
     peerDependencies:
@@ -6560,8 +7386,47 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-toggle-group@1.1.10':
-    resolution: {integrity: sha512-kiU694Km3WFLTC75DdqgM/3Jauf3rD9wxeS9XtyWFKsBUeZA337lC+6uUazT7I1DhanZ5gyD5Stf8uf2dbQxOQ==}
+  '@radix-ui/react-switch@1.2.6':
+    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.13':
+    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.15':
+    resolution: {integrity: sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle-group@1.1.11':
+    resolution: {integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6573,8 +7438,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toggle@1.1.9':
-    resolution: {integrity: sha512-ZoFkBBz9zv9GWer7wIjvdRxmh2wyc2oKWw6C6CseWd6/yq1DK/l5lJ+wnsmFwJZbBYqr02mrf8A2q/CVCuM3ZA==}
+  '@radix-ui/react-toggle@1.1.10':
+    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6586,8 +7451,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toolbar@1.1.10':
-    resolution: {integrity: sha512-jiwQsduEL++M4YBIurjSa+voD86OIytCod0/dbIxFZDLD8NfO1//keXYMfsW8BPcfqwoNjt+y06XcJqAb4KR7A==}
+  '@radix-ui/react-toolbar@1.1.11':
+    resolution: {integrity: sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6599,8 +7464,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-tooltip@1.2.7':
-    resolution: {integrity: sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==}
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6702,6 +7567,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-rect@1.0.1':
     resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
     peerDependencies:
@@ -6770,14 +7644,14 @@ packages:
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
-  '@react-aria/focus@3.21.0':
-    resolution: {integrity: sha512-7NEGtTPsBy52EZ/ToVKCu0HSelE3kq9qeis+2eEq90XSuJOMaDHUQrA7RC2Y89tlEwQB31bud/kKRi9Qme1dkA==}
+  '@react-aria/focus@3.21.2':
+    resolution: {integrity: sha512-JWaCR7wJVggj+ldmM/cb/DXFg47CXR55lznJhZBh4XVqJjMKwaOOqpT5vNN7kpC1wUpXicGNuDnJDN1S/+6dhQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
       react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@react-aria/interactions@3.25.4':
-    resolution: {integrity: sha512-HBQMxgUPHrW8V63u9uGgBymkMfj6vdWbB0GgUJY49K9mBKMsypcHeWkWM6+bF7kxRO728/IK8bWDV6whDbqjHg==}
+  '@react-aria/interactions@3.25.6':
+    resolution: {integrity: sha512-5UgwZmohpixwNMVkMvn9K1ceJe6TzlRlAfuYoQDUuOkk62/JVJNDLAPKIf5YMRc7d2B0rmfgaZLMtbREb0Zvkw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
       react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
@@ -6788,8 +7662,8 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@react-aria/utils@3.30.0':
-    resolution: {integrity: sha512-ydA6y5G1+gbem3Va2nczj/0G0W7/jUVo/cbN10WA5IizzWIwMP5qhFr7macgbKfHMkZ+YZC3oXnt2NNre5odKw==}
+  '@react-aria/utils@3.31.0':
+    resolution: {integrity: sha512-ABOzCsZrWzf78ysswmguJbx3McQUja7yeGj6/vZo4JVsZNlxAN+E9rs381ExBRI0KzVo6iBTeX5De8eMZPJXig==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
       react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
@@ -6803,6 +7677,16 @@ packages:
   '@react-dnd/shallowequal@4.0.2':
     resolution: {integrity: sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==}
 
+  '@react-hook/intersection-observer@3.1.2':
+    resolution: {integrity: sha512-mWU3BMkmmzyYMSuhO9wu3eJVP21N8TcgYm9bZnTrMwuM818bEk+0NRM3hP+c/TqA9Ln5C7qE53p1H0QMtzYdvQ==}
+    peerDependencies:
+      react: '>=16.8'
+
+  '@react-hook/passive-layout-effect@1.2.1':
+    resolution: {integrity: sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==}
+    peerDependencies:
+      react: '>=16.8'
+
   '@react-stately/flags@3.1.2':
     resolution: {integrity: sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==}
 
@@ -6811,19 +7695,19 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@react-types/shared@3.31.0':
-    resolution: {integrity: sha512-ua5U6V66gDcbLZe4P2QeyNgPp4YWD1ymGA6j3n+s8CGExtrCPe64v+g4mvpT8Bnb985R96e4zFT61+m0YCwqMg==}
+  '@react-types/shared@3.32.1':
+    resolution: {integrity: sha512-famxyD5emrGGpFuUlgOP6fVW2h/ZaF405G5KDi3zPHzyjAWys/8W6NAVJtNbkCkhedmvL0xOhvt8feGXyXaw5w==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@redhat-developer/locators@1.15.0':
-    resolution: {integrity: sha512-xxkCoCQsqiA7IVR5kdNfU3MnuT9QSYDeu0KXrwW59FMCcZpUftz6uiQkqgbB212ASlS3mxVhyYpqJan4zr+XtA==}
+  '@redhat-developer/locators@1.17.0':
+    resolution: {integrity: sha512-CPDrTJfrA5lxXPd64RHuntq+foRorMIOQAN0tlaQQD5wX0X2xlCOf324TVWS1hmTiYHtA8VfFTJNOjMQYvu0Mw==}
     peerDependencies:
       '@redhat-developer/page-objects': '>=1.0.0'
       selenium-webdriver: '>=4.6.1'
 
-  '@redhat-developer/page-objects@1.15.0':
-    resolution: {integrity: sha512-Mfr7rVcFB+J16VzLbbqLF9Yo1W7G2bgjkVv0vPUrlkz1dgYdAjZpaQpjs6dVlRO5Uopt11loYu4SS+wnxPopMw==}
+  '@redhat-developer/page-objects@1.17.0':
+    resolution: {integrity: sha512-KytdvW8iHyECmt7rLf/MWdrtHmUi/SIkgWowjscIx0+U6sgXW7hHZ/5/gWP5HGX0Q5K1AA67veC75x2eZosN2g==}
     peerDependencies:
       selenium-webdriver: '>=4.6.1'
       typescript: '>=4.6.2'
@@ -6845,8 +7729,8 @@ packages:
     peerDependencies:
       rollup: ^1.20.0||^2.0.0
 
-  '@rollup/plugin-commonjs@28.0.6':
-    resolution: {integrity: sha512-XSQB1K7FUU5QP+3lOQmVCE3I0FcbbNvmNT4VJSj93iUjayaARrTQeoRdiYQoftAJBLrR9t2agwAd3ekaTgHNlw==}
+  '@rollup/plugin-commonjs@28.0.9':
+    resolution: {integrity: sha512-PIR4/OHZ79romx0BVVll/PkwWpJ7e5lsqFa3gFfcrFPWwLXLV39JVUzQV9RKjWerE7B845Hqjj9VYlQeieZ2dA==}
     engines: {node: '>=16.0.0 || 14 >= 14.17'}
     peerDependencies:
       rollup: ^2.68.0||^3.0.0||^4.0.0
@@ -6868,8 +7752,8 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/plugin-node-resolve@16.0.1':
-    resolution: {integrity: sha512-tk5YCxJWIG81umIvNkSod2qK5KyQW19qcBF/B78n1bjtOON6gzKoVeSzAE8yHCZEDmqkHKkxplExA8KzdJLJpA==}
+  '@rollup/plugin-node-resolve@16.0.3':
+    resolution: {integrity: sha512-lUYM3UBGuM93CnMPG1YocWu7X802BrNF3jW2zny5gQyLQgRFJhV1Sq0Zi74+dh/6NBx1DxFC4b4GXg9wUCG5Qg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^2.78.0||^3.0.0||^4.0.0
@@ -6898,8 +7782,8 @@ packages:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
 
-  '@rollup/pluginutils@5.2.0':
-    resolution: {integrity: sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==}
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -6907,103 +7791,113 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.46.2':
-    resolution: {integrity: sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==}
+  '@rollup/rollup-android-arm-eabi@4.52.5':
+    resolution: {integrity: sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.46.2':
-    resolution: {integrity: sha512-nTeCWY83kN64oQ5MGz3CgtPx8NSOhC5lWtsjTs+8JAJNLcP3QbLCtDDgUKQc/Ro/frpMq4SHUaHN6AMltcEoLQ==}
+  '@rollup/rollup-android-arm64@4.52.5':
+    resolution: {integrity: sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.46.2':
-    resolution: {integrity: sha512-HV7bW2Fb/F5KPdM/9bApunQh68YVDU8sO8BvcW9OngQVN3HHHkw99wFupuUJfGR9pYLLAjcAOA6iO+evsbBaPQ==}
+  '@rollup/rollup-darwin-arm64@4.52.5':
+    resolution: {integrity: sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.46.2':
-    resolution: {integrity: sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==}
+  '@rollup/rollup-darwin-x64@4.52.5':
+    resolution: {integrity: sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.46.2':
-    resolution: {integrity: sha512-ZyrsG4TIT9xnOlLsSSi9w/X29tCbK1yegE49RYm3tu3wF1L/B6LVMqnEWyDB26d9Ecx9zrmXCiPmIabVuLmNSg==}
+  '@rollup/rollup-freebsd-arm64@4.52.5':
+    resolution: {integrity: sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.46.2':
-    resolution: {integrity: sha512-pCgHFoOECwVCJ5GFq8+gR8SBKnMO+xe5UEqbemxBpCKYQddRQMgomv1104RnLSg7nNvgKy05sLsY51+OVRyiVw==}
+  '@rollup/rollup-freebsd-x64@4.52.5':
+    resolution: {integrity: sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.46.2':
-    resolution: {integrity: sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
+    resolution: {integrity: sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.46.2':
-    resolution: {integrity: sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ==}
+  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
+    resolution: {integrity: sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.46.2':
-    resolution: {integrity: sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng==}
+  '@rollup/rollup-linux-arm64-gnu@4.52.5':
+    resolution: {integrity: sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.46.2':
-    resolution: {integrity: sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg==}
+  '@rollup/rollup-linux-arm64-musl@4.52.5':
+    resolution: {integrity: sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.46.2':
-    resolution: {integrity: sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA==}
+  '@rollup/rollup-linux-loong64-gnu@4.52.5':
+    resolution: {integrity: sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==}
     cpu: [loong64]
     os: [linux]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.46.2':
-    resolution: {integrity: sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw==}
+  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
+    resolution: {integrity: sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.46.2':
-    resolution: {integrity: sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ==}
+  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
+    resolution: {integrity: sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-musl@4.46.2':
-    resolution: {integrity: sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw==}
+  '@rollup/rollup-linux-riscv64-musl@4.52.5':
+    resolution: {integrity: sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.46.2':
-    resolution: {integrity: sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA==}
+  '@rollup/rollup-linux-s390x-gnu@4.52.5':
+    resolution: {integrity: sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.46.2':
-    resolution: {integrity: sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA==}
+  '@rollup/rollup-linux-x64-gnu@4.52.5':
+    resolution: {integrity: sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.46.2':
-    resolution: {integrity: sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA==}
+  '@rollup/rollup-linux-x64-musl@4.52.5':
+    resolution: {integrity: sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.46.2':
-    resolution: {integrity: sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g==}
+  '@rollup/rollup-openharmony-arm64@4.52.5':
+    resolution: {integrity: sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.52.5':
+    resolution: {integrity: sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.46.2':
-    resolution: {integrity: sha512-gBgaUDESVzMgWZhcyjfs9QFK16D8K6QZpwAaVNJxYDLHWayOta4ZMjGm/vsAEy3hvlS2GosVFlBlP9/Wb85DqQ==}
+  '@rollup/rollup-win32-ia32-msvc@4.52.5':
+    resolution: {integrity: sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.46.2':
-    resolution: {integrity: sha512-CvUo2ixeIQGtF6WvuB87XWqPQkoFAFqW+HUo/WzHwuHDvIwZCtjdWXoYCcr06iKGydiqTclC4jU/TNObC/xKZg==}
+  '@rollup/rollup-win32-x64-gnu@4.52.5':
+    resolution: {integrity: sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.52.5':
+    resolution: {integrity: sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==}
     cpu: [x64]
     os: [win32]
 
@@ -7086,14 +7980,18 @@ packages:
     resolution: {integrity: sha512-TV7t8GKYaJWsn00tFDqBw8+Uqmr8A0fRU1tvTQhyZzGv0sJCGRQL3JGMI3ucuKo3XIZdUP+Lx7/gh2t3lewy7g==}
     engines: {node: '>=14.16'}
 
-  '@sindresorhus/is@7.0.2':
-    resolution: {integrity: sha512-d9xRovfKNz1SKieM0qJdO+PQonjnnIfSNWfHYnBSJ9hkjm0ZPw6HlxscDXYstp3z+7V2GOFHc+J0CYrYTjqCJw==}
+  '@sindresorhus/is@7.1.1':
+    resolution: {integrity: sha512-rO92VvpgMc3kfiTjGT52LEtJ8Yc5kCWhZjLQ3LwlA4pSgPpQO7bVpYXParOD8Jwf+cVQECJo3yP/4I8aZtUQTQ==}
     engines: {node: '>=18'}
 
   '@sindresorhus/merge-streams@2.3.0':
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
     engines: {node: '>=18'}
 
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
   '@sinonjs/commons@1.8.6':
     resolution: {integrity: sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==}
 
@@ -7120,224 +8018,234 @@ packages:
     peerDependencies:
       size-limit: 11.2.0
 
-  '@smithy/abort-controller@4.0.5':
-    resolution: {integrity: sha512-jcrqdTQurIrBbUm4W2YdLVMQDoL0sA9DTxYd2s+R/y+2U9NLOP7Xf/YqfSg1FZhlZIYEnvk2mwbyvIfdLEPo8g==}
+  '@smithy/abort-controller@4.2.4':
+    resolution: {integrity: sha512-Z4DUr/AkgyFf1bOThW2HwzREagee0sB5ycl+hDiSZOfRLW8ZgrOjDi6g8mHH19yyU5E2A/64W3z6SMIf5XiUSQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/chunked-blob-reader-native@4.0.0':
-    resolution: {integrity: sha512-R9wM2yPmfEMsUmlMlIgSzOyICs0x9uu7UTHoccMyt7BWw8shcGM8HqB355+BZCPBcySvbTYMs62EgEQkNxz2ig==}
+  '@smithy/chunked-blob-reader-native@4.2.1':
+    resolution: {integrity: sha512-lX9Ay+6LisTfpLid2zZtIhSEjHMZoAR5hHCR4H7tBz/Zkfr5ea8RcQ7Tk4mi0P76p4cN+Btz16Ffno7YHpKXnQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/chunked-blob-reader@5.0.0':
-    resolution: {integrity: sha512-+sKqDBQqb036hh4NPaUiEkYFkTUGYzRsn3EuFhyfQfMy6oGHEUJDurLP9Ufb5dasr/XiAmPNMr6wa9afjQB+Gw==}
+  '@smithy/chunked-blob-reader@5.2.0':
+    resolution: {integrity: sha512-WmU0TnhEAJLWvfSeMxBNe5xtbselEO8+4wG0NtZeL8oR21WgH1xiO37El+/Y+H/Ie4SCwBy3MxYWmOYaGgZueA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/config-resolver@4.1.5':
-    resolution: {integrity: sha512-viuHMxBAqydkB0AfWwHIdwf/PRH2z5KHGUzqyRtS/Wv+n3IHI993Sk76VCA7dD/+GzgGOmlJDITfPcJC1nIVIw==}
+  '@smithy/config-resolver@4.4.1':
+    resolution: {integrity: sha512-BciDJ5hkyYEGBBKMbjGB1A/Zq8bYZ41Zo9BMnGdKF6QD1fY4zIkYx6zui/0CHaVGnv6h0iy8y4rnPX9CPCAPyQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/core@3.8.0':
-    resolution: {integrity: sha512-EYqsIYJmkR1VhVE9pccnk353xhs+lB6btdutJEtsp7R055haMJp2yE16eSxw8fv+G0WUY6vqxyYOP8kOqawxYQ==}
+  '@smithy/core@3.17.2':
+    resolution: {integrity: sha512-n3g4Nl1Te+qGPDbNFAYf+smkRVB+JhFsGy9uJXXZQEufoP4u0r+WLh6KvTDolCswaagysDc/afS1yvb2jnj1gQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/credential-provider-imds@4.0.7':
-    resolution: {integrity: sha512-dDzrMXA8d8riFNiPvytxn0mNwR4B3h8lgrQ5UjAGu6T9z/kRg/Xncf4tEQHE/+t25sY8IH3CowcmWi+1U5B1Gw==}
+  '@smithy/credential-provider-imds@4.2.4':
+    resolution: {integrity: sha512-YVNMjhdz2pVto5bRdux7GMs0x1m0Afz3OcQy/4Yf9DH4fWOtroGH7uLvs7ZmDyoBJzLdegtIPpXrpJOZWvUXdw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/eventstream-codec@4.0.5':
-    resolution: {integrity: sha512-miEUN+nz2UTNoRYRhRqVTJCx7jMeILdAurStT2XoS+mhokkmz1xAPp95DFW9Gxt4iF2VBqpeF9HbTQ3kY1viOA==}
+  '@smithy/eventstream-codec@4.2.4':
+    resolution: {integrity: sha512-aV8blR9RBDKrOlZVgjOdmOibTC2sBXNiT7WA558b4MPdsLTV6sbyc1WIE9QiIuYMJjYtnPLciefoqSW8Gi+MZQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/eventstream-serde-browser@4.0.5':
-    resolution: {integrity: sha512-LCUQUVTbM6HFKzImYlSB9w4xafZmpdmZsOh9rIl7riPC3osCgGFVP+wwvYVw6pXda9PPT9TcEZxaq3XE81EdJQ==}
+  '@smithy/eventstream-serde-browser@4.2.4':
+    resolution: {integrity: sha512-d5T7ZS3J/r8P/PDjgmCcutmNxnSRvPH1U6iHeXjzI50sMr78GLmFcrczLw33Ap92oEKqa4CLrkAPeSSOqvGdUA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/eventstream-serde-config-resolver@4.1.3':
-    resolution: {integrity: sha512-yTTzw2jZjn/MbHu1pURbHdpjGbCuMHWncNBpJnQAPxOVnFUAbSIUSwafiphVDjNV93TdBJWmeVAds7yl5QCkcA==}
+  '@smithy/eventstream-serde-config-resolver@4.3.4':
+    resolution: {integrity: sha512-lxfDT0UuSc1HqltOGsTEAlZ6H29gpfDSdEPTapD5G63RbnYToZ+ezjzdonCCH90j5tRRCw3aLXVbiZaBW3VRVg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/eventstream-serde-node@4.0.5':
-    resolution: {integrity: sha512-lGS10urI4CNzz6YlTe5EYG0YOpsSp3ra8MXyco4aqSkQDuyZPIw2hcaxDU82OUVtK7UY9hrSvgWtpsW5D4rb4g==}
+  '@smithy/eventstream-serde-node@4.2.4':
+    resolution: {integrity: sha512-TPhiGByWnYyzcpU/K3pO5V7QgtXYpE0NaJPEZBCa1Y5jlw5SjqzMSbFiLb+ZkJhqoQc0ImGyVINqnq1ze0ZRcQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/eventstream-serde-universal@4.0.5':
-    resolution: {integrity: sha512-JFnmu4SU36YYw3DIBVao3FsJh4Uw65vVDIqlWT4LzR6gXA0F3KP0IXFKKJrhaVzCBhAuMsrUUaT5I+/4ZhF7aw==}
+  '@smithy/eventstream-serde-universal@4.2.4':
+    resolution: {integrity: sha512-GNI/IXaY/XBB1SkGBFmbW033uWA0tj085eCxYih0eccUe/PFR7+UBQv9HNDk2fD9TJu7UVsCWsH99TkpEPSOzQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/fetch-http-handler@5.1.1':
-    resolution: {integrity: sha512-61WjM0PWmZJR+SnmzaKI7t7G0UkkNFboDpzIdzSoy7TByUzlxo18Qlh9s71qug4AY4hlH/CwXdubMtkcNEb/sQ==}
+  '@smithy/fetch-http-handler@5.3.5':
+    resolution: {integrity: sha512-mg83SM3FLI8Sa2ooTJbsh5MFfyMTyNRwxqpKHmE0ICRIa66Aodv80DMsTQI02xBLVJ0hckwqTRr5IGAbbWuFLQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/hash-blob-browser@4.0.5':
-    resolution: {integrity: sha512-F7MmCd3FH/Q2edhcKd+qulWkwfChHbc9nhguBlVjSUE6hVHhec3q6uPQ+0u69S6ppvLtR3eStfCuEKMXBXhvvA==}
+  '@smithy/hash-blob-browser@4.2.5':
+    resolution: {integrity: sha512-kCdgjD2J50qAqycYx0imbkA9tPtyQr1i5GwbK/EOUkpBmJGSkJe4mRJm+0F65TUSvvui1HZ5FFGFCND7l8/3WQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/hash-node@4.0.5':
-    resolution: {integrity: sha512-cv1HHkKhpyRb6ahD8Vcfb2Hgz67vNIXEp2vnhzfxLFGRukLCNEA5QdsorbUEzXma1Rco0u3rx5VTqbM06GcZqQ==}
+  '@smithy/hash-node@4.2.4':
+    resolution: {integrity: sha512-kKU0gVhx/ppVMntvUOZE7WRMFW86HuaxLwvqileBEjL7PoILI8/djoILw3gPQloGVE6O0oOzqafxeNi2KbnUJw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/hash-stream-node@4.0.5':
-    resolution: {integrity: sha512-IJuDS3+VfWB67UC0GU0uYBG/TA30w+PlOaSo0GPm9UHS88A6rCP6uZxNjNYiyRtOcjv7TXn/60cW8ox1yuZsLg==}
+  '@smithy/hash-stream-node@4.2.4':
+    resolution: {integrity: sha512-amuh2IJiyRfO5MV0X/YFlZMD6banjvjAwKdeJiYGUbId608x+oSNwv3vlyW2Gt6AGAgl3EYAuyYLGRX/xU8npQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/invalid-dependency@4.0.5':
-    resolution: {integrity: sha512-IVnb78Qtf7EJpoEVo7qJ8BEXQwgC4n3igeJNNKEj/MLYtapnx8A67Zt/J3RXAj2xSO1910zk0LdFiygSemuLow==}
+  '@smithy/invalid-dependency@4.2.4':
+    resolution: {integrity: sha512-z6aDLGiHzsMhbS2MjetlIWopWz//K+mCoPXjW6aLr0mypF+Y7qdEh5TyJ20Onf9FbWHiWl4eC+rITdizpnXqOw==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/is-array-buffer@2.2.0':
     resolution: {integrity: sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA==}
     engines: {node: '>=14.0.0'}
 
-  '@smithy/is-array-buffer@4.0.0':
-    resolution: {integrity: sha512-saYhF8ZZNoJDTvJBEWgeBccCg+yvp1CX+ed12yORU3NilJScfc6gfch2oVb4QgxZrGUx3/ZJlb+c/dJbyupxlw==}
+  '@smithy/is-array-buffer@4.2.0':
+    resolution: {integrity: sha512-DZZZBvC7sjcYh4MazJSGiWMI2L7E0oCiRHREDzIxi/M2LY79/21iXt6aPLHge82wi5LsuRF5A06Ds3+0mlh6CQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/md5-js@4.0.5':
-    resolution: {integrity: sha512-8n2XCwdUbGr8W/XhMTaxILkVlw2QebkVTn5tm3HOcbPbOpWg89zr6dPXsH8xbeTsbTXlJvlJNTQsKAIoqQGbdA==}
+  '@smithy/md5-js@4.2.4':
+    resolution: {integrity: sha512-h7kzNWZuMe5bPnZwKxhVbY1gan5+TZ2c9JcVTHCygB14buVGOZxLl+oGfpY2p2Xm48SFqEWdghpvbBdmaz3ncQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/middleware-content-length@4.0.5':
-    resolution: {integrity: sha512-l1jlNZoYzoCC7p0zCtBDE5OBXZ95yMKlRlftooE5jPWQn4YBPLgsp+oeHp7iMHaTGoUdFqmHOPa8c9G3gBsRpQ==}
+  '@smithy/middleware-content-length@4.2.4':
+    resolution: {integrity: sha512-hJRZuFS9UsElX4DJSJfoX4M1qXRH+VFiLMUnhsWvtOOUWRNvvOfDaUSdlNbjwv1IkpVjj/Rd/O59Jl3nhAcxow==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/middleware-endpoint@4.1.18':
-    resolution: {integrity: sha512-ZhvqcVRPZxnZlokcPaTwb+r+h4yOIOCJmx0v2d1bpVlmP465g3qpVSf7wxcq5zZdu4jb0H4yIMxuPwDJSQc3MQ==}
+  '@smithy/middleware-endpoint@4.3.6':
+    resolution: {integrity: sha512-PXehXofGMFpDqr933rxD8RGOcZ0QBAWtuzTgYRAHAL2BnKawHDEdf/TnGpcmfPJGwonhginaaeJIKluEojiF/w==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/middleware-retry@4.1.19':
-    resolution: {integrity: sha512-X58zx/NVECjeuUB6A8HBu4bhx72EoUz+T5jTMIyeNKx2lf+Gs9TmWPNNkH+5QF0COjpInP/xSpJGJ7xEnAklQQ==}
+  '@smithy/middleware-retry@4.4.6':
+    resolution: {integrity: sha512-OhLx131znrEDxZPAvH/OYufR9d1nB2CQADyYFN4C3V/NQS7Mg4V6uvxHC/Dr96ZQW8IlHJTJ+vAhKt6oxWRndA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/middleware-serde@4.0.9':
-    resolution: {integrity: sha512-uAFFR4dpeoJPGz8x9mhxp+RPjo5wW0QEEIPPPbLXiRRWeCATf/Km3gKIVR5vaP8bN1kgsPhcEeh+IZvUlBv6Xg==}
+  '@smithy/middleware-serde@4.2.4':
+    resolution: {integrity: sha512-jUr3x2CDhV15TOX2/Uoz4gfgeqLrRoTQbYAuhLS7lcVKNev7FeYSJ1ebEfjk+l9kbb7k7LfzIR/irgxys5ZTOg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/middleware-stack@4.0.5':
-    resolution: {integrity: sha512-/yoHDXZPh3ocRVyeWQFvC44u8seu3eYzZRveCMfgMOBcNKnAmOvjbL9+Cp5XKSIi9iYA9PECUuW2teDAk8T+OQ==}
+  '@smithy/middleware-stack@4.2.4':
+    resolution: {integrity: sha512-Gy3TKCOnm9JwpFooldwAboazw+EFYlC+Bb+1QBsSi5xI0W5lX81j/P5+CXvD/9ZjtYKRgxq+kkqd/KOHflzvgA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/node-config-provider@4.1.4':
-    resolution: {integrity: sha512-+UDQV/k42jLEPPHSn39l0Bmc4sB1xtdI9Gd47fzo/0PbXzJ7ylgaOByVjF5EeQIumkepnrJyfx86dPa9p47Y+w==}
+  '@smithy/node-config-provider@4.3.4':
+    resolution: {integrity: sha512-3X3w7qzmo4XNNdPKNS4nbJcGSwiEMsNsRSunMA92S4DJLLIrH5g1AyuOA2XKM9PAPi8mIWfqC+fnfKNsI4KvHw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/node-http-handler@4.1.1':
-    resolution: {integrity: sha512-RHnlHqFpoVdjSPPiYy/t40Zovf3BBHc2oemgD7VsVTFFZrU5erFFe0n52OANZZ/5sbshgD93sOh5r6I35Xmpaw==}
+  '@smithy/node-http-handler@4.4.4':
+    resolution: {integrity: sha512-VXHGfzCXLZeKnFp6QXjAdy+U8JF9etfpUXD1FAbzY1GzsFJiDQRQIt2CnMUvUdz3/YaHNqT3RphVWMUpXTIODA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/property-provider@4.0.5':
-    resolution: {integrity: sha512-R/bswf59T/n9ZgfgUICAZoWYKBHcsVDurAGX88zsiUtOTA/xUAPyiT+qkNCPwFn43pZqN84M4MiUsbSGQmgFIQ==}
+  '@smithy/property-provider@4.2.4':
+    resolution: {integrity: sha512-g2DHo08IhxV5GdY3Cpt/jr0mkTlAD39EJKN27Jb5N8Fb5qt8KG39wVKTXiTRCmHHou7lbXR8nKVU14/aRUf86w==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/protocol-http@5.1.3':
-    resolution: {integrity: sha512-fCJd2ZR7D22XhDY0l+92pUag/7je2BztPRQ01gU5bMChcyI0rlly7QFibnYHzcxDvccMjlpM/Q1ev8ceRIb48w==}
+  '@smithy/protocol-http@5.3.4':
+    resolution: {integrity: sha512-3sfFd2MAzVt0Q/klOmjFi3oIkxczHs0avbwrfn1aBqtc23WqQSmjvk77MBw9WkEQcwbOYIX5/2z4ULj8DuxSsw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/querystring-builder@4.0.5':
-    resolution: {integrity: sha512-NJeSCU57piZ56c+/wY+AbAw6rxCCAOZLCIniRE7wqvndqxcKKDOXzwWjrY7wGKEISfhL9gBbAaWWgHsUGedk+A==}
+  '@smithy/querystring-builder@4.2.4':
+    resolution: {integrity: sha512-KQ1gFXXC+WsbPFnk7pzskzOpn4s+KheWgO3dzkIEmnb6NskAIGp/dGdbKisTPJdtov28qNDohQrgDUKzXZBLig==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/querystring-parser@4.0.5':
-    resolution: {integrity: sha512-6SV7md2CzNG/WUeTjVe6Dj8noH32r4MnUeFKZrnVYsQxpGSIcphAanQMayi8jJLZAWm6pdM9ZXvKCpWOsIGg0w==}
+  '@smithy/querystring-parser@4.2.4':
+    resolution: {integrity: sha512-aHb5cqXZocdzEkZ/CvhVjdw5l4r1aU/9iMEyoKzH4eXMowT6M0YjBpp7W/+XjkBnY8Xh0kVd55GKjnPKlCwinQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/service-error-classification@4.0.7':
-    resolution: {integrity: sha512-XvRHOipqpwNhEjDf2L5gJowZEm5nsxC16pAZOeEcsygdjv9A2jdOh3YoDQvOXBGTsaJk6mNWtzWalOB9976Wlg==}
+  '@smithy/service-error-classification@4.2.4':
+    resolution: {integrity: sha512-fdWuhEx4+jHLGeew9/IvqVU/fxT/ot70tpRGuOLxE3HzZOyKeTQfYeV1oaBXpzi93WOk668hjMuuagJ2/Qs7ng==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/shared-ini-file-loader@4.0.5':
-    resolution: {integrity: sha512-YVVwehRDuehgoXdEL4r1tAAzdaDgaC9EQvhK0lEbfnbrd0bd5+CTQumbdPryX3J2shT7ZqQE+jPW4lmNBAB8JQ==}
+  '@smithy/shared-ini-file-loader@4.3.4':
+    resolution: {integrity: sha512-y5ozxeQ9omVjbnJo9dtTsdXj9BEvGx2X8xvRgKnV+/7wLBuYJQL6dOa/qMY6omyHi7yjt1OA97jZLoVRYi8lxA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/signature-v4@5.1.3':
-    resolution: {integrity: sha512-mARDSXSEgllNzMw6N+mC+r1AQlEBO3meEAkR/UlfAgnMzJUB3goRBWgip1EAMG99wh36MDqzo86SfIX5Y+VEaw==}
+  '@smithy/signature-v4@5.3.4':
+    resolution: {integrity: sha512-ScDCpasxH7w1HXHYbtk3jcivjvdA1VICyAdgvVqKhKKwxi+MTwZEqFw0minE+oZ7F07oF25xh4FGJxgqgShz0A==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/smithy-client@4.4.10':
-    resolution: {integrity: sha512-iW6HjXqN0oPtRS0NK/zzZ4zZeGESIFcxj2FkWed3mcK8jdSdHzvnCKXSjvewESKAgGKAbJRA+OsaqKhkdYRbQQ==}
+  '@smithy/smithy-client@4.9.2':
+    resolution: {integrity: sha512-gZU4uAFcdrSi3io8U99Qs/FvVdRxPvIMToi+MFfsy/DN9UqtknJ1ais+2M9yR8e0ASQpNmFYEKeIKVcMjQg3rg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/types@4.3.2':
-    resolution: {integrity: sha512-QO4zghLxiQ5W9UZmX2Lo0nta2PuE1sSrXUYDoaB6HMR762C0P7v/HEPHf6ZdglTVssJG1bsrSBxdc3quvDSihw==}
+  '@smithy/types@4.8.1':
+    resolution: {integrity: sha512-N0Zn0OT1zc+NA+UVfkYqQzviRh5ucWwO7mBV3TmHHprMnfcJNfhlPicDkBHi0ewbh+y3evR6cNAW0Raxvb01NA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/url-parser@4.0.5':
-    resolution: {integrity: sha512-j+733Um7f1/DXjYhCbvNXABV53NyCRRA54C7bNEIxNPs0YjfRxeMKjjgm2jvTYrciZyCjsicHwQ6Q0ylo+NAUw==}
+  '@smithy/url-parser@4.2.4':
+    resolution: {integrity: sha512-w/N/Iw0/PTwJ36PDqU9PzAwVElo4qXxCC0eCTlUtIz/Z5V/2j/cViMHi0hPukSBHp4DVwvUlUhLgCzqSJ6plrg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-base64@4.0.0':
-    resolution: {integrity: sha512-CvHfCmO2mchox9kjrtzoHkWHxjHZzaFojLc8quxXY7WAAMAg43nuxwv95tATVgQFNDwd4M9S1qFzj40Ul41Kmg==}
+  '@smithy/util-base64@4.3.0':
+    resolution: {integrity: sha512-GkXZ59JfyxsIwNTWFnjmFEI8kZpRNIBfxKjv09+nkAWPt/4aGaEWMM04m4sxgNVWkbt2MdSvE3KF/PfX4nFedQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-body-length-browser@4.0.0':
-    resolution: {integrity: sha512-sNi3DL0/k64/LO3A256M+m3CDdG6V7WKWHdAiBBMUN8S3hK3aMPhwnPik2A/a2ONN+9doY9UxaLfgqsIRg69QA==}
+  '@smithy/util-body-length-browser@4.2.0':
+    resolution: {integrity: sha512-Fkoh/I76szMKJnBXWPdFkQJl2r9SjPt3cMzLdOB6eJ4Pnpas8hVoWPYemX/peO0yrrvldgCUVJqOAjUrOLjbxg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-body-length-node@4.0.0':
-    resolution: {integrity: sha512-q0iDP3VsZzqJyje8xJWEJCNIu3lktUGVoSy1KB0UWym2CL1siV3artm+u1DFYTLejpsrdGyCSWBdGNjJzfDPjg==}
+  '@smithy/util-body-length-node@4.2.1':
+    resolution: {integrity: sha512-h53dz/pISVrVrfxV1iqXlx5pRg3V2YWFcSQyPyXZRrZoZj4R4DeWRDo1a7dd3CPTcFi3kE+98tuNyD2axyZReA==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/util-buffer-from@2.2.0':
     resolution: {integrity: sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA==}
     engines: {node: '>=14.0.0'}
 
-  '@smithy/util-buffer-from@4.0.0':
-    resolution: {integrity: sha512-9TOQ7781sZvddgO8nxueKi3+yGvkY35kotA0Y6BWRajAv8jjmigQ1sBwz0UX47pQMYXJPahSKEKYFgt+rXdcug==}
+  '@smithy/util-buffer-from@4.2.0':
+    resolution: {integrity: sha512-kAY9hTKulTNevM2nlRtxAG2FQ3B2OR6QIrPY3zE5LqJy1oxzmgBGsHLWTcNhWXKchgA0WHW+mZkQrng/pgcCew==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-config-provider@4.0.0':
-    resolution: {integrity: sha512-L1RBVzLyfE8OXH+1hsJ8p+acNUSirQnWQ6/EgpchV88G6zGBTDPdXiiExei6Z1wR2RxYvxY/XLw6AMNCCt8H3w==}
+  '@smithy/util-config-provider@4.2.0':
+    resolution: {integrity: sha512-YEjpl6XJ36FTKmD+kRJJWYvrHeUvm5ykaUS5xK+6oXffQPHeEM4/nXlZPe+Wu0lsgRUcNZiliYNh/y7q9c2y6Q==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-defaults-mode-browser@4.0.26':
-    resolution: {integrity: sha512-xgl75aHIS/3rrGp7iTxQAOELYeyiwBu+eEgAk4xfKwJJ0L8VUjhO2shsDpeil54BOFsqmk5xfdesiewbUY5tKQ==}
+  '@smithy/util-defaults-mode-browser@4.3.5':
+    resolution: {integrity: sha512-GwaGjv/QLuL/QHQaqhf/maM7+MnRFQQs7Bsl6FlaeK6lm6U7mV5AAnVabw68cIoMl5FQFyKK62u7RWRzWL25OQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-defaults-mode-node@4.0.26':
-    resolution: {integrity: sha512-z81yyIkGiLLYVDetKTUeCZQ8x20EEzvQjrqJtb/mXnevLq2+w3XCEWTJ2pMp401b6BkEkHVfXb/cROBpVauLMQ==}
+  '@smithy/util-defaults-mode-node@4.2.7':
+    resolution: {integrity: sha512-6hinjVqec0WYGsqN7h9hL/ywfULmJJNXGXnNZW7jrIn/cFuC/aVlVaiDfBIJEvKcOrmN8/EgsW69eY0gXABeHw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-endpoints@3.0.7':
-    resolution: {integrity: sha512-klGBP+RpBp6V5JbrY2C/VKnHXn3d5V2YrifZbmMY8os7M6m8wdYFoO6w/fe5VkP+YVwrEktW3IWYaSQVNZJ8oQ==}
+  '@smithy/util-endpoints@3.2.4':
+    resolution: {integrity: sha512-f+nBDhgYRCmUEDKEQb6q0aCcOTXRDqH5wWaFHJxt4anB4pKHlgGoYP3xtioKXH64e37ANUkzWf6p4Mnv1M5/Vg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-hex-encoding@4.0.0':
-    resolution: {integrity: sha512-Yk5mLhHtfIgW2W2WQZWSg5kuMZCVbvhFmC7rV4IO2QqnZdbEFPmQnCcGMAX2z/8Qj3B9hYYNjZOhWym+RwhePw==}
+  '@smithy/util-hex-encoding@4.2.0':
+    resolution: {integrity: sha512-CCQBwJIvXMLKxVbO88IukazJD9a4kQ9ZN7/UMGBjBcJYvatpWk+9g870El4cB8/EJxfe+k+y0GmR9CAzkF+Nbw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-middleware@4.0.5':
-    resolution: {integrity: sha512-N40PfqsZHRSsByGB81HhSo+uvMxEHT+9e255S53pfBw/wI6WKDI7Jw9oyu5tJTLwZzV5DsMha3ji8jk9dsHmQQ==}
+  '@smithy/util-middleware@4.2.4':
+    resolution: {integrity: sha512-fKGQAPAn8sgV0plRikRVo6g6aR0KyKvgzNrPuM74RZKy/wWVzx3BMk+ZWEueyN3L5v5EDg+P582mKU+sH5OAsg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-retry@4.0.7':
-    resolution: {integrity: sha512-TTO6rt0ppK70alZpkjwy+3nQlTiqNfoXja+qwuAchIEAIoSZW8Qyd76dvBv3I5bCpE38APafG23Y/u270NspiQ==}
+  '@smithy/util-retry@4.2.4':
+    resolution: {integrity: sha512-yQncJmj4dtv/isTXxRb4AamZHy4QFr4ew8GxS6XLWt7sCIxkPxPzINWd7WLISEFPsIan14zrKgvyAF+/yzfwoA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-stream@4.2.4':
-    resolution: {integrity: sha512-vSKnvNZX2BXzl0U2RgCLOwWaAP9x/ddd/XobPK02pCbzRm5s55M53uwb1rl/Ts7RXZvdJZerPkA+en2FDghLuQ==}
+  '@smithy/util-stream@4.5.5':
+    resolution: {integrity: sha512-7M5aVFjT+HPilPOKbOmQfCIPchZe4DSBc1wf1+NvHvSoFTiFtauZzT+onZvCj70xhXd0AEmYnZYmdJIuwxOo4w==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-uri-escape@4.0.0':
-    resolution: {integrity: sha512-77yfbCbQMtgtTylO9itEAdpPXSog3ZxMe09AEhm0dU0NLTalV70ghDZFR+Nfi1C60jnJoh/Re4090/DuZh2Omg==}
+  '@smithy/util-uri-escape@4.2.0':
+    resolution: {integrity: sha512-igZpCKV9+E/Mzrpq6YacdTQ0qTiLm85gD6N/IrmyDvQFA4UnU3d5g3m8tMT/6zG/vVkWSU+VxeUyGonL62DuxA==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/util-utf8@2.3.0':
     resolution: {integrity: sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A==}
     engines: {node: '>=14.0.0'}
 
-  '@smithy/util-utf8@4.0.0':
-    resolution: {integrity: sha512-b+zebfKCfRdgNJDknHCob3O7FpeYQN6ZG6YLExMcasDHsCXlsXCEuiPZeLnJLpwa5dvPetGlnGCiMHuLwGvFow==}
+  '@smithy/util-utf8@4.2.0':
+    resolution: {integrity: sha512-zBPfuzoI8xyBtR2P6WQj63Rz8i3AmfAaJLuNG8dWsfvPe8lO4aCPYLn879mEgHndZH1zQ2oXmG8O1GGzzaoZiw==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-waiter@4.2.4':
+    resolution: {integrity: sha512-roKXtXIC6fopFvVOju8VYHtguc/jAcMlK8IlDOHsrQn0ayMkHynjm/D2DCMRf7MJFXzjHhlzg2edr3QPEakchQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-waiter@4.0.7':
-    resolution: {integrity: sha512-mYqtQXPmrwvUljaHyGxYUIIRI3qjBTEb/f5QFi3A6VlxhpmZd5mWXn9W+qUkf2pVE1Hv3SqxefiZOPGdxmO64A==}
+  '@smithy/uuid@1.1.0':
+    resolution: {integrity: sha512-4aUIteuyxtBUhVdiQqcDhKFitwfd9hqoSDYY2KRXiWtgoWJ9Bmise+KfEPDiVHWeJepvF8xJO9/9+WDIciMFFw==}
     engines: {node: '>=18.0.0'}
 
+  '@so-ric/colorspace@1.1.6':
+    resolution: {integrity: sha512-/KiKkpHNOBgkFJwu9sh48LkHSMYGyuTcSFK/qMBdnOAlrRJzRSXAOFB5qwzaVQuDl8wAvHVMkaASQDReTahxuw==}
+
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
   '@standard-schema/utils@0.3.0':
     resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
 
+  '@stitches/core@1.2.8':
+    resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
+
   '@storybook/addon-actions@6.5.16':
     resolution: {integrity: sha512-aADjilFmuD6TNGz2CRPSupnyiA/IGkPJHDBTqMpsDXTUr8xnuD122xkIhg6UxmCM2y1c+ncwYXy3WPK2xXK57g==}
     peerDependencies:
@@ -7444,10 +8352,10 @@ packages:
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-docs@9.1.1':
-    resolution: {integrity: sha512-CzgvTy3V5X4fe+VPkiZVwPKARlpEBDAKte8ajLAlHJQLFpADdYrBRQ0se6I+kcxva7rZQzdhuH7qjXMDRVcfnw==}
+  '@storybook/addon-docs@9.1.16':
+    resolution: {integrity: sha512-JfaUD6fC7ySLg5duRdaWZ0FUUXrgUvqbZe/agCbSyOaIHOtJdhGaPjOC3vuXTAcV8/8/wWmbu0iXFMD08iKvdw==}
     peerDependencies:
-      storybook: ^9.1.1
+      storybook: ^9.1.16
 
   '@storybook/addon-essentials@6.5.16':
     resolution: {integrity: sha512-TeoMr6tEit4Pe91GH6f8g/oar1P4M0JL9S6oMcFxxrhhtOGO7XkWD5EnfyCx272Ok2VYfE58FNBTGPNBVIqYKQ==}
@@ -7713,10 +8621,10 @@ packages:
   '@storybook/builder-manager@7.6.20':
     resolution: {integrity: sha512-e2GzpjLaw6CM/XSmc4qJRzBF8GOoOyotyu3JrSPTYOt4RD8kjUsK4QlismQM1DQRu8i39aIexxmRbiJyD74xzQ==}
 
-  '@storybook/builder-vite@9.1.1':
-    resolution: {integrity: sha512-rM0QOfykr39SFBRQnoAa5PU3xTHnJE1R5tigvjved1o7sumcfjrhqmEyAgNZv1SoRztOO92jwkTi7En6yheOKg==}
+  '@storybook/builder-vite@9.1.16':
+    resolution: {integrity: sha512-CyvYA5w1BKeSVaRavKi+euWxLffshq0v9Rz/5E9MKCitbYtjwkDH6UMIYmcbTs906mEBuYqrbz3nygDP0ppodw==}
     peerDependencies:
-      storybook: ^9.1.1
+      storybook: ^9.1.16
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
 
   '@storybook/builder-webpack4@6.5.16':
@@ -7777,8 +8685,8 @@ packages:
     resolution: {integrity: sha512-ZlP+BJyqg7HlnXf7ypjG2CKMI/KVOn03jFIiClItE/jQfgR6kRFgtjRU7uajh427HHfjv9DRiur8nBzuO7vapA==}
     hasBin: true
 
-  '@storybook/cli@9.1.1':
-    resolution: {integrity: sha512-NbEVLi6nXF8G1nXy5DVpwSkj9c3mplVrhGI0FQnvntoP64BkuVwOVmti0M+hAStU607cT9sNAkg0yFpgK5twpA==}
+  '@storybook/cli@9.1.16':
+    resolution: {integrity: sha512-ixwLn3pdhYaWV5MagZVPC8D/WVonersWVj0t8eHCMyxIO4v6wxQ1rK49eizbHJSFrbK+J0xmGvxWsYUobEkv1A==}
     hasBin: true
 
   '@storybook/client-api@6.5.16':
@@ -7802,8 +8710,8 @@ packages:
   '@storybook/codemod@7.6.20':
     resolution: {integrity: sha512-8vmSsksO4XukNw0TmqylPmk7PxnfNfE21YsxFa7mnEBmEKQcZCQsNil4ZgWfG0IzdhTfhglAN4r++Ew0WE+PYA==}
 
-  '@storybook/codemod@9.1.1':
-    resolution: {integrity: sha512-biUFc8TmeHUjByOFSaN5RJYGVZe1EJTwlxRcB7/PiXwsoy3SNLj0PJiTGdZyzmz+T2zNNpMQPpgEWQFk/aoSgQ==}
+  '@storybook/codemod@9.1.16':
+    resolution: {integrity: sha512-uDl6FuAuvW0X6E8o4jEaUmKqjYCNmGolzUYad3M0yvr1bZmXiNdO1E4IRmnUHUqt6yqnOPNj8hG6AHKhibpB3w==}
 
   '@storybook/components@6.5.16':
     resolution: {integrity: sha512-LzBOFJKITLtDcbW9jXl0/PaG+4xAz25PK8JxPZpIALbmOpYWOAPcO6V9C2heX6e6NgWFMUxjplkULEk9RCQMNA==}
@@ -7921,10 +8829,10 @@ packages:
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/csf-plugin@9.1.1':
-    resolution: {integrity: sha512-MwdtvzzFpkard06pCfDrgRXZiBfWAQICdKh7kzpv1L8SwewsRgUr5WZQuEAVfYdSvCFJbWnNN4KirzPhe5ENCg==}
+  '@storybook/csf-plugin@9.1.16':
+    resolution: {integrity: sha512-GKlNNlmWeFBQxhQY5hZOSnFGbeKq69jal0dYNWoSImTjor28eYRHb9iQkDzRpijLPizBaB9MlxLsLrgFDp7adA==}
     peerDependencies:
-      storybook: ^9.1.1
+      storybook: ^9.1.16
 
   '@storybook/csf-tools@6.5.16':
     resolution: {integrity: sha512-+WD4sH/OwAfXZX3IN6/LOZ9D9iGEFcN+Vvgv9wOsLRgsAZ10DG/NK6c1unXKDM/ogJtJYccNI8Hd+qNE/GFV6A==}
@@ -7958,8 +8866,8 @@ packages:
   '@storybook/global@5.0.0':
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
 
-  '@storybook/icons@1.4.0':
-    resolution: {integrity: sha512-Td73IeJxOyalzvjQL+JXx72jlIYHgs+REaHiREOqfpo3A2AYYG71AUbcv+lg7mEDIweKVCxsMQ0UKo634c8XeA==}
+  '@storybook/icons@1.6.0':
+    resolution: {integrity: sha512-hcFZIjW8yQz8O8//2WTIXylm5Xsgc+lW9ISLgUk1xGmptIJQRdlhVIXCpSyLrQaaRiyhQRaVg7l3BD9S216BHw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
@@ -8096,20 +9004,20 @@ packages:
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       storybook: ^8.6.14
 
-  '@storybook/react-dom-shim@9.1.1':
-    resolution: {integrity: sha512-L+HCOXvOP+PwKrVS8od9aF+F4hO7zA0Nt1vnpbg2LeAHCxYghrjFVtioe7gSlzrlYdozQrPLY98a4OkDB7KGrw==}
+  '@storybook/react-dom-shim@9.1.16':
+    resolution: {integrity: sha512-MsI4qTxdT6lMXQmo3IXhw3EaCC+vsZboyEZBx4pOJ+K/5cDJ6ZoQ3f0d4yGpVhumDxaxlnNAg954+f8WWXE1rQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^9.1.1
+      storybook: ^9.1.16
 
-  '@storybook/react-vite@9.1.1':
-    resolution: {integrity: sha512-9rMjAqgrcuVF/GS171fYSLuUs5QC3e0WPpIm2JOP7Z9qWctM1ApVb9UCYY7ZNl9Gc3kvjKsK5J1+A4Zw4a2+ag==}
+  '@storybook/react-vite@9.1.16':
+    resolution: {integrity: sha512-WRKSq0XfQ/Qx66aKisQCfa/1UKwN9HjVbY6xrmsX7kI5zBdITxIcKInq6PWoPv91SJD7+Et956yX+F86R1aEXw==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^9.1.1
+      storybook: ^9.1.16
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
 
   '@storybook/react-webpack5@7.4.6':
@@ -8192,13 +9100,13 @@ packages:
       typescript:
         optional: true
 
-  '@storybook/react@9.1.1':
-    resolution: {integrity: sha512-F5vRFxDf1fzM6CG88olrzEH03iP6C1YAr4/nr5bkLNs6TNm9Hh7KmRVG2jFtoy5w9uCwbQ9RdY+TrRbBI7n67g==}
+  '@storybook/react@9.1.16':
+    resolution: {integrity: sha512-M/SkHJJdtiGpodBJq9+DYmSkEOD+VqlPxKI+FvbHESTNs//1IgqFIjEWetd8quhd9oj/gvo4ICBAPu+UmD6M9w==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^9.1.1
+      storybook: ^9.1.16
       typescript: '>= 4.9.x'
     peerDependenciesMeta:
       typescript:
@@ -8276,95 +9184,95 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  '@swagger-api/apidom-ast@1.0.0-beta.45':
-    resolution: {integrity: sha512-2npCF6V4QYSRv8USSmQ9jmsnNrjhTww4C84+cetNpxvTYXmEi9bRwIfzn2LH7DedsZsOJOMucVbJkCcRB/VC2Q==}
+  '@swagger-api/apidom-ast@1.0.0-rc.1':
+    resolution: {integrity: sha512-hsAySkWlIjgkQEDu1YEbvnxdEC3rD9bjQf7UYm0vzkvL5PNDd6lHLhxb825bQAfXQjw7WOxtV7eNrgqRQohMDg==}
 
-  '@swagger-api/apidom-core@1.0.0-beta.45':
-    resolution: {integrity: sha512-JEKf/bIl0RgaYAILlSDjuWhcg/+gbrI6p6OZuXR7EVxPlPNBAsme98UYyICA9AENyi2fzxwCP5eDRFl4cIzMHQ==}
+  '@swagger-api/apidom-core@1.0.0-rc.1':
+    resolution: {integrity: sha512-vlguVts28oYBjCU5ZYfnX6yAFys/dZ1PUZqpYevMIGi8lEvxEfoxKEaUQa1Lr974cfKaVGBs8gNNhvDKXbH/jA==}
 
-  '@swagger-api/apidom-error@1.0.0-beta.45':
-    resolution: {integrity: sha512-kEy7blIEF77BnoqLhGW3h3I+evPHrtZwKe4fSw22UEUJUTG1Daw9FhaSgfBNptifZzzdLgiVDujrIOI6SpkH3Q==}
+  '@swagger-api/apidom-error@1.0.0-rc.1':
+    resolution: {integrity: sha512-74tTb6QX8VeAvu/9XipXd4Ly3N3q+yJez+lGZD7Qa11E00AhNpzqH7swgZKutLEfq1tHxyGWE1A6xF8IiU4CJg==}
 
-  '@swagger-api/apidom-json-pointer@1.0.0-beta.45':
-    resolution: {integrity: sha512-s8eMDc/zL5W9mtBRbjEGPDt9yNJlpq9S+7/ACLjlSg1J3toadZmNiyR0svVLroVzVZHD5aGClGRpdammbO/PhQ==}
+  '@swagger-api/apidom-json-pointer@1.0.0-rc.1':
+    resolution: {integrity: sha512-fNDQozPRuD9ReYcCnIqr5jU0faFDUl3VrUtfeLl3YevxNB+onZkUidUvzUJgDjZK9Se567BgL0rK9hnEO/Q8qw==}
 
-  '@swagger-api/apidom-ns-api-design-systems@1.0.0-beta.45':
-    resolution: {integrity: sha512-uX+lkOi1g32mIhBVtMm5a304H68GIR4IXf/wiD6mdf2iwjfR0+drn/4NmirZqrNvlMtmf1a6VSe4u6KE3OBIpw==}
+  '@swagger-api/apidom-ns-api-design-systems@1.0.0-rc.1':
+    resolution: {integrity: sha512-gV6vQHpdtVKtrV+uUCPwsSL5nX5zD/3vR7dSYE0Lii7f7RkpIXAgQViZSbv7+h8TB20DNobGt+JZH/gGaY+Oxg==}
 
-  '@swagger-api/apidom-ns-arazzo-1@1.0.0-beta.45':
-    resolution: {integrity: sha512-ZjzTvby6Zvu7vh6uabRCGsnhAPeefxgJQ7DPKLELe9KyzcT+OqorjDtfaESFy4zzIMokalJcja/in29yTS+kxw==}
+  '@swagger-api/apidom-ns-arazzo-1@1.0.0-rc.1':
+    resolution: {integrity: sha512-Bx3PMLp+613EgSsLLg6Ucg3FtbO2i1bVcFZXgImun5pYNfmtQu21ELfWKj8ty/Ts2zR1VKOn5+i9DyMOH/zpsA==}
 
-  '@swagger-api/apidom-ns-asyncapi-2@1.0.0-beta.45':
-    resolution: {integrity: sha512-OQY2cSs5oZo0/rlGa8hHfgu7DFQ6lDhBC+IAKp0E7gF27oH2Yy9BEHlxHUA3iUeCMxDfIo021+Qc8FpNqivtxA==}
+  '@swagger-api/apidom-ns-asyncapi-2@1.0.0-rc.1':
+    resolution: {integrity: sha512-Vvo1f/H3mUuTny1d+XPudSattDWdHP1VhowxAOAFrnLVM4qvFbeBdzWjmTPEaeRsOz+Vq6rJOC4DPmHmtkR+oQ==}
 
-  '@swagger-api/apidom-ns-json-schema-2019-09@1.0.0-beta.45':
-    resolution: {integrity: sha512-StoPoa1yI5gBfPZ57LhA41f+JNJ/JnrsWZnmDlJG8W2hyjJAeyVkOo0qoVpt40240WZmH2EuywIFrdD+n+hrLA==}
+  '@swagger-api/apidom-ns-json-schema-2019-09@1.0.0-rc.1':
+    resolution: {integrity: sha512-1va09+kSTpNKc9oKs0rk2FWP2wk9AAdOcdmLpPEbzMnThQD1DHeBCk5OMStGZlaROxKWMPVZ5EmKy6rTRXvEIQ==}
 
-  '@swagger-api/apidom-ns-json-schema-2020-12@1.0.0-beta.45':
-    resolution: {integrity: sha512-l70stVPz1kGIiM7t55twYhfI2GwDKLOjfr+Py1Rknyo75LYw08QhppZ7PxWamgvKmoYfBnGeaoC+18Q2dn2Bhg==}
+  '@swagger-api/apidom-ns-json-schema-2020-12@1.0.0-rc.1':
+    resolution: {integrity: sha512-ixNci2lwVD0yC4lUrmOOhgE/denI8keGVnHXYokbq0QxlQWuwuVzjVEtVMdmEaX3JaYVmEI5tr8K9MPW1zso1A==}
 
-  '@swagger-api/apidom-ns-json-schema-draft-4@1.0.0-beta.45':
-    resolution: {integrity: sha512-tlDz4+Ko+ylVWSpSprZM9WoBMfmBxoUxcxvbkcafCJTO4MCQuytYaW3p/BIMscCsa0LP1eR4ycMY8h445ur58Q==}
+  '@swagger-api/apidom-ns-json-schema-draft-4@1.0.0-rc.1':
+    resolution: {integrity: sha512-kLGANNv8oAWWvnVqWat/AqOEo6XBfdMF3I7BLL2eZFBE8bhTbFMvmAvUfnwcehYo3K4vT+J60DWrwqYBoGSSUQ==}
 
-  '@swagger-api/apidom-ns-json-schema-draft-6@1.0.0-beta.45':
-    resolution: {integrity: sha512-wBkk2AqDddZvf1VixAuwFu9LRTJya3yL+FAmg4KyMGrA32VOFYupe9jc1RmV/noTfGwf5AWZVnuGo9xiI2z4Wg==}
+  '@swagger-api/apidom-ns-json-schema-draft-6@1.0.0-rc.1':
+    resolution: {integrity: sha512-UzoTSrPOh+dwzSKZmawBwhWg4xGgpdNBmtV7jDJGEyFGsEkPvDBvViq+4sfMxO/BGoqPCD/jdt4yF16AKRxLiw==}
 
-  '@swagger-api/apidom-ns-json-schema-draft-7@1.0.0-beta.45':
-    resolution: {integrity: sha512-EggsaTXUw0j8PmcO+IxnoJ7TyXz8sNarPlB2EGNqVT3qEwGQn96qXZ8pZab0sr1iStIWzyAaXMKrnmlcSIDpSQ==}
+  '@swagger-api/apidom-ns-json-schema-draft-7@1.0.0-rc.1':
+    resolution: {integrity: sha512-3alW6gJKeb+DzTu+LYpYyEc5swo3oP8aoatOcVceWo/A/568zfIW0wWssf9WoasI42jEktV17z4A6ZwT6PzYbA==}
 
-  '@swagger-api/apidom-ns-openapi-2@1.0.0-beta.45':
-    resolution: {integrity: sha512-OY/FM8lDB6MzJfTgqHPj6k6Kk62Uho5gynsZLyroxgTz+Ez9zSdgA+p8+mdE4hBQxfwSnUtaiFMWgAzY+12Q9A==}
+  '@swagger-api/apidom-ns-openapi-2@1.0.0-rc.1':
+    resolution: {integrity: sha512-SJ79fGH+WA7IYEXOJFPjXCB5bg6uoJDmkEYxMtZpN0Q+juFSkMcquh3jVf0j0y+6gFe/MZjIFDHxiBdeJarOig==}
 
-  '@swagger-api/apidom-ns-openapi-3-0@1.0.0-beta.45':
-    resolution: {integrity: sha512-HaacHMmYfMp9UNSTONVxGRQDlQn8yEIOklHowI+/u8SRqdV87dE9UQhp8AMGw2hfnYiyt8ADFdPsLnYR6LEq7g==}
+  '@swagger-api/apidom-ns-openapi-3-0@1.0.0-rc.1':
+    resolution: {integrity: sha512-TC2EBxBFJWD5pbZKUcbySqCt2nQmeP60ooS4f4Nl5r6vB/BeNbuO4FmO7CDI8OXD7b4J2+ro5KrXMs1EOQ3kVA==}
 
-  '@swagger-api/apidom-ns-openapi-3-1@1.0.0-beta.45':
-    resolution: {integrity: sha512-irU2jMOZNWf/lAXc/JuWohHs55MQe7Rb36xzAqoyOjauk2nj/ougy5b+xvG3dLZu3ZKc/X9kmimPPLTs7P2Xhw==}
+  '@swagger-api/apidom-ns-openapi-3-1@1.0.0-rc.1':
+    resolution: {integrity: sha512-IY87MhqFBJnzhPWlr/OEVUa3iDjZuiwlyoWX4lw2jbKX+mLDrceGG5nqZawDACAjTjvtsjJcFP81D2VmjHVT5Q==}
 
-  '@swagger-api/apidom-parser-adapter-api-design-systems-json@1.0.0-beta.45':
-    resolution: {integrity: sha512-F8Glj81vrYc9oghEeM1Pfo8qbOptEl3tPOU3hQIqDM4pqMRuB3vwYfoZLVnwpewXacBRgwUiXXnaWV7alMnPzg==}
+  '@swagger-api/apidom-parser-adapter-api-design-systems-json@1.0.0-rc.1':
+    resolution: {integrity: sha512-1/koF8VwJHzFwk6FMWen39vpMUNcoCMXVY6MjMGag0h37LY5YAByl0LcYzLa33cvm5KCa23Aa75cu7Ns0SR1HQ==}
 
-  '@swagger-api/apidom-parser-adapter-api-design-systems-yaml@1.0.0-beta.45':
-    resolution: {integrity: sha512-Xdhk2yffGD2KcncTs8uNeiKBeBvr0njRRlhfSKdewb91SHXqyh2eKf168M6UPdT0dg3QQKdCT5lV+meKcYGpkw==}
+  '@swagger-api/apidom-parser-adapter-api-design-systems-yaml@1.0.0-rc.1':
+    resolution: {integrity: sha512-Gjx1gojtYvGFqKnGttv84ba0RCkY7Xa+12kj9HVik8G+YVzUN78Qt8yu96ak0oXFlY1Ai8MQb5siC8YH4pC8Dg==}
 
-  '@swagger-api/apidom-parser-adapter-arazzo-json-1@1.0.0-beta.45':
-    resolution: {integrity: sha512-SMJseBO32aHPXskwYThT2y3Py2B8B4gKqGXl+ZlMGCaM72Fnnr0hbqtI8wt2v58F97qVlTYvXvTSfQGUuUh/Kg==}
+  '@swagger-api/apidom-parser-adapter-arazzo-json-1@1.0.0-rc.1':
+    resolution: {integrity: sha512-RHIly3bprJELMlt91UFqmMbAtIxDyHi8DM27YVXRjrX7zncP6QKyevcg2ajEe8UaNtkCFvPZW9h0gDh/ZW6ZYQ==}
 
-  '@swagger-api/apidom-parser-adapter-arazzo-yaml-1@1.0.0-beta.45':
-    resolution: {integrity: sha512-w9v3E0F9OKSUoK2DtMphpUO2Dd+op+YrwHAYyZTbKL48DEd+Ez5L9wW1bURpfNMSaRjm5H9BrMM2eVdSz8TFQw==}
+  '@swagger-api/apidom-parser-adapter-arazzo-yaml-1@1.0.0-rc.1':
+    resolution: {integrity: sha512-a+FweCIFAAnjvEWpMAd93xczbYX7AU4prwAMJ3QpFszltq2K7HKWUN1mMRplYPg5SSRLZojymdyMlu1evuP2Sg==}
 
-  '@swagger-api/apidom-parser-adapter-asyncapi-json-2@1.0.0-beta.45':
-    resolution: {integrity: sha512-7txrflmTsG2400mHq6rswnxi6+r+H7vtL0Mfb0lMj4docaSODnTdEiNjG35jaQaBMbMEtRPokJ6i4018SNFy3Q==}
+  '@swagger-api/apidom-parser-adapter-asyncapi-json-2@1.0.0-rc.1':
+    resolution: {integrity: sha512-IKJ95OH35dW1+yGYDoE8uE3movG9z8Nht2QW8Ja75/H/jAFYGCxj56ZborEIiZxp83ItFqxQFn+ZUvwD7bDZew==}
 
-  '@swagger-api/apidom-parser-adapter-asyncapi-yaml-2@1.0.0-beta.45':
-    resolution: {integrity: sha512-laxCy1UmLjlUGRRlcEEQLHWmzwnUq750SFjnBUJe70DxNrBr68UqlLqKC/kGkpOOgsf+NMWhqSkS8WQ/eLsQww==}
+  '@swagger-api/apidom-parser-adapter-asyncapi-yaml-2@1.0.0-rc.1':
+    resolution: {integrity: sha512-cVu2Ue1U809HiGeAR/54yF42y4UKiWh45sEKzkXPYJUqRUd2Ewyo5KHtlckjNnCDRILZEhaPaZFpxURSbyUeSg==}
 
-  '@swagger-api/apidom-parser-adapter-json@1.0.0-beta.45':
-    resolution: {integrity: sha512-5fFln56FM/6xEvGEAjk+GvTcmts8P5nnCPNDQpxc/PVDcLxC0gzyp5bjkOLmj9nZXqCQRzm/PH0bmxGQv4JSmg==}
+  '@swagger-api/apidom-parser-adapter-json@1.0.0-rc.1':
+    resolution: {integrity: sha512-pmWOuZFxSNdbV1xNV0IoIrRiweaVl9yGAiEtiYH0BzbD+yGQSxi1ltMkZDVoyBPbe2NtygFDRaINSDLwuYpUYA==}
 
-  '@swagger-api/apidom-parser-adapter-openapi-json-2@1.0.0-beta.45':
-    resolution: {integrity: sha512-lFRbbCGyGilEkNLgZyJeHK2sUsmtEKljkvyZytjGXshd45lLkHD+/1vByKhClbyoA+aIk8lzLpeaMECbOH+a9w==}
+  '@swagger-api/apidom-parser-adapter-openapi-json-2@1.0.0-rc.1':
+    resolution: {integrity: sha512-+OsFBsD9PPqtcgETXU7l00/TMOfbtM+gvafJIdS/a+O1NQ2upAujQB3ArIB3sry3vloorjKmPyY6ZK/8rEKhNA==}
 
-  '@swagger-api/apidom-parser-adapter-openapi-json-3-0@1.0.0-beta.45':
-    resolution: {integrity: sha512-AMCSLQhWcsTvlAhZMIwGezXBxhqLnnQQPkZHwKBFA1sD0FLZJKmIs1bxuEuo3iKNHKfDvbKJLQsr6OOqCg1MtQ==}
+  '@swagger-api/apidom-parser-adapter-openapi-json-3-0@1.0.0-rc.1':
+    resolution: {integrity: sha512-FEUJ+RaXKMP6LHMVeVyUPKdqjEqMSEZVhpvZt3Kh5fvnZvdgWngqs4gUjxO+dQCDVWkBxH/29uXm2eghdaM2Lw==}
 
-  '@swagger-api/apidom-parser-adapter-openapi-json-3-1@1.0.0-beta.45':
-    resolution: {integrity: sha512-rnao77rKeLHrpfM/QRzsOVNaaqZVYv4QID35GDOkuIHjjDNTjmquUsuWscAtI32P7tJHmPrLAJWKxb48W02mmw==}
+  '@swagger-api/apidom-parser-adapter-openapi-json-3-1@1.0.0-rc.1':
+    resolution: {integrity: sha512-pcfPj3FW2IWPYmU5kE0YB7npqV2vN+DvqUsw1GcDzsb8y2IdkzagHtMPZkM/KrfHFmhsoHm5YNpYC+Vvd2g61Q==}
 
-  '@swagger-api/apidom-parser-adapter-openapi-yaml-2@1.0.0-beta.45':
-    resolution: {integrity: sha512-zilhJHYEV0cGde6ZdAfB+/4OnzHW8OCLO7bXmtoXdsxwJV0DHnwjrq2FgOlwqWBPWRIlyFwBwdUO0Rd5P4re3g==}
+  '@swagger-api/apidom-parser-adapter-openapi-yaml-2@1.0.0-rc.1':
+    resolution: {integrity: sha512-ckt6b1P+iwYkTMibixpo0oKWFm0wOGf88gslMMCo1xNaLVJnjxiadTQ/lNJd58CBJiQeN/dziTkRqGcFDqV9JQ==}
 
-  '@swagger-api/apidom-parser-adapter-openapi-yaml-3-0@1.0.0-beta.45':
-    resolution: {integrity: sha512-loof/awV/RNIaCHqr4+uVVjdSayAvNyxjLszyd0moAQv/247mfjvCH0h9VLIlpjI4kf+C3q4bhyYYaeVl9MSVg==}
+  '@swagger-api/apidom-parser-adapter-openapi-yaml-3-0@1.0.0-rc.1':
+    resolution: {integrity: sha512-JFyNwcj43cmps18Y+iqyna3uufyib8eLku+z4EhKFRPCuGFQ2bjsfVCFSP+Sv6sJATlagRRcfont+Q0BgNjwvw==}
 
-  '@swagger-api/apidom-parser-adapter-openapi-yaml-3-1@1.0.0-beta.45':
-    resolution: {integrity: sha512-h2oHGosYXditkPJ66aGEsvz6zpM6N26ay1ZRhk9LjuSA8S4BqFYY+MbJVD6C0LLP6Mn5jvDWCUq7yB0DTWNxpg==}
+  '@swagger-api/apidom-parser-adapter-openapi-yaml-3-1@1.0.0-rc.1':
+    resolution: {integrity: sha512-kLRZYxJdix+irs0HTXJ223rj4Ou8AXo9IHiSf44KTuAZ/bsuakb0P8xROHg5MWTTEHYMfDrdLX+LaUo3b2GFyA==}
 
-  '@swagger-api/apidom-parser-adapter-yaml-1-2@1.0.0-beta.45':
-    resolution: {integrity: sha512-/Emcfl4Va1GJB7kU2DWZBrqAn6dLi/sclPa4z0sjg+2EtOJ9l9zw3sKc4d7cEY5PX2QzgD8bFxBYrP9lU03IZw==}
+  '@swagger-api/apidom-parser-adapter-yaml-1-2@1.0.0-rc.1':
+    resolution: {integrity: sha512-XmRG/5lmoRusCupHEf10OeK1SQnSym4N1OrK+c3OTfN1GGX60Gxu2XCZ70pafJDuu+cvo/F8Db8UX3UOHapjwA==}
 
-  '@swagger-api/apidom-reference@1.0.0-beta.45':
-    resolution: {integrity: sha512-1EbK7P6oki5mR8bho+E0yoc9JwhOT/vboTjidolH8Fjw/WuE6GcMHX+8OBcwcgjt9hXWsY3YfvZFwK7baxkPnQ==}
+  '@swagger-api/apidom-reference@1.0.0-rc.1':
+    resolution: {integrity: sha512-Xj4aYrawCseCf6N6UuGSIaboN60ERmQVcKqXs/rybQz1gnD2AVqb8gklC2sUdOIUyN+ehDy+HDSM8I+yP32J0w==}
 
   '@swaggerexpert/cookie@2.0.2':
     resolution: {integrity: sha512-DPI8YJ0Vznk4CT+ekn3rcFNq1uQwvUHZhH6WvTSPD0YKBIlMS9ur2RYKghXuxxOiqOam/i4lHJH4xTIiTgs3Mg==}
@@ -8374,68 +9282,68 @@ packages:
     resolution: {integrity: sha512-qMx1nOrzoB+PF+pzb26Q4Tc2sOlrx9Ba2UBNX9hB31Omrq+QoZ2Gly0KLrQWw4Of1AQ4J9lnD+XOdwOdcdXqqw==}
     engines: {node: '>=12.20.0'}
 
-  '@swc/core-darwin-arm64@1.13.3':
-    resolution: {integrity: sha512-ux0Ws4pSpBTqbDS9GlVP354MekB1DwYlbxXU3VhnDr4GBcCOimpocx62x7cFJkSpEBF8bmX8+/TTCGKh4PbyXw==}
+  '@swc/core-darwin-arm64@1.14.0':
+    resolution: {integrity: sha512-uHPC8rlCt04nvYNczWzKVdgnRhxCa3ndKTBBbBpResOZsRmiwRAvByIGh599j+Oo6Z5eyTPrgY+XfJzVmXnN7Q==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@swc/core-darwin-x64@1.13.3':
-    resolution: {integrity: sha512-p0X6yhxmNUOMZrbeZ3ZNsPige8lSlSe1llllXvpCLkKKxN/k5vZt1sULoq6Nj4eQ7KeHQVm81/+AwKZyf/e0TA==}
+  '@swc/core-darwin-x64@1.14.0':
+    resolution: {integrity: sha512-2SHrlpl68vtePRknv9shvM9YKKg7B9T13tcTg9aFCwR318QTYo+FzsKGmQSv9ox/Ua0Q2/5y2BNjieffJoo4nA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
 
-  '@swc/core-linux-arm-gnueabihf@1.13.3':
-    resolution: {integrity: sha512-OmDoiexL2fVWvQTCtoh0xHMyEkZweQAlh4dRyvl8ugqIPEVARSYtaj55TBMUJIP44mSUOJ5tytjzhn2KFxFcBA==}
+  '@swc/core-linux-arm-gnueabihf@1.14.0':
+    resolution: {integrity: sha512-SMH8zn01dxt809svetnxpeg/jWdpi6dqHKO3Eb11u4OzU2PK7I5uKS6gf2hx5LlTbcJMFKULZiVwjlQLe8eqtg==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
 
-  '@swc/core-linux-arm64-gnu@1.13.3':
-    resolution: {integrity: sha512-STfKku3QfnuUj6k3g9ld4vwhtgCGYIFQmsGPPgT9MK/dI3Lwnpe5Gs5t1inoUIoGNP8sIOLlBB4HV4MmBjQuhw==}
+  '@swc/core-linux-arm64-gnu@1.14.0':
+    resolution: {integrity: sha512-q2JRu2D8LVqGeHkmpVCljVNltG0tB4o4eYg+dElFwCS8l2Mnt9qurMCxIeo9mgoqz0ax+k7jWtIRHktnVCbjvQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
 
-  '@swc/core-linux-arm64-musl@1.13.3':
-    resolution: {integrity: sha512-bc+CXYlFc1t8pv9yZJGus372ldzOVscBl7encUBlU1m/Sig0+NDJLz6cXXRcFyl6ABNOApWeR4Yl7iUWx6C8og==}
+  '@swc/core-linux-arm64-musl@1.14.0':
+    resolution: {integrity: sha512-uofpVoPCEUjYIv454ZEZ3sLgMD17nIwlz2z7bsn7rl301Kt/01umFA7MscUovFfAK2IRGck6XB+uulMu6aFhKQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
 
-  '@swc/core-linux-x64-gnu@1.13.3':
-    resolution: {integrity: sha512-dFXoa0TEhohrKcxn/54YKs1iwNeW6tUkHJgXW33H381SvjKFUV53WR231jh1sWVJETjA3vsAwxKwR23s7UCmUA==}
+  '@swc/core-linux-x64-gnu@1.14.0':
+    resolution: {integrity: sha512-quTTx1Olm05fBfv66DEBuOsOgqdypnZ/1Bh3yGXWY7ANLFeeRpCDZpljD9BSjdsNdPOlwJmEUZXMHtGm3v1TZQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
 
-  '@swc/core-linux-x64-musl@1.13.3':
-    resolution: {integrity: sha512-ieyjisLB+ldexiE/yD8uomaZuZIbTc8tjquYln9Quh5ykOBY7LpJJYBWvWtm1g3pHv6AXlBI8Jay7Fffb6aLfA==}
+  '@swc/core-linux-x64-musl@1.14.0':
+    resolution: {integrity: sha512-caaNAu+aIqT8seLtCf08i8C3/UC5ttQujUjejhMcuS1/LoCKtNiUs4VekJd2UGt+pyuuSrQ6dKl8CbCfWvWeXw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
 
-  '@swc/core-win32-arm64-msvc@1.13.3':
-    resolution: {integrity: sha512-elTQpnaX5vESSbhCEgcwXjpMsnUbqqHfEpB7ewpkAsLzKEXZaK67ihSRYAuAx6ewRQTo7DS5iTT6X5aQD3MzMw==}
+  '@swc/core-win32-arm64-msvc@1.14.0':
+    resolution: {integrity: sha512-EeW3jFlT3YNckJ6V/JnTfGcX7UHGyh6/AiCPopZ1HNaGiXVCKHPpVQZicmtyr/UpqxCXLrTgjHOvyMke7YN26A==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
 
-  '@swc/core-win32-ia32-msvc@1.13.3':
-    resolution: {integrity: sha512-nvehQVEOdI1BleJpuUgPLrclJ0TzbEMc+MarXDmmiRFwEUGqj+pnfkTSb7RZyS1puU74IXdK/YhTirHurtbI9w==}
+  '@swc/core-win32-ia32-msvc@1.14.0':
+    resolution: {integrity: sha512-dPai3KUIcihV5hfoO4QNQF5HAaw8+2bT7dvi8E5zLtecW2SfL3mUZipzampXq5FHll0RSCLzlrXnSx+dBRZIIQ==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
 
-  '@swc/core-win32-x64-msvc@1.13.3':
-    resolution: {integrity: sha512-A+JSKGkRbPLVV2Kwx8TaDAV0yXIXm/gc8m98hSkVDGlPBBmydgzNdWy3X7HTUBM7IDk7YlWE7w2+RUGjdgpTmg==}
+  '@swc/core-win32-x64-msvc@1.14.0':
+    resolution: {integrity: sha512-nm+JajGrTqUA6sEHdghDlHMNfH1WKSiuvljhdmBACW4ta4LC3gKurX2qZuiBARvPkephW9V/i5S8QPY1PzFEqg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@swc/core@1.13.3':
-    resolution: {integrity: sha512-ZaDETVWnm6FE0fc+c2UE8MHYVS3Fe91o5vkmGfgwGXFbxYvAjKSqxM/j4cRc9T7VZNSJjriXq58XkfCp3Y6f+w==}
+  '@swc/core@1.14.0':
+    resolution: {integrity: sha512-oExhY90bes5pDTVrei0xlMVosTxwd/NMafIpqsC4dMbRYZ5KB981l/CX8tMnGsagTplj/RcG9BeRYmV6/J5m3w==}
     engines: {node: '>=10'}
     peerDependencies:
       '@swc/helpers': '>=0.5.17'
@@ -8449,8 +9357,8 @@ packages:
   '@swc/helpers@0.5.17':
     resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
 
-  '@swc/types@0.1.24':
-    resolution: {integrity: sha512-tjTMh3V4vAORHtdTprLlfoMptu1WfTZG9Rsca6yOKyNYsRr+MUXutKmliB17orgSZk5DpnDxs8GUdd/qwYxOng==}
+  '@swc/types@0.1.25':
+    resolution: {integrity: sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==}
 
   '@szmarczak/http-timer@5.0.1':
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
@@ -8459,8 +9367,8 @@ packages:
   '@tanstack/query-core@4.27.0':
     resolution: {integrity: sha512-sm+QncWaPmM73IPwFlmWSKPqjdTXZeFf/7aEmWh00z7yl2FjqophPt0dE1EHW9P1giMC5rMviv7OUbSDmWzXXA==}
 
-  '@tanstack/query-core@4.40.0':
-    resolution: {integrity: sha512-7MJTtZkCSuehMC7IxMOCGsLvHS3jHx4WjveSrGsG1Nc1UQLjaFwwkpLA2LmPfvOAxnH4mszMOBFD6LlZE+aB+Q==}
+  '@tanstack/query-core@4.41.0':
+    resolution: {integrity: sha512-193R4Jp9hjvlij6LryxrB5Mpbffd2L9PeWh3KlIy/hJV4SkBOfiQZ+jc5qAZLDCrdbkA5FjGj+UoDYw6TcNnyA==}
 
   '@tanstack/query-core@5.76.0':
     resolution: {integrity: sha512-FN375hb8ctzfNAlex5gHI6+WDXTNpe0nbxp/d2YJtnP+IBM6OUm7zcaoCW6T63BawGOYZBbKC0iPvr41TteNVg==}
@@ -8471,8 +9379,8 @@ packages:
   '@tanstack/query-core@5.77.1':
     resolution: {integrity: sha512-nfxVhy4UynChMFfN4NxwI8pktV9R3Zt/ROxOAe6pdOf8CigDLn26p+ex1YW5uien26BBICLmN0dTvIELHCs5vw==}
 
-  '@tanstack/query-core@5.83.1':
-    resolution: {integrity: sha512-OG69LQgT7jSp+5pPuCfzltq/+7l2xoweggjme9vlbCPa/d7D7zaqv5vN/S82SzSYZ4EDLTxNO1PWrv49RAS64Q==}
+  '@tanstack/query-core@5.90.6':
+    resolution: {integrity: sha512-AnZSLF26R8uX+tqb/ivdrwbVdGemdEDm1Q19qM6pry6eOZ6bEYiY7mWhzXT1YDIPTNEVcZ5kYP9nWjoxDLiIVw==}
 
   '@tanstack/query-persist-client-core@4.27.0':
     resolution: {integrity: sha512-A+dPA7zG0MJOMDeBc/2WcKXW4wV2JMkeBVydobPW9G02M4q0yAj7vI+7SmM2dFuXyIvxXp4KulCywN6abRKDSQ==}
@@ -8617,6 +9525,18 @@ packages:
   '@ts-morph/common@0.27.0':
     resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
 
+  '@tsconfig/node10@1.0.11':
+    resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
+
+  '@tsconfig/node12@1.0.11':
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+
+  '@tsconfig/node14@1.0.3':
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+
+  '@tsconfig/node16@1.0.4':
+    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -8647,8 +9567,8 @@ packages:
   '@types/chai@4.3.20':
     resolution: {integrity: sha512-/pC9HAB5I/xMlc5FP77qjCnI16ChlJfW0tGa0IUcFn38VJrTV6DeZ60NU5KZBtaOZqjdpwTWohz5HU1RrhiYxQ==}
 
-  '@types/chai@5.2.2':
-    resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
   '@types/classnames@2.3.4':
     resolution: {integrity: sha512-dwmfrMMQb9ujX1uYGvB5ERDlOzBNywnZAZBtOe107/hORWP05ESgU4QyaanZMWYYfd2BzrG78y13/Bju8IQcMQ==}
@@ -8657,8 +9577,8 @@ packages:
   '@types/codemirror@0.0.90':
     resolution: {integrity: sha512-8Z9+tSg27NPRGubbUPUCrt5DDG/OWzLph5BvcDykwR5D7RyZh5mhHG0uS1ePKV1YFCA+/cwc4Ey2AJAEFfV3IA==}
 
-  '@types/codemirror@5.60.16':
-    resolution: {integrity: sha512-V/yHdamffSS075jit+fDxaOAmdP2liok8NSNJnAZfDJErzOheuygHZEhAJrfmk5TEyM32MhkZjwo/idX791yxw==}
+  '@types/codemirror@5.60.17':
+    resolution: {integrity: sha512-AZq2FIsUHVMlp7VSe2hTfl5w4pcUkoFkM3zVsRKsn1ca8CXRDYvnin04+HP2REkwsxemuHqvDofdlhUWNpbwfw==}
 
   '@types/connect-history-api-fallback@1.5.4':
     resolution: {integrity: sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==}
@@ -8693,8 +9613,8 @@ packages:
   '@types/ejs@3.1.5':
     resolution: {integrity: sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==}
 
-  '@types/emscripten@1.40.1':
-    resolution: {integrity: sha512-sr53lnYkQNhjHNN0oJDdUm5564biioI5DuOpycufDVK7D3y+GR3oUswe2rlwY1nPNyusHbrJ9WoTyIHl4/Bpwg==}
+  '@types/emscripten@1.41.5':
+    resolution: {integrity: sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q==}
 
   '@types/escodegen@0.0.6':
     resolution: {integrity: sha512-AjwI4MvWx3HAOaZqYsjKWyEObT9lcVV0Y0V8nXo6cXzN8ZiMxVhf6F3d/UNvXVGKrEzL/Dluc5p+y9GkzlTWig==}
@@ -8720,11 +9640,11 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  '@types/express-serve-static-core@4.19.6':
-    resolution: {integrity: sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==}
+  '@types/express-serve-static-core@4.19.7':
+    resolution: {integrity: sha512-FvPtiIf1LfhzsaIXhv/PHan/2FeQBbtBDtfX2QfvPxdUelMDEckK08SM6nqo1MIZY3RUlfA+HV8+hFUSio78qg==}
 
-  '@types/express@4.17.23':
-    resolution: {integrity: sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ==}
+  '@types/express@4.17.25':
+    resolution: {integrity: sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==}
 
   '@types/find-cache-dir@3.2.1':
     resolution: {integrity: sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==}
@@ -8768,8 +9688,8 @@ packages:
   '@types/http-errors@2.0.5':
     resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
 
-  '@types/http-proxy@1.17.16':
-    resolution: {integrity: sha512-sdWoUajOB1cd0A8cRRQ1cfyWNbmFKLAqBB89Y8x5iYyG/mkJHc0YUH8pdWBy2omi9qtCpiIgGjuwO0dQST2l5w==}
+  '@types/http-proxy@1.17.17':
+    resolution: {integrity: sha512-ED6LB+Z1AVylNTu7hdzuBqOgMnvG/ld6wGCG8wFnAzKX5uyW2K3WD52v0gnLCTK/VLpXtKckgWuyScYK6cSPaw==}
 
   '@types/is-function@1.0.3':
     resolution: {integrity: sha512-/CLhCW79JUeLKznI6mbVieGbl4QU5Hfn+6udw1YHZoofASjbQ5zaP5LzAUZYDpRYEjS4/P+DhEgyJ/PQmGGTWw==}
@@ -8868,14 +9788,17 @@ packages:
   '@types/node-fetch@2.6.13':
     resolution: {integrity: sha512-QGpRVpzSaUs30JBSGPjOg4Uveu384erbHBoT1zeONvyCfwQxIkUshLAOqN/k9EjGviPRmWTTe6aH2qySWKTVSw==}
 
-  '@types/node-forge@1.3.13':
-    resolution: {integrity: sha512-zePQJSW5QkwSHKRApqWCVKeKoSOt4xvEnLENZPjyvm9Ezdf/EyDeJM7jqLzOwjVICQQzvLZ63T55MKdJB5H6ww==}
+  '@types/node-forge@1.3.14':
+    resolution: {integrity: sha512-mhVF2BnD4BO+jtOp7z1CdzaK4mbuK0LLQYAvdOLqHTavxFNq4zA1EmYkpnFjP8HOUzedfQkRnp0E2ulSAYSzAw==}
 
   '@types/node@16.18.126':
     resolution: {integrity: sha512-OTcgaiwfGFBKacvfwuHzzn1KLxH/er8mluiy8/uM3sGXHaRe73RrSIj01jow9t4kJEW633Ov+cOexXeiApTyAw==}
 
-  '@types/node@18.19.121':
-    resolution: {integrity: sha512-bHOrbyztmyYIi4f1R0s17QsPs1uyyYnGcXeZoGEd227oZjry0q6XQBQxd82X1I57zEfwO8h9Xo+Kl5gX1d9MwQ==}
+  '@types/node@18.19.130':
+    resolution: {integrity: sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg==}
+
+  '@types/node@20.19.24':
+    resolution: {integrity: sha512-FE5u0ezmi6y9OZEzlJfg37mqqf6ZDSF2V/NLjUyGrR9uTZ7Sb9F7bLNZ03S4XVUNRWGA7Ck4c1kK+YnuWjl+DA==}
 
   '@types/node@22.15.18':
     resolution: {integrity: sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==}
@@ -8949,8 +9872,8 @@ packages:
   '@types/react-test-renderer@19.1.0':
     resolution: {integrity: sha512-XD0WZrHqjNrxA/MaR9O22w/RNidWR9YZmBdRGI7wcnWGrv/3dA8wKCJ8m63Sn+tLJhcjmuhOi629N66W6kgWzQ==}
 
-  '@types/react@17.0.87':
-    resolution: {integrity: sha512-wpg9AbtJ6agjA+BKYmhG6dRWEU/2DHYwMzCaBzsz137ft6IyuqZ5fI4ic1DWL4DrI03Zy78IyVE6ucrXl0mu4g==}
+  '@types/react@17.0.89':
+    resolution: {integrity: sha512-I98SaDCar5lvEYl80ClRIUztH/hyWHR+I2f+5yTVp/MQ205HgYkA2b5mVdry/+nsEIrf8I65KA5V/PASx68MsQ==}
 
   '@types/react@18.2.0':
     resolution: {integrity: sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==}
@@ -8976,20 +9899,23 @@ packages:
   '@types/scheduler@0.26.0':
     resolution: {integrity: sha512-WFHp9YUJQ6CKshqoC37iOlHnQSmxNc795UhB26CyBBttrN9svdIrUjl/NjnNmfcwtncN0h/0PPAFWv9ovP8mLA==}
 
-  '@types/selenium-webdriver@4.1.28':
-    resolution: {integrity: sha512-Au7CXegiS7oapbB16zxPToY4Cjzi9UQQMf3W2ZZM8PigMLTGR3iUAHjPUTddyE5g1SBjT/qpmvlsAQLBfNAdKg==}
+  '@types/selenium-webdriver@4.35.3':
+    resolution: {integrity: sha512-V8rEfVHFNsamhflPVqEgP1u8VShsEBAuQoLkIzpjwvPOkfmcNFp+mzJzFBwcIS9S90bxgRN3sp+Us/Mx55MXIA==}
 
-  '@types/semver@7.7.0':
-    resolution: {integrity: sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==}
+  '@types/semver@7.7.1':
+    resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
 
-  '@types/send@0.17.5':
-    resolution: {integrity: sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w==}
+  '@types/send@0.17.6':
+    resolution: {integrity: sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==}
+
+  '@types/send@1.2.1':
+    resolution: {integrity: sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==}
 
   '@types/serve-index@1.9.4':
     resolution: {integrity: sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==}
 
-  '@types/serve-static@1.15.8':
-    resolution: {integrity: sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==}
+  '@types/serve-static@1.15.10':
+    resolution: {integrity: sha512-tRs1dB+g8Itk72rlSI2ZrW6vZg0YrLI81iQSTkMmOqnqCaNr/8Ek4VwWcN5vZgCYWbg/JJSGBlUaYGAOP73qBw==}
 
   '@types/sockjs@0.3.36':
     resolution: {integrity: sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==}
@@ -9051,14 +9977,14 @@ packages:
   '@types/uuid@9.0.8':
     resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
 
-  '@types/vscode-notebook-renderer@1.72.3':
-    resolution: {integrity: sha512-MfmEI3A2McbUV2WaijoTgLOAs9chwHN4WmqOedl3jdtlbzJBWIQ9ZFmQdzPa3lYr5j8DJhRg3KB5AIM/BBfg9Q==}
+  '@types/vscode-notebook-renderer@1.72.4':
+    resolution: {integrity: sha512-bdKO41c6Dc24pH/O/eM/jqfCwGH4zc76o/g/6Gt1y/eg/bvvqP2/VpbV+Sa5Te2sZekFRcbYnSSFTKo3wcVGUg==}
 
   '@types/vscode-webview@1.57.5':
     resolution: {integrity: sha512-iBAUYNYkz+uk1kdsq05fEcoh8gJmwT3lqqFPN7MGyjQ3HVloViMdo7ZJ8DFIP8WOK74PjOEilosqAyxV2iUFUw==}
 
-  '@types/vscode@1.102.0':
-    resolution: {integrity: sha512-V9sFXmcXz03FtYTSUsYsu5K0Q9wH9w9V25slddcxrh5JgORD14LpnOA7ov0L9ALi+6HrTjskLJ/tY5zeRF3TFA==}
+  '@types/vscode@1.105.0':
+    resolution: {integrity: sha512-Lotk3CTFlGZN8ray4VxJE7axIyLZZETQJVWi/lYoUVQuqfRxlQhVOfoejsD2V3dVXPSbS15ov5ZyowMAzgUqcw==}
 
   '@types/webpack-env@1.18.8':
     resolution: {integrity: sha512-G9eAoJRMLjcvN4I08wB5I7YofOb/kaJNd5uoCMX+LbKXTPCF+ZIHuqTnFaK9Jz1rgs035f9JUPUhNFtqgucy/A==}
@@ -9087,8 +10013,8 @@ packages:
   '@types/yargs@15.0.19':
     resolution: {integrity: sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==}
 
-  '@types/yargs@17.0.33':
-    resolution: {integrity: sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==}
+  '@types/yargs@17.0.34':
+    resolution: {integrity: sha512-KExbHVa92aJpw9WDQvzBaGVE2/Pz+pLZQloT2hjL8IqsZnV62rlPOYvNnLmf/L2dyllfVUOVBj64M0z/46eR2A==}
 
   '@typescript-eslint/eslint-plugin@2.34.0':
     resolution: {integrity: sha512-4zY3Z88rEE99+CNvTbXSyovv2z9PNOVffTWD2W8QF5s2prBQtwN2zadqERcrHpcR7O/+KMI3fcTAmUUhK/iQcQ==}
@@ -9216,8 +10142,8 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/project-service@8.39.0':
-    resolution: {integrity: sha512-CTzJqaSq30V/Z2Og9jogzZt8lJRR5TKlAdXmWgdu4hgcC9Kww5flQ+xFvMxIBWVNdxJO7OifgdOK4PokMIWPew==}
+  '@typescript-eslint/project-service@8.46.3':
+    resolution: {integrity: sha512-Fz8yFXsp2wDFeUElO88S9n4w1I4CWDTXDqDr9gYvZgUpwXQqmZBr9+NTTql5R3J7+hrJZPdpiWaB9VNhAKYLuQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -9242,8 +10168,8 @@ packages:
     resolution: {integrity: sha512-dM4UBtgmzHR9bS0Rv09JST0RcHYearoEoo3pG5B6GoTR9XcyeqX87FEhPo+5kTvVfKCvfHaHrcgeJQc6mrDKrA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/scope-manager@8.39.0':
-    resolution: {integrity: sha512-8QOzff9UKxOh6npZQ/4FQu4mjdOCGSdO3p44ww0hk8Vu+IGbg0tB/H1LcTARRDzGCC8pDGbh2rissBuuoPgH8A==}
+  '@typescript-eslint/scope-manager@8.46.3':
+    resolution: {integrity: sha512-FCi7Y1zgrmxp3DfWfr+3m9ansUUFoy8dkEdeQSgA9gbm8DaHYvZCdkFRQrtKiedFf3Ha6VmoqoAaP68+i+22kg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/tsconfig-utils@8.33.1':
@@ -9252,8 +10178,8 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/tsconfig-utils@8.39.0':
-    resolution: {integrity: sha512-Fd3/QjmFV2sKmvv3Mrj8r6N8CryYiCS8Wdb/6/rgOXAWGcFuc+VkQuG28uk/4kVNVZBQuuDHEDUpo/pQ32zsIQ==}
+  '@typescript-eslint/tsconfig-utils@8.46.3':
+    resolution: {integrity: sha512-GLupljMniHNIROP0zE7nCcybptolcH8QZfXOpCfhQDAdwJ/ZTlcaBOYebSOZotpti/3HrHSw7D3PZm75gYFsOA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -9322,8 +10248,8 @@ packages:
     resolution: {integrity: sha512-xid1WfizGhy/TKMTwhtVOgalHwPtV8T32MS9MaH50Cwvz6x6YqRIPdD2WvW0XaqOzTV9p5xdLY0h/ZusU5Lokg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/types@8.39.0':
-    resolution: {integrity: sha512-ArDdaOllnCj3yn/lzKn9s0pBQYmmyme/v1HbGIGB0GB/knFI3fWMHloC+oYTJW46tVbYnGKTMDK4ah1sC2v0Kg==}
+  '@typescript-eslint/types@8.46.3':
+    resolution: {integrity: sha512-G7Ok9WN/ggW7e/tOf8TQYMaxgID3Iujn231hfi0Pc7ZheztIJVpO44ekY00b7akqc6nZcvregk0Jpah3kep6hA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/typescript-estree@2.34.0':
@@ -9374,8 +10300,8 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/typescript-estree@8.39.0':
-    resolution: {integrity: sha512-ndWdiflRMvfIgQRpckQQLiB5qAKQ7w++V4LlCHwp62eym1HLB/kw7D9f2e8ytONls/jt89TEasgvb+VwnRprsw==}
+  '@typescript-eslint/typescript-estree@8.46.3':
+    resolution: {integrity: sha512-f/NvtRjOm80BtNM5OQtlaBdM5BRFUv7gf381j9wygDNL+qOYSNOgtQ/DCndiYi80iIOv76QqaTmp4fa9hwI0OA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -9412,8 +10338,8 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/utils@8.39.0':
-    resolution: {integrity: sha512-4GVSvNA0Vx1Ktwvf4sFE+exxJ3QGUorQG1/A5mRfRNZtkBT2xrA/BCO2H0eALx/PnvCS6/vmYwRdDA41EoffkQ==}
+  '@typescript-eslint/utils@8.46.3':
+    resolution: {integrity: sha512-VXw7qmdkucEx9WkmR3ld/u6VhRyKeiF1uxWwCy/iuNfokjJ7VhsgLSOTjsol8BunSw190zABzpwdNsze2Kpo4g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -9439,12 +10365,12 @@ packages:
     resolution: {integrity: sha512-3i8NrFcZeeDHJ+7ZUuDkGT+UHq+XoFGsymNK2jZCOHcfEzRQ0BdpRtdpSx/Iyf3MHLWIcLS0COuOPibKQboIiQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/visitor-keys@8.39.0':
-    resolution: {integrity: sha512-ldgiJ+VAhQCfIjeOgu8Kj5nSxds0ktPOSO9p4+0VDH2R2pLvQraaM5Oen2d7NxzMCm+Sn/vJT+mv2H5u6b/3fA==}
+  '@typescript-eslint/visitor-keys@8.46.3':
+    resolution: {integrity: sha512-uk574k8IU0rOF/AjniX8qbLSGURJVUCeM5e4MIMKBFFi8weeiLrG1fyQejyLXQpRZbU/1BuQasleV/RfHC3hHg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typespec/ts-http-runtime@0.3.0':
-    resolution: {integrity: sha512-sOx1PKSuFwnIl7z4RN0Ls7N9AQawmR9r66eI5rFCzLDIs8HTIYrIpH9QjYWoX0lkgGrkLxXhi4QnK7MizPRrIg==}
+  '@typespec/ts-http-runtime@0.3.1':
+    resolution: {integrity: sha512-SnbaqayTVFEA6/tYumdF0UmybY0KHyKwGPBXnyckFlrrKdhWFrL3a2HIPXHjht5ZOElKGcXfD2D63P36btb+ww==}
     engines: {node: '>=20.0.0'}
 
   '@uiw/codemirror-extensions-basic-setup@4.23.14':
@@ -9463,6 +10389,10 @@ packages:
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
+  '@vercel/oidc@3.0.3':
+    resolution: {integrity: sha512-yNEQvPcVrK9sIe637+I0jD6leluPxzwJKx/Haw6F4H77CdDsszUn5V3o96LPziXkSNE2B83+Z3mjqGKBK/R6Gg==}
+    engines: {node: '>= 20'}
+
   '@vitest/expect@2.0.5':
     resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
 
@@ -9523,60 +10453,65 @@ packages:
     resolution: {integrity: sha512-vaTZE65zigWwSWYB6yaZUAyVC/Ux+6U82hnzy/ejuS/KpFifO+0oORNd5yAoPeIRnYjvllM6ES3YlX4K5tUuww==}
     engines: {vscode: ^1.75.0}
 
-  '@vscode/iconv-lite-umd@0.7.0':
-    resolution: {integrity: sha512-bRRFxLfg5dtAyl5XyiVWz/ZBPahpOpPrNYnnHpOpUZvam4tKH35wdhP4Kj6PbM0+KdliOsPzbGWpkxcdpNB/sg==}
+  '@vscode/iconv-lite-umd@0.7.1':
+    resolution: {integrity: sha512-tK6k0DXFHW7q5+GGuGZO+phpAqpxO4WXl+BLc/8/uOk3RsM2ssAL3CQUQDb1TGfwltjsauhN6S4ghYZzs4sPFw==}
 
   '@vscode/test-electron@2.5.2':
     resolution: {integrity: sha512-8ukpxv4wYe0iWMRQU18jhzJOHkeGKbnw7xWRX3Zw1WJA4cEKbHcmmLPdPrPtL6rhDcrlCZN+xKRpv09n4gRHYg==}
     engines: {node: '>=16'}
 
-  '@vscode/vsce-sign-alpine-arm64@2.0.5':
-    resolution: {integrity: sha512-XVmnF40APwRPXSLYA28Ye+qWxB25KhSVpF2eZVtVOs6g7fkpOxsVnpRU1Bz2xG4ySI79IRuapDJoAQFkoOgfdQ==}
+  '@vscode/vsce-sign-alpine-arm64@2.0.6':
+    resolution: {integrity: sha512-wKkJBsvKF+f0GfsUuGT0tSW0kZL87QggEiqNqK6/8hvqsXvpx8OsTEc3mnE1kejkh5r+qUyQ7PtF8jZYN0mo8Q==}
     cpu: [arm64]
     os: [alpine]
 
-  '@vscode/vsce-sign-alpine-x64@2.0.5':
-    resolution: {integrity: sha512-JuxY3xcquRsOezKq6PEHwCgd1rh1GnhyH6urVEWUzWn1c1PC4EOoyffMD+zLZtFuZF5qR1I0+cqDRNKyPvpK7Q==}
+  '@vscode/vsce-sign-alpine-x64@2.0.6':
+    resolution: {integrity: sha512-YoAGlmdK39vKi9jA18i4ufBbd95OqGJxRvF3n6ZbCyziwy3O+JgOpIUPxv5tjeO6gQfx29qBivQ8ZZTUF2Ba0w==}
     cpu: [x64]
     os: [alpine]
 
-  '@vscode/vsce-sign-darwin-arm64@2.0.5':
-    resolution: {integrity: sha512-z2Q62bk0ptADFz8a0vtPvnm6vxpyP3hIEYMU+i1AWz263Pj8Mc38cm/4sjzxu+LIsAfhe9HzvYNS49lV+KsatQ==}
+  '@vscode/vsce-sign-darwin-arm64@2.0.2':
+    resolution: {integrity: sha512-rz8F4pMcxPj8fjKAJIfkUT8ycG9CjIp888VY/6pq6cuI2qEzQ0+b5p3xb74CJnBbSC0p2eRVoe+WgNCAxCLtzQ==}
     cpu: [arm64]
     os: [darwin]
 
-  '@vscode/vsce-sign-darwin-x64@2.0.5':
-    resolution: {integrity: sha512-ma9JDC7FJ16SuPXlLKkvOD2qLsmW/cKfqK4zzM2iJE1PbckF3BlR08lYqHV89gmuoTpYB55+z8Y5Fz4wEJBVDA==}
+  '@vscode/vsce-sign-darwin-x64@2.0.2':
+    resolution: {integrity: sha512-MCjPrQ5MY/QVoZ6n0D92jcRb7eYvxAujG/AH2yM6lI0BspvJQxp0o9s5oiAM9r32r9tkLpiy5s2icsbwefAQIw==}
     cpu: [x64]
     os: [darwin]
 
-  '@vscode/vsce-sign-linux-arm64@2.0.5':
-    resolution: {integrity: sha512-Hr1o0veBymg9SmkCqYnfaiUnes5YK6k/lKFA5MhNmiEN5fNqxyPUCdRZMFs3Ajtx2OFW4q3KuYVRwGA7jdLo7Q==}
+  '@vscode/vsce-sign-linux-arm64@2.0.6':
+    resolution: {integrity: sha512-cfb1qK7lygtMa4NUl2582nP7aliLYuDEVpAbXJMkDq1qE+olIw/es+C8j1LJwvcRq1I2yWGtSn3EkDp9Dq5FdA==}
     cpu: [arm64]
     os: [linux]
 
-  '@vscode/vsce-sign-linux-arm@2.0.5':
-    resolution: {integrity: sha512-cdCwtLGmvC1QVrkIsyzv01+o9eR+wodMJUZ9Ak3owhcGxPRB53/WvrDHAFYA6i8Oy232nuen1YqWeEohqBuSzA==}
+  '@vscode/vsce-sign-linux-arm@2.0.6':
+    resolution: {integrity: sha512-UndEc2Xlq4HsuMPnwu7420uqceXjs4yb5W8E2/UkaHBB9OWCwMd3/bRe/1eLe3D8kPpxzcaeTyXiK3RdzS/1CA==}
     cpu: [arm]
     os: [linux]
 
-  '@vscode/vsce-sign-linux-x64@2.0.5':
-    resolution: {integrity: sha512-XLT0gfGMcxk6CMRLDkgqEPTyG8Oa0OFe1tPv2RVbphSOjFWJwZgK3TYWx39i/7gqpDHlax0AP6cgMygNJrA6zg==}
+  '@vscode/vsce-sign-linux-x64@2.0.6':
+    resolution: {integrity: sha512-/olerl1A4sOqdP+hjvJ1sbQjKN07Y3DVnxO4gnbn/ahtQvFrdhUi0G1VsZXDNjfqmXw57DmPi5ASnj/8PGZhAA==}
     cpu: [x64]
     os: [linux]
 
-  '@vscode/vsce-sign-win32-arm64@2.0.5':
-    resolution: {integrity: sha512-hco8eaoTcvtmuPhavyCZhrk5QIcLiyAUhEso87ApAWDllG7djIrWiOCtqn48k4pHz+L8oCQlE0nwNHfcYcxOPw==}
+  '@vscode/vsce-sign-win32-arm64@2.0.6':
+    resolution: {integrity: sha512-ivM/MiGIY0PJNZBoGtlRBM/xDpwbdlCWomUWuLmIxbi1Cxe/1nooYrEQoaHD8ojVRgzdQEUzMsRbyF5cJJgYOg==}
     cpu: [arm64]
     os: [win32]
 
-  '@vscode/vsce-sign-win32-x64@2.0.5':
-    resolution: {integrity: sha512-1ixKFGM2FwM+6kQS2ojfY3aAelICxjiCzeg4nTHpkeU1Tfs4RC+lVLrgq5NwcBC7ZLr6UfY3Ct3D6suPeOf7BQ==}
+  '@vscode/vsce-sign-win32-x64@2.0.6':
+    resolution: {integrity: sha512-mgth9Kvze+u8CruYMmhHw6Zgy3GRX2S+Ed5oSokDEK5vPEwGGKnmuXua9tmFhomeAnhgJnL4DCna3TiNuGrBTQ==}
     cpu: [x64]
     os: [win32]
 
-  '@vscode/vsce-sign@2.0.6':
-    resolution: {integrity: sha512-j9Ashk+uOWCDHYDxgGsqzKq5FXW9b9MW7QqOIYZ8IYpneJclWTBeHZz2DJCSKQgo+JAqNcaRRE1hzIx0dswqAw==}
+  '@vscode/vsce-sign@2.0.8':
+    resolution: {integrity: sha512-H7p8E11cZMj6mt8xIi3QXZ7dSU/2MH3Y7c+5JfUhHAV4xfaPNc8ozwLVK282c6ah596KoIJIdPUlNHV7Qs/5JA==}
+
+  '@vscode/vsce@2.21.1':
+    resolution: {integrity: sha512-f45/aT+HTubfCU2oC7IaWnH9NjOWp668ML002QiFObFRVUCoLtcwepp9mmql/ArFUy+HCHp54Xrq4koTcOD6TA==}
+    engines: {node: '>= 14'}
+    hasBin: true
 
   '@vscode/vsce@2.32.0':
     resolution: {integrity: sha512-3EFJfsgrSftIqt3EtdRcAygy/OJ3hstyI1cDmIgkU9CFZW5C+3djr6mfosndCUqcVYuyjmxOK1xmFp/Bq7+NIg==}
@@ -9714,8 +10649,8 @@ packages:
     engines: {node: '>=10.0.0'}
     deprecated: this version is no longer supported, please update to at least 0.8.*
 
-  '@xmldom/xmldom@0.8.10':
-    resolution: {integrity: sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==}
+  '@xmldom/xmldom@0.8.11':
+    resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
     engines: {node: '>=10.0.0'}
 
   '@xtuc/ieee754@1.2.0':
@@ -9857,8 +10792,8 @@ packages:
     resolution: {integrity: sha512-0poP0T7el6Vq3rstR8Mn4V/IQrpBLO6POkUSrN7RhyY+GF/InCFShQzsQ39T25gkHhLgSLByyAz+Kjb+c2L98w==}
     engines: {node: '>=12'}
 
-  ai@5.0.59:
-    resolution: {integrity: sha512-SuAFxKXt2Ha9FiXB3gaOITkOg9ek/3QNVatGVExvTT4gNXc+hJpuNe1dmuwf6Z5Op4fzc8wdbsrYP27ZCXBzlw==}
+  ai@5.0.87:
+    resolution: {integrity: sha512-9Cjx7o8IY9zAczigX0Tk/BaQwjPe/M6DpEjejKSBNrf8mOPIvyM+pJLqJSC10IsKci3FPsnaizJeJhoetU1Wfw==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
@@ -9940,8 +10875,8 @@ packages:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
     engines: {node: '>=8'}
 
-  ansi-escapes@7.0.0:
-    resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
+  ansi-escapes@7.1.1:
+    resolution: {integrity: sha512-Zhl0ErHcSRUaVfGUeUdDuLgpkEo8KIFjB4Y9uAc46ScOpdDiU1Dbyplh7qWJeJ/ZHpbyMSM26+X3BySgnIz40Q==}
     engines: {node: '>=18'}
 
   ansi-html-community@0.0.8:
@@ -9970,8 +10905,8 @@ packages:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
-  ansi-regex@6.1.0:
-    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
     engines: {node: '>=12'}
 
   ansi-styles@2.2.1:
@@ -9990,8 +10925,8 @@ packages:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
 
-  ansi-styles@6.2.1:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
 
   ansi-to-html@0.6.15:
@@ -10049,6 +10984,9 @@ packages:
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     deprecated: This package is no longer supported.
 
+  arg@4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -10274,12 +11212,12 @@ packages:
   aws4fetch@1.0.20:
     resolution: {integrity: sha512-/djoAN709iY65ETD6LKCtyyEI04XIBP5xVvfmNxsEP0uJB5tyaGBztSryRr4HqMStr9R06PisQE7m9zDTXKu6g==}
 
-  axe-core@4.10.3:
-    resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
+  axe-core@4.11.0:
+    resolution: {integrity: sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==}
     engines: {node: '>=4'}
 
-  axios@1.12.0:
-    resolution: {integrity: sha512-oXTDccv8PcfjZmPGlWsPSwtOJCZ/b6W5jAMCNcfwJbCzDckwG0jrYJFaWH1yvivfCXjVzV/SPDEhMB3Q+DSurg==}
+  axios@1.12.2:
+    resolution: {integrity: sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==}
 
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
@@ -10699,11 +11637,16 @@ packages:
   balanced-match@2.0.0:
     resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
 
-  bare-events@2.7.0:
-    resolution: {integrity: sha512-b3N5eTW1g7vXkw+0CXh/HazGTcO5KYuu/RCNaJbDMPI6LHDi+7qe8EmxKUVe1sUbY2KZOVZFyj62x0OEz9qyAA==}
+  bare-events@2.8.1:
+    resolution: {integrity: sha512-oxSAxTS1hRfnyit2CL5QpAOS5ixfBjj6ex3yTNvXyY/kE719jQ/IjuESJBK2w5v4wwQRAHGseVJXx9QBYOtFGQ==}
+    peerDependencies:
+      bare-abort-controller: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
 
-  bare-fs@4.4.4:
-    resolution: {integrity: sha512-Q8yxM1eLhJfuM7KXVP3zjhBvtMJCYRByoTT+wHXjpdMELv0xICFJX+1w4c7csa+WZEOsq4ItJ4RGwvzid6m/dw==}
+  bare-fs@4.5.0:
+    resolution: {integrity: sha512-GljgCjeupKZJNetTqxKaQArLK10vpmK28or0+RwWjEl5Rk+/xG3wkpmkv+WrcBm3q1BwHKlnhXzR8O37kcvkXQ==}
     engines: {bare: '>=1.16.0'}
     peerDependencies:
       bare-buffer: '*'
@@ -10729,8 +11672,8 @@ packages:
       bare-events:
         optional: true
 
-  bare-url@2.2.2:
-    resolution: {integrity: sha512-g+ueNGKkrjMazDG3elZO1pNs3HY5+mMmOet1jtKyhOaCnkLzitxf26z7hoAEkDNgdNmnc1KIlt/dw6Po6xZMpA==}
+  bare-url@2.3.2:
+    resolution: {integrity: sha512-ZMq4gd9ngV5aTMa5p9+UfY0b3skwhHELaDkhEHetMdX0LRkW9kzaym4oo/Eh+Ghm0CCDuMTsRIGM/ytUc1ZYmw==}
 
   base16@1.0.0:
     resolution: {integrity: sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==}
@@ -10738,6 +11681,10 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
+  baseline-browser-mapping@2.8.23:
+    resolution: {integrity: sha512-616V5YX4bepJFzNyOfce5Fa8fDJMfoxzOIzDCZwaGL8MKVpFrXqfNUoIpRn9YMI5pXf/VKgzjB4htFMsFKKdiQ==}
+    hasBin: true
+
   basic-auth@2.0.1:
     resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
     engines: {node: '>= 0.8'}
@@ -10817,8 +11764,8 @@ packages:
   boundary@2.0.0:
     resolution: {integrity: sha512-rJKn5ooC9u8q13IMCrW0RSp31pxBCHE3y9V/tp3TdWSLf8Em3p6Di4NBpfzbJge9YjjFEsD0RtFEjtvHL5VyEA==}
 
-  bowser@2.11.0:
-    resolution: {integrity: sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==}
+  bowser@2.12.1:
+    resolution: {integrity: sha512-z4rE2Gxh7tvshQ4hluIT7XcFrgLIQaw9X3A+kTTRdovCz5PMukm/0QC/BKSYPj3omF5Qfypn9O/c5kgpmvYUCw==}
 
   boxen@1.3.0:
     resolution: {integrity: sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==}
@@ -10867,8 +11814,8 @@ packages:
     deprecated: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
     hasBin: true
 
-  browserslist@4.25.1:
-    resolution: {integrity: sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==}
+  browserslist@4.27.0:
+    resolution: {integrity: sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -10933,6 +11880,10 @@ packages:
     resolution: {integrity: sha512-fey6+4jDK7TFtFg/klGSvNKJctyU7n2aQdnM+CO0ruLPbqqMOM8Tio0Pc+deqUeVKX1tL5DQep1zQ7+37aTAsA==}
     engines: {node: '>= 0.8'}
 
+  bytes@3.0.0:
+    resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
+    engines: {node: '>= 0.8'}
+
   bytes@3.1.2:
     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
     engines: {node: '>= 0.8'}
@@ -10975,8 +11926,8 @@ packages:
     resolution: {integrity: sha512-Yo9wGIQUaAfIbk+qY0X4cDQgCosecfBe3V9NSyeY4qPC2SAkbCS4Xj79VP8WOzitpJUZKc/wsRCYF5ariDIwkg==}
     engines: {node: '>=18'}
 
-  cacheable@1.10.3:
-    resolution: {integrity: sha512-M6p10iJ/VT0wT7TLIGUnm958oVrU2cUK8pQAVU21Zu7h8rbk/PeRtRWrvHJBql97Bhzk3g1N6+2VKC+Rjxna9Q==}
+  cacheable@2.1.1:
+    resolution: {integrity: sha512-LmF4AXiSNdiRbI2UjH8pAp9NIXxeQsTotpEaegPiDcnN0YPygDJDV3l/Urc0mL72JWdATEorKqIHEx55nDlONg==}
 
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
@@ -11048,14 +11999,14 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  caniuse-db@1.0.30001731:
-    resolution: {integrity: sha512-IbYSXiOfvIJmCRLkrE/hMSsTZTu48NBddgIgC027NnuPwu/V14PnO3UtHxoQGSA16b09zZJkCsaoLbwMSllZrA==}
+  caniuse-db@1.0.30001753:
+    resolution: {integrity: sha512-M08EdkYtgpwpvFLscj+mmtjDYaqFVYqbCMIDlsKnw86CxaT2bjlDAEaxtktDiv70uFQtwNV2Ou2UZhQogpr4Ew==}
 
-  caniuse-lite@1.0.30001731:
-    resolution: {integrity: sha512-lDdp2/wrOmTRWuoB5DpfNkC0rJDU8DqRa6nYL6HK6sytw70QMopt/NIc/9SM7ylItlBWfACXk0tEn37UWM/+mg==}
+  caniuse-lite@1.0.30001753:
+    resolution: {integrity: sha512-Bj5H35MD/ebaOV4iDLqPEtiliTN29qkGtEHCwawWn4cYm+bPJM2NsaP30vtZcnERClMzp52J4+aw2UNbK4o+zw==}
 
-  canvas@3.1.2:
-    resolution: {integrity: sha512-Z/tzFAcBzoCvJlOSlCnoekh1Gu8YMn0J51+UAuXJAbW1Z6I9l2mZgdD7738MepoeeIcUdDtbMnOg6cC7GJxy/g==}
+  canvas@3.2.0:
+    resolution: {integrity: sha512-jk0GxrLtUEmW/TmFsk2WghvgHe8B0pxGilqCL21y8lHkPUGa6FTsnCNtHPOzT8O3y+N+m3espawV80bbBlgfTA==}
     engines: {node: ^18.12.0 || >= 20.9.0}
 
   capital-case@1.0.4:
@@ -11090,8 +12041,8 @@ packages:
     resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==}
     engines: {node: '>=4'}
 
-  chai@5.2.1:
-    resolution: {integrity: sha512-5nFxhUrX0PqtyogoYOA8IPswy5sZFTOsBFl/9bNsmDLgsxYTzSZQJDPppDnZPTQbzSEm0hqGjWPzRemQCYbD6A==}
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
 
   chainsaw@0.1.0:
@@ -11113,8 +12064,8 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
-  chalk@5.5.0:
-    resolution: {integrity: sha512-1tm8DTaJhPBG3bIkVeZt1iZM9GfSX2lzOeDVZH9R9ffRHpmHvxZ/QhgQH/aDTkswQVt+YHdXAdS/In/30OjCbg==}
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
   change-case@4.1.2:
@@ -11207,6 +12158,9 @@ packages:
     resolution: {integrity: sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==}
     engines: {node: '>=0.10.0'}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   classnames@2.5.1:
     resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
 
@@ -11218,6 +12172,9 @@ packages:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}
 
+  clean-set@1.1.2:
+    resolution: {integrity: sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==}
+
   clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
@@ -11262,9 +12219,9 @@ packages:
     resolution: {integrity: sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==}
     engines: {node: 10.* || >= 12.*}
 
-  cli-truncate@4.0.0:
-    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
-    engines: {node: '>=18'}
+  cli-truncate@5.1.1:
+    resolution: {integrity: sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==}
+    engines: {node: '>=20'}
 
   cli-width@2.2.1:
     resolution: {integrity: sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==}
@@ -11283,6 +12240,10 @@ packages:
     resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
     engines: {node: '>=18'}
 
+  clipboardy@5.0.0:
+    resolution: {integrity: sha512-MQfKHaD09eP80Pev4qBxZLbxJK/ONnqfSYAPlCmPh+7BDboYtO/3BmB6HGzxDIT0SlTRc2tzS8lQqfcdLtZ0Kg==}
+    engines: {node: '>=20'}
+
   cliui@3.2.0:
     resolution: {integrity: sha512-0yayqDxWQbqk3ojkYqUKqaAQ6AfNKeKWRNA8kR0WXzAsdHpP4BIaOmMAG87JGuO6qcobyW4GjxHd9PmhEd+T9w==}
 
@@ -11322,6 +12283,20 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  cm6-theme-basic-light@0.2.0:
+    resolution: {integrity: sha512-1prg2gv44sYfpHscP26uLT/ePrh0mlmVwMSoSd3zYKQ92Ab3jPRLzyCnpyOCQLJbK+YdNs4HvMRqMNYdy4pMhA==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/highlight': ^1.0.0
+
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -11348,8 +12323,8 @@ packages:
       codemirror: ^5.65.3
       graphql: ^15.5.0 || ^16.0.0 || ^17.0.0
 
-  codemirror@5.65.19:
-    resolution: {integrity: sha512-+aFkvqhaAVr1gferNMuN8vkTSrWIFvzlMV9I2KBLCWS2WpZ2+UAkZjlMZmEuT+gcXTi6RrGQCkWq1/bDtGqhIA==}
+  codemirror@5.65.20:
+    resolution: {integrity: sha512-i5dLDDxwkFCbhjvL2pNjShsojoL3XHyDwsGv1jqETUoW+lzpBKKqNTUWgQwVAOa0tUm4BwekT455ujafi8payA==}
 
   codemirror@6.0.2:
     resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
@@ -11357,8 +12332,8 @@ packages:
   collapse-white-space@1.0.6:
     resolution: {integrity: sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==}
 
-  collect-v8-coverage@1.0.2:
-    resolution: {integrity: sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==}
+  collect-v8-coverage@1.0.3:
+    resolution: {integrity: sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==}
 
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
@@ -11367,17 +12342,26 @@ packages:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
+  color-convert@3.1.2:
+    resolution: {integrity: sha512-UNqkvCDXstVck3kdowtOTWROIJQwafjOfXSmddoDrXo4cewMKmusCeF22Q24zvjR8nwWib/3S/dfyzPItPEiJg==}
+    engines: {node: '>=14.6'}
+
   color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
 
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  color-name@2.0.2:
+    resolution: {integrity: sha512-9vEt7gE16EW7Eu7pvZnR0abW9z6ufzhXxGXZEVU9IqPdlsUiMwJeJfRtq0zePUmnbHGT9zajca7mX8zgoayo4A==}
+    engines: {node: '>=12.20'}
+
   color-string@0.3.0:
     resolution: {integrity: sha512-sz29j1bmSDfoAxKIEU6zwoIZXN6BrFbAMIhfYCNyiZXBDuU/aiHlN84lp/xDzL2ubyFhLDobHIlU1X70XRrMDA==}
 
-  color-string@1.9.1:
-    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+  color-string@2.1.2:
+    resolution: {integrity: sha512-RxmjYxbWemV9gKu4zPgiZagUxbH3RQpEIO77XoSSX0ivgABDZ+h8Zuash/EMFLTI4N9QgFPOJ6JQpPZKFxa+dA==}
+    engines: {node: '>=18'}
 
   color-support@1.1.3:
     resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
@@ -11386,8 +12370,9 @@ packages:
   color@0.11.4:
     resolution: {integrity: sha512-Ajpjd8asqZ6EdxQeqGzU5WBhhTfJ/0cA4Wlbre7e5vXfmDSmda7Ov6jeKoru+b0vHcb1CqvuroTHp5zIWzhVMA==}
 
-  color@3.2.1:
-    resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
+  color@5.0.2:
+    resolution: {integrity: sha512-e2hz5BzbUPcYlIRHo8ieAhYgoajrJr+hWoceg6E345TPsATMUKqDgzt8fSXZJJbxfpiPzkWyphz8yn8At7q3fA==}
+    engines: {node: '>=18'}
 
   colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
@@ -11409,9 +12394,6 @@ packages:
     resolution: {integrity: sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==}
     engines: {node: '>=0.1.90'}
 
-  colorspace@1.1.4:
-    resolution: {integrity: sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==}
-
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -11438,8 +12420,8 @@ packages:
     resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
     engines: {node: '>=18'}
 
-  commander@14.0.0:
-    resolution: {integrity: sha512-2uM9rYjPvyq39NwLRqaiLtWHyDC1FvryJDa2ATTVims5YAS4PupsEQsDvP14FqhFr0P49CYDugi59xaxJlTXRA==}
+  commander@14.0.2:
+    resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==}
     engines: {node: '>=20'}
 
   commander@2.13.0:
@@ -11487,6 +12469,9 @@ packages:
     resolution: {integrity: sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==}
     engines: {node: '>= 0.8.0'}
 
+  compute-scroll-into-view@2.0.4:
+    resolution: {integrity: sha512-y/ZA3BGnxoM/QHHQ2Uy49CLtnWPbt4tTPpEEZiEmmiWBFKjej7nEyH8Ryz54jH0MLXflUYA3Er2zUxPSJu5R+g==}
+
   concat-stream@1.6.2:
     resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
     engines: {'0': node >= 0.8}
@@ -11494,6 +12479,11 @@ packages:
   concat-with-sourcemaps@1.1.0:
     resolution: {integrity: sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==}
 
+  concurrently@9.2.1:
+    resolution: {integrity: sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
@@ -11521,6 +12511,10 @@ packages:
   constants-browserify@1.0.0:
     resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==}
 
+  content-disposition@0.5.2:
+    resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==}
+    engines: {node: '>= 0.6'}
+
   content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -11568,8 +12562,8 @@ packages:
   copy-to-clipboard@3.3.3:
     resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
 
-  copy-webpack-plugin@13.0.0:
-    resolution: {integrity: sha512-FgR/h5a6hzJqATDGd9YG41SeDViH+0bkHn6WNXCi5zKAZkeESeSxLySSsFLHqLEVCh0E+rITmCf0dusXWYukeQ==}
+  copy-webpack-plugin@13.0.1:
+    resolution: {integrity: sha512-J+YV3WfhY6W/Xf9h+J1znYuqTye2xkBUIGyTPWuBAT27qajBa5mR4f8WBmfDY3YjRftT2kqZZiLi1qf0H+UOFw==}
     engines: {node: '>= 18.12.0'}
     peerDependencies:
       webpack: ^5.1.0
@@ -11578,18 +12572,18 @@ packages:
     resolution: {integrity: sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==}
     hasBin: true
 
-  core-js-compat@3.45.0:
-    resolution: {integrity: sha512-gRoVMBawZg0OnxaVv3zpqLLxaHmsubEGyTnqdpI/CEBvX4JadI1dMSHxagThprYRtSVbuQxvi6iUatdPxohHpA==}
+  core-js-compat@3.46.0:
+    resolution: {integrity: sha512-p9hObIIEENxSV8xIu+V68JjSeARg6UVMG5mR+JEUguG3sI6MsiS1njz2jHmyJDvA+8jX/sytkBHup6kxhM9law==}
 
-  core-js-pure@3.45.0:
-    resolution: {integrity: sha512-OtwjqcDpY2X/eIIg1ol/n0y/X8A9foliaNt1dSK0gV3J2/zw+89FcNG3mPK+N8YWts4ZFUPxnrAzsxs/lf8yDA==}
+  core-js-pure@3.46.0:
+    resolution: {integrity: sha512-NMCW30bHNofuhwLhYPt66OLOKTMbOhgTTatKVbaQC3KRHpTCiRIBYvtshr+NBYSnBxwAFhjW/RfJ0XbIjS16rw==}
 
   core-js@2.6.12:
     resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
     deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
 
-  core-js@3.45.0:
-    resolution: {integrity: sha512-c2KZL9lP4DjkN3hk/an4pWn5b5ZefhRJnAc42n6LJ19kSnbeRbdQZE5dSeE2LBol1OwJD3X1BQvFTAsa8ReeDA==}
+  core-js@3.46.0:
+    resolution: {integrity: sha512-vDMm9B0xnqqZ8uSBpZ8sNtRtOdmfShrvT6h2TuQGLs0Is+cR0DYbj/KWP6ALVNbWPpqA/qPLoOuppJN07humpA==}
 
   core-util-is@1.0.2:
     resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
@@ -11660,8 +12654,11 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
 
-  create-storybook@9.1.1:
-    resolution: {integrity: sha512-JrW3xqo1pbgsX1fvopjN6vZoFO+UyJbXv8sX2Gwvz3LMqwdQToEyUAn8KpOmHH3N+WnUd0tqC5TvK8g7bkk7YA==}
+  create-require@1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+
+  create-storybook@9.1.16:
+    resolution: {integrity: sha512-Po8ZeU1sAcab+gHjAXFnjMMO6HLjItQoXTnfE9gcMytKI25dbBuwX/aKpdHr731vgL6wW82e76PrUpAZdSibRg==}
     hasBin: true
 
   crelt@1.0.6:
@@ -11918,8 +12915,8 @@ packages:
       supports-color:
         optional: true
 
-  debug@4.4.1:
-    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
@@ -11963,8 +12960,8 @@ packages:
   dedent@0.7.0:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
 
-  dedent@1.6.0:
-    resolution: {integrity: sha512-F1Z+5UCFpmQUzJa11agbyPVMbpgT/qA3/SKyJ1jyBgm7dUcUEa8v9JwDkerSQXfakBwFljIxhOJqGkjUwZ9FSA==}
+  dedent@1.7.0:
+    resolution: {integrity: sha512-HGFtf8yhuhGhqO07SV79tRp+br4MnbdjeVxotpn1QBl30pcLLCQjX5b2295ll0fv8RKDKsmWYrl05usHM9CewQ==}
     peerDependencies:
       babel-plugin-macros: ^3.1.0
     peerDependenciesMeta:
@@ -12066,8 +13063,8 @@ packages:
     resolution: {integrity: sha512-v2KyNk7efxhlyHpjEvfyxaAihKKK0nWCuf6ZtqZcFFpQRG0bJ12Qsr0RpvsICMjAAZ8DOVCxrlqpxISlMHC4Kg==}
     engines: {node: '>=14.16'}
 
-  del@8.0.0:
-    resolution: {integrity: sha512-R6ep6JJ+eOBZsBr9esiNN1gxFbZE4Q2cULkUSFumGYecAiS6qodDvcPx/sFuWHMNul7DWmrtoEOpYSm7o6tbSA==}
+  del@8.0.1:
+    resolution: {integrity: sha512-gPqh0mKTPvaUZGAuHbrBUYKZWBNAeHG7TU3QH5EhVwPMyKvmfJaNXhcD2jTcXsJRRcffuho4vaYweu80dRrMGA==}
     engines: {node: '>=18'}
 
   delayed-stream@1.0.0:
@@ -12109,8 +13106,8 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
-  detect-libc@2.0.4:
-    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
   detect-newline@3.1.0:
@@ -12140,8 +13137,8 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  dexie@4.0.11:
-    resolution: {integrity: sha512-SOKO002EqlvBYYKQSew3iymBoN2EQ4BDw/3yprjh7kAfFzjBYkaMNa/pZvcA7HSWlcKSQb9XhPe3wKyQ0x4A8A==}
+  dexie@4.2.1:
+    resolution: {integrity: sha512-Ckej0NS6jxQ4Po3OrSQBFddayRhTCic2DoCAG5zacOfOVB9P2Q5Xc5uL/nVa7ZVs+HdMnvUPzLFCB/JwpB6Csg==}
 
   diagnostic-channel-publishers@0.3.5:
     resolution: {integrity: sha512-AOIjw4T7Nxl0G2BoBPhkQ6i7T4bUd9+xvdYizwvG7vVAM1dvr+SDrcUudlmzwH0kbEwdR2V1EcnKT0wAeYLQNQ==}
@@ -12249,6 +13246,9 @@ packages:
   dompurify@3.2.4:
     resolution: {integrity: sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==}
 
+  dompurify@3.2.6:
+    resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
+
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 
@@ -12284,6 +13284,11 @@ packages:
     resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==}
     engines: {node: '>=10'}
 
+  downshift@7.6.2:
+    resolution: {integrity: sha512-iOv+E1Hyt3JDdL9yYcOgW7nZ7GQ2Uz6YbggwXvKUSleetYhU2nXD482Rz6CzvM4lvI1At34BYruKAL4swRGxaA==}
+    peerDependencies:
+      react: '>=16.12.0'
+
   drange@1.1.1:
     resolution: {integrity: sha512-pYxfDYpued//QpnLIm4Avk7rsNtAtQkUES2cwAYSvD/wd2pKD71gN2Ebj3e7klzXwjocvE8c5vx/1fxwpqmSxA==}
     engines: {node: '>=4'}
@@ -12313,9 +13318,9 @@ packages:
   ecdsa-sig-formatter@1.0.11:
     resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
 
-  editions@6.21.0:
-    resolution: {integrity: sha512-ofkXJtn7z0urokN62DI3SBo/5xAtF0rR7tn+S/bSYV79Ka8pTajIIl+fFQ1q88DQEImymmo97M4azY3WX/nUdg==}
-    engines: {node: '>=4'}
+  editions@6.22.0:
+    resolution: {integrity: sha512-UgGlf8IW75je7HZjNDpJdCv4cGJWIi6yumFdZ0R7A8/CIhQiWUjyGLCxdHpd8bmyD1gnkfUNK0oeOXqUS2cpfQ==}
+    engines: {ecmascript: '>= es5', node: '>=4'}
 
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
@@ -12325,8 +13330,8 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.5.198:
-    resolution: {integrity: sha512-G5COfnp3w+ydVu80yprgWSfmfQaYRh9DOxfhAxstLyetKaLyl55QrNjx8C38Pc/C+RaDmb1M0Lk8wPEMQ+bGgQ==}
+  electron-to-chromium@1.5.244:
+    resolution: {integrity: sha512-OszpBN7xZX4vWMPJwB9illkN/znA8M36GQqQxi6MNy9axWxhOfJyZZJtSLQCpEFLHP2xK33BiWx9aIuIEXVCcw==}
 
   email-addresses@5.0.0:
     resolution: {integrity: sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==}
@@ -12338,8 +13343,8 @@ packages:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
 
-  emoji-regex@10.4.0:
-    resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
   emoji-regex@7.0.3:
     resolution: {integrity: sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==}
@@ -12411,8 +13416,8 @@ packages:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
 
-  envinfo@7.14.0:
-    resolution: {integrity: sha512-CO40UI41xDQzhLB1hWyqUKgFhs250pNcGbyGKe1l/e4FSaI/+YE4IMG76GDt0In67WLPACIITC+sOi08x4wIvg==}
+  envinfo@7.20.0:
+    resolution: {integrity: sha512-+zUomDcLXsVkQ37vUqWBvQwLaLlj8eZPSi61llaEFAVBY5mhcXdaSw1pSJVl4yTYD5g/gEfpNl28YYk4IPvrrg==}
     engines: {node: '>=4'}
     hasBin: true
 
@@ -12430,8 +13435,8 @@ packages:
     resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
     hasBin: true
 
-  error-ex@1.3.2:
-    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
   error-stack-parser@2.1.4:
     resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
@@ -12477,8 +13482,8 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
-  es-toolkit@1.39.8:
-    resolution: {integrity: sha512-A8QO9TfF+rltS8BXpdu8OS+rpGgEdnRhqIVxO/ZmNvnXBYgOdSsxukT55ELyP94gZIntWJ+Li9QRrT2u1Kitpg==}
+  es-toolkit@1.41.0:
+    resolution: {integrity: sha512-bDd3oRmbVgqZCJS6WmeQieOrzpl3URcWBUVDXxOELlUW2FuW+0glPOz1n0KnRie+PdyvUZcXz2sOn00c6pPRIA==}
 
   es5-ext@0.10.64:
     resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
@@ -12515,8 +13520,8 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
 
-  esbuild@0.25.8:
-    resolution: {integrity: sha512-vVC0USHGtMi8+R4Kz8rt6JhEWLxsv9Rnu/lGYbPR8u47B+DCBksq9JarW0zOO7bs37hyOK1l2/oqtbciutL5+Q==}
+  esbuild@0.25.12:
+    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -12524,6 +13529,9 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-carriage@1.3.1:
+    resolution: {integrity: sha512-GwBr6yViW3ttx1kb7/Oh+gKQ1/TrhYwxKqVmg5gS+BK+Qe2KrOa/Vh7w3HPBvgGf0LfcDGoY9I6NHKoA5Hozhw==}
+
   escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
@@ -12636,8 +13644,8 @@ packages:
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
 
-  eslint-plugin-react-refresh@0.4.20:
-    resolution: {integrity: sha512-XpbHQ2q5gUF8BGOX4dHe+71qoirYMhApEPZ7sfhF/dNnOF1UXnCMGZf79SFTBO7Bz5YEIT4TMieSlJBWhP9WBA==}
+  eslint-plugin-react-refresh@0.4.24:
+    resolution: {integrity: sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==}
     peerDependencies:
       eslint: '>=8.40'
 
@@ -12647,12 +13655,12 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
-  eslint-plugin-storybook@9.1.1:
-    resolution: {integrity: sha512-g4/i9yW6cl4TCEMzYyALNvO3d/jB6TDvSs/Pmye7dHDrra2B7dgZJGzmEWILD62brVrLVHNoXgy2dNPtx80kmw==}
+  eslint-plugin-storybook@9.1.16:
+    resolution: {integrity: sha512-I8f3DXniPxFbcptVgOjtIHNvW6sDu1O2d1zNsxLKmeAvEaRLus1ij8iFHCgkNzMthrU5U2F4Wdo/aaSpz5kHjA==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       eslint: '>=8'
-      storybook: ^9.1.1
+      storybook: ^9.1.16
 
   eslint-plugin-unused-imports@4.1.4:
     resolution: {integrity: sha512-YptD6IzQjDardkl0POxnnRBhU1OEePMV0nd6siHaRBbd+lyh6NAhFEobiznKU7kTsSsDeSD62Pe7kAM1b7dAZQ==}
@@ -12790,6 +13798,9 @@ packages:
   estree-util-is-identifier-name@3.0.0:
     resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
 
+  estree-util-visit@2.0.0:
+    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
+
   estree-walker@0.2.1:
     resolution: {integrity: sha512-6/I1dwNKk0N9iGOU3ydzAAurz4NPo/ttxZNCqgIVbWFvWyzWBSNonRrJ5CpjDuyBfmM7ENN7WCzUi9aT/UPXXQ==}
 
@@ -12875,6 +13886,10 @@ packages:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
 
+  execa@9.6.0:
+    resolution: {integrity: sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
   exenv-es6@1.1.1:
     resolution: {integrity: sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ==}
 
@@ -12901,8 +13916,8 @@ packages:
     resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  exponential-backoff@3.1.2:
-    resolution: {integrity: sha512-8QxYTVXUkuy7fIIoitQkPwGonB8F3Zj8eEO8Sqg9Zv/bkI7RJAzowee4gr81Hak/dUTpA2Z7VfQgoijjPNlUZA==}
+  exponential-backoff@3.1.3:
+    resolution: {integrity: sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==}
 
   express-rate-limit@7.5.1:
     resolution: {integrity: sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==}
@@ -12991,8 +14006,8 @@ packages:
   fast-safe-stringify@2.1.1:
     resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
 
-  fast-uri@3.0.6:
-    resolution: {integrity: sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==}
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
 
   fast-xml-parser@5.2.5:
     resolution: {integrity: sha512-pfX9uG9Ki0yekDHx2SiuRIyFdyAr1kMIMitPvb0YBo8SUfKvia7w7FIyd/l6av85pFYRhZscS75MwMnbvY+hcQ==}
@@ -13011,6 +14026,9 @@ packages:
   fault@1.0.4:
     resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
 
+  fault@2.0.1:
+    resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
+
   faye-websocket@0.11.4:
     resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
     engines: {node: '>=0.8.0'}
@@ -13033,8 +14051,9 @@ packages:
   fd-slicer@1.1.0:
     resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
 
-  fdir@6.4.6:
-    resolution: {integrity: sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==}
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
     peerDependencies:
       picomatch: ^3 || ^4
     peerDependenciesMeta:
@@ -13059,8 +14078,12 @@ packages:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
 
-  file-entry-cache@10.1.3:
-    resolution: {integrity: sha512-D+w75Ub8T55yor7fPgN06rkCAUbAYw2vpxJmmjv/GDAcvCnv9g7IvHhIZoxzRZThrXPFI2maeY24pPbtyYU7Lg==}
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
+  file-entry-cache@10.1.4:
+    resolution: {integrity: sha512-5XRUFc0WTtUbjfGzEwXc42tiGxQHBmtbUG1h9L2apu4SulCGN3Hqm//9D6FAolf8MYNL7f/YlJl9vy08pj5JuA==}
 
   file-entry-cache@5.0.1:
     resolution: {integrity: sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==}
@@ -13205,8 +14228,8 @@ packages:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
 
-  flat-cache@6.1.12:
-    resolution: {integrity: sha512-U+HqqpZPPXP5d24bWuRzjGqVqUcw64k4nZAbruniDwdRg0H10tvN7H6ku1tjhA4rg5B9GS3siEvwO2qjJJ6f8Q==}
+  flat-cache@6.1.18:
+    resolution: {integrity: sha512-JUPnFgHMuAVmLmoH9/zoZ6RHOt5n9NlUw/sDXsTbROJ2SFoS2DS4s+swAV6UTeTbGH/CAsZIE6M8TaG/3jVxgQ==}
 
   flat@5.0.2:
     resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
@@ -13222,8 +14245,8 @@ packages:
     resolution: {integrity: sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==}
     deprecated: flatten is deprecated in favor of utility frameworks such as lodash.
 
-  flow-parser@0.278.0:
-    resolution: {integrity: sha512-9oUcYDHf9n+E/t0FXndgBqGbaUsGEcmWqIr1ldqCzTzctsJV5E/bHusOj4ThB72Ss2mqWpLFNz0+o2c1O8J6+A==}
+  flow-parser@0.289.0:
+    resolution: {integrity: sha512-w4sVnH6ddNAIxokoz0mGyiIIdzvqncFhAYW+RmkPbPSSTYozG6yhqAixzaWeBCQf2qqXJTlHkoKPnf/BAj8Ofw==}
     engines: {node: '>=0.4.0'}
 
   flush-write-stream@1.1.1:
@@ -13361,8 +14384,8 @@ packages:
     resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
     engines: {node: '>=14.14'}
 
-  fs-extra@11.3.1:
-    resolution: {integrity: sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==}
+  fs-extra@11.3.2:
+    resolution: {integrity: sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==}
     engines: {node: '>=14.14'}
 
   fs-extra@3.0.1:
@@ -13441,6 +14464,10 @@ packages:
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     deprecated: This package is no longer supported.
 
+  generator-function@2.0.1:
+    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
+    engines: {node: '>= 0.4'}
+
   generic-names@4.0.0:
     resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==}
 
@@ -13458,8 +14485,8 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
-  get-east-asian-width@1.3.0:
-    resolution: {integrity: sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==}
+  get-east-asian-width@1.4.0:
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
     engines: {node: '>=18'}
 
   get-func-name@2.0.2:
@@ -13570,6 +14597,12 @@ packages:
     peerDependencies:
       glob: '*'
 
+  glob-to-regex.js@1.2.0:
+    resolution: {integrity: sha512-QMwlOQKU/IzqMUOAZWubUOT8Qft+Y0KQWnX9nK3ch0CJg0tTp4TvGZsTfudYKv2NzoQSyPcnA6TYeIQ3jGichQ==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
   glob-to-regexp@0.3.0:
     resolution: {integrity: sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==}
 
@@ -13719,8 +14752,8 @@ packages:
     peerDependencies:
       graphql: ^15.5.0 || ^16.0.0 || ^17.0.0
 
-  graphql@16.11.0:
-    resolution: {integrity: sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==}
+  graphql@16.12.0:
+    resolution: {integrity: sha512-DKKrynuQRne0PNpEbzuEdHlYOMksHSUI8Zc9Unei5gTsMNA2/vMpoMz/yKba50pejK56qj98qM0SjYxAKi13gQ==}
     engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
 
   growly@1.3.0:
@@ -13899,8 +14932,8 @@ packages:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
     engines: {node: '>=0.10.0'}
 
-  hookified@1.11.0:
-    resolution: {integrity: sha512-aDdIN3GyU5I6wextPplYdfmWCo+aLmjjVbntmX6HLD5RCi/xKsivYEBhnRD+d9224zFf008ZpLMPlWF0ZodYZw==}
+  hookified@1.12.2:
+    resolution: {integrity: sha512-aokUX1VdTpI0DUsndvW+OiwmBpKCu/NgRsSSkuSY0zq8PY6Q6a+lmOfAFDXAAOtBqJELvcWY9L1EVtzjbQcMdg==}
 
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
@@ -13982,8 +15015,8 @@ packages:
     peerDependencies:
       webpack: ^4.0.0 || ^5.0.0
 
-  html-webpack-plugin@5.6.3:
-    resolution: {integrity: sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==}
+  html-webpack-plugin@5.6.4:
+    resolution: {integrity: sha512-V/PZeWsqhfpE27nKeX9EO2sbR+D17A+tLf6qU+ht66jdUsN0QLKJN27Z+1+gHrVMKgndBahes0PU6rRihDgHTw==}
     engines: {node: '>=10.13.0'}
     peerDependencies:
       '@rspack/core': 0.x || 1.x
@@ -14079,8 +15112,12 @@ packages:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
 
-  humanize-duration@3.33.0:
-    resolution: {integrity: sha512-vYJX7BSzn7EQ4SaP2lPYVy+icHDppB6k7myNeI3wrSRfwMS5+BHyGgzpHR0ptqJ2AQ6UuIKrclSg5ve6Ci4IAQ==}
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
+  humanize-duration@3.33.1:
+    resolution: {integrity: sha512-hwzSCymnRdFx9YdRkQQ0OYequXiVAV6ZGQA2uzocwB0F4309Ke6pO8dg0P8LHhRQJyVjGteRTAA/zNfEcpXn8A==}
 
   humanize-ms@1.2.1:
     resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
@@ -14107,6 +15144,10 @@ packages:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
+  iconv-lite@0.7.0:
+    resolution: {integrity: sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==}
+    engines: {node: '>=0.10.0'}
+
   icss-replace-symbols@1.1.0:
     resolution: {integrity: sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==}
 
@@ -14152,8 +15193,8 @@ packages:
     resolution: {integrity: sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg==}
     engines: {node: '>=0.10.0'}
 
-  immutable@5.1.3:
-    resolution: {integrity: sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==}
+  immutable@5.1.4:
+    resolution: {integrity: sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==}
 
   import-cwd@3.0.0:
     resolution: {integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==}
@@ -14214,8 +15255,8 @@ packages:
   inline-style-parser@0.1.1:
     resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
 
-  inline-style-parser@0.2.4:
-    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+  inline-style-parser@0.2.6:
+    resolution: {integrity: sha512-gtGXVaBdl5mAes3rPcMedEBm12ibjt1kDMFfheul1wUAOVEJW60voNdMVzVkfLN06O7ZaD/rxhfKgtlgtTbMjg==}
 
   inquirer@3.3.0:
     resolution: {integrity: sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==}
@@ -14240,8 +15281,12 @@ packages:
     resolution: {integrity: sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==}
     engines: {node: '>=10.13.0'}
 
-  intl-messageformat@10.7.16:
-    resolution: {integrity: sha512-UmdmHUmp5CIKKjSoE10la5yfU+AYJAaiYLsodbjL4lji83JNvgOQUjGaGhGrpFCb0Uh7sl7qfP1IyILa8Z40ug==}
+  intersection-observer@0.10.0:
+    resolution: {integrity: sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==}
+    deprecated: The Intersection Observer polyfill is no longer needed and can safely be removed. Intersection Observer has been Baseline since 2019.
+
+  intl-messageformat@10.7.18:
+    resolution: {integrity: sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==}
 
   invariant@2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
@@ -14250,8 +15295,8 @@ packages:
     resolution: {integrity: sha512-xgs2NH9AE66ucSq4cNG1nhSFghr5l6tdL15Pk+jl46bmmBapgoaY/AacXyaDznAqmGL99TiLSQgO/XazFSKYeQ==}
     engines: {node: '>=0.10.0'}
 
-  ip-address@9.0.5:
-    resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
+  ip-address@10.0.1:
+    resolution: {integrity: sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==}
     engines: {node: '>= 12'}
 
   ip-regex@2.1.0:
@@ -14304,9 +15349,6 @@ packages:
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
-  is-arrayish@0.3.2:
-    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
-
   is-async-function@2.1.1:
     resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
     engines: {node: '>= 0.4'}
@@ -14417,12 +15459,8 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
-  is-fullwidth-code-point@4.0.0:
-    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
-    engines: {node: '>=12'}
-
-  is-fullwidth-code-point@5.0.0:
-    resolution: {integrity: sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==}
+  is-fullwidth-code-point@5.1.0:
+    resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
     engines: {node: '>=18'}
 
   is-function@1.0.2:
@@ -14436,8 +15474,8 @@ packages:
     resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
     engines: {node: '>=6'}
 
-  is-generator-function@1.1.0:
-    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
+  is-generator-function@1.1.2:
+    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
     engines: {node: '>= 0.4'}
 
   is-glob@2.0.1:
@@ -14493,8 +15531,8 @@ packages:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
 
-  is-network-error@1.1.0:
-    resolution: {integrity: sha512-tUdRRAnhT+OtCZR/LxZelH/C7QtjtFrTu5tXCA8pl55eTUElUHT+GPYV8MBMBvea/j+NxQqVt3LbWMRir7Gx9g==}
+  is-network-error@1.3.0:
+    resolution: {integrity: sha512-6oIwpsgRfnDiyEDLMay/GqCl3HoAtH5+RUKW29gYkL0QA+ipzpDLA16yQs7/RHCSu+BwgbJaOUqa4A99qNVQVw==}
     engines: {node: '>=16'}
 
   is-npm@1.0.0:
@@ -14661,6 +15699,10 @@ packages:
   is-utf8@0.2.1:
     resolution: {integrity: sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==}
 
+  is-wayland@0.1.0:
+    resolution: {integrity: sha512-QkbMsWkIfkrzOPxenwye0h56iAXirZYHG9eHVPb22fO9y+wPbaX/CHacOWBa/I++4ohTcByimhM1/nyCsH8KNA==}
+    engines: {node: '>=20'}
+
   is-weakmap@2.0.2:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
@@ -14786,8 +15828,8 @@ packages:
   istanbul-reports@1.5.1:
     resolution: {integrity: sha512-+cfoZ0UXzWjhAdzosCPP3AN8vvef8XDkWtTfgaN+7L3YTpNYITnCaEkceo5SEYy644VkHka/P1FvkWvrG/rrJw==}
 
-  istanbul-reports@3.1.7:
-    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
+  istanbul-reports@3.2.0:
+    resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
     engines: {node: '>=8'}
 
   istanbul@0.4.5:
@@ -15218,8 +16260,8 @@ packages:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
-  jiti@2.5.1:
-    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
   joi@17.13.3:
@@ -15259,9 +16301,6 @@ packages:
   jsbn@0.1.1:
     resolution: {integrity: sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==}
 
-  jsbn@1.1.0:
-    resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
-
   jschardet@3.1.4:
     resolution: {integrity: sha512-/kmVISmrwVwtyYU40iQUOp3SUPk2dhNCMsZBQX0R1/jZ8maaXJ/oZIzUOiyOqcgtLnETFKYChbJ5iDC/eWmFHg==}
     engines: {node: '>=0.1.90'}
@@ -15275,8 +16314,8 @@ packages:
       '@babel/preset-env':
         optional: true
 
-  jsdoc-type-pratt-parser@4.1.0:
-    resolution: {integrity: sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==}
+  jsdoc-type-pratt-parser@4.8.0:
+    resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
     engines: {node: '>=12.0.0'}
 
   jsdom@11.12.0:
@@ -15311,11 +16350,6 @@ packages:
     resolution: {integrity: sha512-Mke0DA0QjUWuJlhsE0ZPPhYiJkRap642SmI/4ztCFaUs6V2AiH1sfecc+57NgaryfAA2VR3v6O+CSjC1jZJKOA==}
     hasBin: true
 
-  jsesc@3.0.2:
-    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
-    engines: {node: '>=6'}
-    hasBin: true
-
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -15385,8 +16419,8 @@ packages:
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
-  jsonfile@6.1.0:
-    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
 
   jsonify@0.0.1:
     resolution: {integrity: sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==}
@@ -15430,8 +16464,8 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
-  keyv@5.5.0:
-    resolution: {integrity: sha512-QG7qR2tijh1ftOvClut4YKKg1iW6cx3GZsKoGyJPxHkGWK9oJhG9P3j5deP0QQOGDowBMVQFaP+Vm4NpGYvmIQ==}
+  keyv@5.5.3:
+    resolution: {integrity: sha512-h0Un1ieD+HUrzBH6dJXhod3ifSghk5Hw/2Y4/KHBziPlZecrFyE9YOTPU6eOs0V9pYl8gOs86fkr/KN8lUX39A==}
 
   kill-port@2.0.1:
     resolution: {integrity: sha512-e0SVOV5jFo0mx8r7bS29maVWp17qGqLBZ5ricNSajON6//kmb7qqqNnml4twNE8Dtj97UQD+gNFOaipS/q1zzQ==}
@@ -15473,8 +16507,8 @@ packages:
     resolution: {integrity: sha512-Be1YRHWWlZaSsrz2U+VInk+tO0EwLIyV+23RhWLINJYwg/UIikxjlj3MhH37/6/EDCAusjajvMkMMUXRaMWl/w==}
     engines: {node: '>=4'}
 
-  launch-editor@2.11.0:
-    resolution: {integrity: sha512-R/PIF14L6e2eHkhvQPu7jDRCr0msfCYCxbYiLgkkAGi0dVPWuM+RrsPu0a5dpuNe0KWGL3jpAkOlv53xGfPheQ==}
+  launch-editor@2.12.0:
+    resolution: {integrity: sha512-giOHXoOtifjdHqUamwKq6c49GzBdLjvxrd2D+Q4V6uOHopJv7p9VJxikDsQ/CBXZbEITgUqSVHXLTG3VhPP1Dg==}
 
   lazy-universal-dotenv@3.0.1:
     resolution: {integrity: sha512-prXSYk799h3GY3iOWnC6ZigYzMPjxN2svgjJ9shk7oMadSNX3wXy0B6F32PMJv7qtMnrIbUxoEHzbutvxR2LBQ==}
@@ -15508,6 +16542,9 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lexical@0.17.1:
+    resolution: {integrity: sha512-72/MhR7jqmyqD10bmJw8gztlCm4KDDT+TPtU4elqXrEvHoO5XENi34YAEUD9gIkPfqSwyLa9mwAX1nKzIr5xEA==}
+
   lie@3.3.0:
     resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
 
@@ -15532,24 +16569,24 @@ packages:
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
-  lint-staged@16.1.4:
-    resolution: {integrity: sha512-xy7rnzQrhTVGKMpv6+bmIA3C0yET31x8OhKBYfvGo0/byeZ6E0BjGARrir3Kg/RhhYHutpsi01+2J5IpfVoueA==}
+  lint-staged@16.2.6:
+    resolution: {integrity: sha512-s1gphtDbV4bmW1eylXpVMk2u7is7YsrLl8hzrtvC70h4ByhcMLZFY01Fx05ZUDNuv1H8HO4E+e2zgejV1jVwNw==}
     engines: {node: '>=20.17'}
     hasBin: true
 
   listenercount@1.0.1:
     resolution: {integrity: sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==}
 
-  listr2@9.0.1:
-    resolution: {integrity: sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==}
+  listr2@9.0.5:
+    resolution: {integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==}
     engines: {node: '>=20.0.0'}
 
   load-json-file@1.1.0:
     resolution: {integrity: sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==}
     engines: {node: '>=0.10.0'}
 
-  loader-runner@4.3.0:
-    resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
+  loader-runner@4.3.1:
+    resolution: {integrity: sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==}
     engines: {node: '>=6.11.5'}
 
   loader-utils@0.2.17:
@@ -15714,6 +16751,9 @@ packages:
   long-timeout@0.1.1:
     resolution: {integrity: sha512-BFRuQUqc7x2NWxfJBCyUrN8iYUYznzL9JROmRz1gZ6KlOIgmoD+njPVbb+VNn2nGMKggMsK79iUNErillsrx7w==}
 
+  long@5.3.2:
+    resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
+
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
@@ -15731,8 +16771,8 @@ packages:
   loupe@2.3.7:
     resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
 
-  loupe@3.2.0:
-    resolution: {integrity: sha512-2NCfZcT5VGVNX9mSZIxLRkEAegDGBpuQZBy13desuHeVORmBDyAET4TkJr4SjqQy3A8JDofMN6LpkK8Xcm/dlw==}
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
   lower-case@1.1.4:
     resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
@@ -15754,8 +16794,8 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lru-cache@11.1.0:
-    resolution: {integrity: sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==}
+  lru-cache@11.2.2:
+    resolution: {integrity: sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==}
     engines: {node: 20 || >=22}
 
   lru-cache@4.1.5:
@@ -15775,8 +16815,13 @@ packages:
   lru-queue@0.1.0:
     resolution: {integrity: sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==}
 
-  luxon@3.7.1:
-    resolution: {integrity: sha512-RkRWjA926cTvz5rAb1BqyWkKbbjzCGchDUIKMCUvNi17j6f6j8uHGDV82Aqcqtzd+icoYpELmG3ksgGiFNNcNg==}
+  lucide-react@0.523.0:
+    resolution: {integrity: sha512-rUjQoy7egZT9XYVXBK1je9ckBnNp7qzRZOhLQx5RcEp2dCGlXo+mv6vf7Am4LimEcFBJIIZzSGfgTqc9QCrPSw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  luxon@3.7.2:
+    resolution: {integrity: sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==}
     engines: {node: '>=12'}
 
   lz-string@1.5.0:
@@ -15786,8 +16831,8 @@ packages:
   magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
 
-  magic-string@0.30.17:
-    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
   make-cancellable-promise@1.3.2:
     resolution: {integrity: sha512-GCXh3bq/WuMbS+Ky4JBPW1hYTOU+znU+Q5m9Pu+pI8EoUqIHk9+tviOKC6/qhHh8C4/As3tzJ69IF32kdz85ww==}
@@ -15850,11 +16895,14 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
-  markdown-to-jsx@7.7.13:
-    resolution: {integrity: sha512-DiueEq2bttFcSxUs85GJcQVrOr0+VVsPfj9AEUPqmExJ3f8P/iQNvZHltV4tm1XVhu1kl0vWBZWT3l99izRMaA==}
+  markdown-to-jsx@7.7.17:
+    resolution: {integrity: sha512-7mG/1feQ0TX5I7YyMZVDgCC/y2I3CiEhIRQIhyov9nGBP5eoVrOXXHuL5ZP8GRfxVZKRiXWJgwXkb9It+nQZfQ==}
     engines: {node: '>= 10'}
     peerDependencies:
       react: '>= 0.14.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
 
   matches-selector@0.0.1:
     resolution: {integrity: sha512-Bm8wuvuNGPY3j1Mo23PxieRQAmQQe2qVcqgmpHOp1BEBNgb4dqzn2Dcgu5bYltMosjGi6LD7GPW72zboSdyJQg==}
@@ -15878,6 +16926,9 @@ packages:
   mdast-util-definitions@5.1.2:
     resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==}
 
+  mdast-util-directive@3.1.0:
+    resolution: {integrity: sha512-I3fNFt+DHmpWCYAT7quoM6lHf9wuqtI+oCOfvILnoicNIqjh5E3dEJWiXuYME2gNe8vl1iMQwyUHa7bgFmak6Q==}
+
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
@@ -15887,6 +16938,9 @@ packages:
   mdast-util-from-markdown@2.0.2:
     resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
 
+  mdast-util-frontmatter@2.0.1:
+    resolution: {integrity: sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA==}
+
   mdast-util-gfm-autolink-literal@2.0.1:
     resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
 
@@ -15911,6 +16965,9 @@ packages:
   mdast-util-mdx-jsx@3.2.0:
     resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
 
+  mdast-util-mdx@3.0.0:
+    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
+
   mdast-util-mdxjs-esm@2.0.1:
     resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
 
@@ -15973,9 +17030,8 @@ packages:
     resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==}
     engines: {node: '>= 4.0.0'}
 
-  memfs@4.36.0:
-    resolution: {integrity: sha512-mfBfzGUdoEw5AZwG8E965ej3BbvW2F9LxEWj4uLxF6BEh1dO2N9eS3AGu9S6vfenuQYrVjsbUOOZK7y3vz4vyQ==}
-    engines: {node: '>= 4.0.0'}
+  memfs@4.50.0:
+    resolution: {integrity: sha512-N0LUYQMUA1yS5tJKmMtU9yprPm6ZIg24yr/OVv/7t6q0kKDIho4cBbXRi1XKttUmNYDYgF/q45qrKE/UhGO0CA==}
 
   memoizee@0.4.17:
     resolution: {integrity: sha512-DGqD7Hjpi/1or4F/aYAspXKNm5Yili0QDAFAY4QYvpqpgiY6+1jOfqpmByzjxbWd/T9mChbCArXAbDAsTm5oXA==}
@@ -16024,8 +17080,8 @@ packages:
   merge@1.2.1:
     resolution: {integrity: sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==}
 
-  meros@1.3.1:
-    resolution: {integrity: sha512-eV7dRObfTrckdmAz4/n7pT1njIsIJXRIZkgCiX43xEsPNy4gjXQzOYYxmGcolAMtF7HyfqRuDBh3Lgs4hmhVEw==}
+  meros@1.3.2:
+    resolution: {integrity: sha512-Q3mobPbvEx7XbwhnC1J1r60+5H6EZyNccdzSz0eGexJRwouUtTZxPVRGdqKtxlpD84ScK4+tIGldkqDtCKdI0A==}
     engines: {node: '>=13'}
     peerDependencies:
       '@types/node': '>=13'
@@ -16049,6 +17105,12 @@ packages:
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
+  micromark-extension-directive@3.0.2:
+    resolution: {integrity: sha512-wjcXHgk+PPdmvR58Le9d7zQYWy+vKEU9Se44p2CrCDPiLr2FMyiT4Fyb5UFKFC66wGB3kPlgD7q3TnoqPS7SZA==}
+
+  micromark-extension-frontmatter@2.0.0:
+    resolution: {integrity: sha512-C4AkuM3dA58cgZha7zVnuVxBhDsbttIMiytjgsM2XbHAB2faRVaHRle40558FBN+DJcrLNCoqG5mlrpdU4cRtg==}
+
   micromark-extension-gfm-autolink-literal@2.1.0:
     resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
 
@@ -16070,6 +17132,21 @@ packages:
   micromark-extension-gfm@3.0.0:
     resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
 
+  micromark-extension-mdx-expression@3.0.1:
+    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
+
+  micromark-extension-mdx-jsx@3.0.2:
+    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
+
+  micromark-extension-mdx-md@2.0.0:
+    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
+
+  micromark-extension-mdxjs@3.0.0:
+    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
+
   micromark-factory-destination@1.1.0:
     resolution: {integrity: sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==}
 
@@ -16082,6 +17159,9 @@ packages:
   micromark-factory-label@2.0.1:
     resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
 
+  micromark-factory-mdx-expression@2.0.3:
+    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
+
   micromark-factory-space@1.1.0:
     resolution: {integrity: sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==}
 
@@ -16142,6 +17222,9 @@ packages:
   micromark-util-encode@2.0.1:
     resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
 
+  micromark-util-events-to-acorn@2.0.3:
+    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
+
   micromark-util-html-tag-name@1.2.0:
     resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
 
@@ -16194,6 +17277,10 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.33.0:
+    resolution: {integrity: sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==}
+    engines: {node: '>= 0.6'}
+
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
@@ -16202,6 +17289,10 @@ packages:
     resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
     engines: {node: '>= 0.6'}
 
+  mime-types@2.1.18:
+    resolution: {integrity: sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==}
+    engines: {node: '>= 0.6'}
+
   mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
@@ -16255,8 +17346,8 @@ packages:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
 
-  mini-css-extract-plugin@2.9.3:
-    resolution: {integrity: sha512-tRA0+PsS4kLVijnN1w9jUu5lkxBwUk9E8SbgEB5dBJqchE6pVYdawROG6uQtpmAri7tdCK9i7b1bULeVWqS6Ag==}
+  mini-css-extract-plugin@2.9.4:
+    resolution: {integrity: sha512-ZWYT7ln73Hptxqxk2DxPU9MmapXRhxkJD6tkSR04dnQxm8BGu2hzgKLugK5yySD97u/8yy7Ma7E76k9ZdvtjkQ==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
       webpack: ^5.0.0
@@ -16268,8 +17359,8 @@ packages:
   minimalistic-assert@1.0.1:
     resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
 
-  minimatch@10.0.3:
-    resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
+  minimatch@10.1.1:
+    resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
     engines: {node: 20 || >=22}
 
   minimatch@3.0.3:
@@ -16358,16 +17449,16 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  mlly@1.7.4:
-    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+  mlly@1.8.0:
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
 
   mocha@10.8.2:
     resolution: {integrity: sha512-VZlYo/WE8t1tstuRmqgeyBgCbJc/lEdopaa+axcKzTBJ+UIdlAB9XnmvTCAH4pwR4ElNInaedhEBmZD8iCSVEg==}
     engines: {node: '>= 14.0.0'}
     hasBin: true
 
-  mocha@11.7.1:
-    resolution: {integrity: sha512-5EK+Cty6KheMS/YLPPMJC64g5V61gIR25KsRItHw6x4hEKT6Njp1n9LOlH4gpevuwMVS66SXaBBpg+RWZkza4A==}
+  mocha@11.7.4:
+    resolution: {integrity: sha512-1jYAaY8x0kAZ0XszLWu14pzsf4KV740Gld4HXkhNTXwcHx4AUEDkPzgEHg9CM5dVcW+zv036tjpsEbLraPJj4w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
 
@@ -16437,8 +17528,8 @@ packages:
   nan@2.23.0:
     resolution: {integrity: sha512-1UxuyYGdoQHcGg87Lkqm3FzefucTa0NAiOcuRsDmysep3c1LVCRK2krrUDafMWtjSG04htvAmvg96+SDknOmgQ==}
 
-  nano-spawn@1.0.2:
-    resolution: {integrity: sha512-21t+ozMQDAL/UGgQVBbZ/xXvNO10++ZPuTmKRO8k9V3AClVRht49ahtDjfY8l1q6nSHOrE5ASfthzH3ol6R/hg==}
+  nano-spawn@2.0.0:
+    resolution: {integrity: sha512-tacvGzUY5o2D8CBh2rrwxyNojUsZNU2zjNTzKQrkgGJQTbGAfArVWXSKMBokBeeg6C7OLRGUEyoFlYbfeWQIqw==}
     engines: {node: '>=20.17'}
 
   nanoid@3.3.11:
@@ -16446,8 +17537,8 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@5.1.5:
-    resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
+  nanoid@5.1.6:
+    resolution: {integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==}
     engines: {node: ^18 || >=20}
     hasBin: true
 
@@ -16500,8 +17591,8 @@ packages:
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
-  node-abi@3.75.0:
-    resolution: {integrity: sha512-OhYaY5sDsIka7H7AtijtI9jwGYLyl29eQn/W623DiN/MIv5sUqc4g7BIDThX+gb7di9f6xK02nkp8sdfFWZLTg==}
+  node-abi@3.80.0:
+    resolution: {integrity: sha512-LyPuZJcI9HVwzXK1GPxWNzrr+vr8Hp/3UqlmWxxh8p54U1ZbclOqbSog9lWHaCX+dBaiGi6n/hIX+mKu74GmPA==}
     engines: {node: '>=10'}
 
   node-abort-controller@3.1.1:
@@ -16533,6 +17624,15 @@ packages:
   node-fetch-native@1.6.7:
     resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
 
+  node-fetch@2.6.13:
+    resolution: {integrity: sha512-StxNAxh15zr77QvvkmveSQ8uCQ4+v5FkvNTj0OESmiHu+VRi/gXArXtkWMElOsOUNLtUEvI4yS+rdtOHZTwlQA==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+
   node-fetch@2.7.0:
     resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
     engines: {node: 4.x || >=6.0.0}
@@ -16567,6 +17667,12 @@ packages:
   node-int64@0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
 
+  node-loader@2.0.0:
+    resolution: {integrity: sha512-I5VN34NO4/5UYJaUBtkrODPWxbobrE4hgDqPrjB25yPkonFhCmZ146vTH+Zg417E9Iwoh1l/MbRs1apc5J295Q==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      webpack: ^5.0.0
+
   node-loader@2.1.0:
     resolution: {integrity: sha512-OwjPkyh8+7jW8DMd/iq71uU1Sspufr/C2+c3t0p08J3CrM9ApZ4U53xuisNrDXOHyGi5OYHgtfmmh+aK9zJA6g==}
     engines: {node: '>= 10.13.0'}
@@ -16579,8 +17685,8 @@ packages:
   node-notifier@6.0.0:
     resolution: {integrity: sha512-SVfQ/wMw+DesunOm5cKqr6yDcvUTDl/yc97ybGHMrteNEY6oekXpNpS3lZwgLlwz0FLgHoiW28ZpmBHUDg37cw==}
 
-  node-releases@2.0.19:
-    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
   node-sarif-builder@2.0.3:
     resolution: {integrity: sha512-Pzr3rol8fvhG/oJjIq2NTVB0vmdNNlz22FENhhPojYRZ4/ee08CfK4YuKmuL54V9MLhI1kpzxfOJ/63LzmZzDg==}
@@ -16633,8 +17739,8 @@ packages:
     resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
     engines: {node: '>=10'}
 
-  normalize-url@8.0.2:
-    resolution: {integrity: sha512-Ee/R3SyN4BuynXcnTaekmaVdbDAEiNrHqjQIA37mHU8G9pf7aaAD4ZX3XjBLo6rsdcxA/gtkcNYZLt30ACgynw==}
+  normalize-url@8.1.0:
+    resolution: {integrity: sha512-X06Mfd/5aKsRHc0O0J5CUedwnPmnDtLF2+nq+KN9KSDlJHkPuh0JUviWjEWMe0SW/9TDdSLVPuk7L5gGTIA1/w==}
     engines: {node: '>=14.16'}
 
   npm-run-path@2.0.2:
@@ -16649,6 +17755,10 @@ packages:
     resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
   npmlog@4.1.2:
     resolution: {integrity: sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==}
     deprecated: This package is no longer supported.
@@ -16678,8 +17788,8 @@ packages:
   nwmatcher@1.4.4:
     resolution: {integrity: sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==}
 
-  nwsapi@2.2.21:
-    resolution: {integrity: sha512-o6nIY3qwiSXl7/LuOU0Dmuctd34Yay0yeuZRLFmDPrrdHpXKFndPj3hM+YEPVHYC5fx2otBx4Ilc/gyYSAUaIA==}
+  nwsapi@2.2.22:
+    resolution: {integrity: sha512-ujSMe1OWVn55euT1ihwCI1ZcAaAU3nxUiDwfDQldc51ZXaB9m2AyOn6/jh1BLe2t/G8xd6uKG1UBF2aZJeg2SQ==}
 
   nypm@0.5.4:
     resolution: {integrity: sha512-X0SNNrZiGU8/e/zAB7sCTtdxWTMSIO73q+xuKgglm2Yvzwlo8UoC5FNySQFCvl84uPaeADkqHUZUkWy4aH4xOA==}
@@ -16840,6 +17950,9 @@ packages:
     resolution: {integrity: sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==}
     deprecated: This package is no longer supported.
 
+  outvariant@1.4.0:
+    resolution: {integrity: sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==}
+
   own-keys@1.0.1:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
@@ -17007,6 +18120,10 @@ packages:
     resolution: {integrity: sha512-SgOTCX/EZXtZxBE5eJ97P4yGM5n37BwRU+YMsH4vNzFqJV/oWFXXCmwFlgWUM4PrakybVOueJJ6pwHqSVhTFDw==}
     engines: {node: '>=16'}
 
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
   parse-passwd@1.0.0:
     resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
     engines: {node: '>=0.10.0'}
@@ -17103,9 +18220,11 @@ packages:
   path-to-regexp@1.9.0:
     resolution: {integrity: sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==}
 
-  path-to-regexp@8.2.0:
-    resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
-    engines: {node: '>=16'}
+  path-to-regexp@3.3.0:
+    resolution: {integrity: sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==}
+
+  path-to-regexp@8.3.0:
+    resolution: {integrity: sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==}
 
   path-type@1.1.0:
     resolution: {integrity: sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==}
@@ -17214,6 +18333,10 @@ packages:
   pkce-challenge@3.1.0:
     resolution: {integrity: sha512-bQ/0XPZZ7eX+cdAkd61uYWpfMhakH3NeteUF1R8GNa+LMqX8QFAkbCLqq+AYAns1/ueACBu/BMWhrlKGrdvGZg==}
 
+  pkce-challenge@4.1.0:
+    resolution: {integrity: sha512-ZBmhE1C9LcPoH9XZSdwiPtbPHZROwAnMy+kIFQVrnMCxY4Cudlz3gBOpzilgc0jOgRaiT3sIWfpMomW2ar2orQ==}
+    engines: {node: '>=16.20.0'}
+
   pkce-challenge@5.0.0:
     resolution: {integrity: sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==}
     engines: {node: '>=16.20.0'}
@@ -17276,8 +18399,8 @@ packages:
   popmotion@11.0.3:
     resolution: {integrity: sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==}
 
-  portfinder@1.0.37:
-    resolution: {integrity: sha512-yuGIEjDAYnnOex9ddMnKZEMFE0CcGo6zbfzDklkmT1m5z734ss6JMzN9rNB3+RR7iS+F10D4/BVIaXOyh8PQKw==}
+  portfinder@1.0.38:
+    resolution: {integrity: sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==}
     engines: {node: '>= 10.12'}
 
   possible-typed-array-names@1.1.0:
@@ -17364,8 +18487,8 @@ packages:
     peerDependencies:
       postcss: ^8.0.0
 
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+  postcss-js@4.1.0:
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
@@ -17386,16 +18509,22 @@ packages:
       ts-node:
         optional: true
 
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
     peerDependencies:
+      jiti: '>=1.21.0'
       postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
     peerDependenciesMeta:
+      jiti:
+        optional: true
       postcss:
         optional: true
-      ts-node:
+      tsx:
+        optional: true
+      yaml:
         optional: true
 
   postcss-load-options@1.2.0:
@@ -17417,8 +18546,8 @@ packages:
       postcss: ^7.0.0 || ^8.0.1
       webpack: ^4.0.0 || ^5.0.0
 
-  postcss-loader@8.1.1:
-    resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==}
+  postcss-loader@8.2.0:
+    resolution: {integrity: sha512-tHX+RkpsXVcc7st4dSdDGliI+r4aAQDuv+v3vFYHixb6YgjreG5AG4SEB0kDK8u2s6htqEEpKlkhSBUTvWKYnA==}
     engines: {node: '>= 18.12.0'}
     peerDependencies:
       '@rspack/core': 0.x || 1.x
@@ -17722,6 +18851,10 @@ packages:
     resolution: {integrity: sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg==}
     engines: {node: '>=0.10.0'}
 
+  presentable-error@0.0.1:
+    resolution: {integrity: sha512-E6rsNU1QNJgB3sjj7OANinGncFKuK+164sLXw1/CqBjj/EkXSoSdHCtWQGBNlREIGLnL7IEUEGa08YFVUbrhVg==}
+    engines: {node: '>=16'}
+
   prettier-linter-helpers@1.0.0:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
@@ -17778,6 +18911,10 @@ packages:
     resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
     engines: {node: '>= 0.8'}
 
+  pretty-ms@9.3.0:
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
+
   prism-react-renderer@2.4.1:
     resolution: {integrity: sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==}
     peerDependencies:
@@ -17855,6 +18992,10 @@ packages:
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
+  protobufjs@7.5.4:
+    resolution: {integrity: sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==}
+    engines: {node: '>=12.0.0'}
+
   proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -17912,6 +19053,10 @@ packages:
 
       (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
 
+  qified@0.5.1:
+    resolution: {integrity: sha512-+BtFN3dCP+IaFA6IYNOu/f/uK1B8xD2QWyOeCse0rjtAebBmkzgd2d1OAXi3ikAzJMIBSdzZDNZ3wZKEUDQs5w==}
+    engines: {node: '>=20'}
+
   qs@6.13.0:
     resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==}
     engines: {node: '>=0.6'}
@@ -17963,6 +19108,10 @@ packages:
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
+  range-parser@1.2.0:
+    resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
+    engines: {node: '>= 0.6'}
+
   range-parser@1.2.1:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
@@ -17971,9 +19120,9 @@ packages:
     resolution: {integrity: sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==}
     engines: {node: '>= 0.8'}
 
-  raw-body@3.0.0:
-    resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
-    engines: {node: '>= 0.8'}
+  raw-body@3.0.1:
+    resolution: {integrity: sha512-9G8cA+tuMS75+6G/TzW8OtLzmBDMo8p1JRxN5AZ+LAp8uxGA8V8GZm4GQ4/N5QNQEnLmg6SS7wyuSmbKepiKqA==}
+    engines: {node: '>= 0.10'}
 
   raw-loader@4.0.2:
     resolution: {integrity: sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==}
@@ -18016,6 +19165,9 @@ packages:
     resolution: {integrity: sha512-Mvs6ofsc2xTjeZIrMaIfbXfsPVrbdVy/cVqq6SAacnqfMlcBpDuivhWZ1ODGeJ8HgmyWTLH971PYjj/EPCDVAw==}
     engines: {node: '>=6'}
 
+  react-devtools-inline@4.4.0:
+    resolution: {integrity: sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==}
+
   react-dnd-html5-backend@16.0.1:
     resolution: {integrity: sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==}
 
@@ -18048,8 +19200,8 @@ packages:
     resolution: {integrity: sha512-hlSJDQ2synMPKFZOsKo9Hi8WWZTC7POR8EmWvTSjow+VDgKzkmjQvFm2fk0tmRw+f0vTOIYKlarR0iL4996pdg==}
     engines: {node: '>=16.14.0'}
 
-  react-docgen@8.0.0:
-    resolution: {integrity: sha512-kmob/FOTwep7DUWf9KjuenKX0vyvChr3oTdvvPt09V60Iz75FJp+T/0ZeHMbAfJj2WaVWqAPP5Hmm3PYzSPPKg==}
+  react-docgen@8.0.2:
+    resolution: {integrity: sha512-+NRMYs2DyTP4/tqWz371Oo50JqmWltR1h2gcdgUMAWZJIAvrd0/SqlCfx7tpzpl/s36rzw6qH2MjoNrxtRNYhA==}
     engines: {node: ^20.9.0 || >=22}
 
   react-dom@18.2.0:
@@ -18057,6 +19209,11 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
   react-dom@19.1.0:
     resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
     peerDependencies:
@@ -18074,6 +19231,12 @@ packages:
       react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0
       react-dom: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0
 
+  react-error-boundary@3.1.4:
+    resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==}
+    engines: {node: '>=10', npm: '>=6'}
+    peerDependencies:
+      react: '>=16.13.1'
+
   react-error-boundary@6.0.0:
     resolution: {integrity: sha512-gdlJjD7NWr0IfkPlaREN2d9uUZUlksrfOx7SX62VRerwXbMY6ftGCIZua1VG1aXFNOimhISsTq+Owp725b9SiA==}
     peerDependencies:
@@ -18138,8 +19301,8 @@ packages:
     peerDependencies:
       react: ^16.8.4 || ^17.0.0 || ^18.0.0
 
-  react-intl@7.1.11:
-    resolution: {integrity: sha512-tnVoRCWvW5Ie2ikYSdPF7z3+880yCe/9xPmitFeRPw3RYDcCfR4m8ZYa4MBq19W4adt9Z+PQA4FaMBCJ7E+HCQ==}
+  react-intl@7.1.14:
+    resolution: {integrity: sha512-VE/0Wi/lHJlBC7APQpCzLUdIt3GB5B0GZrRW8Q+ACbkHI4j+Wwgg9J1TniN6zmLHmPH5gxXcMy+fkSPfw5p1WQ==}
     peerDependencies:
       react: 16 || 17 || 18 || 19
       typescript: ^5.6.0
@@ -18159,11 +19322,11 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  react-is@19.1.1:
-    resolution: {integrity: sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==}
+  react-is@19.2.0:
+    resolution: {integrity: sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==}
 
-  react-json-view-lite@2.4.2:
-    resolution: {integrity: sha512-m7uTsXDgPQp8R9bJO4HD/66+i218eyQPAb+7/dGQpwg8i4z2afTFqtHJPQFHvJfgDCjGQ1HSGlL3HtrZDa3Tdg==}
+  react-json-view-lite@2.5.0:
+    resolution: {integrity: sha512-tk7o7QG9oYyELWHL8xiMQ8x4WzjCzbWNyig3uexmkLb54r8jO0yH3WCWx8UZS0c49eSA4QUmG5caiRJ8fAn58g==}
     engines: {node: '>=18'}
     peerDependencies:
       react: ^18.0.0 || ^19.0.0
@@ -18194,6 +19357,12 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
+  react-markdown@9.0.3:
+    resolution: {integrity: sha512-Yk7Z94dbgYTOrdk41Z74GoKA7rThnsbbqBTRYuxoe08qvfQ9tJVhmAKw6BJS/ZORG7kTy/s1QvYzSuaoBA1qfw==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
   react-monaco-editor@0.58.0:
     resolution: {integrity: sha512-e8JH0TQEzO96Wd/EXgzc9M9tQK1pxBECD+8GNob9slMURcCM36TiVrgc4topWCDGYxRuMj8IEkaX+s3eQcUUqw==}
     peerDependencies:
@@ -18264,6 +19433,12 @@ packages:
     peerDependencies:
       typescript: 3.x.x
 
+  react-simple-code-editor@0.14.1:
+    resolution: {integrity: sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   react-split-pane@0.1.92:
     resolution: {integrity: sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w==}
     peerDependencies:
@@ -18283,8 +19458,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-syntax-highlighter@15.6.1:
-    resolution: {integrity: sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==}
+  react-syntax-highlighter@15.6.6:
+    resolution: {integrity: sha512-DgXrc+AZF47+HvAPEmn7Ua/1p10jNoVZVI/LoPiYdtY+OM+/nG5yefLHKJwdKqY1adMuHFbeyBaG9j64ML7vTw==}
     peerDependencies:
       react: '>= 0.14.0'
 
@@ -18310,6 +19485,10 @@ packages:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
 
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
   react@19.1.0:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
@@ -18445,8 +19624,8 @@ packages:
   refractor@3.6.0:
     resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
 
-  regenerate-unicode-properties@10.2.0:
-    resolution: {integrity: sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==}
+  regenerate-unicode-properties@10.2.2:
+    resolution: {integrity: sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==}
     engines: {node: '>=4'}
 
   regenerate@1.4.2:
@@ -18476,8 +19655,8 @@ packages:
   regexpu-core@2.0.0:
     resolution: {integrity: sha512-tJ9+S4oKjxY8IZ9jmjnp/mtytu1u3iyIQAfmI51IKWH6bFf7XR1ybtaO6j7INhZKXOTYADk7V5qxaqLkmNxiZQ==}
 
-  regexpu-core@6.2.0:
-    resolution: {integrity: sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==}
+  regexpu-core@6.4.0:
+    resolution: {integrity: sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==}
     engines: {node: '>=4'}
 
   registry-auth-token@3.4.0:
@@ -18497,8 +19676,8 @@ packages:
     resolution: {integrity: sha512-jlQ9gYLfk2p3V5Ag5fYhA7fv7OHzd1KUH0PRP46xc3TgwjwgROIW572AfYg/X9kaNq/LJnu6oJcFRXlIrGoTRw==}
     hasBin: true
 
-  regjsparser@0.12.0:
-    resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
+  regjsparser@0.13.0:
+    resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
     hasBin: true
 
   rehype-raw@6.1.1:
@@ -18650,8 +19829,8 @@ packages:
   resolve@1.17.0:
     resolution: {integrity: sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==}
 
-  resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
     engines: {node: '>= 0.4'}
     hasBin: true
 
@@ -18719,6 +19898,10 @@ packages:
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
+  rimraf@5.0.10:
+    resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
+    hasBin: true
+
   rimraf@6.0.1:
     resolution: {integrity: sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==}
     engines: {node: 20 || >=22}
@@ -18785,8 +19968,8 @@ packages:
     resolution: {integrity: sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==}
     hasBin: true
 
-  rollup@4.46.2:
-    resolution: {integrity: sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg==}
+  rollup@4.52.5:
+    resolution: {integrity: sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -18798,8 +19981,8 @@ packages:
     resolution: {integrity: sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==}
     engines: {node: 6.* || >= 7.*}
 
-  run-applescript@7.0.0:
-    resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
     engines: {node: '>=18'}
 
   run-async@2.4.1:
@@ -18822,6 +20005,9 @@ packages:
     resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
     engines: {npm: '>=2.0.0'}
 
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -18869,8 +20055,27 @@ packages:
   sanitize-filename@1.6.3:
     resolution: {integrity: sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==}
 
-  sass-loader@16.0.5:
-    resolution: {integrity: sha512-oL+CMBXrj6BZ/zOq4os+UECPL+bWqt6OAC6DWS8Ln8GZRcMDjlJ4JC3FBDuHJdYaFWIdKNIBYmtZtK2MaMkNIw==}
+  sass-loader@13.3.3:
+    resolution: {integrity: sha512-mt5YN2F1MOZr3d/wBRcZxeFgwgkH44wVc2zohO2YF6JiOMkiXe4BYRZpSu2sO1g71mo/j16txzUhsKZlqjVGzA==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      fibers: '>= 3.1.0'
+      node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+      sass: ^1.3.0
+      sass-embedded: '*'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+
+  sass-loader@16.0.6:
+    resolution: {integrity: sha512-sglGzId5gmlfxNs4gK2U3h7HlVRfx278YK6Ono5lwzuvi1jxig80YiuHkaDBVsYIKFhx8wN7XSCI0M2IDS/3qA==}
     engines: {node: '>= 18.12.0'}
     peerDependencies:
       '@rspack/core': 0.x || 1.x
@@ -18890,16 +20095,16 @@ packages:
       webpack:
         optional: true
 
-  sass@1.90.0:
-    resolution: {integrity: sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==}
+  sass@1.93.3:
+    resolution: {integrity: sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
   sax@1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
 
-  sax@1.4.1:
-    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
+  sax@1.4.2:
+    resolution: {integrity: sha512-FySGAa0RGcFiN6zfrO9JvK1r7TB59xuzCcTHOBXBNoKgDejlOQCR2KL/FGk3/iDlsqyYg1ELZpOmlg09B01Czw==}
 
   saxes@3.1.11:
     resolution: {integrity: sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==}
@@ -18935,8 +20140,8 @@ packages:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
     engines: {node: '>= 10.13.0'}
 
-  schema-utils@4.3.2:
-    resolution: {integrity: sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==}
+  schema-utils@4.3.3:
+    resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
     engines: {node: '>= 10.13.0'}
 
   secretlint@9.3.4:
@@ -18950,8 +20155,8 @@ packages:
   select-hose@2.0.0:
     resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
 
-  selenium-webdriver@4.34.0:
-    resolution: {integrity: sha512-zGfQFcsASAv3KrYzYh+iw4fFqB7iZAgHW7BU6rRz7isK1i1X4x3LvjmZad4bUUgHDwTnAhlqTzDh21byB+zHMg==}
+  selenium-webdriver@4.38.0:
+    resolution: {integrity: sha512-5/UXXFSQmn7FGQkbcpAqvfhzflUdMWtT7QqpEgkFD6Q6rDucxB5EUfzgjmr6JbUj30QodcW3mDXehzoeS/Vy5w==}
     engines: {node: '>= 20.0.0'}
 
   selfsigned@2.4.1:
@@ -18974,8 +20179,8 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -19010,6 +20215,9 @@ packages:
     resolution: {integrity: sha512-JndLBslCLA/ebr7rS3d+/EKkzTsTi1jI2T9l+vHfAaGJ7A7NhtDpSZ0lx81HCNWnnE0yHncG+SSnVf9IMxOwXQ==}
     engines: {node: '>= 0.8.0'}
 
+  serve-handler@6.1.6:
+    resolution: {integrity: sha512-x5RL9Y2p5+Sh3D38Fh9i/iQ5ZK+e4xuXRd/pGbM4D13tgo/MGwbttUk8emytcr1YYzBYs+apnUngBDFYfpjPuQ==}
+
   serve-index@1.9.1:
     resolution: {integrity: sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==}
     engines: {node: '>= 0.8.0'}
@@ -19135,9 +20343,6 @@ packages:
   simple-get@4.0.1:
     resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
 
-  simple-swizzle@0.2.2:
-    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
-
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -19174,12 +20379,8 @@ packages:
     resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
     engines: {node: '>=10'}
 
-  slice-ansi@5.0.0:
-    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
-    engines: {node: '>=12'}
-
-  slice-ansi@7.1.0:
-    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
+  slice-ansi@7.1.2:
+    resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
     engines: {node: '>=18'}
 
   slugify@1.6.6:
@@ -19203,8 +20404,8 @@ packages:
     resolution: {integrity: sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==}
     engines: {node: '>= 10'}
 
-  socks@2.8.6:
-    resolution: {integrity: sha512-pe4Y2yzru68lXCb38aAqRf5gvN8YdjP1lok5o0J7BOHljkyCGKVz7H3vpVIXKD27rj2giOJ7DwVyk/GWrPHDWA==}
+  socks@2.8.7:
+    resolution: {integrity: sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==}
     engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
   sort-keys@1.1.2:
@@ -19225,6 +20426,12 @@ packages:
     resolution: {integrity: sha512-OU6UJUty+i2JDpTItnizPrlpOIBLmQbWMuBg9q5bVtnHACqw1tn9nNwqJLbv0/00JjnJb/Ee5g5WS5vrRv7zIQ==}
     engines: {node: '>= 6'}
 
+  source-map-loader@4.0.2:
+    resolution: {integrity: sha512-oYwAqCuL0OZhBoSgmdrLa7mv9MjommVMiQIWgcztf+eS4+8BfcUee6nenFnDhKOhzAVnk5gpZdfnz1iiBv+5sg==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      webpack: ^5.72.1
+
   source-map-loader@5.0.0:
     resolution: {integrity: sha512-k2Dur7CbSLcAH73sBcIkV5xjPV4SzqO1NJ7+XaQl8if3VODDUj3FNchNGpqgJSKbvUfJuhVdv8K2Eu8/TNl2eA==}
     engines: {node: '>= 18.12.0'}
@@ -19274,6 +20481,9 @@ packages:
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
+  spawn-rx@5.1.2:
+    resolution: {integrity: sha512-/y7tJKALVZ1lPzeZZB9jYnmtrL7d0N2zkorii5a7r7dhHkWIuLTzZpZzMJLK1dmYRgX/NCc4iarTO3F7BS2c/A==}
+
   spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
 
@@ -19296,9 +20506,6 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
-  sprintf-js@1.1.3:
-    resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
-
   sshpk@1.18.0:
     resolution: {integrity: sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==}
     engines: {node: '>=0.10.0'}
@@ -19351,6 +20558,9 @@ packages:
   state-toggle@1.0.3:
     resolution: {integrity: sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==}
 
+  static-browser-server@1.0.3:
+    resolution: {integrity: sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==}
+
   statuses@1.5.0:
     resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
     engines: {node: '>= 0.6'}
@@ -19387,8 +20597,8 @@ packages:
       prettier:
         optional: true
 
-  storybook@9.1.1:
-    resolution: {integrity: sha512-q6GaGZdVZh6rjOdGnc+4hGTu8ECyhyjQDw4EZNxKtQjDO8kqtuxbFm8l/IP2l+zLVJAatGWKkaX9Qcd7QZxz+Q==}
+  storybook@9.1.16:
+    resolution: {integrity: sha512-339U14K6l46EFyRvaPS2ZlL7v7Pb+LlcXT8KAETrGPxq8v1sAjj2HAOB6zrlAK3M+0+ricssfAwsLCwt7Eg8TQ==}
     hasBin: true
     peerDependencies:
       prettier: ^2 || ^3
@@ -19409,6 +20619,9 @@ packages:
   streamx@2.23.0:
     resolution: {integrity: sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==}
 
+  strict-event-emitter@0.4.6:
+    resolution: {integrity: sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==}
+
   strict-uri-encode@1.1.0:
     resolution: {integrity: sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==}
     engines: {node: '>=0.10.0'}
@@ -19456,6 +20669,10 @@ packages:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
 
+  string-width@8.1.0:
+    resolution: {integrity: sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==}
+    engines: {node: '>=20'}
+
   string.fromcodepoint@0.2.1:
     resolution: {integrity: sha512-n69H31OnxSGSZyZbgBlvYIXlrMhJQ0dQAX1js1QDhpaUH6zmU3QYlj07bCwCNlPOu3oRXIubGPl2gDGnHsiCqg==}
 
@@ -19521,8 +20738,8 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
-  strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+  strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
     engines: {node: '>=12'}
 
   strip-bom@2.0.0:
@@ -19549,6 +20766,10 @@ packages:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
 
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
   strip-indent@1.0.1:
     resolution: {integrity: sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA==}
     engines: {node: '>=0.10.0'}
@@ -19558,8 +20779,8 @@ packages:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
 
-  strip-indent@4.0.0:
-    resolution: {integrity: sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==}
+  strip-indent@4.1.1:
+    resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
     engines: {node: '>=12'}
 
   strip-json-comments@2.0.1:
@@ -19615,17 +20836,17 @@ packages:
     peerDependencies:
       webpack: ^5.27.0
 
-  style-mod@4.1.2:
-    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+  style-mod@4.1.3:
+    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
 
-  style-to-js@1.1.17:
-    resolution: {integrity: sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==}
+  style-to-js@1.1.19:
+    resolution: {integrity: sha512-Ev+SgeqiNGT1ufsXyVC5RrJRXdrkRJ1Gol9Qw7Pb72YCKJXrBvP0ckZhBeVSrw2m06DJpei2528uIpjMb4TsoQ==}
 
   style-to-object@0.3.0:
     resolution: {integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==}
 
-  style-to-object@1.0.9:
-    resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}
+  style-to-object@1.0.12:
+    resolution: {integrity: sha512-ddJqYnoT4t97QvN2C95bCgt+m7AAgXjVnkk/jxAfmp7EAB8nnqqZYEbMd3em7/vEomDb2LAQKAy1RFfv41mdNw==}
 
   style-value-types@5.0.0:
     resolution: {integrity: sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==}
@@ -19648,8 +20869,8 @@ packages:
     peerDependencies:
       stylelint: ^16.18.0
 
-  stylelint@16.23.0:
-    resolution: {integrity: sha512-69T5aS2LUY306ekt1Q1oaSPwz/jaG9HjyMix3UMrai1iEbuOafBe2Dh8xlyczrxFAy89qcKyZWWtc42XLx3Bbw==}
+  stylelint@16.25.0:
+    resolution: {integrity: sha512-Li0avYWV4nfv1zPbdnxLYBGq4z8DVZxbRgx4Kn6V+Uftz1rMoF1qiEI3oL4kgWqyYgCgs7gT5maHNZ82Gk03vQ==}
     engines: {node: '>=18.12.0'}
     hasBin: true
 
@@ -19765,8 +20986,8 @@ packages:
     resolution: {integrity: sha512-v/hu7KQQtospyDLpZxz7m5c7s90aj53YEkJ/A8x3mLPlSgIkZ6RKJkTjBG75P1p/fo5IeSA4TycyJg3VSu/aPw==}
     deprecated: 'Please migrate to Workbox: https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw'
 
-  swagger-client@3.35.6:
-    resolution: {integrity: sha512-OgwNneIdC45KXwOfwrlkwgWPeAKiV4K75mOnZioTddo1mpp9dTboCDVJas7185Ww1ziBwzShBqXpNGmyha9ZQg==}
+  swagger-client@3.36.0:
+    resolution: {integrity: sha512-9fkjxGHXuKy20jj8zwE6RwgFSOGKAyOD5U7aKgW/+/futtHZHOdZeqiEkb97sptk2rdBv7FEiUQDNlWZR186RA==}
 
   swagger-ui-react@5.21.0:
     resolution: {integrity: sha512-lS5paITM1kkcBb/BTTSMHKelh8elHfcuUP4T3R3mO80tDR0AYJL2HR5UdQD6nV1LwdvekzRM8gKjJA6hVayi0A==}
@@ -19774,11 +20995,11 @@ packages:
       react: '>=16.8.0 <19'
       react-dom: '>=16.8.0 <19'
 
-  swagger-ui-react@5.27.1:
-    resolution: {integrity: sha512-wwDoavIeJI/Pwiavn32FMJ5dfptz0BAOKjSrj7EdU22QdP3gdk9+MZHdzzjxWURmVj0kc0XoQfsFgjln0toJaw==}
+  swagger-ui-react@5.30.1:
+    resolution: {integrity: sha512-W3HP5vHkLy+f+N7sKv/zNuUArWypBjFXUIbvYyYQ0Ke50yUvW1WhQvogIp8FCi/y1/kp20nnEfTVxSG1CtvZqw==}
     peerDependencies:
-      react: '>=16.8.0 <19'
-      react-dom: '>=16.8.0 <19'
+      react: '>=16.8.0 <20'
+      react-dom: '>=16.8.0 <20'
 
   swc-loader@0.2.6:
     resolution: {integrity: sha512-9Zi9UP2YmDpgmQVbyOPJClY0dwf58JDyDMQ7uRc4krmc72twNI2fvlBWHLqVekBpPc7h5NJkGVT1zNDxFrqhvg==}
@@ -19803,8 +21024,8 @@ packages:
   tabbable@5.3.3:
     resolution: {integrity: sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==}
 
-  tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+  tabbable@6.3.0:
+    resolution: {integrity: sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==}
 
   table@5.4.6:
     resolution: {integrity: sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==}
@@ -19814,13 +21035,16 @@ packages:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
 
-  tailwindcss@3.4.17:
-    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
+  tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+
+  tailwindcss@3.4.18:
+    resolution: {integrity: sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  tailwindcss@4.1.11:
-    resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
+  tailwindcss@4.1.16:
+    resolution: {integrity: sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==}
 
   tapable@0.2.9:
     resolution: {integrity: sha512-2wsvQ+4GwBvLPLWsNfLCDYGsW6xb7aeC6utq2Qh0PFwgEy7K7dsma9Jsmb2zSQj7GvYAyUGSntLtsv++GmgL1A==}
@@ -19830,8 +21054,8 @@ packages:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
     engines: {node: '>=6'}
 
-  tapable@2.2.2:
-    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
   tar-fs@3.1.1:
@@ -19907,8 +21131,8 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  terser@5.43.1:
-    resolution: {integrity: sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==}
+  terser@5.44.0:
+    resolution: {integrity: sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -19943,8 +21167,8 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
-  thingies@1.21.0:
-    resolution: {integrity: sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==}
+  thingies@2.5.0:
+    resolution: {integrity: sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==}
     engines: {node: '>=10.18'}
     peerDependencies:
       tslib: ^2
@@ -19992,8 +21216,8 @@ packages:
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
-  tinyglobby@0.2.14:
-    resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
   tinyrainbow@1.2.0:
@@ -20008,23 +21232,23 @@ packages:
     resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
 
-  tinyspy@4.0.3:
-    resolution: {integrity: sha512-t2T/WLB2WRgZ9EpE4jgPJ9w+i66UZfDc8wHh0xrwiRNN+UwH98GIJkTeZqX9rg0i0ptwzqW+uYeIF0T4F8LR7A==}
+  tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
     engines: {node: '>=14.0.0'}
 
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
 
-  tmp@0.2.4:
-    resolution: {integrity: sha512-UdiSoX6ypifLmrfQ/XfiawN6hkjSBpCjhKxxZcWlUUmoXLaCKQU0bx4HF/tdDK2uzRuchf1txGvrWBzYREssoQ==}
+  tmp@0.2.5:
+    resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==}
     engines: {node: '>=14.14'}
 
   tmpl@1.0.5:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
 
-  to-buffer@1.2.1:
-    resolution: {integrity: sha512-tB82LpAIWjhLYbqjx3X4zEeHN6M8CiuOEy2JY8SEQVdYRe3CCHOFaqrBW1doLDrfpWhplcW7BL+bO3/6S3pcDQ==}
+  to-buffer@1.2.2:
+    resolution: {integrity: sha512-db0E3UJjcFhpDhAF4tLo03oli3pwl3dbnzXOUIlRKrp+ldk/VUxzpWYZENsw2SZiuBjHAk7DfB0VU7NKdpb6sw==}
     engines: {node: '>= 0.4'}
 
   to-fast-properties@1.0.3:
@@ -20086,8 +21310,8 @@ packages:
   traverse@0.3.9:
     resolution: {integrity: sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==}
 
-  tree-dump@1.0.3:
-    resolution: {integrity: sha512-il+Cv80yVHFBwokQSfd4bldvr1Md951DpgAGfmhydt04L+YzHgubm2tQ7zueWDcGENKHq0ZvGFR/hjvNXilHEg==}
+  tree-dump@1.1.0:
+    resolution: {integrity: sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
@@ -20213,8 +21437,8 @@ packages:
     resolution: {integrity: sha512-8t3bu2FcEkXb+D4L+Cn8qiK2E2C6Ms4/GQChvz6IMbVurcFHLXrhW4EMtfaol1a1ASQACZGDUGit4NHnX9g7hQ==}
     engines: {node: '>=4.3.0 <5.0.0 || >=5.10'}
 
-  ts-loader@9.5.2:
-    resolution: {integrity: sha512-Qo4piXvOTWcMGIgRiuFa6nHNm+54HbYaZCKqc9eeZCLRy3XqafQgwX2F7mofrbJG3g7EEb+lkiR+z2Lic2s3Zw==}
+  ts-loader@9.5.4:
+    resolution: {integrity: sha512-nCz0rEwunlTZiy6rXFByQU1kVVpCIgUpc/psFiKVrUwrizdnIbRFu8w7bxhUF0X613DYwT4XzrZHpVyMe758hQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       typescript: '*'
@@ -20229,6 +21453,20 @@ packages:
   ts-morph@26.0.0:
     resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
 
+  ts-node@10.9.2:
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+
   ts-pnp@1.2.0:
     resolution: {integrity: sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==}
     engines: {node: '>=6'}
@@ -20460,8 +21698,8 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  ua-parser-js@1.0.40:
-    resolution: {integrity: sha512-z6PJ8Lml+v3ichVojCiB8toQJBuwR42ySM4ezjXIqXK3M0HczmKQ3LF4rhU55PfD99KEEXQG6yb7iOMyvYuHew==}
+  ua-parser-js@1.0.41:
+    resolution: {integrity: sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==}
     hasBin: true
 
   uc.micro@1.0.6:
@@ -20508,8 +21746,8 @@ packages:
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
-  undici@7.13.0:
-    resolution: {integrity: sha512-l+zSMssRqrzDcb3fjMkjjLGmuiiK2pMIcV++mJaAc9vhjSGpvM7h43QgP+OAMb1GImHmbPyG2tBXeuyG5iY4gA==}
+  undici@7.16.0:
+    resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==}
     engines: {node: '>=20.18.1'}
 
   unfetch@4.2.0:
@@ -20526,12 +21764,12 @@ packages:
     resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==}
     engines: {node: '>=4'}
 
-  unicode-match-property-value-ecmascript@2.2.0:
-    resolution: {integrity: sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==}
+  unicode-match-property-value-ecmascript@2.2.1:
+    resolution: {integrity: sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==}
     engines: {node: '>=4'}
 
-  unicode-property-aliases-ecmascript@2.1.0:
-    resolution: {integrity: sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==}
+  unicode-property-aliases-ecmascript@2.2.0:
+    resolution: {integrity: sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==}
     engines: {node: '>=4'}
 
   unicorn-magic@0.1.0:
@@ -20542,6 +21780,9 @@ packages:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
 
+  unidiff@1.0.4:
+    resolution: {integrity: sha512-ynU0vsAXw0ir8roa+xPCUHmnJ5goc5BTM2Kuc3IJd8UwgaeRs7VSD5+eeaQL+xp1JtB92hu/Zy/Lgy7RZcr1pQ==}
+
   unified@10.1.2:
     resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
 
@@ -20601,8 +21842,11 @@ packages:
   unist-util-is@5.2.1:
     resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
 
-  unist-util-is@6.0.0:
-    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-position-from-estree@2.0.0:
+    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
 
   unist-util-position@3.1.0:
     resolution: {integrity: sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA==}
@@ -20631,8 +21875,8 @@ packages:
   unist-util-visit-parents@5.1.3:
     resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
 
-  unist-util-visit-parents@6.0.1:
-    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
 
   unist-util-visit@2.0.3:
     resolution: {integrity: sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==}
@@ -20691,8 +21935,8 @@ packages:
     resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
     engines: {node: '>=4'}
 
-  update-browserslist-db@1.1.3:
-    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+  update-browserslist-db@1.1.4:
+    resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -20801,8 +22045,8 @@ packages:
       '@types/react':
         optional: true
 
-  use-sync-external-store@1.5.0:
-    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
@@ -20854,6 +22098,9 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+
   v8-compile-cache@2.4.0:
     resolution: {integrity: sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==}
 
@@ -20884,8 +22131,8 @@ packages:
     resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
     engines: {'0': node >=0.6.0}
 
-  version-range@4.14.0:
-    resolution: {integrity: sha512-gjb0ARm9qlcBAonU4zPwkl9ecKkas+tC2CGwFfptTCWWIVTWY1YUbT2zZKsOAF1jR/tNxxyLwwG0cb42XlYcTg==}
+  version-range@4.15.0:
+    resolution: {integrity: sha512-Ck0EJbAGxHwprkzFO966t4/5QkRuzh+/I1RxhLgUKKwEn+Cd8NwM60mE3AqBZg5gYODoXW0EFsQvbZjRlvdqbg==}
     engines: {node: '>=4'}
 
   vfile-location@3.2.0:
@@ -21002,6 +22249,9 @@ packages:
   vscode-messenger-common@0.5.1:
     resolution: {integrity: sha512-YJRUdK278/K7vNyhVoePINOHmz3xjQFQbSiuNXCm3+GfQ6NSmjjWTpumAYAzNs05HKAeF9glU532livdwc3W0A==}
 
+  vscode-messenger-webview@0.4.5:
+    resolution: {integrity: sha512-pzGB6HoTfPszMF4HQG+u5WMJ959iGLmow6ehYVTZnZjZ+phBKEBtpTYAjJSNotyUfZJ58NCdq5+ZSvMgkAuAJw==}
+
   vscode-messenger-webview@0.5.1:
     resolution: {integrity: sha512-3IXFORcjD3c9khECdqRUeBh05mt0AZA/86FhY/MlCRB2YHGzqpJeD/5rRX92fO2M42rUjXLi5bnzmXSvVGXadw==}
 
@@ -21019,9 +22269,9 @@ packages:
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
-  vscode-ws-jsonrpc@3.4.0:
-    resolution: {integrity: sha512-jkNZvX0LdHt4skPxMw/jFePr3jRCJU6ZmO28oPoQ7RwNSkwU3uN8mgtxACYEbOY68bYmi/b/uJzhxewKCz1P4w==}
-    engines: {node: '>=18.19.0', npm: '>=10.2.3'}
+  vscode-ws-jsonrpc@3.5.0:
+    resolution: {integrity: sha512-13ZDy7Od4AfEPK2HIfY3DtyRi4FVsvFql1yobVJrpIoHOKGGJpIjVvIJpMxkrHzCZzWlYlg+WEu2hrYkCTvM0Q==}
+    engines: {node: '>=20.10.0', npm: '>=10.2.3'}
 
   w3c-hr-time@1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
@@ -21155,8 +22405,8 @@ packages:
       webpack:
         optional: true
 
-  webpack-dev-middleware@7.4.2:
-    resolution: {integrity: sha512-xOO8n6eggxnwYpy1NlzUKpvrjfJTvae5/D6WOK0S2LSo7vjmo5gCM1DbLUmFqrMTJP+W/0YZNctm7jasWvLuBA==}
+  webpack-dev-middleware@7.4.5:
+    resolution: {integrity: sha512-uxQ6YqGdE4hgDKNf7hUiPXOdtkXvBJXrfEGYSx7P7LC8hnUYGK70X6xQXUvXeNyBDDcsiQXpG2m3G9vxowaEuA==}
     engines: {node: '>= 18.12.0'}
     peerDependencies:
       webpack: ^5.0.0
@@ -21231,8 +22481,8 @@ packages:
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
-  webpack@5.101.0:
-    resolution: {integrity: sha512-B4t+nJqytPeuZlHuIKTbalhljIFXeNRqrUGAQgTGlfOl2lXXKXw+yZu6bicycP+PUlM44CxBjCFD6aciKFT3LQ==}
+  webpack@5.102.1:
+    resolution: {integrity: sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     peerDependencies:
@@ -21368,8 +22618,8 @@ packages:
   workerpool@6.5.1:
     resolution: {integrity: sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==}
 
-  workerpool@9.3.3:
-    resolution: {integrity: sha512-slxCaKbYjEdFT/o2rH9xS1hf4uRDch1w7Uo+apxhZ+sf/1d9e0ZVkn42kPNGP2dgjIx6YFvSevj0zHvbWe2jdw==}
+  workerpool@9.3.4:
+    resolution: {integrity: sha512-TmPRQYYSAnnDiEB0P/Ytip7bFGvqnSU6I2BcuSw7Hx+JSg/DsUi5ebYfc8GYaSdpuvOcEs6dXxPurOYpe9QFwg==}
 
   wrap-ansi@2.1.0:
     resolution: {integrity: sha512-vAaEaDM946gbNpH5pLVNR+vX2ht6n0Bt3GXwVB1AuAqZosOvHNF3P7wDnh8KLkSqgUh0uh77le7Owgoz+Z9XBw==}
@@ -21391,8 +22641,8 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
-  wrap-ansi@9.0.0:
-    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+  wrap-ansi@9.0.2:
+    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
     engines: {node: '>=18'}
 
   wrappy@1.0.2:
@@ -21591,6 +22841,10 @@ packages:
   yazl@2.5.1:
     resolution: {integrity: sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==}
 
+  yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -21599,6 +22853,13 @@ packages:
     resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
     engines: {node: '>=12.20'}
 
+  yoctocolors@2.1.2:
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
+  yup@1.4.0:
+    resolution: {integrity: sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==}
+
   yup@1.6.1:
     resolution: {integrity: sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==}
 
@@ -21616,8 +22877,8 @@ packages:
   zod@4.1.11:
     resolution: {integrity: sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg==}
 
-  zustand@5.0.7:
-    resolution: {integrity: sha512-Ot6uqHDW/O2VdYsKLLU8GQu8sCOM1LcoE8RwvLv9uuRT9s6SOHCKs0ZEOhxg+I1Ld+A1Q5lwx+UlKXXUoCZITg==}
+  zustand@5.0.8:
+    resolution: {integrity: sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==}
     engines: {node: '>=12.20.0'}
     peerDependencies:
       '@types/react': '>=18.0.0'
@@ -21642,31 +22903,32 @@ packages:
 
 snapshots:
 
-  '@adobe/css-tools@4.4.3': {}
+  '@adobe/css-tools@4.4.4': {}
 
-  '@ai-sdk/amazon-bedrock@3.0.30(zod@4.1.11)':
+  '@ai-sdk/amazon-bedrock@3.0.51(zod@4.1.11)':
     dependencies:
-      '@ai-sdk/anthropic': 2.0.23(zod@4.1.11)
+      '@ai-sdk/anthropic': 2.0.41(zod@4.1.11)
       '@ai-sdk/provider': 2.0.0
-      '@ai-sdk/provider-utils': 3.0.10(zod@4.1.11)
-      '@smithy/eventstream-codec': 4.0.5
-      '@smithy/util-utf8': 4.0.0
+      '@ai-sdk/provider-utils': 3.0.16(zod@4.1.11)
+      '@smithy/eventstream-codec': 4.2.4
+      '@smithy/util-utf8': 4.2.0
       aws4fetch: 1.0.20
       zod: 4.1.11
 
-  '@ai-sdk/anthropic@2.0.23(zod@4.1.11)':
+  '@ai-sdk/anthropic@2.0.41(zod@4.1.11)':
     dependencies:
       '@ai-sdk/provider': 2.0.0
-      '@ai-sdk/provider-utils': 3.0.10(zod@4.1.11)
+      '@ai-sdk/provider-utils': 3.0.16(zod@4.1.11)
       zod: 4.1.11
 
-  '@ai-sdk/gateway@1.0.32(zod@4.1.11)':
+  '@ai-sdk/gateway@2.0.6(zod@4.1.11)':
     dependencies:
       '@ai-sdk/provider': 2.0.0
-      '@ai-sdk/provider-utils': 3.0.10(zod@4.1.11)
+      '@ai-sdk/provider-utils': 3.0.16(zod@4.1.11)
+      '@vercel/oidc': 3.0.3
       zod: 4.1.11
 
-  '@ai-sdk/provider-utils@3.0.10(zod@4.1.11)':
+  '@ai-sdk/provider-utils@3.0.16(zod@4.1.11)':
     dependencies:
       '@ai-sdk/provider': 2.0.0
       '@standard-schema/spec': 1.0.0
@@ -21681,8 +22943,14 @@ snapshots:
 
   '@ampproject/remapping@2.3.0':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@apidevtools/json-schema-ref-parser@11.6.1':
+    dependencies:
+      '@jsdevtools/ono': 7.1.3
+      '@types/json-schema': 7.0.15
+      js-yaml: 4.1.0
 
   '@apidevtools/json-schema-ref-parser@12.0.2':
     dependencies:
@@ -21697,21 +22965,21 @@ snapshots:
   '@aws-crypto/crc32@5.2.0':
     dependencies:
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.862.0
+      '@aws-sdk/types': 3.922.0
       tslib: 2.8.1
 
   '@aws-crypto/crc32c@5.2.0':
     dependencies:
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.862.0
+      '@aws-sdk/types': 3.922.0
       tslib: 2.8.1
 
   '@aws-crypto/sha1-browser@5.2.0':
     dependencies:
       '@aws-crypto/supports-web-crypto': 5.2.0
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.862.0
-      '@aws-sdk/util-locate-window': 3.804.0
+      '@aws-sdk/types': 3.922.0
+      '@aws-sdk/util-locate-window': 3.893.0
       '@smithy/util-utf8': 2.3.0
       tslib: 2.8.1
 
@@ -21720,15 +22988,15 @@ snapshots:
       '@aws-crypto/sha256-js': 5.2.0
       '@aws-crypto/supports-web-crypto': 5.2.0
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.862.0
-      '@aws-sdk/util-locate-window': 3.804.0
+      '@aws-sdk/types': 3.922.0
+      '@aws-sdk/util-locate-window': 3.893.0
       '@smithy/util-utf8': 2.3.0
       tslib: 2.8.1
 
   '@aws-crypto/sha256-js@5.2.0':
     dependencies:
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.862.0
+      '@aws-sdk/types': 3.922.0
       tslib: 2.8.1
 
   '@aws-crypto/supports-web-crypto@5.2.0':
@@ -21737,429 +23005,430 @@ snapshots:
 
   '@aws-crypto/util@5.2.0':
     dependencies:
-      '@aws-sdk/types': 3.862.0
+      '@aws-sdk/types': 3.922.0
       '@smithy/util-utf8': 2.3.0
       tslib: 2.8.1
 
-  '@aws-sdk/client-s3@3.862.0':
+  '@aws-sdk/client-s3@3.922.0':
     dependencies:
       '@aws-crypto/sha1-browser': 5.2.0
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/credential-provider-node': 3.862.0
-      '@aws-sdk/middleware-bucket-endpoint': 3.862.0
-      '@aws-sdk/middleware-expect-continue': 3.862.0
-      '@aws-sdk/middleware-flexible-checksums': 3.862.0
-      '@aws-sdk/middleware-host-header': 3.862.0
-      '@aws-sdk/middleware-location-constraint': 3.862.0
-      '@aws-sdk/middleware-logger': 3.862.0
-      '@aws-sdk/middleware-recursion-detection': 3.862.0
-      '@aws-sdk/middleware-sdk-s3': 3.862.0
-      '@aws-sdk/middleware-ssec': 3.862.0
-      '@aws-sdk/middleware-user-agent': 3.862.0
-      '@aws-sdk/region-config-resolver': 3.862.0
-      '@aws-sdk/signature-v4-multi-region': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@aws-sdk/util-endpoints': 3.862.0
-      '@aws-sdk/util-user-agent-browser': 3.862.0
-      '@aws-sdk/util-user-agent-node': 3.862.0
-      '@aws-sdk/xml-builder': 3.862.0
-      '@smithy/config-resolver': 4.1.5
-      '@smithy/core': 3.8.0
-      '@smithy/eventstream-serde-browser': 4.0.5
-      '@smithy/eventstream-serde-config-resolver': 4.1.3
-      '@smithy/eventstream-serde-node': 4.0.5
-      '@smithy/fetch-http-handler': 5.1.1
-      '@smithy/hash-blob-browser': 4.0.5
-      '@smithy/hash-node': 4.0.5
-      '@smithy/hash-stream-node': 4.0.5
-      '@smithy/invalid-dependency': 4.0.5
-      '@smithy/md5-js': 4.0.5
-      '@smithy/middleware-content-length': 4.0.5
-      '@smithy/middleware-endpoint': 4.1.18
-      '@smithy/middleware-retry': 4.1.19
-      '@smithy/middleware-serde': 4.0.9
-      '@smithy/middleware-stack': 4.0.5
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/node-http-handler': 4.1.1
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/smithy-client': 4.4.10
-      '@smithy/types': 4.3.2
-      '@smithy/url-parser': 4.0.5
-      '@smithy/util-base64': 4.0.0
-      '@smithy/util-body-length-browser': 4.0.0
-      '@smithy/util-body-length-node': 4.0.0
-      '@smithy/util-defaults-mode-browser': 4.0.26
-      '@smithy/util-defaults-mode-node': 4.0.26
-      '@smithy/util-endpoints': 3.0.7
-      '@smithy/util-middleware': 4.0.5
-      '@smithy/util-retry': 4.0.7
-      '@smithy/util-stream': 4.2.4
-      '@smithy/util-utf8': 4.0.0
-      '@smithy/util-waiter': 4.0.7
-      '@types/uuid': 9.0.8
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/credential-provider-node': 3.922.0
+      '@aws-sdk/middleware-bucket-endpoint': 3.922.0
+      '@aws-sdk/middleware-expect-continue': 3.922.0
+      '@aws-sdk/middleware-flexible-checksums': 3.922.0
+      '@aws-sdk/middleware-host-header': 3.922.0
+      '@aws-sdk/middleware-location-constraint': 3.922.0
+      '@aws-sdk/middleware-logger': 3.922.0
+      '@aws-sdk/middleware-recursion-detection': 3.922.0
+      '@aws-sdk/middleware-sdk-s3': 3.922.0
+      '@aws-sdk/middleware-ssec': 3.922.0
+      '@aws-sdk/middleware-user-agent': 3.922.0
+      '@aws-sdk/region-config-resolver': 3.922.0
+      '@aws-sdk/signature-v4-multi-region': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@aws-sdk/util-endpoints': 3.922.0
+      '@aws-sdk/util-user-agent-browser': 3.922.0
+      '@aws-sdk/util-user-agent-node': 3.922.0
+      '@aws-sdk/xml-builder': 3.921.0
+      '@smithy/config-resolver': 4.4.1
+      '@smithy/core': 3.17.2
+      '@smithy/eventstream-serde-browser': 4.2.4
+      '@smithy/eventstream-serde-config-resolver': 4.3.4
+      '@smithy/eventstream-serde-node': 4.2.4
+      '@smithy/fetch-http-handler': 5.3.5
+      '@smithy/hash-blob-browser': 4.2.5
+      '@smithy/hash-node': 4.2.4
+      '@smithy/hash-stream-node': 4.2.4
+      '@smithy/invalid-dependency': 4.2.4
+      '@smithy/md5-js': 4.2.4
+      '@smithy/middleware-content-length': 4.2.4
+      '@smithy/middleware-endpoint': 4.3.6
+      '@smithy/middleware-retry': 4.4.6
+      '@smithy/middleware-serde': 4.2.4
+      '@smithy/middleware-stack': 4.2.4
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/node-http-handler': 4.4.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/smithy-client': 4.9.2
+      '@smithy/types': 4.8.1
+      '@smithy/url-parser': 4.2.4
+      '@smithy/util-base64': 4.3.0
+      '@smithy/util-body-length-browser': 4.2.0
+      '@smithy/util-body-length-node': 4.2.1
+      '@smithy/util-defaults-mode-browser': 4.3.5
+      '@smithy/util-defaults-mode-node': 4.2.7
+      '@smithy/util-endpoints': 3.2.4
+      '@smithy/util-middleware': 4.2.4
+      '@smithy/util-retry': 4.2.4
+      '@smithy/util-stream': 4.5.5
+      '@smithy/util-utf8': 4.2.0
+      '@smithy/util-waiter': 4.2.4
+      '@smithy/uuid': 1.1.0
       tslib: 2.8.1
-      uuid: 9.0.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sso@3.862.0':
+  '@aws-sdk/client-sso@3.922.0':
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/middleware-host-header': 3.862.0
-      '@aws-sdk/middleware-logger': 3.862.0
-      '@aws-sdk/middleware-recursion-detection': 3.862.0
-      '@aws-sdk/middleware-user-agent': 3.862.0
-      '@aws-sdk/region-config-resolver': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@aws-sdk/util-endpoints': 3.862.0
-      '@aws-sdk/util-user-agent-browser': 3.862.0
-      '@aws-sdk/util-user-agent-node': 3.862.0
-      '@smithy/config-resolver': 4.1.5
-      '@smithy/core': 3.8.0
-      '@smithy/fetch-http-handler': 5.1.1
-      '@smithy/hash-node': 4.0.5
-      '@smithy/invalid-dependency': 4.0.5
-      '@smithy/middleware-content-length': 4.0.5
-      '@smithy/middleware-endpoint': 4.1.18
-      '@smithy/middleware-retry': 4.1.19
-      '@smithy/middleware-serde': 4.0.9
-      '@smithy/middleware-stack': 4.0.5
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/node-http-handler': 4.1.1
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/smithy-client': 4.4.10
-      '@smithy/types': 4.3.2
-      '@smithy/url-parser': 4.0.5
-      '@smithy/util-base64': 4.0.0
-      '@smithy/util-body-length-browser': 4.0.0
-      '@smithy/util-body-length-node': 4.0.0
-      '@smithy/util-defaults-mode-browser': 4.0.26
-      '@smithy/util-defaults-mode-node': 4.0.26
-      '@smithy/util-endpoints': 3.0.7
-      '@smithy/util-middleware': 4.0.5
-      '@smithy/util-retry': 4.0.7
-      '@smithy/util-utf8': 4.0.0
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/middleware-host-header': 3.922.0
+      '@aws-sdk/middleware-logger': 3.922.0
+      '@aws-sdk/middleware-recursion-detection': 3.922.0
+      '@aws-sdk/middleware-user-agent': 3.922.0
+      '@aws-sdk/region-config-resolver': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@aws-sdk/util-endpoints': 3.922.0
+      '@aws-sdk/util-user-agent-browser': 3.922.0
+      '@aws-sdk/util-user-agent-node': 3.922.0
+      '@smithy/config-resolver': 4.4.1
+      '@smithy/core': 3.17.2
+      '@smithy/fetch-http-handler': 5.3.5
+      '@smithy/hash-node': 4.2.4
+      '@smithy/invalid-dependency': 4.2.4
+      '@smithy/middleware-content-length': 4.2.4
+      '@smithy/middleware-endpoint': 4.3.6
+      '@smithy/middleware-retry': 4.4.6
+      '@smithy/middleware-serde': 4.2.4
+      '@smithy/middleware-stack': 4.2.4
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/node-http-handler': 4.4.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/smithy-client': 4.9.2
+      '@smithy/types': 4.8.1
+      '@smithy/url-parser': 4.2.4
+      '@smithy/util-base64': 4.3.0
+      '@smithy/util-body-length-browser': 4.2.0
+      '@smithy/util-body-length-node': 4.2.1
+      '@smithy/util-defaults-mode-browser': 4.3.5
+      '@smithy/util-defaults-mode-node': 4.2.7
+      '@smithy/util-endpoints': 3.2.4
+      '@smithy/util-middleware': 4.2.4
+      '@smithy/util-retry': 4.2.4
+      '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/core@3.862.0':
-    dependencies:
-      '@aws-sdk/types': 3.862.0
-      '@aws-sdk/xml-builder': 3.862.0
-      '@smithy/core': 3.8.0
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/property-provider': 4.0.5
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/signature-v4': 5.1.3
-      '@smithy/smithy-client': 4.4.10
-      '@smithy/types': 4.3.2
-      '@smithy/util-base64': 4.0.0
-      '@smithy/util-body-length-browser': 4.0.0
-      '@smithy/util-middleware': 4.0.5
-      '@smithy/util-utf8': 4.0.0
-      fast-xml-parser: 5.2.5
+  '@aws-sdk/core@3.922.0':
+    dependencies:
+      '@aws-sdk/types': 3.922.0
+      '@aws-sdk/xml-builder': 3.921.0
+      '@smithy/core': 3.17.2
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/property-provider': 4.2.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/signature-v4': 5.3.4
+      '@smithy/smithy-client': 4.9.2
+      '@smithy/types': 4.8.1
+      '@smithy/util-base64': 4.3.0
+      '@smithy/util-middleware': 4.2.4
+      '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-env@3.862.0':
+  '@aws-sdk/credential-provider-env@3.922.0':
     dependencies:
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@smithy/property-provider': 4.0.5
-      '@smithy/types': 4.3.2
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/property-provider': 4.2.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-http@3.862.0':
-    dependencies:
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@smithy/fetch-http-handler': 5.1.1
-      '@smithy/node-http-handler': 4.1.1
-      '@smithy/property-provider': 4.0.5
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/smithy-client': 4.4.10
-      '@smithy/types': 4.3.2
-      '@smithy/util-stream': 4.2.4
+  '@aws-sdk/credential-provider-http@3.922.0':
+    dependencies:
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/fetch-http-handler': 5.3.5
+      '@smithy/node-http-handler': 4.4.4
+      '@smithy/property-provider': 4.2.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/smithy-client': 4.9.2
+      '@smithy/types': 4.8.1
+      '@smithy/util-stream': 4.5.5
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-ini@3.862.0':
-    dependencies:
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/credential-provider-env': 3.862.0
-      '@aws-sdk/credential-provider-http': 3.862.0
-      '@aws-sdk/credential-provider-process': 3.862.0
-      '@aws-sdk/credential-provider-sso': 3.862.0
-      '@aws-sdk/credential-provider-web-identity': 3.862.0
-      '@aws-sdk/nested-clients': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@smithy/credential-provider-imds': 4.0.7
-      '@smithy/property-provider': 4.0.5
-      '@smithy/shared-ini-file-loader': 4.0.5
-      '@smithy/types': 4.3.2
+  '@aws-sdk/credential-provider-ini@3.922.0':
+    dependencies:
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/credential-provider-env': 3.922.0
+      '@aws-sdk/credential-provider-http': 3.922.0
+      '@aws-sdk/credential-provider-process': 3.922.0
+      '@aws-sdk/credential-provider-sso': 3.922.0
+      '@aws-sdk/credential-provider-web-identity': 3.922.0
+      '@aws-sdk/nested-clients': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/credential-provider-imds': 4.2.4
+      '@smithy/property-provider': 4.2.4
+      '@smithy/shared-ini-file-loader': 4.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/credential-provider-node@3.862.0':
-    dependencies:
-      '@aws-sdk/credential-provider-env': 3.862.0
-      '@aws-sdk/credential-provider-http': 3.862.0
-      '@aws-sdk/credential-provider-ini': 3.862.0
-      '@aws-sdk/credential-provider-process': 3.862.0
-      '@aws-sdk/credential-provider-sso': 3.862.0
-      '@aws-sdk/credential-provider-web-identity': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@smithy/credential-provider-imds': 4.0.7
-      '@smithy/property-provider': 4.0.5
-      '@smithy/shared-ini-file-loader': 4.0.5
-      '@smithy/types': 4.3.2
+  '@aws-sdk/credential-provider-node@3.922.0':
+    dependencies:
+      '@aws-sdk/credential-provider-env': 3.922.0
+      '@aws-sdk/credential-provider-http': 3.922.0
+      '@aws-sdk/credential-provider-ini': 3.922.0
+      '@aws-sdk/credential-provider-process': 3.922.0
+      '@aws-sdk/credential-provider-sso': 3.922.0
+      '@aws-sdk/credential-provider-web-identity': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/credential-provider-imds': 4.2.4
+      '@smithy/property-provider': 4.2.4
+      '@smithy/shared-ini-file-loader': 4.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/credential-provider-process@3.862.0':
+  '@aws-sdk/credential-provider-process@3.922.0':
     dependencies:
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@smithy/property-provider': 4.0.5
-      '@smithy/shared-ini-file-loader': 4.0.5
-      '@smithy/types': 4.3.2
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/property-provider': 4.2.4
+      '@smithy/shared-ini-file-loader': 4.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-sso@3.862.0':
+  '@aws-sdk/credential-provider-sso@3.922.0':
     dependencies:
-      '@aws-sdk/client-sso': 3.862.0
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/token-providers': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@smithy/property-provider': 4.0.5
-      '@smithy/shared-ini-file-loader': 4.0.5
-      '@smithy/types': 4.3.2
+      '@aws-sdk/client-sso': 3.922.0
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/token-providers': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/property-provider': 4.2.4
+      '@smithy/shared-ini-file-loader': 4.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/credential-provider-web-identity@3.862.0':
+  '@aws-sdk/credential-provider-web-identity@3.922.0':
     dependencies:
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/nested-clients': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@smithy/property-provider': 4.0.5
-      '@smithy/types': 4.3.2
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/nested-clients': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/property-provider': 4.2.4
+      '@smithy/shared-ini-file-loader': 4.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/middleware-bucket-endpoint@3.862.0':
+  '@aws-sdk/middleware-bucket-endpoint@3.922.0':
     dependencies:
-      '@aws-sdk/types': 3.862.0
-      '@aws-sdk/util-arn-parser': 3.804.0
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/types': 4.3.2
-      '@smithy/util-config-provider': 4.0.0
+      '@aws-sdk/types': 3.922.0
+      '@aws-sdk/util-arn-parser': 3.893.0
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/types': 4.8.1
+      '@smithy/util-config-provider': 4.2.0
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-expect-continue@3.862.0':
+  '@aws-sdk/middleware-expect-continue@3.922.0':
     dependencies:
-      '@aws-sdk/types': 3.862.0
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/types': 4.3.2
+      '@aws-sdk/types': 3.922.0
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-flexible-checksums@3.862.0':
+  '@aws-sdk/middleware-flexible-checksums@3.922.0':
     dependencies:
       '@aws-crypto/crc32': 5.2.0
       '@aws-crypto/crc32c': 5.2.0
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@smithy/is-array-buffer': 4.0.0
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/types': 4.3.2
-      '@smithy/util-middleware': 4.0.5
-      '@smithy/util-stream': 4.2.4
-      '@smithy/util-utf8': 4.0.0
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/is-array-buffer': 4.2.0
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/types': 4.8.1
+      '@smithy/util-middleware': 4.2.4
+      '@smithy/util-stream': 4.5.5
+      '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-host-header@3.862.0':
+  '@aws-sdk/middleware-host-header@3.922.0':
     dependencies:
-      '@aws-sdk/types': 3.862.0
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/types': 4.3.2
+      '@aws-sdk/types': 3.922.0
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-location-constraint@3.862.0':
+  '@aws-sdk/middleware-location-constraint@3.922.0':
     dependencies:
-      '@aws-sdk/types': 3.862.0
-      '@smithy/types': 4.3.2
+      '@aws-sdk/types': 3.922.0
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-logger@3.862.0':
+  '@aws-sdk/middleware-logger@3.922.0':
     dependencies:
-      '@aws-sdk/types': 3.862.0
-      '@smithy/types': 4.3.2
+      '@aws-sdk/types': 3.922.0
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-recursion-detection@3.862.0':
+  '@aws-sdk/middleware-recursion-detection@3.922.0':
     dependencies:
-      '@aws-sdk/types': 3.862.0
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/types': 4.3.2
+      '@aws-sdk/types': 3.922.0
+      '@aws/lambda-invoke-store': 0.1.1
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-sdk-s3@3.862.0':
-    dependencies:
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@aws-sdk/util-arn-parser': 3.804.0
-      '@smithy/core': 3.8.0
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/signature-v4': 5.1.3
-      '@smithy/smithy-client': 4.4.10
-      '@smithy/types': 4.3.2
-      '@smithy/util-config-provider': 4.0.0
-      '@smithy/util-middleware': 4.0.5
-      '@smithy/util-stream': 4.2.4
-      '@smithy/util-utf8': 4.0.0
+  '@aws-sdk/middleware-sdk-s3@3.922.0':
+    dependencies:
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@aws-sdk/util-arn-parser': 3.893.0
+      '@smithy/core': 3.17.2
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/signature-v4': 5.3.4
+      '@smithy/smithy-client': 4.9.2
+      '@smithy/types': 4.8.1
+      '@smithy/util-config-provider': 4.2.0
+      '@smithy/util-middleware': 4.2.4
+      '@smithy/util-stream': 4.5.5
+      '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-ssec@3.862.0':
+  '@aws-sdk/middleware-ssec@3.922.0':
     dependencies:
-      '@aws-sdk/types': 3.862.0
-      '@smithy/types': 4.3.2
+      '@aws-sdk/types': 3.922.0
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-user-agent@3.862.0':
+  '@aws-sdk/middleware-user-agent@3.922.0':
     dependencies:
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@aws-sdk/util-endpoints': 3.862.0
-      '@smithy/core': 3.8.0
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/types': 4.3.2
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@aws-sdk/util-endpoints': 3.922.0
+      '@smithy/core': 3.17.2
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/nested-clients@3.862.0':
+  '@aws-sdk/nested-clients@3.922.0':
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/middleware-host-header': 3.862.0
-      '@aws-sdk/middleware-logger': 3.862.0
-      '@aws-sdk/middleware-recursion-detection': 3.862.0
-      '@aws-sdk/middleware-user-agent': 3.862.0
-      '@aws-sdk/region-config-resolver': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@aws-sdk/util-endpoints': 3.862.0
-      '@aws-sdk/util-user-agent-browser': 3.862.0
-      '@aws-sdk/util-user-agent-node': 3.862.0
-      '@smithy/config-resolver': 4.1.5
-      '@smithy/core': 3.8.0
-      '@smithy/fetch-http-handler': 5.1.1
-      '@smithy/hash-node': 4.0.5
-      '@smithy/invalid-dependency': 4.0.5
-      '@smithy/middleware-content-length': 4.0.5
-      '@smithy/middleware-endpoint': 4.1.18
-      '@smithy/middleware-retry': 4.1.19
-      '@smithy/middleware-serde': 4.0.9
-      '@smithy/middleware-stack': 4.0.5
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/node-http-handler': 4.1.1
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/smithy-client': 4.4.10
-      '@smithy/types': 4.3.2
-      '@smithy/url-parser': 4.0.5
-      '@smithy/util-base64': 4.0.0
-      '@smithy/util-body-length-browser': 4.0.0
-      '@smithy/util-body-length-node': 4.0.0
-      '@smithy/util-defaults-mode-browser': 4.0.26
-      '@smithy/util-defaults-mode-node': 4.0.26
-      '@smithy/util-endpoints': 3.0.7
-      '@smithy/util-middleware': 4.0.5
-      '@smithy/util-retry': 4.0.7
-      '@smithy/util-utf8': 4.0.0
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/middleware-host-header': 3.922.0
+      '@aws-sdk/middleware-logger': 3.922.0
+      '@aws-sdk/middleware-recursion-detection': 3.922.0
+      '@aws-sdk/middleware-user-agent': 3.922.0
+      '@aws-sdk/region-config-resolver': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@aws-sdk/util-endpoints': 3.922.0
+      '@aws-sdk/util-user-agent-browser': 3.922.0
+      '@aws-sdk/util-user-agent-node': 3.922.0
+      '@smithy/config-resolver': 4.4.1
+      '@smithy/core': 3.17.2
+      '@smithy/fetch-http-handler': 5.3.5
+      '@smithy/hash-node': 4.2.4
+      '@smithy/invalid-dependency': 4.2.4
+      '@smithy/middleware-content-length': 4.2.4
+      '@smithy/middleware-endpoint': 4.3.6
+      '@smithy/middleware-retry': 4.4.6
+      '@smithy/middleware-serde': 4.2.4
+      '@smithy/middleware-stack': 4.2.4
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/node-http-handler': 4.4.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/smithy-client': 4.9.2
+      '@smithy/types': 4.8.1
+      '@smithy/url-parser': 4.2.4
+      '@smithy/util-base64': 4.3.0
+      '@smithy/util-body-length-browser': 4.2.0
+      '@smithy/util-body-length-node': 4.2.1
+      '@smithy/util-defaults-mode-browser': 4.3.5
+      '@smithy/util-defaults-mode-node': 4.2.7
+      '@smithy/util-endpoints': 3.2.4
+      '@smithy/util-middleware': 4.2.4
+      '@smithy/util-retry': 4.2.4
+      '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/region-config-resolver@3.862.0':
+  '@aws-sdk/region-config-resolver@3.922.0':
     dependencies:
-      '@aws-sdk/types': 3.862.0
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/types': 4.3.2
-      '@smithy/util-config-provider': 4.0.0
-      '@smithy/util-middleware': 4.0.5
+      '@aws-sdk/types': 3.922.0
+      '@smithy/config-resolver': 4.4.1
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/signature-v4-multi-region@3.862.0':
+  '@aws-sdk/signature-v4-multi-region@3.922.0':
     dependencies:
-      '@aws-sdk/middleware-sdk-s3': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/signature-v4': 5.1.3
-      '@smithy/types': 4.3.2
+      '@aws-sdk/middleware-sdk-s3': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/signature-v4': 5.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/token-providers@3.862.0':
+  '@aws-sdk/token-providers@3.922.0':
     dependencies:
-      '@aws-sdk/core': 3.862.0
-      '@aws-sdk/nested-clients': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@smithy/property-provider': 4.0.5
-      '@smithy/shared-ini-file-loader': 4.0.5
-      '@smithy/types': 4.3.2
+      '@aws-sdk/core': 3.922.0
+      '@aws-sdk/nested-clients': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/property-provider': 4.2.4
+      '@smithy/shared-ini-file-loader': 4.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/types@3.862.0':
+  '@aws-sdk/types@3.922.0':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/util-arn-parser@3.804.0':
+  '@aws-sdk/util-arn-parser@3.893.0':
     dependencies:
       tslib: 2.8.1
 
-  '@aws-sdk/util-endpoints@3.862.0':
+  '@aws-sdk/util-endpoints@3.922.0':
     dependencies:
-      '@aws-sdk/types': 3.862.0
-      '@smithy/types': 4.3.2
-      '@smithy/url-parser': 4.0.5
-      '@smithy/util-endpoints': 3.0.7
+      '@aws-sdk/types': 3.922.0
+      '@smithy/types': 4.8.1
+      '@smithy/url-parser': 4.2.4
+      '@smithy/util-endpoints': 3.2.4
       tslib: 2.8.1
 
-  '@aws-sdk/util-locate-window@3.804.0':
+  '@aws-sdk/util-locate-window@3.893.0':
     dependencies:
       tslib: 2.8.1
 
-  '@aws-sdk/util-user-agent-browser@3.862.0':
+  '@aws-sdk/util-user-agent-browser@3.922.0':
     dependencies:
-      '@aws-sdk/types': 3.862.0
-      '@smithy/types': 4.3.2
-      bowser: 2.11.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/types': 4.8.1
+      bowser: 2.12.1
       tslib: 2.8.1
 
-  '@aws-sdk/util-user-agent-node@3.862.0':
+  '@aws-sdk/util-user-agent-node@3.922.0':
     dependencies:
-      '@aws-sdk/middleware-user-agent': 3.862.0
-      '@aws-sdk/types': 3.862.0
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/types': 4.3.2
+      '@aws-sdk/middleware-user-agent': 3.922.0
+      '@aws-sdk/types': 3.922.0
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@aws-sdk/xml-builder@3.862.0':
+  '@aws-sdk/xml-builder@3.921.0':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
+      fast-xml-parser: 5.2.5
       tslib: 2.8.1
 
+  '@aws/lambda-invoke-store@0.1.1': {}
+
   '@azu/format-text@1.0.2': {}
 
   '@azu/style-format@1.0.1':
@@ -22170,61 +23439,61 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@azure/core-auth@1.10.0':
+  '@azure/core-auth@1.10.1':
     dependencies:
       '@azure/abort-controller': 2.1.2
-      '@azure/core-util': 1.13.0
+      '@azure/core-util': 1.13.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
 
-  '@azure/core-client@1.10.0':
+  '@azure/core-client@1.10.1':
     dependencies:
       '@azure/abort-controller': 2.1.2
-      '@azure/core-auth': 1.10.0
-      '@azure/core-rest-pipeline': 1.22.0
-      '@azure/core-tracing': 1.3.0
-      '@azure/core-util': 1.13.0
+      '@azure/core-auth': 1.10.1
+      '@azure/core-rest-pipeline': 1.22.1
+      '@azure/core-tracing': 1.3.1
+      '@azure/core-util': 1.13.1
       '@azure/logger': 1.3.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
 
-  '@azure/core-rest-pipeline@1.22.0':
+  '@azure/core-rest-pipeline@1.22.1':
     dependencies:
       '@azure/abort-controller': 2.1.2
-      '@azure/core-auth': 1.10.0
-      '@azure/core-tracing': 1.3.0
-      '@azure/core-util': 1.13.0
+      '@azure/core-auth': 1.10.1
+      '@azure/core-tracing': 1.3.1
+      '@azure/core-util': 1.13.1
       '@azure/logger': 1.3.0
-      '@typespec/ts-http-runtime': 0.3.0
+      '@typespec/ts-http-runtime': 0.3.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
 
-  '@azure/core-tracing@1.3.0':
+  '@azure/core-tracing@1.3.1':
     dependencies:
       tslib: 2.8.1
 
-  '@azure/core-util@1.13.0':
+  '@azure/core-util@1.13.1':
     dependencies:
       '@azure/abort-controller': 2.1.2
-      '@typespec/ts-http-runtime': 0.3.0
+      '@typespec/ts-http-runtime': 0.3.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
 
-  '@azure/identity@4.11.1':
+  '@azure/identity@4.13.0':
     dependencies:
       '@azure/abort-controller': 2.1.2
-      '@azure/core-auth': 1.10.0
-      '@azure/core-client': 1.10.0
-      '@azure/core-rest-pipeline': 1.22.0
-      '@azure/core-tracing': 1.3.0
-      '@azure/core-util': 1.13.0
+      '@azure/core-auth': 1.10.1
+      '@azure/core-client': 1.10.1
+      '@azure/core-rest-pipeline': 1.22.1
+      '@azure/core-tracing': 1.3.1
+      '@azure/core-util': 1.13.1
       '@azure/logger': 1.3.0
-      '@azure/msal-browser': 4.19.0
-      '@azure/msal-node': 3.7.0
+      '@azure/msal-browser': 4.26.0
+      '@azure/msal-node': 3.8.1
       open: 10.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
@@ -22232,47 +23501,47 @@ snapshots:
 
   '@azure/logger@1.3.0':
     dependencies:
-      '@typespec/ts-http-runtime': 0.3.0
+      '@typespec/ts-http-runtime': 0.3.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
 
-  '@azure/msal-browser@4.19.0':
+  '@azure/msal-browser@4.26.0':
     dependencies:
-      '@azure/msal-common': 15.10.0
+      '@azure/msal-common': 15.13.1
 
-  '@azure/msal-common@15.10.0': {}
+  '@azure/msal-common@15.13.1': {}
 
-  '@azure/msal-node@3.7.0':
+  '@azure/msal-node@3.8.1':
     dependencies:
-      '@azure/msal-common': 15.10.0
+      '@azure/msal-common': 15.13.1
       jsonwebtoken: 9.0.2
       uuid: 8.3.2
 
   '@babel/code-frame@7.27.1':
     dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/compat-data@7.28.0': {}
+  '@babel/compat-data@7.28.5': {}
 
   '@babel/core@7.12.9':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.0
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.12.9)
-      '@babel/helpers': 7.28.2
-      '@babel/parser': 7.28.0
+      '@babel/generator': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.12.9)
+      '@babel/helpers': 7.28.4
+      '@babel/parser': 7.28.5
       '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
       convert-source-map: 1.9.0
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       lodash: 4.17.21
-      resolve: 1.22.10
+      resolve: 1.22.11
       semver: 5.7.2
       source-map: 0.5.7
     transitivePeerDependencies:
@@ -22282,61 +23551,102 @@ snapshots:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.0
+      '@babel/generator': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.27.7)
+      '@babel/helpers': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3(supports-color@8.1.1)
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/core@7.28.5':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.5
       '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.27.7)
-      '@babel/helpers': 7.28.2
-      '@babel/parser': 7.28.0
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helpers': 7.28.4
+      '@babel/parser': 7.28.5
       '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(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':
+  '@babel/generator@7.28.5':
     dependencies:
-      '@babel/parser': 7.28.0
-      '@babel/types': 7.28.2
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
   '@babel/helper-annotate-as-pure@7.27.3':
     dependencies:
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
 
   '@babel/helper-compilation-targets@7.27.2':
     dependencies:
-      '@babel/compat-data': 7.28.0
+      '@babel/compat-data': 7.28.5
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.27.1(@babel/core@7.27.7)':
+  '@babel/helper-create-class-features-plugin@7.28.5(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
       '@babel/helper-replace-supers': 7.27.1(@babel/core@7.27.7)
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.28.0
+      '@babel/traverse': 7.28.5
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-create-class-features-plugin@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.28.5
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.27.1(@babel/core@7.27.7)':
+  '@babel/helper-create-regexp-features-plugin@7.28.5(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-annotate-as-pure': 7.27.3
-      regexpu-core: 6.2.0
+      regexpu-core: 6.4.0
+      semver: 6.3.1
+
+  '@babel/helper-create-regexp-features-plugin@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      regexpu-core: 6.4.0
       semver: 6.3.1
+    optional: true
 
   '@babel/helper-define-polyfill-provider@0.0.3(@babel/core@7.27.7)':
     dependencies:
@@ -22344,10 +23654,10 @@ snapshots:
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.0
-      debug: 4.4.1(supports-color@8.1.1)
+      '@babel/traverse': 7.28.5
+      debug: 4.4.3(supports-color@8.1.1)
       lodash.debounce: 4.0.8
-      resolve: 1.22.10
+      resolve: 1.22.11
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -22358,10 +23668,10 @@ snapshots:
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.0
-      debug: 4.4.1(supports-color@8.1.1)
+      '@babel/traverse': 7.28.5
+      debug: 4.4.3(supports-color@8.1.1)
       lodash.debounce: 4.0.8
-      resolve: 1.22.10
+      resolve: 1.22.11
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -22371,49 +23681,70 @@ snapshots:
       '@babel/core': 7.27.7
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       lodash.debounce: 4.0.8
-      resolve: 1.22.10
+      resolve: 1.22.11
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-define-polyfill-provider@0.6.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-plugin-utils': 7.27.1
+      debug: 4.4.3(supports-color@8.1.1)
+      lodash.debounce: 4.0.8
+      resolve: 1.22.11
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@babel/helper-globals@7.28.0': {}
 
-  '@babel/helper-member-expression-to-functions@7.27.1':
+  '@babel/helper-member-expression-to-functions@7.28.5':
     dependencies:
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-module-imports@7.27.1':
     dependencies:
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.27.3(@babel/core@7.12.9)':
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.12.9)':
     dependencies:
       '@babel/core': 7.12.9
       '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.0
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.27.3(@babel/core@7.27.7)':
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.0
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-optimise-call-expression@7.27.1':
     dependencies:
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
 
   '@babel/helper-plugin-utils@7.10.4': {}
 
@@ -22423,89 +23754,148 @@ snapshots:
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-wrap-function': 7.27.1
-      '@babel/traverse': 7.28.0
+      '@babel/helper-wrap-function': 7.28.3
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-wrap-function': 7.28.3
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@babel/helper-replace-supers@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.0
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
     dependencies:
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-string-parser@7.27.1': {}
 
-  '@babel/helper-validator-identifier@7.27.1': {}
+  '@babel/helper-validator-identifier@7.28.5': {}
 
   '@babel/helper-validator-option@7.27.1': {}
 
-  '@babel/helper-wrap-function@7.27.1':
+  '@babel/helper-wrap-function@7.28.3':
     dependencies:
       '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helpers@7.28.2':
+  '@babel/helpers@7.28.4':
     dependencies:
       '@babel/template': 7.27.2
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
 
-  '@babel/parser@7.28.0':
+  '@babel/parser@7.28.5':
     dependencies:
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.27.1(@babel/core@7.27.7)':
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.0
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
+    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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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
       '@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.27.7)
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.27.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.27.1(@babel/core@7.27.7)':
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.3(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.0
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.27.7)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
@@ -22513,7 +23903,7 @@ snapshots:
   '@babel/plugin-proposal-decorators@7.28.0(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.27.7)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/plugin-syntax-decorators': 7.27.1(@babel/core@7.27.7)
     transitivePeerDependencies:
@@ -22533,13 +23923,13 @@ snapshots:
   '@babel/plugin-proposal-object-rest-spread@7.12.1(@babel/core@7.12.9)':
     dependencies:
       '@babel/core': 7.12.9
-      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-plugin-utils': 7.10.4
       '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.12.9)
       '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.12.9)
 
   '@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.27.7)':
     dependencies:
-      '@babel/compat-data': 7.28.0
+      '@babel/compat-data': 7.28.5
       '@babel/core': 7.27.7
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
@@ -22558,7 +23948,7 @@ snapshots:
   '@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.27.7)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
@@ -22567,11 +23957,16 @@ 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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+    optional: true
+
   '@babel/plugin-proposal-private-property-in-object@7.21.11(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.27.7)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.27.7)
     transitivePeerDependencies:
@@ -22607,21 +24002,43 @@ snapshots:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-syntax-flow@7.22.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
   '@babel/plugin-syntax-flow@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.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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
@@ -22642,6 +24059,11 @@ snapshots:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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
@@ -22692,26 +24114,54 @@ snapshots:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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-create-regexp-features-plugin': 7.28.5(@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.27.7)
-      '@babel/traverse': 7.28.0
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-async-generator-functions@7.28.0(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
+    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
@@ -22721,33 +24171,73 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-async-to-generator@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)
+    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-scoping@7.28.0(@babel/core@7.27.7)':
+  '@babel/plugin-transform-block-scoped-functions@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+    optional: true
+
+  '@babel/plugin-transform-block-scoping@7.28.5(@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.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.27.7)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-class-static-block@7.27.1(@babel/core@7.27.7)':
+  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  '@babel/plugin-transform-class-static-block@7.28.3(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.27.7)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.28.0(@babel/core@7.27.7)':
+  '@babel/plugin-transform-class-static-block@7.28.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  '@babel/plugin-transform-classes@7.28.4(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-annotate-as-pure': 7.27.3
@@ -22755,62 +24245,135 @@ snapshots:
       '@babel/helper-globals': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-replace-supers': 7.27.1(@babel/core@7.27.7)
-      '@babel/traverse': 7.28.0
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-classes@7.28.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)
+      '@babel/traverse': 7.28.5
+    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-destructuring@7.28.0(@babel/core@7.27.7)':
+  '@babel/plugin-transform-computed-properties@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/template': 7.27.2
+    optional: true
+
+  '@babel/plugin-transform-destructuring@7.28.5(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.0
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-destructuring@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
+    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-create-regexp-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-transform-dotall-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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-create-regexp-features-plugin': 7.28.5(@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@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-exponentiation-operator@7.27.1(@babel/core@7.27.7)':
+  '@babel/plugin-transform-dynamic-import@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+    optional: true
+
+  '@babel/plugin-transform-exponentiation-operator@7.28.5(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-transform-exponentiation-operator@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.5)
+
   '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -22819,101 +24382,218 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.0
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
     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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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-logical-assignment-operators@7.27.1(@babel/core@7.27.7)':
+  '@babel/plugin-transform-literals@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+    optional: true
+
+  '@babel/plugin-transform-logical-assignment-operators@7.28.5(@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.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.27.7)
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-modules-amd@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@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
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.27.7)
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-systemjs@7.27.1(@babel/core@7.27.7)':
+  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-systemjs@7.28.5(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.27.7)
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.0
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-modules-systemjs@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.27.7)
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.27.7)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
       '@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-create-regexp-features-plugin': 7.28.5(@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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-object-rest-spread@7.28.0(@babel/core@7.27.7)':
+  '@babel/plugin-transform-numeric-separator@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+    optional: true
+
+  '@babel/plugin-transform-object-rest-spread@7.28.4(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.27.7)
-      '@babel/traverse': 7.28.0
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-object-rest-spread@7.28.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -22922,12 +24602,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+    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-chaining@7.27.1(@babel/core@7.27.7)':
+  '@babel/plugin-transform-optional-catch-binding@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+    optional: true
+
+  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
@@ -22935,6 +24630,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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
@@ -22945,33 +24649,69 @@ snapshots:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.27.7)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@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
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.27.7)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-private-property-in-object@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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
@@ -22979,6 +24719,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-react-jsx-development@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-transform-react-jsx@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -22986,7 +24733,18 @@ snapshots:
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.27.7)
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-react-jsx@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
@@ -22996,27 +24754,58 @@ snapshots:
       '@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)':
+  '@babel/plugin-transform-react-pure-annotations@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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-create-regexp-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-transform-regexp-modifiers@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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
@@ -23025,67 +24814,132 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-spread@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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-typescript@7.28.0(@babel/core@7.27.7)':
+  '@babel/plugin-transform-typeof-symbol@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+    optional: true
+
+  '@babel/plugin-transform-typescript@7.28.5(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.27.7)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@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.27.7)
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-typescript@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@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.5)
+    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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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-create-regexp-features-plugin': 7.28.5(@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@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-create-regexp-features-plugin': 7.28.5(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@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-create-regexp-features-plugin': 7.28.5(@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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@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
+      '@babel/compat-data': 7.28.5
       '@babel/core': 7.27.7
       '@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.27.7)
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.27.1(@babel/core@7.27.7)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.28.3(@babel/core@7.27.7)
       '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.27.7)
       '@babel/plugin-syntax-import-assertions': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.27.7)
@@ -23094,41 +24948,41 @@ snapshots:
       '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.27.7)
       '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-class-static-block': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-classes': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-transform-class-static-block': 7.28.3(@babel/core@7.27.7)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.27.7)
       '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-dotall-regex': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-duplicate-keys': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-exponentiation-operator': 7.27.1(@babel/core@7.27.7)
+      '@babel/plugin-transform-exponentiation-operator': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-json-strings': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-logical-assignment-operators': 7.27.1(@babel/core@7.27.7)
+      '@babel/plugin-transform-logical-assignment-operators': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-modules-systemjs': 7.27.1(@babel/core@7.27.7)
+      '@babel/plugin-transform-modules-systemjs': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-modules-umd': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-new-target': 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-numeric-separator': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-object-rest-spread': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-transform-object-rest-spread': 7.28.4(@babel/core@7.27.7)
       '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-optional-chaining': 7.27.1(@babel/core@7.27.7)
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.27.7)
       '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-property-literals': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-regenerator': 7.28.1(@babel/core@7.27.7)
+      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.27.7)
       '@babel/plugin-transform-regexp-modifiers': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-reserved-words': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.27.7)
@@ -23144,11 +24998,87 @@ snapshots:
       babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.27.7)
       babel-plugin-polyfill-corejs3: 0.11.1(@babel/core@7.27.7)
       babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.27.7)
-      core-js-compat: 3.45.0
+      core-js-compat: 3.46.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/preset-env@7.27.2(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/compat-data': 7.28.5
+      '@babel/core': 7.28.5
+      '@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.28.5(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.28.3(@babel/core@7.28.5)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-assertions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.28.5)
+      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.28.5)
+      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-class-static-block': 7.28.3(@babel/core@7.28.5)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-dotall-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-duplicate-keys': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-exponentiation-operator': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-json-strings': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-logical-assignment-operators': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-systemjs': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-umd': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-new-target': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-object-rest-spread': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.5)
+      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-property-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-regexp-modifiers': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-reserved-words': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typeof-symbol': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-escapes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-property-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-sets-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs3: 0.11.1(@babel/core@7.28.5)
+      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.28.5)
+      core-js-compat: 3.46.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
@@ -23156,13 +25086,28 @@ 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.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)
+
   '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
       esutils: 2.0.3
 
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/types': 7.28.5
+      esutils: 2.0.3
+    optional: true
+
   '@babel/preset-react@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23175,6 +25120,29 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/preset-react@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)
+      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-react-pure-annotations': 7.27.1(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-typescript@7.22.15(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/preset-typescript@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23182,11 +25150,22 @@ snapshots:
       '@babel/helper-validator-option': 7.27.1
       '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.27.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/register@7.27.1(@babel/core@7.27.7)':
+  '@babel/preset-typescript@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@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.5)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/register@7.28.3(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       clone-deep: 4.0.1
@@ -23195,38 +25174,38 @@ snapshots:
       pirates: 4.0.7
       source-map-support: 0.5.21
 
-  '@babel/runtime-corejs3@7.28.2':
+  '@babel/runtime-corejs3@7.28.4':
     dependencies:
-      core-js-pure: 3.45.0
+      core-js-pure: 3.46.0
 
-  '@babel/runtime@7.28.2': {}
+  '@babel/runtime@7.28.4': {}
 
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
 
-  '@babel/traverse@7.28.0':
+  '@babel/traverse@7.28.5':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.0
+      '@babel/generator': 7.28.5
       '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.0
+      '@babel/parser': 7.28.5
       '@babel/template': 7.27.2
-      '@babel/types': 7.28.2
-      debug: 4.4.1(supports-color@8.1.1)
+      '@babel/types': 7.28.5
+      debug: 4.4.3(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.28.2':
+  '@babel/types@7.28.5':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
 
   '@base2/pretty-print-object@1.0.1': {}
 
-  '@bazel/runfiles@6.3.1': {}
+  '@bazel/runfiles@6.5.0': {}
 
   '@bcoe/v8-coverage@0.2.3': {}
 
@@ -23267,53 +25246,269 @@ snapshots:
   '@biomejs/cli-win32-x64@1.9.4':
     optional: true
 
+  '@cacheable/memoize@2.0.3':
+    dependencies:
+      '@cacheable/utils': 2.2.0
+
+  '@cacheable/memory@2.0.4':
+    dependencies:
+      '@cacheable/utils': 2.2.0
+      '@keyv/bigmap': 1.1.0(keyv@5.5.3)
+      hookified: 1.12.2
+      keyv: 5.5.3
+
+  '@cacheable/utils@2.2.0':
+    dependencies:
+      keyv: 5.5.3
+
   '@cnakazawa/watch@1.0.4':
     dependencies:
       exec-sh: 0.3.6
       minimist: 1.2.8
 
-  '@codemirror/autocomplete@6.18.6':
+  '@codemirror/autocomplete@6.19.1':
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
+
+  '@codemirror/commands@6.10.0':
     dependencies:
-      '@codemirror/language': 6.11.2
+      '@codemirror/language': 6.11.3
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.1
-      '@lezer/common': 1.2.3
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
 
-  '@codemirror/commands@6.8.1':
+  '@codemirror/lang-angular@0.1.4':
     dependencies:
-      '@codemirror/language': 6.11.2
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-javascript': 6.2.4
+      '@codemirror/language': 6.11.3
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@codemirror/lang-cpp@6.0.3':
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@lezer/cpp': 1.1.3
+
+  '@codemirror/lang-css@6.3.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/language': 6.11.3
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.1
-      '@lezer/common': 1.2.3
+      '@lezer/common': 1.3.0
+      '@lezer/css': 1.3.0
+
+  '@codemirror/lang-go@6.0.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.3.0
+      '@lezer/go': 1.0.1
+
+  '@codemirror/lang-html@6.4.11':
+    dependencies:
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-javascript': 6.2.4
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
+      '@lezer/css': 1.3.0
+      '@lezer/html': 1.3.12
+
+  '@codemirror/lang-java@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@lezer/java': 1.1.3
+
+  '@codemirror/lang-javascript@6.2.4':
+    dependencies:
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/language': 6.11.3
+      '@codemirror/lint': 6.8.5
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
+      '@lezer/javascript': 1.5.4
+
+  '@codemirror/lang-jinja@6.0.0':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.11.3
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@codemirror/lang-json@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@lezer/json': 1.0.3
+
+  '@codemirror/lang-less@6.0.2':
+    dependencies:
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/language': 6.11.3
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@codemirror/lang-liquid@6.3.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@codemirror/lang-markdown@6.5.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
+      '@lezer/markdown': 1.6.0
+
+  '@codemirror/lang-php@6.0.2':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.3.0
+      '@lezer/php': 1.0.5
+
+  '@codemirror/lang-python@6.2.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.3.0
+      '@lezer/python': 1.1.18
+
+  '@codemirror/lang-rust@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@lezer/rust': 1.0.2
+
+  '@codemirror/lang-sass@6.0.2':
+    dependencies:
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.3.0
+      '@lezer/sass': 1.1.0
+
+  '@codemirror/lang-sql@6.10.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@codemirror/lang-vue@0.1.3':
+    dependencies:
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-javascript': 6.2.4
+      '@codemirror/language': 6.11.3
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@codemirror/lang-wast@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
 
   '@codemirror/lang-xml@6.1.0':
     dependencies:
-      '@codemirror/autocomplete': 6.18.6
-      '@codemirror/language': 6.11.2
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/language': 6.11.3
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.1
-      '@lezer/common': 1.2.3
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
       '@lezer/xml': 1.0.6
 
-  '@codemirror/language@6.11.2':
+  '@codemirror/lang-yaml@6.1.2':
     dependencies:
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/language': 6.11.3
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.1
-      '@lezer/common': 1.2.3
-      '@lezer/highlight': 1.2.1
-      '@lezer/lr': 1.4.2
-      style-mod: 4.1.2
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+      '@lezer/yaml': 1.0.3
+
+  '@codemirror/language-data@6.5.2':
+    dependencies:
+      '@codemirror/lang-angular': 0.1.4
+      '@codemirror/lang-cpp': 6.0.3
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-go': 6.0.1
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-java': 6.0.2
+      '@codemirror/lang-javascript': 6.2.4
+      '@codemirror/lang-jinja': 6.0.0
+      '@codemirror/lang-json': 6.0.2
+      '@codemirror/lang-less': 6.0.2
+      '@codemirror/lang-liquid': 6.3.0
+      '@codemirror/lang-markdown': 6.5.0
+      '@codemirror/lang-php': 6.0.2
+      '@codemirror/lang-python': 6.2.1
+      '@codemirror/lang-rust': 6.0.2
+      '@codemirror/lang-sass': 6.0.2
+      '@codemirror/lang-sql': 6.10.0
+      '@codemirror/lang-vue': 0.1.3
+      '@codemirror/lang-wast': 6.0.2
+      '@codemirror/lang-xml': 6.1.0
+      '@codemirror/lang-yaml': 6.1.2
+      '@codemirror/language': 6.11.3
+      '@codemirror/legacy-modes': 6.5.2
+
+  '@codemirror/language@6.11.3':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+      style-mod: 4.1.3
+
+  '@codemirror/legacy-modes@6.5.2':
+    dependencies:
+      '@codemirror/language': 6.11.3
 
   '@codemirror/lint@6.8.5':
     dependencies:
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.1
+      '@codemirror/view': 6.38.6
       crelt: 1.0.6
 
+  '@codemirror/merge@6.11.1':
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.6
+      '@lezer/highlight': 1.2.3
+      style-mod: 4.1.3
+
   '@codemirror/search@6.5.11':
     dependencies:
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.1
+      '@codemirror/view': 6.38.6
       crelt: 1.0.6
 
   '@codemirror/state@6.5.2':
@@ -23322,23 +25517,65 @@ snapshots:
 
   '@codemirror/theme-one-dark@6.1.3':
     dependencies:
-      '@codemirror/language': 6.11.2
+      '@codemirror/language': 6.11.3
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.1
-      '@lezer/highlight': 1.2.1
+      '@codemirror/view': 6.38.6
+      '@lezer/highlight': 1.2.3
 
-  '@codemirror/view@6.38.1':
+  '@codemirror/view@6.38.6':
     dependencies:
       '@codemirror/state': 6.5.2
       crelt: 1.0.6
-      style-mod: 4.1.2
+      style-mod: 4.1.3
       w3c-keyname: 2.2.8
 
+  '@codesandbox/nodebox@0.1.8':
+    dependencies:
+      outvariant: 1.4.0
+      strict-event-emitter: 0.4.6
+
+  '@codesandbox/sandpack-client@2.19.8':
+    dependencies:
+      '@codesandbox/nodebox': 0.1.8
+      buffer: 6.0.3
+      dequal: 2.0.3
+      mime-db: 1.54.0
+      outvariant: 1.4.0
+      static-browser-server: 1.0.3
+
+  '@codesandbox/sandpack-react@2.20.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/commands': 6.10.0
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-javascript': 6.2.4
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.6
+      '@codesandbox/sandpack-client': 2.19.8
+      '@lezer/highlight': 1.2.3
+      '@react-hook/intersection-observer': 3.1.2(react@18.2.0)
+      '@stitches/core': 1.2.8
+      anser: 2.3.2
+      clean-set: 1.1.2
+      dequal: 2.0.3
+      escape-carriage: 1.3.1
+      lz-string: 1.5.0
+      react: 18.2.0
+      react-devtools-inline: 4.4.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-is: 17.0.2
+
   '@colors/colors@1.5.0':
     optional: true
 
   '@colors/colors@1.6.0': {}
 
+  '@cspotcode/source-map-support@0.8.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+
   '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
     dependencies:
       '@csstools/css-tokenizer': 3.0.4
@@ -23354,9 +25591,9 @@ snapshots:
     dependencies:
       postcss-selector-parser: 7.1.0
 
-  '@dabh/diagnostics@2.0.3':
+  '@dabh/diagnostics@2.0.8':
     dependencies:
-      colorspace: 1.1.4
+      '@so-ric/colorspace': 1.1.6
       enabled: 2.0.0
       kuler: 2.0.0
 
@@ -23372,12 +25609,12 @@ snapshots:
 
   '@discoveryjs/json-ext@0.6.3': {}
 
-  '@dual-bundle/import-meta-resolve@4.1.0': {}
+  '@dual-bundle/import-meta-resolve@4.2.1': {}
 
   '@emotion/babel-plugin@11.13.5':
     dependencies:
       '@babel/helper-module-imports': 7.27.1
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@emotion/hash': 0.9.2
       '@emotion/memoize': 0.9.0
       '@emotion/serialize': 1.3.3
@@ -23415,7 +25652,7 @@ snapshots:
       '@emotion/memoize': 0.7.4
     optional: true
 
-  '@emotion/is-prop-valid@1.3.1':
+  '@emotion/is-prop-valid@1.4.0':
     dependencies:
       '@emotion/memoize': 0.9.0
 
@@ -23424,9 +25661,9 @@ snapshots:
 
   '@emotion/memoize@0.9.0': {}
 
-  '@emotion/react@11.14.0(@types/react@17.0.87)(react@19.1.0)':
+  '@emotion/react@11.14.0(@types/react@17.0.89)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@emotion/babel-plugin': 11.13.5
       '@emotion/cache': 11.14.0
       '@emotion/serialize': 1.3.3
@@ -23436,13 +25673,13 @@ snapshots:
       hoist-non-react-statics: 3.3.2
       react: 19.1.0
     optionalDependencies:
-      '@types/react': 17.0.87
+      '@types/react': 17.0.89
     transitivePeerDependencies:
       - supports-color
 
   '@emotion/react@11.14.0(@types/react@18.2.0)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@emotion/babel-plugin': 11.13.5
       '@emotion/cache': 11.14.0
       '@emotion/serialize': 1.3.3
@@ -23458,7 +25695,7 @@ snapshots:
 
   '@emotion/react@11.14.0(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@emotion/babel-plugin': 11.13.5
       '@emotion/cache': 11.14.0
       '@emotion/serialize': 1.3.3
@@ -23482,26 +25719,26 @@ snapshots:
 
   '@emotion/sheet@1.4.0': {}
 
-  '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@17.0.87)(react@19.1.0))(@types/react@17.0.87)(react@19.1.0)':
+  '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@17.0.89)(react@19.1.0))(@types/react@17.0.89)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@emotion/babel-plugin': 11.13.5
-      '@emotion/is-prop-valid': 1.3.1
-      '@emotion/react': 11.14.0(@types/react@17.0.87)(react@19.1.0)
+      '@emotion/is-prop-valid': 1.4.0
+      '@emotion/react': 11.14.0(@types/react@17.0.89)(react@19.1.0)
       '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.1.0)
       '@emotion/utils': 1.4.2
       react: 19.1.0
     optionalDependencies:
-      '@types/react': 17.0.87
+      '@types/react': 17.0.89
     transitivePeerDependencies:
       - supports-color
 
   '@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)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@emotion/babel-plugin': 11.13.5
-      '@emotion/is-prop-valid': 1.3.1
+      '@emotion/is-prop-valid': 1.4.0
       '@emotion/react': 11.14.0(@types/react@18.2.0)(react@18.2.0)
       '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.2.0)
@@ -23514,9 +25751,9 @@ snapshots:
 
   '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.2.0)(react@19.1.0))(@types/react@18.2.0)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@emotion/babel-plugin': 11.13.5
-      '@emotion/is-prop-valid': 1.3.1
+      '@emotion/is-prop-valid': 1.4.0
       '@emotion/react': 11.14.0(@types/react@18.2.0)(react@19.1.0)
       '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.2.0)
@@ -23529,9 +25766,9 @@ snapshots:
 
   '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.2.0)(react@19.1.0))(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@emotion/babel-plugin': 11.13.5
-      '@emotion/is-prop-valid': 1.3.1
+      '@emotion/is-prop-valid': 1.4.0
       '@emotion/react': 11.14.0(@types/react@18.2.0)(react@19.1.0)
       '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.1.0)
@@ -23556,105 +25793,105 @@ snapshots:
 
   '@emotion/weak-memoize@0.4.0': {}
 
-  '@esbuild/aix-ppc64@0.25.8':
+  '@esbuild/aix-ppc64@0.25.12':
     optional: true
 
-  '@esbuild/android-arm64@0.25.8':
+  '@esbuild/android-arm64@0.25.12':
     optional: true
 
-  '@esbuild/android-arm@0.25.8':
+  '@esbuild/android-arm@0.25.12':
     optional: true
 
-  '@esbuild/android-x64@0.25.8':
+  '@esbuild/android-x64@0.25.12':
     optional: true
 
-  '@esbuild/darwin-arm64@0.25.8':
+  '@esbuild/darwin-arm64@0.25.12':
     optional: true
 
-  '@esbuild/darwin-x64@0.25.8':
+  '@esbuild/darwin-x64@0.25.12':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.25.8':
+  '@esbuild/freebsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/freebsd-x64@0.25.8':
+  '@esbuild/freebsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/linux-arm64@0.25.8':
+  '@esbuild/linux-arm64@0.25.12':
     optional: true
 
-  '@esbuild/linux-arm@0.25.8':
+  '@esbuild/linux-arm@0.25.12':
     optional: true
 
-  '@esbuild/linux-ia32@0.25.8':
+  '@esbuild/linux-ia32@0.25.12':
     optional: true
 
-  '@esbuild/linux-loong64@0.25.8':
+  '@esbuild/linux-loong64@0.25.12':
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.8':
+  '@esbuild/linux-mips64el@0.25.12':
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.8':
+  '@esbuild/linux-ppc64@0.25.12':
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.8':
+  '@esbuild/linux-riscv64@0.25.12':
     optional: true
 
-  '@esbuild/linux-s390x@0.25.8':
+  '@esbuild/linux-s390x@0.25.12':
     optional: true
 
-  '@esbuild/linux-x64@0.25.8':
+  '@esbuild/linux-x64@0.25.12':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.8':
+  '@esbuild/netbsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/netbsd-x64@0.25.8':
+  '@esbuild/netbsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.25.8':
+  '@esbuild/openbsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/openbsd-x64@0.25.8':
+  '@esbuild/openbsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.25.8':
+  '@esbuild/openharmony-arm64@0.25.12':
     optional: true
 
-  '@esbuild/sunos-x64@0.25.8':
+  '@esbuild/sunos-x64@0.25.12':
     optional: true
 
-  '@esbuild/win32-arm64@0.25.8':
+  '@esbuild/win32-arm64@0.25.12':
     optional: true
 
-  '@esbuild/win32-ia32@0.25.8':
+  '@esbuild/win32-ia32@0.25.12':
     optional: true
 
-  '@esbuild/win32-x64@0.25.8':
+  '@esbuild/win32-x64@0.25.12':
     optional: true
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@8.57.1)':
+  '@eslint-community/eslint-utils@4.9.0(eslint@8.57.1)':
     dependencies:
       eslint: 8.57.1
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.26.0(jiti@2.5.1))':
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.26.0(jiti@2.6.1))':
     dependencies:
-      eslint: 9.26.0(jiti@2.5.1)
+      eslint: 9.26.0(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.27.0(jiti@2.5.1))':
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.27.0(jiti@2.6.1))':
     dependencies:
-      eslint: 9.27.0(jiti@2.5.1)
+      eslint: 9.27.0(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.12.1': {}
+  '@eslint-community/regexpp@4.12.2': {}
 
   '@eslint/config-array@0.20.1':
     dependencies:
-      '@eslint/object-schema': 2.1.6
-      debug: 4.4.1(supports-color@8.1.1)
+      '@eslint/object-schema': 2.1.7
+      debug: 4.4.3(supports-color@8.1.1)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -23669,14 +25906,14 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
-  '@eslint/core@0.15.1':
+  '@eslint/core@0.15.2':
     dependencies:
       '@types/json-schema': 7.0.15
 
   '@eslint/eslintrc@2.1.4':
     dependencies:
       ajv: 6.12.6
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       espree: 9.6.1
       globals: 13.24.0
       ignore: 5.3.2
@@ -23690,7 +25927,7 @@ snapshots:
   '@eslint/eslintrc@3.3.1':
     dependencies:
       ajv: 6.12.6
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       espree: 10.4.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -23707,11 +25944,11 @@ snapshots:
 
   '@eslint/js@9.27.0': {}
 
-  '@eslint/object-schema@2.1.6': {}
+  '@eslint/object-schema@2.1.7': {}
 
-  '@eslint/plugin-kit@0.3.4':
+  '@eslint/plugin-kit@0.3.5':
     dependencies:
-      '@eslint/core': 0.15.1
+      '@eslint/core': 0.15.2
       levn: 0.4.1
 
   '@fal-works/esbuild-plugin-global-externals@2.1.2': {}
@@ -23720,37 +25957,43 @@ snapshots:
     dependencies:
       '@floating-ui/utils': 0.2.10
 
-  '@floating-ui/dom@1.7.3':
+  '@floating-ui/dom@1.7.4':
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/utils': 0.2.10
 
-  '@floating-ui/react-dom@2.1.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@floating-ui/react-dom@2.1.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@floating-ui/dom': 1.7.3
+      '@floating-ui/dom': 1.7.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@floating-ui/react-dom@2.1.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@floating-ui/react-dom@2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@floating-ui/react-dom@2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@floating-ui/dom': 1.7.3
+      '@floating-ui/dom': 1.7.4
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
   '@floating-ui/react@0.26.28(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@floating-ui/react-dom': 2.1.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@floating-ui/utils': 0.2.10
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      tabbable: 6.2.0
+      tabbable: 6.3.0
 
   '@floating-ui/utils@0.2.10': {}
 
-  '@formatjs/ecma402-abstract@2.3.4':
+  '@formatjs/ecma402-abstract@2.3.6':
     dependencies:
       '@formatjs/fast-memoize': 2.2.7
-      '@formatjs/intl-localematcher': 0.6.1
+      '@formatjs/intl-localematcher': 0.6.2
       decimal.js: 10.6.0
       tslib: 2.8.1
 
@@ -23758,37 +26001,37 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@formatjs/icu-messageformat-parser@2.11.2':
+  '@formatjs/icu-messageformat-parser@2.11.4':
     dependencies:
-      '@formatjs/ecma402-abstract': 2.3.4
-      '@formatjs/icu-skeleton-parser': 1.8.14
+      '@formatjs/ecma402-abstract': 2.3.6
+      '@formatjs/icu-skeleton-parser': 1.8.16
       tslib: 2.8.1
 
-  '@formatjs/icu-skeleton-parser@1.8.14':
+  '@formatjs/icu-skeleton-parser@1.8.16':
     dependencies:
-      '@formatjs/ecma402-abstract': 2.3.4
+      '@formatjs/ecma402-abstract': 2.3.6
       tslib: 2.8.1
 
-  '@formatjs/intl-localematcher@0.6.1':
+  '@formatjs/intl-localematcher@0.6.2':
     dependencies:
       tslib: 2.8.1
 
-  '@formatjs/intl@3.1.6(typescript@4.9.5)':
+  '@formatjs/intl@3.1.8(typescript@4.9.5)':
     dependencies:
-      '@formatjs/ecma402-abstract': 2.3.4
+      '@formatjs/ecma402-abstract': 2.3.6
       '@formatjs/fast-memoize': 2.2.7
-      '@formatjs/icu-messageformat-parser': 2.11.2
-      intl-messageformat: 10.7.16
+      '@formatjs/icu-messageformat-parser': 2.11.4
+      intl-messageformat: 10.7.18
       tslib: 2.8.1
     optionalDependencies:
       typescript: 4.9.5
 
-  '@formatjs/intl@3.1.6(typescript@5.8.3)':
+  '@formatjs/intl@3.1.8(typescript@5.8.3)':
     dependencies:
-      '@formatjs/ecma402-abstract': 2.3.4
+      '@formatjs/ecma402-abstract': 2.3.6
       '@formatjs/fast-memoize': 2.2.7
-      '@formatjs/icu-messageformat-parser': 2.11.2
-      intl-messageformat: 10.7.16
+      '@formatjs/icu-messageformat-parser': 2.11.4
+      intl-messageformat: 10.7.18
       tslib: 2.8.1
     optionalDependencies:
       typescript: 5.8.3
@@ -23797,23 +26040,25 @@ snapshots:
 
   '@gar/promisify@1.1.3': {}
 
-  '@graphiql/react@0.26.2(@codemirror/language@6.11.2)(@types/node@22.15.35)(@types/react-dom@18.2.0)(@types/react@18.2.0)(graphql@16.11.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@github/markdown-toolbar-element@2.2.3': {}
+
+  '@graphiql/react@0.26.2(@codemirror/language@6.11.3)(@types/node@22.15.35)(@types/react-dom@18.2.0)(@types/react@18.2.0)(graphql@16.12.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@graphiql/toolkit': 0.11.3(@types/node@22.15.35)(graphql@16.11.0)
+      '@graphiql/toolkit': 0.11.3(@types/node@22.15.35)(graphql@16.12.0)
       '@headlessui/react': 1.7.19(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-dropdown-menu': 2.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-tooltip': 1.2.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@types/codemirror': 5.60.16
+      '@types/codemirror': 5.60.17
       clsx: 1.2.1
-      codemirror: 5.65.19
-      codemirror-graphql: 2.2.4(@codemirror/language@6.11.2)(codemirror@5.65.19)(graphql@16.11.0)
+      codemirror: 5.65.20
+      codemirror-graphql: 2.2.4(@codemirror/language@6.11.3)(codemirror@5.65.20)(graphql@16.12.0)
       copy-to-clipboard: 3.3.3
       framer-motion: 6.5.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       get-value: 3.0.1
-      graphql: 16.11.0
-      graphql-language-service: 5.5.0(graphql@16.11.0)
+      graphql: 16.12.0
+      graphql-language-service: 5.5.0(graphql@16.12.0)
       markdown-it: 14.1.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -23825,11 +26070,11 @@ snapshots:
       - '@types/react-dom'
       - graphql-ws
 
-  '@graphiql/toolkit@0.11.3(@types/node@22.15.35)(graphql@16.11.0)':
+  '@graphiql/toolkit@0.11.3(@types/node@22.15.35)(graphql@16.12.0)':
     dependencies:
       '@n1ru4l/push-pull-async-iterable-iterator': 3.2.0
-      graphql: 16.11.0
-      meros: 1.3.1(@types/node@22.15.35)
+      graphql: 16.12.0
+      meros: 1.3.2(@types/node@22.15.35)
     transitivePeerDependencies:
       - '@types/node'
 
@@ -23853,25 +26098,34 @@ snapshots:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
-  '@headlessui/react@2.2.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@headlessui/react@2.2.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@floating-ui/react': 0.26.28(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/focus': 3.21.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/interactions': 3.25.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/focus': 3.21.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/interactions': 3.25.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@tanstack/react-virtual': 3.13.12(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      use-sync-external-store: 1.5.0(react@18.2.0)
+      use-sync-external-store: 1.6.0(react@18.2.0)
 
   '@hookform/resolvers@2.9.11(react-hook-form@7.56.4(react@18.2.0))':
     dependencies:
       react-hook-form: 7.56.4(react@18.2.0)
 
+  '@hookform/resolvers@3.3.4(react-hook-form@7.56.4(react@18.2.0))':
+    dependencies:
+      react-hook-form: 7.56.4(react@18.2.0)
+
   '@hookform/resolvers@5.0.1(react-hook-form@7.56.4(react@18.2.0))':
     dependencies:
       '@standard-schema/utils': 0.3.0
       react-hook-form: 7.56.4(react@18.2.0)
 
+  '@hookform/resolvers@5.2.2(react-hook-form@7.56.4(react@18.2.0))':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.56.4(react@18.2.0)
+
   '@hookform/resolvers@5.2.2(react-hook-form@7.63.0(react@18.2.0))':
     dependencies:
       '@standard-schema/utils': 0.3.0
@@ -23879,15 +26133,15 @@ snapshots:
 
   '@humanfs/core@0.19.1': {}
 
-  '@humanfs/node@0.16.6':
+  '@humanfs/node@0.16.7':
     dependencies:
       '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.3.1
+      '@humanwhocodes/retry': 0.4.3
 
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -23896,8 +26150,6 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
-  '@humanwhocodes/retry@0.3.1': {}
-
   '@humanwhocodes/retry@0.4.3': {}
 
   '@iarna/toml@2.2.5': {}
@@ -23912,7 +26164,7 @@ snapshots:
     dependencies:
       string-width: 5.1.2
       string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
+      strip-ansi: 7.1.2
       strip-ansi-cjs: strip-ansi@6.0.1
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
@@ -23980,7 +26232,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@jest/core@29.7.0(babel-plugin-macros@3.1.0)':
+  '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))':
     dependencies:
       '@jest/console': 29.7.0
       '@jest/reporters': 29.7.0
@@ -23994,7 +26246,7 @@ snapshots:
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)
+      jest-config: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       jest-haste-map: 29.7.0
       jest-message-util: 29.7.0
       jest-regex-util: 29.6.3
@@ -24079,7 +26331,7 @@ snapshots:
       '@jest/transform': 25.5.1
       '@jest/types': 25.5.0
       chalk: 3.0.0
-      collect-v8-coverage: 1.0.2
+      collect-v8-coverage: 1.0.3
       exit: 0.1.2
       glob: 7.2.3
       graceful-fs: 4.2.11
@@ -24087,7 +26339,7 @@ snapshots:
       istanbul-lib-instrument: 4.0.3
       istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 4.0.1
-      istanbul-reports: 3.1.7
+      istanbul-reports: 3.2.0
       jest-haste-map: 25.5.1
       jest-resolve: 25.5.1
       jest-util: 25.5.0
@@ -24109,10 +26361,10 @@ snapshots:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/trace-mapping': 0.3.31
       '@types/node': 22.15.35
       chalk: 4.1.2
-      collect-v8-coverage: 1.0.2
+      collect-v8-coverage: 1.0.3
       exit: 0.1.2
       glob: 7.2.3
       graceful-fs: 4.2.11
@@ -24120,7 +26372,7 @@ snapshots:
       istanbul-lib-instrument: 6.0.3
       istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 4.0.1
-      istanbul-reports: 3.1.7
+      istanbul-reports: 3.2.0
       jest-message-util: 29.7.0
       jest-util: 29.7.0
       jest-worker: 29.7.0
@@ -24143,7 +26395,7 @@ snapshots:
 
   '@jest/source-map@29.6.3':
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/trace-mapping': 0.3.31
       callsites: 3.1.0
       graceful-fs: 4.2.11
 
@@ -24152,14 +26404,14 @@ snapshots:
       '@jest/console': 25.5.0
       '@jest/types': 25.5.0
       '@types/istanbul-lib-coverage': 2.0.6
-      collect-v8-coverage: 1.0.2
+      collect-v8-coverage: 1.0.3
 
   '@jest/test-result@29.7.0':
     dependencies:
       '@jest/console': 29.7.0
       '@jest/types': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.6
-      collect-v8-coverage: 1.0.2
+      collect-v8-coverage: 1.0.3
 
   '@jest/test-sequencer@25.5.4':
     dependencies:
@@ -24226,7 +26478,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.27.7
       '@jest/types': 29.6.3
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/trace-mapping': 0.3.31
       babel-plugin-istanbul: 6.1.1
       chalk: 4.1.2
       convert-source-map: 2.0.0
@@ -24263,35 +26515,45 @@ snapshots:
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
       '@types/node': 22.15.35
-      '@types/yargs': 17.0.33
+      '@types/yargs': 17.0.34
       chalk: 4.1.2
 
   '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.8.3)':
     dependencies:
       glob: 10.4.5
-      magic-string: 0.30.17
+      magic-string: 0.30.21
       react-docgen-typescript: 2.4.0(typescript@5.8.3)
     optionalDependencies:
       typescript: 5.8.3
 
-  '@jridgewell/gen-mapping@0.3.12':
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.4
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/resolve-uri@3.1.2': {}
 
-  '@jridgewell/source-map@0.3.10':
+  '@jridgewell/source-map@0.3.11':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
 
-  '@jridgewell/sourcemap-codec@1.5.4': {}
+  '@jridgewell/sourcemap-codec@1.5.5': {}
 
-  '@jridgewell/trace-mapping@0.3.29':
+  '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.4
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
 
   '@jsdevtools/ono@7.1.3': {}
 
@@ -24299,7 +26561,7 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@jsonjoy.com/buffers@1.0.0(tslib@2.8.1)':
+  '@jsonjoy.com/buffers@1.2.1(tslib@2.8.1)':
     dependencies:
       tslib: 2.8.1
 
@@ -24307,47 +26569,277 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@jsonjoy.com/json-pack@1.8.0(tslib@2.8.1)':
+  '@jsonjoy.com/json-pack@1.21.0(tslib@2.8.1)':
     dependencies:
       '@jsonjoy.com/base64': 1.1.2(tslib@2.8.1)
-      '@jsonjoy.com/json-pointer': 1.0.1(tslib@2.8.1)
+      '@jsonjoy.com/buffers': 1.2.1(tslib@2.8.1)
+      '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1)
+      '@jsonjoy.com/json-pointer': 1.0.2(tslib@2.8.1)
       '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
       hyperdyperid: 1.2.0
-      thingies: 1.21.0(tslib@2.8.1)
+      thingies: 2.5.0(tslib@2.8.1)
+      tree-dump: 1.1.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@jsonjoy.com/json-pointer@1.0.1(tslib@2.8.1)':
+  '@jsonjoy.com/json-pointer@1.0.2(tslib@2.8.1)':
     dependencies:
+      '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1)
       '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
       tslib: 2.8.1
 
   '@jsonjoy.com/util@1.9.0(tslib@2.8.1)':
     dependencies:
-      '@jsonjoy.com/buffers': 1.0.0(tslib@2.8.1)
+      '@jsonjoy.com/buffers': 1.2.1(tslib@2.8.1)
       '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1)
       tslib: 2.8.1
 
   '@juggle/resize-observer@3.4.0': {}
 
-  '@keyv/serialize@1.1.0': {}
+  '@keyv/bigmap@1.1.0(keyv@5.5.3)':
+    dependencies:
+      hookified: 1.12.2
+      keyv: 5.5.3
+
+  '@keyv/serialize@1.1.1': {}
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
-  '@lezer/common@1.2.3': {}
+  '@lexical/clipboard@0.17.1':
+    dependencies:
+      '@lexical/html': 0.17.1
+      '@lexical/list': 0.17.1
+      '@lexical/selection': 0.17.1
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/code@0.17.1':
+    dependencies:
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+      prismjs: 1.30.0
+
+  '@lexical/devtools-core@0.17.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@lexical/html': 0.17.1
+      '@lexical/link': 0.17.1
+      '@lexical/mark': 0.17.1
+      '@lexical/table': 0.17.1
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
+  '@lexical/dragon@0.17.1':
+    dependencies:
+      lexical: 0.17.1
+
+  '@lexical/hashtag@0.17.1':
+    dependencies:
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/history@0.17.1':
+    dependencies:
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/html@0.17.1':
+    dependencies:
+      '@lexical/selection': 0.17.1
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/link@0.17.1':
+    dependencies:
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/list@0.17.1':
+    dependencies:
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/mark@0.17.1':
+    dependencies:
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/markdown@0.17.1':
+    dependencies:
+      '@lexical/code': 0.17.1
+      '@lexical/link': 0.17.1
+      '@lexical/list': 0.17.1
+      '@lexical/rich-text': 0.17.1
+      '@lexical/text': 0.17.1
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/offset@0.17.1':
+    dependencies:
+      lexical: 0.17.1
+
+  '@lexical/overflow@0.17.1':
+    dependencies:
+      lexical: 0.17.1
+
+  '@lexical/plain-text@0.17.1':
+    dependencies:
+      '@lexical/clipboard': 0.17.1
+      '@lexical/selection': 0.17.1
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/react@0.17.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@lexical/clipboard': 0.17.1
+      '@lexical/code': 0.17.1
+      '@lexical/devtools-core': 0.17.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@lexical/dragon': 0.17.1
+      '@lexical/hashtag': 0.17.1
+      '@lexical/history': 0.17.1
+      '@lexical/link': 0.17.1
+      '@lexical/list': 0.17.1
+      '@lexical/mark': 0.17.1
+      '@lexical/markdown': 0.17.1
+      '@lexical/overflow': 0.17.1
+      '@lexical/plain-text': 0.17.1
+      '@lexical/rich-text': 0.17.1
+      '@lexical/selection': 0.17.1
+      '@lexical/table': 0.17.1
+      '@lexical/text': 0.17.1
+      '@lexical/utils': 0.17.1
+      '@lexical/yjs': 0.17.1
+      lexical: 0.17.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-error-boundary: 3.1.4(react@18.2.0)
+    transitivePeerDependencies:
+      - yjs
+
+  '@lexical/rich-text@0.17.1':
+    dependencies:
+      '@lexical/clipboard': 0.17.1
+      '@lexical/selection': 0.17.1
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/selection@0.17.1':
+    dependencies:
+      lexical: 0.17.1
+
+  '@lexical/table@0.17.1':
+    dependencies:
+      '@lexical/utils': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/text@0.17.1':
+    dependencies:
+      lexical: 0.17.1
+
+  '@lexical/utils@0.17.1':
+    dependencies:
+      '@lexical/list': 0.17.1
+      '@lexical/selection': 0.17.1
+      '@lexical/table': 0.17.1
+      lexical: 0.17.1
+
+  '@lexical/yjs@0.17.1':
+    dependencies:
+      '@lexical/offset': 0.17.1
+      lexical: 0.17.1
+
+  '@lezer/common@1.3.0': {}
+
+  '@lezer/cpp@1.1.3':
+    dependencies:
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@lezer/css@1.3.0':
+    dependencies:
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@lezer/go@1.0.1':
+    dependencies:
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@lezer/highlight@1.2.3':
+    dependencies:
+      '@lezer/common': 1.3.0
+
+  '@lezer/html@1.3.12':
+    dependencies:
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@lezer/java@1.1.3':
+    dependencies:
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@lezer/javascript@1.5.4':
+    dependencies:
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@lezer/json@1.0.3':
+    dependencies:
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@lezer/lr@1.4.3':
+    dependencies:
+      '@lezer/common': 1.3.0
+
+  '@lezer/markdown@1.6.0':
+    dependencies:
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+
+  '@lezer/php@1.0.5':
+    dependencies:
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@lezer/python@1.1.18':
+    dependencies:
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
 
-  '@lezer/highlight@1.2.1':
+  '@lezer/rust@1.0.2':
     dependencies:
-      '@lezer/common': 1.2.3
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
 
-  '@lezer/lr@1.4.2':
+  '@lezer/sass@1.1.0':
     dependencies:
-      '@lezer/common': 1.2.3
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
 
   '@lezer/xml@1.0.6':
     dependencies:
-      '@lezer/common': 1.2.3
-      '@lezer/highlight': 1.2.1
-      '@lezer/lr': 1.4.2
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+
+  '@lezer/yaml@1.0.3':
+    dependencies:
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
 
   '@marijn/find-cluster-break@1.0.2': {}
 
@@ -24379,13 +26871,19 @@ snapshots:
     dependencies:
       react: 18.2.0
 
+  '@mdx-js/react@2.3.0(react@18.2.0)':
+    dependencies:
+      '@types/mdx': 2.0.13
+      '@types/react': 18.2.0
+      react: 18.2.0
+
   '@mdx-js/react@2.3.0(react@19.1.0)':
     dependencies:
       '@types/mdx': 2.0.13
       '@types/react': 18.2.0
       react: 19.1.0
 
-  '@mdx-js/react@3.1.0(@types/react@18.2.0)(react@19.1.0)':
+  '@mdx-js/react@3.1.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
       '@types/mdx': 2.0.13
       '@types/react': 18.2.0
@@ -24393,9 +26891,78 @@ snapshots:
 
   '@mdx-js/util@1.6.22': {}
 
-  '@microsoft/1ds-core-js@4.3.9(tslib@2.8.1)':
+  '@mdxeditor/editor@3.14.0(@codemirror/language@6.11.3)(@lezer/highlight@1.2.3)(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@codemirror/lang-markdown': 6.5.0
+      '@codemirror/language-data': 6.5.2
+      '@codemirror/merge': 6.11.1
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.6
+      '@codesandbox/sandpack-react': 2.20.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@lexical/clipboard': 0.17.1
+      '@lexical/link': 0.17.1
+      '@lexical/list': 0.17.1
+      '@lexical/markdown': 0.17.1
+      '@lexical/plain-text': 0.17.1
+      '@lexical/react': 0.17.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@lexical/rich-text': 0.17.1
+      '@lexical/selection': 0.17.1
+      '@lexical/utils': 0.17.1
+      '@mdxeditor/gurx': 1.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/colors': 3.0.0
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-icons': 1.3.2(react@18.2.0)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-select': 2.2.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toolbar': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      classnames: 2.5.1
+      cm6-theme-basic-light: 0.2.0(@codemirror/language@6.11.3)(@codemirror/state@6.5.2)(@codemirror/view@6.38.6)(@lezer/highlight@1.2.3)
+      codemirror: 6.0.2
+      downshift: 7.6.2(react@18.2.0)
+      js-yaml: 4.1.0
+      lexical: 0.17.1
+      mdast-util-directive: 3.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-frontmatter: 2.0.1
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-mdx: 3.0.0
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-to-markdown: 2.1.2
+      micromark-extension-directive: 3.0.2
+      micromark-extension-frontmatter: 2.0.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-extension-mdx-jsx: 3.0.2
+      micromark-extension-mdx-md: 2.0.0
+      micromark-extension-mdxjs: 3.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-hook-form: 7.56.4(react@18.2.0)
+      unidiff: 1.0.4
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@lezer/highlight'
+      - '@types/react'
+      - '@types/react-dom'
+      - supports-color
+      - yjs
+
+  '@mdxeditor/gurx@1.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
+  '@microsoft/1ds-core-js@4.3.10(tslib@2.8.1)':
     dependencies:
-      '@microsoft/applicationinsights-core-js': 3.3.9(tslib@2.8.1)
+      '@microsoft/applicationinsights-core-js': 3.3.10(tslib@2.8.1)
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
       '@nevware21/ts-async': 0.5.4
@@ -24403,9 +26970,9 @@ snapshots:
     transitivePeerDependencies:
       - tslib
 
-  '@microsoft/1ds-post-js@4.3.9(tslib@2.8.1)':
+  '@microsoft/1ds-post-js@4.3.10(tslib@2.8.1)':
     dependencies:
-      '@microsoft/1ds-core-js': 4.3.9(tslib@2.8.1)
+      '@microsoft/1ds-core-js': 4.3.10(tslib@2.8.1)
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
       '@nevware21/ts-async': 0.5.4
@@ -24413,25 +26980,25 @@ snapshots:
     transitivePeerDependencies:
       - tslib
 
-  '@microsoft/applicationinsights-channel-js@3.3.9(tslib@2.8.1)':
+  '@microsoft/applicationinsights-channel-js@3.3.10(tslib@2.8.1)':
     dependencies:
-      '@microsoft/applicationinsights-common': 3.3.9(tslib@2.8.1)
-      '@microsoft/applicationinsights-core-js': 3.3.9(tslib@2.8.1)
+      '@microsoft/applicationinsights-common': 3.3.10(tslib@2.8.1)
+      '@microsoft/applicationinsights-core-js': 3.3.10(tslib@2.8.1)
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
       '@nevware21/ts-async': 0.5.4
       '@nevware21/ts-utils': 0.12.5
       tslib: 2.8.1
 
-  '@microsoft/applicationinsights-common@3.3.9(tslib@2.8.1)':
+  '@microsoft/applicationinsights-common@3.3.10(tslib@2.8.1)':
     dependencies:
-      '@microsoft/applicationinsights-core-js': 3.3.9(tslib@2.8.1)
+      '@microsoft/applicationinsights-core-js': 3.3.10(tslib@2.8.1)
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
       '@nevware21/ts-utils': 0.12.5
       tslib: 2.8.1
 
-  '@microsoft/applicationinsights-core-js@3.3.9(tslib@2.8.1)':
+  '@microsoft/applicationinsights-core-js@3.3.10(tslib@2.8.1)':
     dependencies:
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
@@ -24443,11 +27010,11 @@ snapshots:
     dependencies:
       '@nevware21/ts-utils': 0.12.5
 
-  '@microsoft/applicationinsights-web-basic@3.3.9(tslib@2.8.1)':
+  '@microsoft/applicationinsights-web-basic@3.3.10(tslib@2.8.1)':
     dependencies:
-      '@microsoft/applicationinsights-channel-js': 3.3.9(tslib@2.8.1)
-      '@microsoft/applicationinsights-common': 3.3.9(tslib@2.8.1)
-      '@microsoft/applicationinsights-core-js': 3.3.9(tslib@2.8.1)
+      '@microsoft/applicationinsights-channel-js': 3.3.10(tslib@2.8.1)
+      '@microsoft/applicationinsights-common': 3.3.10(tslib@2.8.1)
+      '@microsoft/applicationinsights-core-js': 3.3.10(tslib@2.8.1)
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
       '@nevware21/ts-async': 0.5.4
@@ -24483,9 +27050,92 @@ snapshots:
     dependencies:
       exenv-es6: 1.1.1
 
-  '@modelcontextprotocol/sdk@1.17.1':
+  '@modelcontextprotocol/inspector-cli@0.17.2':
     dependencies:
+      '@modelcontextprotocol/sdk': 1.21.0
+      commander: 13.1.0
+      spawn-rx: 5.1.2
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - supports-color
+
+  '@modelcontextprotocol/inspector-client@0.17.2(@types/react-dom@18.2.0)(@types/react@18.2.0)':
+    dependencies:
+      '@modelcontextprotocol/sdk': 1.21.0
+      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-icons': 1.3.2(react@18.3.1)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-select': 2.2.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-switch': 1.2.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toast': 1.2.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       ajv: 6.12.6
+      class-variance-authority: 0.7.1
+      clsx: 2.1.1
+      cmdk: 1.1.1(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      lucide-react: 0.523.0(react@18.3.1)
+      pkce-challenge: 4.1.0
+      prismjs: 1.30.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-simple-code-editor: 0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      serve-handler: 6.1.6
+      tailwind-merge: 2.6.0
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - '@types/react'
+      - '@types/react-dom'
+      - supports-color
+
+  '@modelcontextprotocol/inspector-server@0.17.2':
+    dependencies:
+      '@modelcontextprotocol/sdk': 1.21.0
+      cors: 2.8.5
+      express: 5.1.0
+      shell-quote: 1.8.3
+      spawn-rx: 5.1.2
+      ws: 8.18.3
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  '@modelcontextprotocol/inspector@0.17.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.18)(@types/react-dom@18.2.0)(@types/react@18.2.0)(typescript@5.8.3)':
+    dependencies:
+      '@modelcontextprotocol/inspector-cli': 0.17.2
+      '@modelcontextprotocol/inspector-client': 0.17.2(@types/react-dom@18.2.0)(@types/react@18.2.0)
+      '@modelcontextprotocol/inspector-server': 0.17.2
+      '@modelcontextprotocol/sdk': 1.21.0
+      concurrently: 9.2.1
+      node-fetch: 3.3.2
+      open: 10.2.0
+      shell-quote: 1.8.3
+      spawn-rx: 5.1.2
+      ts-node: 10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.18)(typescript@5.8.3)
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/node'
+      - '@types/react'
+      - '@types/react-dom'
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
+  '@modelcontextprotocol/sdk@1.21.0':
+    dependencies:
+      ajv: 8.17.1
+      ajv-formats: 3.0.1(ajv@8.17.1)
       content-type: 1.0.5
       cors: 2.8.5
       cross-spawn: 7.0.6
@@ -24494,26 +27144,26 @@ snapshots:
       express: 5.1.0
       express-rate-limit: 7.5.1(express@5.1.0)
       pkce-challenge: 5.0.0
-      raw-body: 3.0.0
+      raw-body: 3.0.1
       zod: 3.25.76
       zod-to-json-schema: 3.24.6(zod@3.25.76)
     transitivePeerDependencies:
       - supports-color
 
-  '@monaco-editor/loader@1.5.0':
+  '@monaco-editor/loader@1.6.1':
     dependencies:
       state-local: 1.0.7
 
   '@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@monaco-editor/loader': 1.5.0
+      '@monaco-editor/loader': 1.6.1
       monaco-editor: 0.52.2
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
   '@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@monaco-editor/loader': 1.5.0
+      '@monaco-editor/loader': 1.6.1
       monaco-editor: 0.52.2
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
@@ -24566,6 +27216,7 @@ snapshots:
       pump: 3.0.3
       tar-fs: 3.1.1
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - react-native-b4a
 
@@ -24592,12 +27243,12 @@ snapshots:
   '@npmcli/fs@1.1.1':
     dependencies:
       '@gar/promisify': 1.1.3
-      semver: 7.7.2
+      semver: 7.7.3
 
   '@npmcli/fs@2.1.2':
     dependencies:
       '@gar/promisify': 1.1.3
-      semver: 7.7.2
+      semver: 7.7.3
 
   '@npmcli/move-file@1.1.2':
     dependencies:
@@ -24626,6 +27277,8 @@ snapshots:
 
   '@oozcitak/util@8.3.8': {}
 
+  '@open-draft/deferred-promise@2.2.0': {}
+
   '@opentelemetry/api@1.9.0': {}
 
   '@parcel/watcher-android-arm64@2.5.1':
@@ -24696,71 +27349,105 @@ snapshots:
     dependencies:
       playwright: 1.55.1
 
-  '@pmmmwh/react-refresh-webpack-plugin@0.5.17(@types/webpack@5.28.5(webpack-cli@4.10.0))(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)':
+  '@pmmmwh/react-refresh-webpack-plugin@0.5.17(@types/webpack@5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17))(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.102.1)':
+    dependencies:
+      ansi-html: 0.0.9
+      core-js-pure: 3.46.0
+      error-stack-parser: 2.1.4
+      html-entities: 2.6.0
+      loader-utils: 2.0.4
+      react-refresh: 0.11.0
+      schema-utils: 4.3.3
+      source-map: 0.7.6
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+    optionalDependencies:
+      '@types/webpack': 5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+      type-fest: 4.41.0
+      webpack-dev-server: 5.2.2(webpack-cli@6.0.1)(webpack@5.102.1)
+      webpack-hot-middleware: 2.26.1
+
+  '@pmmmwh/react-refresh-webpack-plugin@0.5.17(@types/webpack@5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17)))(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))))(webpack-hot-middleware@2.26.1)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))':
     dependencies:
       ansi-html: 0.0.9
-      core-js-pure: 3.45.0
+      core-js-pure: 3.46.0
       error-stack-parser: 2.1.4
       html-entities: 2.6.0
       loader-utils: 2.0.4
       react-refresh: 0.11.0
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       source-map: 0.7.6
-      webpack: 5.101.0(webpack-cli@4.10.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+    optionalDependencies:
+      '@types/webpack': 5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17))
+      type-fest: 4.41.0
+      webpack-dev-server: 5.2.2(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      webpack-hot-middleware: 2.26.1
+
+  '@pmmmwh/react-refresh-webpack-plugin@0.5.17(@types/webpack@5.28.5(webpack-cli@4.10.0))(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)(webpack@5.102.1)':
+    dependencies:
+      ansi-html: 0.0.9
+      core-js-pure: 3.46.0
+      error-stack-parser: 2.1.4
+      html-entities: 2.6.0
+      loader-utils: 2.0.4
+      react-refresh: 0.11.0
+      schema-utils: 4.3.3
+      source-map: 0.7.6
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
       '@types/webpack': 5.28.5(webpack-cli@4.10.0)
       type-fest: 4.41.0
-      webpack-dev-server: 5.2.2(webpack-cli@4.10.0)(webpack@5.101.0)
+      webpack-dev-server: 5.2.2(webpack-cli@4.10.0)(webpack@5.102.1)
       webpack-hot-middleware: 2.26.1
 
-  '@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)':
+  '@pmmmwh/react-refresh-webpack-plugin@0.5.17(@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.102.1)':
     dependencies:
       ansi-html: 0.0.9
-      core-js-pure: 3.45.0
+      core-js-pure: 3.46.0
       error-stack-parser: 2.1.4
       html-entities: 2.6.0
       loader-utils: 2.0.4
       react-refresh: 0.11.0
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       source-map: 0.7.6
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@5.1.4)
     optionalDependencies:
-      '@types/webpack': 5.28.5(webpack-cli@6.0.1)
+      '@types/webpack': 5.28.5(webpack-cli@5.1.4)
       type-fest: 4.41.0
-      webpack-dev-server: 5.2.2(webpack-cli@6.0.1)(webpack@5.101.0)
+      webpack-dev-server: 5.2.2(webpack-cli@5.1.4)(webpack@5.102.1)
       webpack-hot-middleware: 2.26.1
 
-  '@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)':
+  '@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.102.1))(webpack-hot-middleware@2.26.1)(webpack@5.102.1)':
     dependencies:
       ansi-html: 0.0.9
-      core-js-pure: 3.45.0
+      core-js-pure: 3.46.0
       error-stack-parser: 2.1.4
       html-entities: 2.6.0
       loader-utils: 2.0.4
       react-refresh: 0.11.0
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       source-map: 0.7.6
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
       '@types/webpack': 5.28.5
       type-fest: 4.41.0
-      webpack-dev-server: 5.2.2(webpack@5.101.0)
+      webpack-dev-server: 5.2.2(webpack@5.102.1)
       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.11.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.102.1)':
     dependencies:
       anser: 2.3.2
-      core-js-pure: 3.45.0
+      core-js-pure: 3.46.0
       error-stack-parser: 2.1.4
       html-entities: 2.6.0
       react-refresh: 0.11.0
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       source-map: 0.7.6
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@5.1.4)
     optionalDependencies:
       '@types/webpack': 5.28.5(webpack-cli@5.1.4)
       type-fest: 4.41.0
-      webpack-dev-server: 5.2.2(webpack-cli@5.1.4)(webpack@5.101.0)
+      webpack-dev-server: 5.2.2(webpack-cli@5.1.4)(webpack@5.102.1)
       webpack-hot-middleware: 2.26.1
 
   '@projectstorm/geometry@6.7.4': {}
@@ -24954,19 +27641,56 @@ snapshots:
       - '@types/react'
       - supports-color
 
+  '@protobufjs/aspromise@1.1.2': {}
+
+  '@protobufjs/base64@1.1.2': {}
+
+  '@protobufjs/codegen@2.0.4': {}
+
+  '@protobufjs/eventemitter@1.1.0': {}
+
+  '@protobufjs/fetch@1.1.0':
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/inquire': 1.1.0
+
+  '@protobufjs/float@1.0.2': {}
+
+  '@protobufjs/inquire@1.1.0': {}
+
+  '@protobufjs/path@1.1.2': {}
+
+  '@protobufjs/pool@1.1.0': {}
+
+  '@protobufjs/utf8@1.1.0': {}
+
+  '@radix-ui/colors@3.0.0': {}
+
   '@radix-ui/number@1.0.1':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
+
+  '@radix-ui/number@1.1.1': {}
 
   '@radix-ui/primitive@1.0.1':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
 
-  '@radix-ui/primitive@1.1.2': {}
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
 
   '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
@@ -24983,9 +27707,47 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.0)(react@19.1.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.0)(react@19.1.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -25008,6 +27770,18 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/react-collection@1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@19.1.0)
@@ -25020,9 +27794,16 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
@@ -25033,15 +27814,28 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-context@1.0.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-context@1.0.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
@@ -25052,23 +27846,29 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-context@1.1.2(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-context@1.1.2(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
 
-  '@radix-ui/react-dialog@1.1.14(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/primitive': 1.1.3
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.2.0)
@@ -25080,9 +27880,38 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.2.0)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-direction@1.0.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-direction@1.0.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
@@ -25093,15 +27922,35 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-direction@1.1.1(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-direction@1.1.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.0)(react@19.1.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -25113,9 +27962,9 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
-  '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/primitive': 1.1.3
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.0)(react@18.2.0)
@@ -25126,13 +27975,26 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
-  '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/primitive': 1.1.3
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.2.0)
-      '@radix-ui/react-menu': 2.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -25141,22 +28003,47 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
 
-  '@radix-ui/react-focus-guards@1.1.2(@types/react@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@18.2.0)(react@18.2.0)':
     dependencies:
       react: 18.2.0
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
+  '@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.0)(react@19.1.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.0)(react@19.1.0)
@@ -25177,9 +28064,36 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-icons@1.3.2(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+
+  '@radix-ui/react-icons@1.3.2(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
+  '@radix-ui/react-id@1.0.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-id@1.0.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.0)(react@19.1.0)
       react: 19.1.0
     optionalDependencies:
@@ -25192,6 +28106,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-id@1.1.1(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-id@1.1.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@19.1.0)
@@ -25199,22 +28120,31 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
-  '@radix-ui/react-menu@2.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-label@2.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
       '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-direction': 1.1.1(@types/react@18.2.0)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.2.0)
-      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.0)(react@18.2.0)
       aria-hidden: 1.2.6
@@ -25225,10 +28155,75 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.2.0)
+      aria-hidden: 1.2.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.7.1(@types/react@18.2.0)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.2.0)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@floating-ui/react-dom': 2.1.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/rect': 1.0.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
-      '@floating-ui/react-dom': 2.1.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@babel/runtime': 7.28.4
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.0)(react@19.1.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.0)(react@19.1.0)
@@ -25244,9 +28239,9 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
-  '@radix-ui/react-popper@1.2.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@floating-ui/react-dom': 2.1.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.2.0)
@@ -25262,9 +28257,37 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
@@ -25282,7 +28305,17 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
-  '@radix-ui/react-presence@1.1.4(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@18.2.0)
@@ -25292,9 +28325,29 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.0)(react@19.1.0)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
@@ -25311,6 +28364,15 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@19.1.0)
@@ -25320,9 +28382,9 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
-  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/primitive': 1.1.3
       '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.2.0)
@@ -25337,9 +28399,26 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
-  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/primitive': 1.1.3
       '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@19.1.0)
       '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@19.1.0)
@@ -25354,9 +28433,39 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-select@1.2.2(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/number': 1.0.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      aria-hidden: 1.2.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.0)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/react-select@1.2.2(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/number': 1.0.1
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -25384,6 +28493,73 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-select@2.2.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      aria-hidden: 1.2.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.7.1(@types/react@18.2.0)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.2.0)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/react-separator@1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -25393,9 +28569,17 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-slot@1.0.2(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-slot@1.0.2(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.0)(react@19.1.0)
       react: 19.1.0
     optionalDependencies:
@@ -25408,6 +28592,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-slot@1.2.3(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-slot@1.2.3(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@19.1.0)
@@ -25415,14 +28606,80 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
-  '@radix-ui/react-toggle-group@1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@radix-ui/react-switch@1.2.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-toast@1.2.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/primitive': 1.1.3
       '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@19.1.0)
       '@radix-ui/react-direction': 1.1.1(@types/react@18.2.0)(react@19.1.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-toggle': 1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@19.1.0)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
@@ -25430,9 +28687,20 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
-  '@radix-ui/react-toggle@1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/primitive': 1.1.3
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@19.1.0)
       react: 19.1.0
@@ -25441,31 +28709,46 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
-  '@radix-ui/react-toolbar@1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@radix-ui/react-toolbar@1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-toolbar@1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/primitive': 1.1.3
       '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@19.1.0)
       '@radix-ui/react-direction': 1.1.1(@types/react@18.2.0)(react@19.1.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-separator': 1.1.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-toggle-group': 1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
-  '@radix-ui/react-tooltip@1.2.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/primitive': 1.1.3
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.2.0)
-      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.2.0)
@@ -25476,9 +28759,36 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
+  '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
@@ -25489,15 +28799,29 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.0)(react@19.1.0)
       react: 19.1.0
     optionalDependencies:
@@ -25511,6 +28835,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
       '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.2.0)(react@19.1.0)
@@ -25526,6 +28858,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@19.1.0)
@@ -25533,9 +28872,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.0)(react@19.1.0)
       react: 19.1.0
     optionalDependencies:
@@ -25548,9 +28895,23 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
+  '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
@@ -25561,22 +28922,55 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-use-previous@1.0.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-use-previous@1.0.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       react: 19.1.0
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-use-previous@1.1.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
+  '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/rect': 1.0.1
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/rect': 1.0.1
       react: 19.1.0
     optionalDependencies:
@@ -25589,9 +28983,24 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-use-rect@1.1.1(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
+  '@radix-ui/react-use-size@1.0.1(@types/react@18.2.0)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.0)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   '@radix-ui/react-use-size@1.0.1(@types/react@18.2.0)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.0)(react@19.1.0)
       react: 19.1.0
     optionalDependencies:
@@ -25604,9 +29013,26 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  '@radix-ui/react-use-size@1.1.1(@types/react@18.2.0)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
+  '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
@@ -25623,28 +29049,37 @@ snapshots:
       '@types/react': 18.2.0
       '@types/react-dom': 18.2.0
 
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.0
+
   '@radix-ui/rect@1.0.1':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
 
   '@radix-ui/rect@1.1.1': {}
 
-  '@react-aria/focus@3.21.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-aria/focus@3.21.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@react-aria/interactions': 3.25.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/utils': 3.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-types/shared': 3.31.0(react@18.2.0)
+      '@react-aria/interactions': 3.25.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/utils': 3.31.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-types/shared': 3.32.1(react@18.2.0)
       '@swc/helpers': 0.5.17
       clsx: 2.1.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/interactions@3.25.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-aria/interactions@3.25.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/ssr': 3.9.10(react@18.2.0)
-      '@react-aria/utils': 3.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/utils': 3.31.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-stately/flags': 3.1.2
-      '@react-types/shared': 3.31.0(react@18.2.0)
+      '@react-types/shared': 3.32.1(react@18.2.0)
       '@swc/helpers': 0.5.17
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -25654,12 +29089,12 @@ snapshots:
       '@swc/helpers': 0.5.17
       react: 18.2.0
 
-  '@react-aria/utils@3.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-aria/utils@3.31.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/ssr': 3.9.10(react@18.2.0)
       '@react-stately/flags': 3.1.2
       '@react-stately/utils': 3.10.8(react@18.2.0)
-      '@react-types/shared': 3.31.0(react@18.2.0)
+      '@react-types/shared': 3.32.1(react@18.2.0)
       '@swc/helpers': 0.5.17
       clsx: 2.1.1
       react: 18.2.0
@@ -25671,6 +29106,16 @@ snapshots:
 
   '@react-dnd/shallowequal@4.0.2': {}
 
+  '@react-hook/intersection-observer@3.1.2(react@18.2.0)':
+    dependencies:
+      '@react-hook/passive-layout-effect': 1.2.1(react@18.2.0)
+      intersection-observer: 0.10.0
+      react: 18.2.0
+
+  '@react-hook/passive-layout-effect@1.2.1(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+
   '@react-stately/flags@3.1.2':
     dependencies:
       '@swc/helpers': 0.5.17
@@ -25680,22 +29125,22 @@ snapshots:
       '@swc/helpers': 0.5.17
       react: 18.2.0
 
-  '@react-types/shared@3.31.0(react@18.2.0)':
+  '@react-types/shared@3.32.1(react@18.2.0)':
     dependencies:
       react: 18.2.0
 
-  '@redhat-developer/locators@1.15.0(@redhat-developer/page-objects@1.15.0(selenium-webdriver@4.34.0)(typescript@5.8.3))(selenium-webdriver@4.34.0)':
+  '@redhat-developer/locators@1.17.0(@redhat-developer/page-objects@1.17.0(selenium-webdriver@4.38.0)(typescript@5.8.3))(selenium-webdriver@4.38.0)':
     dependencies:
-      '@redhat-developer/page-objects': 1.15.0(selenium-webdriver@4.34.0)(typescript@5.8.3)
-      selenium-webdriver: 4.34.0
+      '@redhat-developer/page-objects': 1.17.0(selenium-webdriver@4.38.0)(typescript@5.8.3)
+      selenium-webdriver: 4.38.0
 
-  '@redhat-developer/page-objects@1.15.0(selenium-webdriver@4.34.0)(typescript@5.8.3)':
+  '@redhat-developer/page-objects@1.17.0(selenium-webdriver@4.38.0)(typescript@5.8.3)':
     dependencies:
-      clipboardy: 4.0.0
+      clipboardy: 5.0.0
       clone-deep: 4.0.1
       compare-versions: 6.1.1
-      fs-extra: 11.3.1
-      selenium-webdriver: 4.34.0
+      fs-extra: 11.3.2
+      selenium-webdriver: 4.38.0
       type-fest: 4.41.0
       typescript: 5.8.3
 
@@ -25718,41 +29163,41 @@ snapshots:
       glob: 7.2.3
       is-reference: 1.2.1
       magic-string: 0.25.9
-      resolve: 1.22.10
+      resolve: 1.22.11
       rollup: 1.32.1
 
-  '@rollup/plugin-commonjs@28.0.6(rollup@4.46.2)':
+  '@rollup/plugin-commonjs@28.0.9(rollup@4.52.5)':
     dependencies:
-      '@rollup/pluginutils': 5.2.0(rollup@4.46.2)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       commondir: 1.0.1
       estree-walker: 2.0.2
-      fdir: 6.4.6(picomatch@4.0.3)
+      fdir: 6.5.0(picomatch@4.0.3)
       is-reference: 1.2.1
-      magic-string: 0.30.17
+      magic-string: 0.30.21
       picomatch: 4.0.3
     optionalDependencies:
-      rollup: 4.46.2
+      rollup: 4.52.5
 
   '@rollup/plugin-json@4.1.0(rollup@1.32.1)':
     dependencies:
       '@rollup/pluginutils': 3.1.0(rollup@1.32.1)
       rollup: 1.32.1
 
-  '@rollup/plugin-json@6.1.0(rollup@4.46.2)':
+  '@rollup/plugin-json@6.1.0(rollup@4.52.5)':
     dependencies:
-      '@rollup/pluginutils': 5.2.0(rollup@4.46.2)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
     optionalDependencies:
-      rollup: 4.46.2
+      rollup: 4.52.5
 
-  '@rollup/plugin-node-resolve@16.0.1(rollup@4.46.2)':
+  '@rollup/plugin-node-resolve@16.0.3(rollup@4.52.5)':
     dependencies:
-      '@rollup/pluginutils': 5.2.0(rollup@4.46.2)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
-      resolve: 1.22.10
+      resolve: 1.22.11
     optionalDependencies:
-      rollup: 4.46.2
+      rollup: 4.52.5
 
   '@rollup/plugin-node-resolve@9.0.0(rollup@1.32.1)':
     dependencies:
@@ -25761,7 +29206,7 @@ snapshots:
       builtin-modules: 3.3.0
       deepmerge: 4.3.1
       is-module: 1.0.0
-      resolve: 1.22.10
+      resolve: 1.22.11
       rollup: 1.32.1
 
   '@rollup/plugin-replace@2.4.2(rollup@1.32.1)':
@@ -25782,72 +29227,78 @@ snapshots:
       estree-walker: 2.0.2
       picomatch: 2.3.1
 
-  '@rollup/pluginutils@5.2.0(rollup@4.46.2)':
+  '@rollup/pluginutils@5.3.0(rollup@4.52.5)':
     dependencies:
       '@types/estree': 1.0.8
       estree-walker: 2.0.2
       picomatch: 4.0.3
     optionalDependencies:
-      rollup: 4.46.2
+      rollup: 4.52.5
+
+  '@rollup/rollup-android-arm-eabi@4.52.5':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.52.5':
+    optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.46.2':
+  '@rollup/rollup-darwin-arm64@4.52.5':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.46.2':
+  '@rollup/rollup-darwin-x64@4.52.5':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.46.2':
+  '@rollup/rollup-freebsd-arm64@4.52.5':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.46.2':
+  '@rollup/rollup-freebsd-x64@4.52.5':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.46.2':
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.46.2':
+  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.46.2':
+  '@rollup/rollup-linux-arm64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.46.2':
+  '@rollup/rollup-linux-arm64-musl@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.46.2':
+  '@rollup/rollup-linux-loong64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.46.2':
+  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.46.2':
+  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.46.2':
+  '@rollup/rollup-linux-riscv64-musl@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.46.2':
+  '@rollup/rollup-linux-s390x-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.46.2':
+  '@rollup/rollup-linux-x64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.46.2':
+  '@rollup/rollup-linux-x64-musl@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.46.2':
+  '@rollup/rollup-openharmony-arm64@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.46.2':
+  '@rollup/rollup-win32-arm64-msvc@4.52.5':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.46.2':
+  '@rollup/rollup-win32-ia32-msvc@4.52.5':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.46.2':
+  '@rollup/rollup-win32-x64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.46.2':
+  '@rollup/rollup-win32-x64-msvc@4.52.5':
     optional: true
 
   '@rtsao/scc@1.1.0': {}
@@ -25866,7 +29317,7 @@ snapshots:
       '@secretlint/resolver': 9.3.4
       '@secretlint/types': 9.3.4
       ajv: 8.17.1
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       rc-config-loader: 4.1.3
     transitivePeerDependencies:
       - supports-color
@@ -25875,7 +29326,7 @@ snapshots:
     dependencies:
       '@secretlint/profiler': 9.3.4
       '@secretlint/types': 9.3.4
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       structured-source: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -25888,7 +29339,7 @@ snapshots:
       '@textlint/module-interop': 14.8.4
       '@textlint/types': 14.8.4
       chalk: 4.1.2
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       pluralize: 8.0.0
       strip-ansi: 6.0.1
       table: 6.9.0
@@ -25904,7 +29355,7 @@ snapshots:
       '@secretlint/profiler': 9.3.4
       '@secretlint/source-creator': 9.3.4
       '@secretlint/types': 9.3.4
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       p-map: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -25934,7 +29385,7 @@ snapshots:
     dependencies:
       https-proxy-agent: 5.0.1
       mkdirp: 0.5.6
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.6.13(encoding@0.1.13)
       progress: 2.0.3
       proxy-from-env: 1.1.0
       which: 2.0.2
@@ -25962,10 +29413,12 @@ snapshots:
 
   '@sindresorhus/is@5.6.0': {}
 
-  '@sindresorhus/is@7.0.2': {}
+  '@sindresorhus/is@7.1.1': {}
 
   '@sindresorhus/merge-streams@2.3.0': {}
 
+  '@sindresorhus/merge-streams@4.0.0': {}
+
   '@sinonjs/commons@1.8.6':
     dependencies:
       type-detect: 4.0.8
@@ -25980,8 +29433,8 @@ snapshots:
 
   '@size-limit/esbuild@11.2.0(size-limit@11.2.0)':
     dependencies:
-      esbuild: 0.25.8
-      nanoid: 5.1.5
+      esbuild: 0.25.12
+      nanoid: 5.1.6
       size-limit: 11.2.0
 
   '@size-limit/file@11.2.0(size-limit@11.2.0)':
@@ -25994,255 +29447,254 @@ snapshots:
       '@size-limit/file': 11.2.0(size-limit@11.2.0)
       size-limit: 11.2.0
 
-  '@smithy/abort-controller@4.0.5':
+  '@smithy/abort-controller@4.2.4':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/chunked-blob-reader-native@4.0.0':
+  '@smithy/chunked-blob-reader-native@4.2.1':
     dependencies:
-      '@smithy/util-base64': 4.0.0
+      '@smithy/util-base64': 4.3.0
       tslib: 2.8.1
 
-  '@smithy/chunked-blob-reader@5.0.0':
+  '@smithy/chunked-blob-reader@5.2.0':
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/config-resolver@4.1.5':
+  '@smithy/config-resolver@4.4.1':
     dependencies:
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/types': 4.3.2
-      '@smithy/util-config-provider': 4.0.0
-      '@smithy/util-middleware': 4.0.5
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/types': 4.8.1
+      '@smithy/util-config-provider': 4.2.0
+      '@smithy/util-endpoints': 3.2.4
+      '@smithy/util-middleware': 4.2.4
       tslib: 2.8.1
 
-  '@smithy/core@3.8.0':
-    dependencies:
-      '@smithy/middleware-serde': 4.0.9
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/types': 4.3.2
-      '@smithy/util-base64': 4.0.0
-      '@smithy/util-body-length-browser': 4.0.0
-      '@smithy/util-middleware': 4.0.5
-      '@smithy/util-stream': 4.2.4
-      '@smithy/util-utf8': 4.0.0
-      '@types/uuid': 9.0.8
+  '@smithy/core@3.17.2':
+    dependencies:
+      '@smithy/middleware-serde': 4.2.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/types': 4.8.1
+      '@smithy/util-base64': 4.3.0
+      '@smithy/util-body-length-browser': 4.2.0
+      '@smithy/util-middleware': 4.2.4
+      '@smithy/util-stream': 4.5.5
+      '@smithy/util-utf8': 4.2.0
+      '@smithy/uuid': 1.1.0
       tslib: 2.8.1
-      uuid: 9.0.1
 
-  '@smithy/credential-provider-imds@4.0.7':
+  '@smithy/credential-provider-imds@4.2.4':
     dependencies:
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/property-provider': 4.0.5
-      '@smithy/types': 4.3.2
-      '@smithy/url-parser': 4.0.5
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/property-provider': 4.2.4
+      '@smithy/types': 4.8.1
+      '@smithy/url-parser': 4.2.4
       tslib: 2.8.1
 
-  '@smithy/eventstream-codec@4.0.5':
+  '@smithy/eventstream-codec@4.2.4':
     dependencies:
       '@aws-crypto/crc32': 5.2.0
-      '@smithy/types': 4.3.2
-      '@smithy/util-hex-encoding': 4.0.0
+      '@smithy/types': 4.8.1
+      '@smithy/util-hex-encoding': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/eventstream-serde-browser@4.0.5':
+  '@smithy/eventstream-serde-browser@4.2.4':
     dependencies:
-      '@smithy/eventstream-serde-universal': 4.0.5
-      '@smithy/types': 4.3.2
+      '@smithy/eventstream-serde-universal': 4.2.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/eventstream-serde-config-resolver@4.1.3':
+  '@smithy/eventstream-serde-config-resolver@4.3.4':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/eventstream-serde-node@4.0.5':
+  '@smithy/eventstream-serde-node@4.2.4':
     dependencies:
-      '@smithy/eventstream-serde-universal': 4.0.5
-      '@smithy/types': 4.3.2
+      '@smithy/eventstream-serde-universal': 4.2.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/eventstream-serde-universal@4.0.5':
+  '@smithy/eventstream-serde-universal@4.2.4':
     dependencies:
-      '@smithy/eventstream-codec': 4.0.5
-      '@smithy/types': 4.3.2
+      '@smithy/eventstream-codec': 4.2.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/fetch-http-handler@5.1.1':
+  '@smithy/fetch-http-handler@5.3.5':
     dependencies:
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/querystring-builder': 4.0.5
-      '@smithy/types': 4.3.2
-      '@smithy/util-base64': 4.0.0
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/querystring-builder': 4.2.4
+      '@smithy/types': 4.8.1
+      '@smithy/util-base64': 4.3.0
       tslib: 2.8.1
 
-  '@smithy/hash-blob-browser@4.0.5':
+  '@smithy/hash-blob-browser@4.2.5':
     dependencies:
-      '@smithy/chunked-blob-reader': 5.0.0
-      '@smithy/chunked-blob-reader-native': 4.0.0
-      '@smithy/types': 4.3.2
+      '@smithy/chunked-blob-reader': 5.2.0
+      '@smithy/chunked-blob-reader-native': 4.2.1
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/hash-node@4.0.5':
+  '@smithy/hash-node@4.2.4':
     dependencies:
-      '@smithy/types': 4.3.2
-      '@smithy/util-buffer-from': 4.0.0
-      '@smithy/util-utf8': 4.0.0
+      '@smithy/types': 4.8.1
+      '@smithy/util-buffer-from': 4.2.0
+      '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/hash-stream-node@4.0.5':
+  '@smithy/hash-stream-node@4.2.4':
     dependencies:
-      '@smithy/types': 4.3.2
-      '@smithy/util-utf8': 4.0.0
+      '@smithy/types': 4.8.1
+      '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/invalid-dependency@4.0.5':
+  '@smithy/invalid-dependency@4.2.4':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
   '@smithy/is-array-buffer@2.2.0':
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/is-array-buffer@4.0.0':
+  '@smithy/is-array-buffer@4.2.0':
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/md5-js@4.0.5':
+  '@smithy/md5-js@4.2.4':
     dependencies:
-      '@smithy/types': 4.3.2
-      '@smithy/util-utf8': 4.0.0
+      '@smithy/types': 4.8.1
+      '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/middleware-content-length@4.0.5':
+  '@smithy/middleware-content-length@4.2.4':
     dependencies:
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/types': 4.3.2
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/middleware-endpoint@4.1.18':
+  '@smithy/middleware-endpoint@4.3.6':
     dependencies:
-      '@smithy/core': 3.8.0
-      '@smithy/middleware-serde': 4.0.9
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/shared-ini-file-loader': 4.0.5
-      '@smithy/types': 4.3.2
-      '@smithy/url-parser': 4.0.5
-      '@smithy/util-middleware': 4.0.5
+      '@smithy/core': 3.17.2
+      '@smithy/middleware-serde': 4.2.4
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/shared-ini-file-loader': 4.3.4
+      '@smithy/types': 4.8.1
+      '@smithy/url-parser': 4.2.4
+      '@smithy/util-middleware': 4.2.4
       tslib: 2.8.1
 
-  '@smithy/middleware-retry@4.1.19':
+  '@smithy/middleware-retry@4.4.6':
     dependencies:
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/service-error-classification': 4.0.7
-      '@smithy/smithy-client': 4.4.10
-      '@smithy/types': 4.3.2
-      '@smithy/util-middleware': 4.0.5
-      '@smithy/util-retry': 4.0.7
-      '@types/uuid': 9.0.8
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/service-error-classification': 4.2.4
+      '@smithy/smithy-client': 4.9.2
+      '@smithy/types': 4.8.1
+      '@smithy/util-middleware': 4.2.4
+      '@smithy/util-retry': 4.2.4
+      '@smithy/uuid': 1.1.0
       tslib: 2.8.1
-      uuid: 9.0.1
 
-  '@smithy/middleware-serde@4.0.9':
+  '@smithy/middleware-serde@4.2.4':
     dependencies:
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/types': 4.3.2
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/middleware-stack@4.0.5':
+  '@smithy/middleware-stack@4.2.4':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/node-config-provider@4.1.4':
+  '@smithy/node-config-provider@4.3.4':
     dependencies:
-      '@smithy/property-provider': 4.0.5
-      '@smithy/shared-ini-file-loader': 4.0.5
-      '@smithy/types': 4.3.2
+      '@smithy/property-provider': 4.2.4
+      '@smithy/shared-ini-file-loader': 4.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/node-http-handler@4.1.1':
+  '@smithy/node-http-handler@4.4.4':
     dependencies:
-      '@smithy/abort-controller': 4.0.5
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/querystring-builder': 4.0.5
-      '@smithy/types': 4.3.2
+      '@smithy/abort-controller': 4.2.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/querystring-builder': 4.2.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/property-provider@4.0.5':
+  '@smithy/property-provider@4.2.4':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/protocol-http@5.1.3':
+  '@smithy/protocol-http@5.3.4':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/querystring-builder@4.0.5':
+  '@smithy/querystring-builder@4.2.4':
     dependencies:
-      '@smithy/types': 4.3.2
-      '@smithy/util-uri-escape': 4.0.0
+      '@smithy/types': 4.8.1
+      '@smithy/util-uri-escape': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/querystring-parser@4.0.5':
+  '@smithy/querystring-parser@4.2.4':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/service-error-classification@4.0.7':
+  '@smithy/service-error-classification@4.2.4':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
 
-  '@smithy/shared-ini-file-loader@4.0.5':
+  '@smithy/shared-ini-file-loader@4.3.4':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/signature-v4@5.1.3':
+  '@smithy/signature-v4@5.3.4':
     dependencies:
-      '@smithy/is-array-buffer': 4.0.0
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/types': 4.3.2
-      '@smithy/util-hex-encoding': 4.0.0
-      '@smithy/util-middleware': 4.0.5
-      '@smithy/util-uri-escape': 4.0.0
-      '@smithy/util-utf8': 4.0.0
+      '@smithy/is-array-buffer': 4.2.0
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/types': 4.8.1
+      '@smithy/util-hex-encoding': 4.2.0
+      '@smithy/util-middleware': 4.2.4
+      '@smithy/util-uri-escape': 4.2.0
+      '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/smithy-client@4.4.10':
+  '@smithy/smithy-client@4.9.2':
     dependencies:
-      '@smithy/core': 3.8.0
-      '@smithy/middleware-endpoint': 4.1.18
-      '@smithy/middleware-stack': 4.0.5
-      '@smithy/protocol-http': 5.1.3
-      '@smithy/types': 4.3.2
-      '@smithy/util-stream': 4.2.4
+      '@smithy/core': 3.17.2
+      '@smithy/middleware-endpoint': 4.3.6
+      '@smithy/middleware-stack': 4.2.4
+      '@smithy/protocol-http': 5.3.4
+      '@smithy/types': 4.8.1
+      '@smithy/util-stream': 4.5.5
       tslib: 2.8.1
 
-  '@smithy/types@4.3.2':
+  '@smithy/types@4.8.1':
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/url-parser@4.0.5':
+  '@smithy/url-parser@4.2.4':
     dependencies:
-      '@smithy/querystring-parser': 4.0.5
-      '@smithy/types': 4.3.2
+      '@smithy/querystring-parser': 4.2.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/util-base64@4.0.0':
+  '@smithy/util-base64@4.3.0':
     dependencies:
-      '@smithy/util-buffer-from': 4.0.0
-      '@smithy/util-utf8': 4.0.0
+      '@smithy/util-buffer-from': 4.2.0
+      '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/util-body-length-browser@4.0.0':
+  '@smithy/util-body-length-browser@4.2.0':
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/util-body-length-node@4.0.0':
+  '@smithy/util-body-length-node@4.2.1':
     dependencies:
       tslib: 2.8.1
 
@@ -26251,66 +29703,65 @@ snapshots:
       '@smithy/is-array-buffer': 2.2.0
       tslib: 2.8.1
 
-  '@smithy/util-buffer-from@4.0.0':
+  '@smithy/util-buffer-from@4.2.0':
     dependencies:
-      '@smithy/is-array-buffer': 4.0.0
+      '@smithy/is-array-buffer': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/util-config-provider@4.0.0':
+  '@smithy/util-config-provider@4.2.0':
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/util-defaults-mode-browser@4.0.26':
+  '@smithy/util-defaults-mode-browser@4.3.5':
     dependencies:
-      '@smithy/property-provider': 4.0.5
-      '@smithy/smithy-client': 4.4.10
-      '@smithy/types': 4.3.2
-      bowser: 2.11.0
+      '@smithy/property-provider': 4.2.4
+      '@smithy/smithy-client': 4.9.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/util-defaults-mode-node@4.0.26':
+  '@smithy/util-defaults-mode-node@4.2.7':
     dependencies:
-      '@smithy/config-resolver': 4.1.5
-      '@smithy/credential-provider-imds': 4.0.7
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/property-provider': 4.0.5
-      '@smithy/smithy-client': 4.4.10
-      '@smithy/types': 4.3.2
+      '@smithy/config-resolver': 4.4.1
+      '@smithy/credential-provider-imds': 4.2.4
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/property-provider': 4.2.4
+      '@smithy/smithy-client': 4.9.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/util-endpoints@3.0.7':
+  '@smithy/util-endpoints@3.2.4':
     dependencies:
-      '@smithy/node-config-provider': 4.1.4
-      '@smithy/types': 4.3.2
+      '@smithy/node-config-provider': 4.3.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/util-hex-encoding@4.0.0':
+  '@smithy/util-hex-encoding@4.2.0':
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/util-middleware@4.0.5':
+  '@smithy/util-middleware@4.2.4':
     dependencies:
-      '@smithy/types': 4.3.2
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/util-retry@4.0.7':
+  '@smithy/util-retry@4.2.4':
     dependencies:
-      '@smithy/service-error-classification': 4.0.7
-      '@smithy/types': 4.3.2
+      '@smithy/service-error-classification': 4.2.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/util-stream@4.2.4':
+  '@smithy/util-stream@4.5.5':
     dependencies:
-      '@smithy/fetch-http-handler': 5.1.1
-      '@smithy/node-http-handler': 4.1.1
-      '@smithy/types': 4.3.2
-      '@smithy/util-base64': 4.0.0
-      '@smithy/util-buffer-from': 4.0.0
-      '@smithy/util-hex-encoding': 4.0.0
-      '@smithy/util-utf8': 4.0.0
+      '@smithy/fetch-http-handler': 5.3.5
+      '@smithy/node-http-handler': 4.4.4
+      '@smithy/types': 4.8.1
+      '@smithy/util-base64': 4.3.0
+      '@smithy/util-buffer-from': 4.2.0
+      '@smithy/util-hex-encoding': 4.2.0
+      '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/util-uri-escape@4.0.0':
+  '@smithy/util-uri-escape@4.2.0':
     dependencies:
       tslib: 2.8.1
 
@@ -26319,21 +29770,32 @@ snapshots:
       '@smithy/util-buffer-from': 2.2.0
       tslib: 2.8.1
 
-  '@smithy/util-utf8@4.0.0':
+  '@smithy/util-utf8@4.2.0':
+    dependencies:
+      '@smithy/util-buffer-from': 4.2.0
+      tslib: 2.8.1
+
+  '@smithy/util-waiter@4.2.4':
     dependencies:
-      '@smithy/util-buffer-from': 4.0.0
+      '@smithy/abort-controller': 4.2.4
+      '@smithy/types': 4.8.1
       tslib: 2.8.1
 
-  '@smithy/util-waiter@4.0.7':
+  '@smithy/uuid@1.1.0':
     dependencies:
-      '@smithy/abort-controller': 4.0.5
-      '@smithy/types': 4.3.2
       tslib: 2.8.1
 
+  '@so-ric/colorspace@1.1.6':
+    dependencies:
+      color: 5.0.2
+      text-hex: 1.0.0
+
   '@standard-schema/spec@1.0.0': {}
 
   '@standard-schema/utils@0.3.0': {}
 
+  '@stitches/core@1.2.8': {}
+
   '@storybook/addon-actions@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -26343,7 +29805,7 @@ snapshots:
       '@storybook/core-events': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       fast-deep-equal: 3.1.3
       global: 4.4.0
       lodash: 4.17.21
@@ -26359,6 +29821,31 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  '@storybook/addon-actions@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/client-logger': 7.4.6
+      '@storybook/components': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/core-events': 7.4.6
+      '@storybook/global': 5.0.0
+      '@storybook/manager-api': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/preview-api': 7.4.6
+      '@storybook/theming': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/types': 7.4.6
+      dequal: 2.0.3
+      lodash: 4.17.21
+      polished: 4.3.1
+      prop-types: 15.8.1
+      react-inspector: 6.0.2(react@18.2.0)
+      telejson: 7.2.0
+      ts-dedent: 2.2.0
+      uuid: 9.0.1
+    optionalDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   '@storybook/addon-actions@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@storybook/client-logger': 7.4.6
@@ -26393,13 +29880,13 @@ snapshots:
       storybook: 8.6.14(prettier@3.5.3)
       uuid: 9.0.1
 
-  '@storybook/addon-actions@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/addon-actions@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       '@storybook/global': 5.0.0
       '@types/uuid': 9.0.8
       dequal: 2.0.3
       polished: 4.3.1
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       uuid: 9.0.1
 
   '@storybook/addon-backgrounds@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
@@ -26411,7 +29898,7 @@ snapshots:
       '@storybook/core-events': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       memoizerific: 1.11.3
       regenerator-runtime: 0.13.11
@@ -26421,6 +29908,25 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  '@storybook/addon-backgrounds@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/client-logger': 7.4.6
+      '@storybook/components': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/core-events': 7.4.6
+      '@storybook/global': 5.0.0
+      '@storybook/manager-api': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/preview-api': 7.4.6
+      '@storybook/theming': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/types': 7.4.6
+      memoizerific: 1.11.3
+      ts-dedent: 2.2.0
+    optionalDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   '@storybook/addon-backgrounds@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@storybook/client-logger': 7.4.6
@@ -26447,25 +29953,25 @@ snapshots:
       storybook: 8.6.14(prettier@3.5.3)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-backgrounds@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/addon-backgrounds@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-controls@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/addon-controls@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)':
     dependencies:
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/client-logger': 6.5.16
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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@4.10.0)
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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/node-logger': 6.5.16
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       lodash: 4.17.21
       ts-dedent: 2.2.0
     optionalDependencies:
@@ -26481,18 +29987,18 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/addon-controls@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/addon-controls@6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)':
     dependencies:
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/client-logger': 6.5.16
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/node-logger': 6.5.16
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       lodash: 4.17.21
       ts-dedent: 2.2.0
     optionalDependencies:
@@ -26508,6 +30014,29 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
+  '@storybook/addon-controls@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/blocks': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/client-logger': 7.4.6
+      '@storybook/components': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/core-common': 7.4.6(encoding@0.1.13)
+      '@storybook/core-events': 7.4.6
+      '@storybook/manager-api': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/node-logger': 7.4.6
+      '@storybook/preview-api': 7.4.6
+      '@storybook/theming': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/types': 7.4.6
+      lodash: 4.17.21
+      ts-dedent: 2.2.0
+    optionalDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - encoding
+      - supports-color
+
   '@storybook/addon-controls@7.4.6(@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)':
     dependencies:
       '@storybook/blocks': 7.4.6(@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)
@@ -26538,14 +30067,14 @@ snapshots:
       storybook: 8.6.14(prettier@3.5.3)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-controls@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/addon-controls@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       '@storybook/global': 5.0.0
       dequal: 2.0.3
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-docs@6.5.16(@babel/core@7.27.7)(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)(webpack@5.101.0)':
+  '@storybook/addon-docs@6.5.16(@babel/core@7.27.7)(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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.102.1)':
     dependencies:
       '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.27.7)
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
@@ -26554,7 +30083,7 @@ snapshots:
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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@4.10.0)
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       '@storybook/core-events': 6.5.16
       '@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)
@@ -26565,8 +30094,8 @@ snapshots:
       '@storybook/source-loader': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
-      core-js: 3.45.0
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
+      core-js: 3.46.0
       fast-deep-equal: 3.1.3
       global: 4.4.0
       lodash: 4.17.21
@@ -26590,7 +30119,7 @@ snapshots:
       - webpack
       - webpack-cli
 
-  '@storybook/addon-docs@6.5.16(@babel/core@7.27.7)(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/addon-docs@6.5.16(@babel/core@7.27.7)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)(webpack@5.102.1)':
     dependencies:
       '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.27.7)
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
@@ -26599,7 +30128,7 @@ snapshots:
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       '@storybook/core-events': 6.5.16
       '@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)
@@ -26610,8 +30139,8 @@ snapshots:
       '@storybook/source-loader': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
-      core-js: 3.45.0
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
+      core-js: 3.46.0
       fast-deep-equal: 3.1.3
       global: 4.4.0
       lodash: 4.17.21
@@ -26635,6 +30164,35 @@ snapshots:
       - webpack
       - webpack-cli
 
+  '@storybook/addon-docs@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@jest/transform': 29.7.0
+      '@mdx-js/react': 2.3.0(react@18.2.0)
+      '@storybook/blocks': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/client-logger': 7.4.6
+      '@storybook/components': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/csf-plugin': 7.4.6
+      '@storybook/csf-tools': 7.4.6
+      '@storybook/global': 5.0.0
+      '@storybook/mdx2-csf': 1.1.0
+      '@storybook/node-logger': 7.4.6
+      '@storybook/postinstall': 7.4.6
+      '@storybook/preview-api': 7.4.6
+      '@storybook/react-dom-shim': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/theming': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/types': 7.4.6
+      fs-extra: 11.3.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      remark-external-links: 8.0.0
+      remark-slug: 6.1.0
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - encoding
+      - supports-color
+
   '@storybook/addon-docs@7.4.6(@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)':
     dependencies:
       '@jest/transform': 29.7.0
@@ -26652,7 +30210,7 @@ snapshots:
       '@storybook/react-dom-shim': 7.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/theming': 7.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/types': 7.4.6
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
       remark-external-links: 8.0.0
@@ -26666,7 +30224,7 @@ snapshots:
 
   '@storybook/addon-docs@8.6.14(@types/react@18.2.0)(storybook@8.6.14(prettier@3.5.3))':
     dependencies:
-      '@mdx-js/react': 3.1.0(@types/react@18.2.0)(react@19.1.0)
+      '@mdx-js/react': 3.1.1(@types/react@18.2.0)(react@19.1.0)
       '@storybook/blocks': 8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14(prettier@3.5.3))
       '@storybook/csf-plugin': 8.6.14(storybook@8.6.14(prettier@3.5.3))
       '@storybook/react-dom-shim': 8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14(prettier@3.5.3))
@@ -26677,55 +30235,55 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-docs@8.6.14(@types/react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/addon-docs@8.6.14(@types/react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
-      '@mdx-js/react': 3.1.0(@types/react@18.2.0)(react@19.1.0)
-      '@storybook/blocks': 8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/csf-plugin': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/react-dom-shim': 8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@mdx-js/react': 3.1.1(@types/react@18.2.0)(react@19.1.0)
+      '@storybook/blocks': 8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/csf-plugin': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/react-dom-shim': 8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-docs@9.1.1(@types/react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/addon-docs@9.1.16(@types/react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
-      '@mdx-js/react': 3.1.0(@types/react@18.2.0)(react@19.1.0)
-      '@storybook/csf-plugin': 9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/icons': 1.4.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@mdx-js/react': 3.1.1(@types/react@18.2.0)(react@19.1.0)
+      '@storybook/csf-plugin': 9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/icons': 1.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@storybook/react-dom-shim': 9.1.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-essentials@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@4.10.0))(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)(webpack@5.101.0)':
+  '@storybook/addon-essentials@6.5.16(@babel/core@7.27.7)(@storybook/builder-webpack5@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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.102.1)':
     dependencies:
       '@babel/core': 7.27.7
       '@storybook/addon-actions': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-backgrounds': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/addon-controls': 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/addon-docs': 6.5.16(@babel/core@7.27.7)(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)(webpack@5.101.0)
+      '@storybook/addon-controls': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
+      '@storybook/addon-docs': 6.5.16(@babel/core@7.27.7)(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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.102.1)
       '@storybook/addon-measure': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-outline': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-toolbars': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-viewport': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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@4.10.0)
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       '@storybook/node-logger': 6.5.16
-      core-js: 3.45.0
+      core-js: 3.46.0
       regenerator-runtime: 0.13.11
       ts-dedent: 2.2.0
     optionalDependencies:
-      '@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/builder-webpack5': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      webpack: 5.101.0(webpack-cli@4.10.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
     transitivePeerDependencies:
       - '@storybook/mdx2-csf'
       - '@swc/core'
@@ -26737,29 +30295,29 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/addon-essentials@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))(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/addon-essentials@6.5.16(@babel/core@7.27.7)(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)(webpack@5.102.1)':
     dependencies:
       '@babel/core': 7.27.7
       '@storybook/addon-actions': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-backgrounds': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/addon-controls': 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/addon-docs': 6.5.16(@babel/core@7.27.7)(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/addon-controls': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
+      '@storybook/addon-docs': 6.5.16(@babel/core@7.27.7)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)(webpack@5.102.1)
       '@storybook/addon-measure': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-outline': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-toolbars': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-viewport': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       '@storybook/node-logger': 6.5.16
-      core-js: 3.45.0
+      core-js: 3.46.0
       regenerator-runtime: 0.13.11
       ts-dedent: 2.2.0
     optionalDependencies:
-      '@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/builder-webpack5': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     transitivePeerDependencies:
       - '@storybook/mdx2-csf'
       - '@swc/core'
@@ -26771,6 +30329,30 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
+  '@storybook/addon-essentials@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/addon-actions': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/addon-backgrounds': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/addon-controls': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/addon-docs': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/addon-highlight': 7.4.6
+      '@storybook/addon-measure': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/addon-outline': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/addon-toolbars': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/addon-viewport': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/core-common': 7.4.6(encoding@0.1.13)
+      '@storybook/manager-api': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/node-logger': 7.4.6
+      '@storybook/preview-api': 7.4.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - encoding
+      - supports-color
+
   '@storybook/addon-essentials@7.4.6(@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)':
     dependencies:
       '@storybook/addon-actions': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -26811,18 +30393,18 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-essentials@8.6.14(@types/react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
-    dependencies:
-      '@storybook/addon-actions': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/addon-backgrounds': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/addon-controls': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/addon-docs': 8.6.14(@types/react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/addon-highlight': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/addon-measure': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/addon-outline': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/addon-toolbars': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/addon-viewport': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+  '@storybook/addon-essentials@8.6.14(@types/react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+    dependencies:
+      '@storybook/addon-actions': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/addon-backgrounds': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/addon-controls': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/addon-docs': 8.6.14(@types/react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/addon-highlight': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/addon-measure': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/addon-outline': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/addon-toolbars': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/addon-viewport': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
@@ -26838,10 +30420,10 @@ snapshots:
       '@storybook/global': 5.0.0
       storybook: 8.6.14(prettier@3.5.3)
 
-  '@storybook/addon-highlight@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/addon-highlight@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
 
   '@storybook/addon-interactions@8.6.14(storybook@8.6.14(prettier@3.5.3))':
     dependencies:
@@ -26860,7 +30442,7 @@ snapshots:
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/router': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/qs': 6.14.0
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       prop-types: 15.8.1
       qs: 6.14.0
@@ -26894,10 +30476,10 @@ snapshots:
     optionalDependencies:
       react: 18.2.0
 
-  '@storybook/addon-links@8.6.14(react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/addon-links@8.6.14(react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
     optionalDependencies:
       react: 18.2.0
@@ -26910,12 +30492,29 @@ snapshots:
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/core-events': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
     optionalDependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  '@storybook/addon-measure@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/client-logger': 7.4.6
+      '@storybook/components': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/core-events': 7.4.6
+      '@storybook/global': 5.0.0
+      '@storybook/manager-api': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/preview-api': 7.4.6
+      '@storybook/types': 7.4.6
+      tiny-invariant: 1.3.3
+    optionalDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   '@storybook/addon-measure@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@storybook/client-logger': 7.4.6
@@ -26939,10 +30538,10 @@ snapshots:
       storybook: 8.6.14(prettier@3.5.3)
       tiny-invariant: 1.3.3
 
-  '@storybook/addon-measure@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/addon-measure@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       tiny-invariant: 1.3.3
 
   '@storybook/addon-onboarding@8.6.14(storybook@8.6.14(prettier@3.5.3))':
@@ -26957,7 +30556,7 @@ snapshots:
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/core-events': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       regenerator-runtime: 0.13.11
       ts-dedent: 2.2.0
@@ -26965,6 +30564,23 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  '@storybook/addon-outline@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/client-logger': 7.4.6
+      '@storybook/components': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/core-events': 7.4.6
+      '@storybook/global': 5.0.0
+      '@storybook/manager-api': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/preview-api': 7.4.6
+      '@storybook/types': 7.4.6
+      ts-dedent: 2.2.0
+    optionalDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   '@storybook/addon-outline@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@storybook/client-logger': 7.4.6
@@ -26988,10 +30604,10 @@ snapshots:
       storybook: 8.6.14(prettier@3.5.3)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-outline@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/addon-outline@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
 
   '@storybook/addon-toolbars@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
@@ -27001,12 +30617,26 @@ snapshots:
       '@storybook/client-logger': 6.5.16
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       regenerator-runtime: 0.13.11
     optionalDependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  '@storybook/addon-toolbars@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/client-logger': 7.4.6
+      '@storybook/components': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/manager-api': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/preview-api': 7.4.6
+      '@storybook/theming': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+    optionalDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   '@storybook/addon-toolbars@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@storybook/client-logger': 7.4.6
@@ -27025,9 +30655,9 @@ snapshots:
     dependencies:
       storybook: 8.6.14(prettier@3.5.3)
 
-  '@storybook/addon-toolbars@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/addon-toolbars@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
 
   '@storybook/addon-viewport@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
@@ -27037,7 +30667,7 @@ snapshots:
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/core-events': 6.5.16
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       memoizerific: 1.11.3
       prop-types: 15.8.1
@@ -27046,6 +30676,24 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  '@storybook/addon-viewport@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/client-logger': 7.4.6
+      '@storybook/components': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/core-events': 7.4.6
+      '@storybook/global': 5.0.0
+      '@storybook/manager-api': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/preview-api': 7.4.6
+      '@storybook/theming': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      memoizerific: 1.11.3
+      prop-types: 15.8.1
+    optionalDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   '@storybook/addon-viewport@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@storybook/client-logger': 7.4.6
@@ -27069,10 +30717,10 @@ snapshots:
       memoizerific: 1.11.3
       storybook: 8.6.14(prettier@3.5.3)
 
-  '@storybook/addon-viewport@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/addon-viewport@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       memoizerific: 1.11.3
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
 
   '@storybook/addons@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
@@ -27084,7 +30732,7 @@ snapshots:
       '@storybook/router': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/webpack-env': 1.18.8
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -27100,12 +30748,20 @@ snapshots:
       '@storybook/router': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/theming': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@types/webpack-env': 1.18.8
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
       regenerator-runtime: 0.13.11
 
+  '@storybook/addons@7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/manager-api': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/preview-api': 7.4.6
+      '@storybook/types': 7.4.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   '@storybook/addons@7.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@storybook/manager-api': 7.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -27123,7 +30779,7 @@ snapshots:
       '@storybook/router': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/semver': 7.3.2
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       fast-deep-equal: 3.1.3
       global: 4.4.0
       lodash: 4.17.21
@@ -27145,7 +30801,7 @@ snapshots:
       '@storybook/router': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/semver': 7.3.2
       '@storybook/theming': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       fast-deep-equal: 3.1.3
       global: 4.4.0
       lodash: 4.17.21
@@ -27158,6 +30814,39 @@ snapshots:
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
 
+  '@storybook/blocks@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/channels': 7.4.6
+      '@storybook/client-logger': 7.4.6
+      '@storybook/components': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/core-events': 7.4.6
+      '@storybook/csf': 0.1.13
+      '@storybook/docs-tools': 7.4.6(encoding@0.1.13)
+      '@storybook/global': 5.0.0
+      '@storybook/manager-api': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/preview-api': 7.4.6
+      '@storybook/theming': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/types': 7.4.6
+      '@types/lodash': 4.17.17
+      color-convert: 2.0.1
+      dequal: 2.0.3
+      lodash: 4.17.21
+      markdown-to-jsx: 7.7.17(react@18.2.0)
+      memoizerific: 1.11.3
+      polished: 4.3.1
+      react: 18.2.0
+      react-colorful: 5.6.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react-dom: 18.2.0(react@18.2.0)
+      telejson: 7.2.0
+      tocbot: 4.36.4
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - encoding
+      - supports-color
+
   '@storybook/blocks@7.4.6(@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)':
     dependencies:
       '@storybook/channels': 7.4.6
@@ -27175,7 +30864,7 @@ snapshots:
       color-convert: 2.0.1
       dequal: 2.0.3
       lodash: 4.17.21
-      markdown-to-jsx: 7.7.13(react@19.1.0)
+      markdown-to-jsx: 7.7.17(react@19.1.0)
       memoizerific: 1.11.3
       polished: 4.3.1
       react: 19.1.0
@@ -27193,7 +30882,7 @@ snapshots:
 
   '@storybook/blocks@8.6.14(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.6.14(prettier@3.5.3))':
     dependencies:
-      '@storybook/icons': 1.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/icons': 1.6.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       storybook: 8.6.14(prettier@3.5.3)
       ts-dedent: 2.2.0
     optionalDependencies:
@@ -27202,17 +30891,17 @@ snapshots:
 
   '@storybook/blocks@8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14(prettier@3.5.3))':
     dependencies:
-      '@storybook/icons': 1.4.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@storybook/icons': 1.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       storybook: 8.6.14(prettier@3.5.3)
       ts-dedent: 2.2.0
     optionalDependencies:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
-  '@storybook/blocks@8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/blocks@8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
-      '@storybook/icons': 1.4.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      '@storybook/icons': 1.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
     optionalDependencies:
       react: 19.1.0
@@ -27226,27 +30915,89 @@ snapshots:
       '@storybook/node-logger': 7.6.20
       '@types/ejs': 3.1.5
       '@types/find-cache-dir': 3.2.1
-      '@yarnpkg/esbuild-plugin-pnp': 3.0.0-rc.15(esbuild@0.25.8)
+      '@yarnpkg/esbuild-plugin-pnp': 3.0.0-rc.15(esbuild@0.25.12)
       browser-assert: 1.2.1
       ejs: 3.1.10
-      esbuild: 0.25.8
+      esbuild: 0.25.12
       esbuild-plugin-alias: 0.2.1
       express: 4.21.2
       find-cache-dir: 3.3.2
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       process: 0.11.10
       util: 0.12.5
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@storybook/builder-vite@9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/builder-vite@9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+    dependencies:
+      '@storybook/csf-plugin': 9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      ts-dedent: 2.2.0
+
+  '@storybook/builder-webpack4@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
-      '@storybook/csf-plugin': 9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      '@babel/core': 7.27.7
+      '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/channel-postmessage': 6.5.16
+      '@storybook/channels': 6.5.16
+      '@storybook/client-api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/client-logger': 6.5.16
+      '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      '@storybook/core-events': 6.5.16
+      '@storybook/node-logger': 6.5.16
+      '@storybook/preview-web': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/router': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/semver': 7.3.2
+      '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/ui': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@types/node': 16.18.126
+      '@types/webpack': 4.41.40
+      autoprefixer: 9.8.8
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      case-sensitive-paths-webpack-plugin: 2.4.0
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      file-loader: 6.2.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      find-up: 5.0.0
+      fork-ts-checker-webpack-plugin: 4.1.6
+      glob: 7.2.3
+      glob-promise: 3.4.0(glob@7.2.3)
+      global: 4.4.0
+      html-webpack-plugin: 4.5.2(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      pnp-webpack-plugin: 1.6.4(typescript@5.8.3)
+      postcss: 7.0.39
+      postcss-flexbugs-fixes: 4.2.1
+      postcss-loader: 4.3.0(postcss@7.0.39)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      raw-loader: 4.0.2(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      stable: 0.1.8
+      style-loader: 1.3.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       ts-dedent: 2.2.0
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))))(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      util-deprecate: 1.0.2
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      webpack-filter-warnings-plugin: 1.2.1(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      webpack-hot-middleware: 2.26.1
+      webpack-virtual-modules: 0.2.2
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - eslint
+      - supports-color
+      - uglify-js
+      - vue-template-compiler
+      - webpack-cli
 
-  '@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)':
+  '@storybook/builder-webpack4@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)':
     dependencies:
       '@babel/core': 7.27.7
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27256,7 +31007,7 @@ snapshots:
       '@storybook/client-api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/client-logger': 6.5.16
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       '@storybook/core-events': 6.5.16
       '@storybook/node-logger': 6.5.16
       '@storybook/preview-web': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27268,33 +31019,33 @@ snapshots:
       '@types/node': 16.18.126
       '@types/webpack': 4.41.40
       autoprefixer: 9.8.8
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       case-sensitive-paths-webpack-plugin: 2.4.0
-      core-js: 3.45.0
-      css-loader: 3.6.0(webpack@5.101.0)
-      file-loader: 6.2.0(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1)
+      file-loader: 6.2.0(webpack@5.102.1)
       find-up: 5.0.0
       fork-ts-checker-webpack-plugin: 4.1.6
       glob: 7.2.3
       glob-promise: 3.4.0(glob@7.2.3)
       global: 4.4.0
-      html-webpack-plugin: 4.5.2(webpack@5.101.0)
+      html-webpack-plugin: 4.5.2(webpack@5.102.1)
       pnp-webpack-plugin: 1.6.4(typescript@5.8.3)
       postcss: 7.0.39
       postcss-flexbugs-fixes: 4.2.1
-      postcss-loader: 4.3.0(postcss@7.0.39)(webpack@5.101.0)
-      raw-loader: 4.0.2(webpack@5.101.0)
+      postcss-loader: 4.3.0(postcss@7.0.39)(webpack@5.102.1)
+      raw-loader: 4.0.2(webpack@5.102.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       stable: 0.1.8
-      style-loader: 1.3.0(webpack@5.101.0)
-      terser-webpack-plugin: 4.2.3(webpack@5.101.0)
+      style-loader: 1.3.0(webpack@5.102.1)
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1)
       ts-dedent: 2.2.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.101.0))(webpack@5.101.0)
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1))(webpack@5.102.1)
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-dev-middleware: 3.7.3(webpack@5.101.0)
-      webpack-filter-warnings-plugin: 1.2.1(webpack@5.101.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1)
+      webpack-filter-warnings-plugin: 1.2.1(webpack@5.102.1)
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.2.2
     optionalDependencies:
@@ -27308,7 +31059,7 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/builder-webpack4@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/builder-webpack4@6.5.16(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@babel/core': 7.27.7
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27318,7 +31069,7 @@ snapshots:
       '@storybook/client-api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/client-logger': 6.5.16
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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/core-common': 6.5.16(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@storybook/core-events': 6.5.16
       '@storybook/node-logger': 6.5.16
       '@storybook/preview-web': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27330,33 +31081,33 @@ snapshots:
       '@types/node': 16.18.126
       '@types/webpack': 4.41.40
       autoprefixer: 9.8.8
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       case-sensitive-paths-webpack-plugin: 2.4.0
-      core-js: 3.45.0
-      css-loader: 3.6.0(webpack@5.101.0)
-      file-loader: 6.2.0(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1)
+      file-loader: 6.2.0(webpack@5.102.1)
       find-up: 5.0.0
       fork-ts-checker-webpack-plugin: 4.1.6
       glob: 7.2.3
       glob-promise: 3.4.0(glob@7.2.3)
       global: 4.4.0
-      html-webpack-plugin: 4.5.2(webpack@5.101.0)
+      html-webpack-plugin: 4.5.2(webpack@5.102.1)
       pnp-webpack-plugin: 1.6.4(typescript@5.8.3)
       postcss: 7.0.39
       postcss-flexbugs-fixes: 4.2.1
-      postcss-loader: 4.3.0(postcss@7.0.39)(webpack@5.101.0)
-      raw-loader: 4.0.2(webpack@5.101.0)
+      postcss-loader: 4.3.0(postcss@7.0.39)(webpack@5.102.1)
+      raw-loader: 4.0.2(webpack@5.102.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       stable: 0.1.8
-      style-loader: 1.3.0(webpack@5.101.0)
-      terser-webpack-plugin: 4.2.3(webpack@5.101.0)
+      style-loader: 1.3.0(webpack@5.102.1)
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1)
       ts-dedent: 2.2.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.101.0))(webpack@5.101.0)
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1))(webpack@5.102.1)
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-dev-middleware: 3.7.3(webpack@5.101.0)
-      webpack-filter-warnings-plugin: 1.2.1(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1)
+      webpack-filter-warnings-plugin: 1.2.1(webpack@5.102.1)
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.2.2
     optionalDependencies:
@@ -27370,7 +31121,7 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/builder-webpack4@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/builder-webpack4@6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@babel/core': 7.27.7
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27380,7 +31131,7 @@ snapshots:
       '@storybook/client-api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/client-logger': 6.5.16
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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@4.10.0)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@storybook/core-events': 6.5.16
       '@storybook/node-logger': 6.5.16
       '@storybook/preview-web': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27392,33 +31143,33 @@ snapshots:
       '@types/node': 16.18.126
       '@types/webpack': 4.41.40
       autoprefixer: 9.8.8
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       case-sensitive-paths-webpack-plugin: 2.4.0
-      core-js: 3.45.0
-      css-loader: 3.6.0(webpack@5.101.0)
-      file-loader: 6.2.0(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1)
+      file-loader: 6.2.0(webpack@5.102.1)
       find-up: 5.0.0
       fork-ts-checker-webpack-plugin: 4.1.6
       glob: 7.2.3
       glob-promise: 3.4.0(glob@7.2.3)
       global: 4.4.0
-      html-webpack-plugin: 4.5.2(webpack@5.101.0)
+      html-webpack-plugin: 4.5.2(webpack@5.102.1)
       pnp-webpack-plugin: 1.6.4(typescript@5.8.3)
       postcss: 7.0.39
       postcss-flexbugs-fixes: 4.2.1
-      postcss-loader: 4.3.0(postcss@7.0.39)(webpack@5.101.0)
-      raw-loader: 4.0.2(webpack@5.101.0)
+      postcss-loader: 4.3.0(postcss@7.0.39)(webpack@5.102.1)
+      raw-loader: 4.0.2(webpack@5.102.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       stable: 0.1.8
-      style-loader: 1.3.0(webpack@5.101.0)
-      terser-webpack-plugin: 4.2.3(webpack@5.101.0)
+      style-loader: 1.3.0(webpack@5.102.1)
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1)
       ts-dedent: 2.2.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.101.0))(webpack@5.101.0)
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1))(webpack@5.102.1)
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@4.10.0)
-      webpack-dev-middleware: 3.7.3(webpack@5.101.0)
-      webpack-filter-warnings-plugin: 1.2.1(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1)
+      webpack-filter-warnings-plugin: 1.2.1(webpack@5.102.1)
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.2.2
     optionalDependencies:
@@ -27432,7 +31183,7 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/builder-webpack4@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/builder-webpack4@6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)':
     dependencies:
       '@babel/core': 7.27.7
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27442,7 +31193,7 @@ snapshots:
       '@storybook/client-api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/client-logger': 6.5.16
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       '@storybook/core-events': 6.5.16
       '@storybook/node-logger': 6.5.16
       '@storybook/preview-web': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27454,33 +31205,33 @@ snapshots:
       '@types/node': 16.18.126
       '@types/webpack': 4.41.40
       autoprefixer: 9.8.8
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       case-sensitive-paths-webpack-plugin: 2.4.0
-      core-js: 3.45.0
-      css-loader: 3.6.0(webpack@5.101.0)
-      file-loader: 6.2.0(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1)
+      file-loader: 6.2.0(webpack@5.102.1)
       find-up: 5.0.0
       fork-ts-checker-webpack-plugin: 4.1.6
       glob: 7.2.3
       glob-promise: 3.4.0(glob@7.2.3)
       global: 4.4.0
-      html-webpack-plugin: 4.5.2(webpack@5.101.0)
+      html-webpack-plugin: 4.5.2(webpack@5.102.1)
       pnp-webpack-plugin: 1.6.4(typescript@5.8.3)
       postcss: 7.0.39
       postcss-flexbugs-fixes: 4.2.1
-      postcss-loader: 4.3.0(postcss@7.0.39)(webpack@5.101.0)
-      raw-loader: 4.0.2(webpack@5.101.0)
+      postcss-loader: 4.3.0(postcss@7.0.39)(webpack@5.102.1)
+      raw-loader: 4.0.2(webpack@5.102.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       stable: 0.1.8
-      style-loader: 1.3.0(webpack@5.101.0)
-      terser-webpack-plugin: 4.2.3(webpack@5.101.0)
+      style-loader: 1.3.0(webpack@5.102.1)
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1)
       ts-dedent: 2.2.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.101.0))(webpack@5.101.0)
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1))(webpack@5.102.1)
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-dev-middleware: 3.7.3(webpack@5.101.0)
-      webpack-filter-warnings-plugin: 1.2.1(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1)
+      webpack-filter-warnings-plugin: 1.2.1(webpack@5.102.1)
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.2.2
     optionalDependencies:
@@ -27494,7 +31245,7 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/builder-webpack4@6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)':
+  '@storybook/builder-webpack4@6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)':
     dependencies:
       '@babel/core': 7.27.7
       '@storybook/addons': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -27504,7 +31255,7 @@ snapshots:
       '@storybook/client-api': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/client-logger': 6.5.16
       '@storybook/components': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
       '@storybook/core-events': 6.5.16
       '@storybook/node-logger': 6.5.16
       '@storybook/preview-web': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -27516,33 +31267,33 @@ snapshots:
       '@types/node': 16.18.126
       '@types/webpack': 4.41.40
       autoprefixer: 9.8.8
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       case-sensitive-paths-webpack-plugin: 2.4.0
-      core-js: 3.45.0
-      css-loader: 3.6.0(webpack@5.101.0)
-      file-loader: 6.2.0(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1)
+      file-loader: 6.2.0(webpack@5.102.1)
       find-up: 5.0.0
       fork-ts-checker-webpack-plugin: 4.1.6
       glob: 7.2.3
       glob-promise: 3.4.0(glob@7.2.3)
       global: 4.4.0
-      html-webpack-plugin: 4.5.2(webpack@5.101.0)
+      html-webpack-plugin: 4.5.2(webpack@5.102.1)
       pnp-webpack-plugin: 1.6.4(typescript@4.9.5)
       postcss: 7.0.39
       postcss-flexbugs-fixes: 4.2.1
-      postcss-loader: 4.3.0(postcss@7.0.39)(webpack@5.101.0)
-      raw-loader: 4.0.2(webpack@5.101.0)
+      postcss-loader: 4.3.0(postcss@7.0.39)(webpack@5.102.1)
+      raw-loader: 4.0.2(webpack@5.102.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
       stable: 0.1.8
-      style-loader: 1.3.0(webpack@5.101.0)
-      terser-webpack-plugin: 4.2.3(webpack@5.101.0)
+      style-loader: 1.3.0(webpack@5.102.1)
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1)
       ts-dedent: 2.2.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.101.0))(webpack@5.101.0)
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1))(webpack@5.102.1)
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-dev-middleware: 3.7.3(webpack@5.101.0)
-      webpack-filter-warnings-plugin: 1.2.1(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1)
+      webpack-filter-warnings-plugin: 1.2.1(webpack@5.102.1)
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.2.2
     optionalDependencies:
@@ -27556,7 +31307,7 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@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/builder-webpack5@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)':
     dependencies:
       '@babel/core': 7.27.7
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27566,7 +31317,7 @@ snapshots:
       '@storybook/client-api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/client-logger': 6.5.16
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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@4.10.0)
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       '@storybook/core-events': 6.5.16
       '@storybook/node-logger': 6.5.16
       '@storybook/preview-web': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27575,27 +31326,27 @@ snapshots:
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/node': 16.18.126
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       babel-plugin-named-exports-order: 0.0.2
       browser-assert: 1.2.1
       case-sensitive-paths-webpack-plugin: 2.4.0
-      core-js: 3.45.0
-      css-loader: 5.2.7(webpack@5.101.0)
-      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 5.2.7(webpack@5.102.1)
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)(webpack@5.102.1)
       glob: 7.2.3
       glob-promise: 3.4.0(glob@7.2.3)
-      html-webpack-plugin: 5.6.3(webpack@5.101.0)
+      html-webpack-plugin: 5.6.4(webpack@5.102.1)
       path-browserify: 1.0.1
       process: 0.11.10
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       stable: 0.1.8
-      style-loader: 2.0.0(webpack@5.101.0)
-      terser-webpack-plugin: 5.3.14(webpack@5.101.0)
+      style-loader: 2.0.0(webpack@5.102.1)
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@4.10.0)
-      webpack-dev-middleware: 4.3.0(webpack@5.101.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+      webpack-dev-middleware: 4.3.0(webpack@5.102.1)
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.4.6
     optionalDependencies:
@@ -27610,7 +31361,7 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@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/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)':
     dependencies:
       '@babel/core': 7.27.7
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27620,7 +31371,7 @@ snapshots:
       '@storybook/client-api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/client-logger': 6.5.16
       '@storybook/components': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.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/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       '@storybook/core-events': 6.5.16
       '@storybook/node-logger': 6.5.16
       '@storybook/preview-web': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -27629,27 +31380,27 @@ snapshots:
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/node': 16.18.126
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       babel-plugin-named-exports-order: 0.0.2
       browser-assert: 1.2.1
       case-sensitive-paths-webpack-plugin: 2.4.0
-      core-js: 3.45.0
-      css-loader: 5.2.7(webpack@5.101.0)
-      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 5.2.7(webpack@5.102.1)
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)(webpack@5.102.1)
       glob: 7.2.3
       glob-promise: 3.4.0(glob@7.2.3)
-      html-webpack-plugin: 5.6.3(webpack@5.101.0)
+      html-webpack-plugin: 5.6.4(webpack@5.102.1)
       path-browserify: 1.0.1
       process: 0.11.10
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       stable: 0.1.8
-      style-loader: 2.0.0(webpack@5.101.0)
-      terser-webpack-plugin: 5.3.14(webpack@5.101.0)
+      style-loader: 2.0.0(webpack@5.102.1)
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-dev-middleware: 4.3.0(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-dev-middleware: 4.3.0(webpack@5.102.1)
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.4.6
     optionalDependencies:
@@ -27664,6 +31415,67 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
+  '@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@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@5.1.4)':
+    dependencies:
+      '@babel/core': 7.27.7
+      '@storybook/addons': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/channels': 7.4.6
+      '@storybook/client-api': 7.4.6
+      '@storybook/client-logger': 7.4.6
+      '@storybook/components': 7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/core-common': 7.4.6(encoding@0.1.13)
+      '@storybook/core-events': 7.4.6
+      '@storybook/core-webpack': 7.4.6(encoding@0.1.13)
+      '@storybook/global': 5.0.0
+      '@storybook/manager-api': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/node-logger': 7.4.6
+      '@storybook/preview': 7.4.6
+      '@storybook/preview-api': 7.4.6
+      '@storybook/router': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/store': 7.4.6
+      '@storybook/theming': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@swc/core': 1.14.0(@swc/helpers@0.5.17)
+      '@types/node': 16.18.126
+      '@types/semver': 7.7.1
+      babel-loader: 9.2.1(@babel/core@7.27.7)(webpack@5.102.1)
+      babel-plugin-named-exports-order: 0.0.2
+      browser-assert: 1.2.1
+      case-sensitive-paths-webpack-plugin: 2.4.0
+      constants-browserify: 1.0.0
+      css-loader: 6.11.0(webpack@5.102.1)
+      express: 4.21.2
+      fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.8.3)(webpack@5.102.1)
+      fs-extra: 11.3.2
+      html-webpack-plugin: 5.6.4(webpack@5.102.1)
+      path-browserify: 1.0.1
+      process: 0.11.10
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      semver: 7.7.3
+      style-loader: 3.3.4(webpack@5.102.1)
+      swc-loader: 0.2.6(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      ts-dedent: 2.2.0
+      url: 0.11.4
+      util: 0.12.5
+      util-deprecate: 1.0.2
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@5.1.4)
+      webpack-dev-middleware: 6.1.3(webpack@5.102.1)
+      webpack-hot-middleware: 2.26.1
+      webpack-virtual-modules: 0.5.0
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - '@swc/helpers'
+      - '@types/react'
+      - '@types/react-dom'
+      - encoding
+      - esbuild
+      - supports-color
+      - uglify-js
+      - webpack-cli
+
   '@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)':
     dependencies:
       '@babel/core': 7.27.7
@@ -27683,33 +31495,33 @@ snapshots:
       '@storybook/router': 7.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/store': 7.4.6
       '@storybook/theming': 7.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@swc/core': 1.13.3(@swc/helpers@0.5.17)
+      '@swc/core': 1.14.0(@swc/helpers@0.5.17)
       '@types/node': 16.18.126
-      '@types/semver': 7.7.0
-      babel-loader: 9.2.1(@babel/core@7.27.7)(webpack@5.101.0)
+      '@types/semver': 7.7.1
+      babel-loader: 9.2.1(@babel/core@7.27.7)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       babel-plugin-named-exports-order: 0.0.2
       browser-assert: 1.2.1
       case-sensitive-paths-webpack-plugin: 2.4.0
       constants-browserify: 1.0.0
-      css-loader: 6.11.0(webpack@5.101.0)
+      css-loader: 6.11.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       express: 4.21.2
-      fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.8.3)(webpack@5.101.0)
-      fs-extra: 11.3.1
-      html-webpack-plugin: 5.6.3(webpack@5.101.0)
+      fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      fs-extra: 11.3.2
+      html-webpack-plugin: 5.6.4(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       path-browserify: 1.0.1
       process: 0.11.10
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      semver: 7.7.2
-      style-loader: 3.3.4(webpack@5.101.0)
-      swc-loader: 0.2.6(@swc/core@1.13.3(@swc/helpers@0.5.17))(webpack@5.101.0)
-      terser-webpack-plugin: 5.3.14(@swc/core@1.13.3(@swc/helpers@0.5.17))(webpack@5.101.0)
+      semver: 7.7.3
+      style-loader: 3.3.4(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      swc-loader: 0.2.6(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       ts-dedent: 2.2.0
       url: 0.11.4
       util: 0.12.5
       util-deprecate: 1.0.2
-      webpack: 5.101.0(@swc/core@1.13.3(@swc/helpers@0.5.17))
-      webpack-dev-middleware: 6.1.3(webpack@5.101.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+      webpack-dev-middleware: 6.1.3(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.5.0
     optionalDependencies:
@@ -27725,31 +31537,31 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/builder-webpack5@8.6.14(storybook@8.6.14(prettier@3.5.3))(typescript@5.8.3)':
+  '@storybook/builder-webpack5@8.6.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(storybook@8.6.14(prettier@3.5.3))(typescript@5.8.3)':
     dependencies:
       '@storybook/core-webpack': 8.6.14(storybook@8.6.14(prettier@3.5.3))
-      '@types/semver': 7.7.0
+      '@types/semver': 7.7.1
       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)
+      css-loader: 6.11.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       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
+      fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      html-webpack-plugin: 5.6.4(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      magic-string: 0.30.21
       path-browserify: 1.0.1
       process: 0.11.10
-      semver: 7.7.2
+      semver: 7.7.3
       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)
+      style-loader: 3.3.4(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       ts-dedent: 2.2.0
       url: 0.11.4
       util: 0.12.5
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-dev-middleware: 6.1.3(webpack@5.101.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+      webpack-dev-middleware: 6.1.3(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.6.2
     optionalDependencies:
@@ -27761,31 +31573,31 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/builder-webpack5@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@5.1.4)':
+  '@storybook/builder-webpack5@8.6.14(storybook@9.1.16(@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.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@types/semver': 7.7.0
+      '@storybook/core-webpack': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@types/semver': 7.7.1
       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)
+      css-loader: 6.11.0(webpack@5.102.1)
       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
+      fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.8.3)(webpack@5.102.1)
+      html-webpack-plugin: 5.6.4(webpack@5.102.1)
+      magic-string: 0.30.21
       path-browserify: 1.0.1
       process: 0.11.10
-      semver: 7.7.2
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
-      style-loader: 3.3.4(webpack@5.101.0)
-      terser-webpack-plugin: 5.3.14(webpack@5.101.0)
+      semver: 7.7.3
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      style-loader: 3.3.4(webpack@5.102.1)
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       ts-dedent: 2.2.0
       url: 0.11.4
       util: 0.12.5
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-dev-middleware: 6.1.3(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@5.1.4)
+      webpack-dev-middleware: 6.1.3(webpack@5.102.1)
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.6.2
     optionalDependencies:
@@ -27802,7 +31614,7 @@ snapshots:
       '@storybook/channels': 6.5.16
       '@storybook/client-logger': 6.5.16
       '@storybook/core-events': 6.5.16
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       qs: 6.14.0
       telejson: 6.0.8
@@ -27811,13 +31623,13 @@ snapshots:
     dependencies:
       '@storybook/channels': 6.5.16
       '@storybook/client-logger': 6.5.16
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       telejson: 6.0.8
 
   '@storybook/channels@6.5.16':
     dependencies:
-      core-js: 3.45.0
+      core-js: 3.46.0
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
 
@@ -27843,7 +31655,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.27.7
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
       '@ndelangen/get-tarball': 3.0.9
       '@storybook/codemod': 7.6.20
       '@storybook/core-common': 7.6.20(encoding@0.1.13)
@@ -27853,18 +31665,18 @@ snapshots:
       '@storybook/node-logger': 7.6.20
       '@storybook/telemetry': 7.6.20(encoding@0.1.13)
       '@storybook/types': 7.6.20
-      '@types/semver': 7.7.0
+      '@types/semver': 7.7.1
       '@yarnpkg/fslib': 2.10.3
       '@yarnpkg/libzip': 2.3.0
       chalk: 4.1.2
       commander: 6.2.1
       cross-spawn: 7.0.6
       detect-indent: 6.1.0
-      envinfo: 7.14.0
+      envinfo: 7.20.0
       execa: 5.1.1
       express: 4.21.2
       find-up: 5.0.0
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       get-npm-tarball-url: 2.1.0
       get-port: 5.1.1
       giget: 1.2.5
@@ -27876,12 +31688,13 @@ snapshots:
       prompts: 2.4.2
       puppeteer-core: 2.1.1
       read-pkg-up: 7.0.1
-      semver: 7.7.2
+      semver: 7.7.3
       strip-json-comments: 3.1.1
       tempy: 1.0.1
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - bufferutil
       - encoding
@@ -27889,15 +31702,15 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/cli@9.1.1(@babel/preset-env@7.27.2(@babel/core@7.27.7))(@testing-library/dom@10.4.1)(prettier@3.5.3)':
+  '@storybook/cli@9.1.16(@babel/preset-env@7.27.2(@babel/core@7.28.5))(@testing-library/dom@10.4.1)(prettier@3.5.3)':
     dependencies:
-      '@storybook/codemod': 9.1.1(@babel/preset-env@7.27.2(@babel/core@7.27.7))(@testing-library/dom@10.4.1)
-      '@types/semver': 7.7.0
+      '@storybook/codemod': 9.1.16(@babel/preset-env@7.27.2(@babel/core@7.28.5))(@testing-library/dom@10.4.1)
+      '@types/semver': 7.7.1
       commander: 12.1.0
-      create-storybook: 9.1.1
+      create-storybook: 9.1.16
       giget: 1.2.5
-      jscodeshift: 0.15.2(@babel/preset-env@7.27.2(@babel/core@7.27.7))
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      jscodeshift: 0.15.2(@babel/preset-env@7.27.2(@babel/core@7.28.5))
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@babel/preset-env'
@@ -27920,7 +31733,7 @@ snapshots:
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/qs': 6.14.0
       '@types/webpack-env': 1.18.8
-      core-js: 3.45.0
+      core-js: 3.46.0
       fast-deep-equal: 3.1.3
       global: 4.4.0
       lodash: 4.17.21
@@ -27945,7 +31758,7 @@ snapshots:
       '@storybook/store': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@types/qs': 6.14.0
       '@types/webpack-env': 1.18.8
-      core-js: 3.45.0
+      core-js: 3.46.0
       fast-deep-equal: 3.1.3
       global: 4.4.0
       lodash: 4.17.21
@@ -27966,7 +31779,7 @@ snapshots:
 
   '@storybook/client-logger@6.5.16':
     dependencies:
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
 
   '@storybook/client-logger@7.4.6':
@@ -27981,7 +31794,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.27.7
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
       '@storybook/csf': 0.1.13
       '@storybook/csf-tools': 7.6.20
       '@storybook/node-logger': 7.6.20
@@ -27996,15 +31809,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@storybook/codemod@9.1.1(@babel/preset-env@7.27.2(@babel/core@7.27.7))(@testing-library/dom@10.4.1)':
+  '@storybook/codemod@9.1.16(@babel/preset-env@7.27.2(@babel/core@7.28.5))(@testing-library/dom@10.4.1)':
     dependencies:
       '@types/cross-spawn': 6.0.6
       cross-spawn: 7.0.6
-      es-toolkit: 1.39.8
+      es-toolkit: 1.41.0
       globby: 14.1.0
-      jscodeshift: 0.15.2(@babel/preset-env@7.27.2(@babel/core@7.27.7))
+      jscodeshift: 0.15.2(@babel/preset-env@7.27.2(@babel/core@7.28.5))
       prettier: 3.5.3
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       tiny-invariant: 1.3.3
     transitivePeerDependencies:
       - '@babel/preset-env'
@@ -28020,7 +31833,7 @@ snapshots:
       '@storybook/client-logger': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       memoizerific: 1.11.3
       qs: 6.14.0
       react: 18.2.0
@@ -28033,7 +31846,7 @@ snapshots:
       '@storybook/client-logger': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/theming': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       memoizerific: 1.11.3
       qs: 6.14.0
       react: 19.1.0
@@ -28041,10 +31854,28 @@ snapshots:
       regenerator-runtime: 0.13.11
       util-deprecate: 1.0.2
 
+  '@storybook/components@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-select': 1.2.2(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toolbar': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/client-logger': 7.4.6
+      '@storybook/csf': 0.1.13
+      '@storybook/global': 5.0.0
+      '@storybook/theming': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/types': 7.4.6
+      memoizerific: 1.11.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      use-resize-observer: 9.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      util-deprecate: 1.0.2
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   '@storybook/components@7.4.6(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-select': 1.2.2(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-toolbar': 1.1.10(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toolbar': 1.1.11(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/client-logger': 7.4.6
       '@storybook/csf': 0.1.13
       '@storybook/global': 5.0.0
@@ -28063,11 +31894,39 @@ snapshots:
     dependencies:
       storybook: 8.6.14(prettier@3.5.3)
 
-  '@storybook/components@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/components@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+    dependencies:
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
+
+  '@storybook/core-client@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))':
     dependencies:
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/channel-postmessage': 6.5.16
+      '@storybook/channel-websocket': 6.5.16
+      '@storybook/client-api': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/client-logger': 6.5.16
+      '@storybook/core-events': 6.5.16
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/preview-web': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/ui': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      airbnb-js-shims: 2.2.1
+      ansi-to-html: 0.6.15
+      core-js: 3.46.0
+      global: 4.4.0
+      lodash: 4.17.21
+      qs: 6.14.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      regenerator-runtime: 0.13.11
+      ts-dedent: 2.2.0
+      unfetch: 4.2.0
+      util-deprecate: 1.0.2
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+    optionalDependencies:
+      typescript: 5.8.3
 
-  '@storybook/core-client@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.101.0)':
+  '@storybook/core-client@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)':
     dependencies:
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/channel-postmessage': 6.5.16
@@ -28081,7 +31940,7 @@ snapshots:
       '@storybook/ui': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       airbnb-js-shims: 2.2.1
       ansi-to-html: 0.6.15
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       lodash: 4.17.21
       qs: 6.14.0
@@ -28091,11 +31950,11 @@ snapshots:
       ts-dedent: 2.2.0
       unfetch: 4.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
     optionalDependencies:
       typescript: 5.8.3
 
-  '@storybook/core-client@6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)(webpack@5.101.0)':
+  '@storybook/core-client@6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)(webpack@5.102.1)':
     dependencies:
       '@storybook/addons': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/channel-postmessage': 6.5.16
@@ -28109,7 +31968,7 @@ snapshots:
       '@storybook/ui': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       airbnb-js-shims: 2.2.1
       ansi-to-html: 0.6.15
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       lodash: 4.17.21
       qs: 6.14.0
@@ -28119,7 +31978,7 @@ snapshots:
       ts-dedent: 2.2.0
       unfetch: 4.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
       typescript: 4.9.5
 
@@ -28128,7 +31987,72 @@ snapshots:
       '@storybook/client-logger': 7.4.6
       '@storybook/preview-api': 7.4.6
 
-  '@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/core-common@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
+    dependencies:
+      '@babel/core': 7.27.7
+      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.27.7)
+      '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.27.7)
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.27.7)
+      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.27.7)
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.27.7)
+      '@babel/plugin-proposal-private-methods': 7.18.6(@babel/core@7.27.7)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.11(@babel/core@7.27.7)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.27.7)
+      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.27.7)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.27.7)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.27.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.27.7)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.27.7)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.27.7)
+      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.27.7)
+      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.27.7)
+      '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
+      '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
+      '@babel/preset-typescript': 7.27.1(@babel/core@7.27.7)
+      '@babel/register': 7.28.3(@babel/core@7.27.7)
+      '@storybook/node-logger': 6.5.16
+      '@storybook/semver': 7.3.2
+      '@types/node': 16.18.126
+      '@types/pretty-hrtime': 1.0.3
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      babel-plugin-macros: 3.1.0
+      babel-plugin-polyfill-corejs3: 0.1.7(@babel/core@7.27.7)
+      chalk: 4.1.2
+      core-js: 3.46.0
+      express: 4.21.2
+      file-system-cache: 1.1.0
+      find-up: 5.0.0
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      fs-extra: 9.1.0
+      glob: 7.2.3
+      handlebars: 4.7.8
+      interpret: 2.2.0
+      json5: 2.2.3
+      lazy-universal-dotenv: 3.0.1
+      picomatch: 2.3.1
+      pkg-dir: 5.0.0
+      pretty-hrtime: 1.0.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      resolve-from: 5.0.0
+      slash: 3.0.0
+      telejson: 6.0.8
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - eslint
+      - supports-color
+      - uglify-js
+      - vue-template-compiler
+      - webpack-cli
+
+  '@storybook/core-common@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.27.7)
@@ -28141,9 +32065,9 @@ snapshots:
       '@babel/plugin-proposal-private-property-in-object': 7.21.11(@babel/core@7.27.7)
       '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.27.7)
       '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.27.7)
-      '@babel/plugin-transform-classes': 7.28.0(@babel/core@7.27.7)
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.27.7)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.27.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.27.7)
       '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.27.7)
@@ -28151,20 +32075,20 @@ snapshots:
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
       '@babel/preset-react': 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/register': 7.28.3(@babel/core@7.27.7)
       '@storybook/node-logger': 6.5.16
       '@storybook/semver': 7.3.2
       '@types/node': 16.18.126
       '@types/pretty-hrtime': 1.0.3
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       babel-plugin-macros: 3.1.0
       babel-plugin-polyfill-corejs3: 0.1.7(@babel/core@7.27.7)
       chalk: 4.1.2
-      core-js: 3.45.0
+      core-js: 3.46.0
       express: 4.21.2
       file-system-cache: 1.1.0
       find-up: 5.0.0
-      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)(webpack@5.101.0)
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)(webpack@5.102.1)
       fs-extra: 9.1.0
       glob: 7.2.3
       handlebars: 4.7.8
@@ -28181,7 +32105,7 @@ snapshots:
       telejson: 6.0.8
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -28193,7 +32117,7 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@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/core-common@6.5.16(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.27.7)
@@ -28206,9 +32130,9 @@ snapshots:
       '@babel/plugin-proposal-private-property-in-object': 7.21.11(@babel/core@7.27.7)
       '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.27.7)
       '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.27.7)
-      '@babel/plugin-transform-classes': 7.28.0(@babel/core@7.27.7)
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.27.7)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.27.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.27.7)
       '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.27.7)
@@ -28216,20 +32140,20 @@ snapshots:
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
       '@babel/preset-react': 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/register': 7.28.3(@babel/core@7.27.7)
       '@storybook/node-logger': 6.5.16
       '@storybook/semver': 7.3.2
       '@types/node': 16.18.126
       '@types/pretty-hrtime': 1.0.3
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       babel-plugin-macros: 3.1.0
       babel-plugin-polyfill-corejs3: 0.1.7(@babel/core@7.27.7)
       chalk: 4.1.2
-      core-js: 3.45.0
+      core-js: 3.46.0
       express: 4.21.2
       file-system-cache: 1.1.0
       find-up: 5.0.0
-      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)(webpack@5.101.0)
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)(webpack@5.102.1)
       fs-extra: 9.1.0
       glob: 7.2.3
       handlebars: 4.7.8
@@ -28246,7 +32170,7 @@ snapshots:
       telejson: 6.0.8
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -28258,7 +32182,7 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@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@4.10.0)':
+  '@storybook/core-common@6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.27.7)
@@ -28271,9 +32195,9 @@ snapshots:
       '@babel/plugin-proposal-private-property-in-object': 7.21.11(@babel/core@7.27.7)
       '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.27.7)
       '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.27.7)
-      '@babel/plugin-transform-classes': 7.28.0(@babel/core@7.27.7)
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.27.7)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.27.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.27.7)
       '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.27.7)
@@ -28281,20 +32205,20 @@ snapshots:
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
       '@babel/preset-react': 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/register': 7.28.3(@babel/core@7.27.7)
       '@storybook/node-logger': 6.5.16
       '@storybook/semver': 7.3.2
       '@types/node': 16.18.126
       '@types/pretty-hrtime': 1.0.3
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       babel-plugin-macros: 3.1.0
       babel-plugin-polyfill-corejs3: 0.1.7(@babel/core@7.27.7)
       chalk: 4.1.2
-      core-js: 3.45.0
+      core-js: 3.46.0
       express: 4.21.2
       file-system-cache: 1.1.0
       find-up: 5.0.0
-      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)(webpack@5.101.0)
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)(webpack@5.102.1)
       fs-extra: 9.1.0
       glob: 7.2.3
       handlebars: 4.7.8
@@ -28311,7 +32235,7 @@ snapshots:
       telejson: 6.0.8
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@4.10.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -28323,7 +32247,7 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@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/core-common@6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.27.7)
@@ -28336,9 +32260,9 @@ snapshots:
       '@babel/plugin-proposal-private-property-in-object': 7.21.11(@babel/core@7.27.7)
       '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.27.7)
       '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.27.7)
-      '@babel/plugin-transform-classes': 7.28.0(@babel/core@7.27.7)
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.27.7)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.27.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.27.7)
       '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.27.7)
@@ -28346,20 +32270,20 @@ snapshots:
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
       '@babel/preset-react': 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/register': 7.28.3(@babel/core@7.27.7)
       '@storybook/node-logger': 6.5.16
       '@storybook/semver': 7.3.2
       '@types/node': 16.18.126
       '@types/pretty-hrtime': 1.0.3
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       babel-plugin-macros: 3.1.0
       babel-plugin-polyfill-corejs3: 0.1.7(@babel/core@7.27.7)
       chalk: 4.1.2
-      core-js: 3.45.0
+      core-js: 3.46.0
       express: 4.21.2
       file-system-cache: 1.1.0
       find-up: 5.0.0
-      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)(webpack@5.101.0)
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)(webpack@5.102.1)
       fs-extra: 9.1.0
       glob: 7.2.3
       handlebars: 4.7.8
@@ -28376,7 +32300,7 @@ snapshots:
       telejson: 6.0.8
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -28388,7 +32312,7 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/core-common@6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)':
+  '@storybook/core-common@6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.27.7)
@@ -28401,9 +32325,9 @@ snapshots:
       '@babel/plugin-proposal-private-property-in-object': 7.21.11(@babel/core@7.27.7)
       '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.27.7)
       '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.27.7)
-      '@babel/plugin-transform-classes': 7.28.0(@babel/core@7.27.7)
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.27.7)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.27.7)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.27.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.27.7)
       '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.27.7)
       '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.27.7)
@@ -28411,20 +32335,20 @@ snapshots:
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
       '@babel/preset-react': 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/register': 7.28.3(@babel/core@7.27.7)
       '@storybook/node-logger': 6.5.16
       '@storybook/semver': 7.3.2
       '@types/node': 16.18.126
       '@types/pretty-hrtime': 1.0.3
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       babel-plugin-macros: 3.1.0
       babel-plugin-polyfill-corejs3: 0.1.7(@babel/core@7.27.7)
       chalk: 4.1.2
-      core-js: 3.45.0
+      core-js: 3.46.0
       express: 4.21.2
       file-system-cache: 1.1.0
       find-up: 5.0.0
-      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.5.1))(typescript@4.9.5)(webpack@5.101.0)
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.27.0(jiti@2.6.1))(typescript@4.9.5)(webpack@5.102.1)
       fs-extra: 9.1.0
       glob: 7.2.3
       handlebars: 4.7.8
@@ -28441,7 +32365,7 @@ snapshots:
       telejson: 6.0.8
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
@@ -28463,16 +32387,16 @@ snapshots:
       '@types/node-fetch': 2.6.13
       '@types/pretty-hrtime': 1.0.3
       chalk: 4.1.2
-      esbuild: 0.25.8
-      esbuild-register: 3.6.0(esbuild@0.25.8)
+      esbuild: 0.25.12
+      esbuild-register: 3.6.0(esbuild@0.25.12)
       file-system-cache: 2.3.0
       find-cache-dir: 3.3.2
       find-up: 5.0.0
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       glob: 10.4.5
       handlebars: 4.7.8
       lazy-universal-dotenv: 4.0.0
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.6.13(encoding@0.1.13)
       picomatch: 2.3.1
       pkg-dir: 5.0.0
       pretty-hrtime: 1.0.3
@@ -28488,20 +32412,20 @@ snapshots:
       '@storybook/node-logger': 7.6.20
       '@storybook/types': 7.6.20
       '@types/find-cache-dir': 3.2.1
-      '@types/node': 18.19.121
+      '@types/node': 18.19.130
       '@types/node-fetch': 2.6.13
       '@types/pretty-hrtime': 1.0.3
       chalk: 4.1.2
-      esbuild: 0.25.8
-      esbuild-register: 3.6.0(esbuild@0.25.8)
+      esbuild: 0.25.12
+      esbuild-register: 3.6.0(esbuild@0.25.12)
       file-system-cache: 2.3.0
       find-cache-dir: 3.3.2
       find-up: 5.0.0
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       glob: 10.4.5
       handlebars: 4.7.8
       lazy-universal-dotenv: 4.0.0
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.6.13(encoding@0.1.13)
       picomatch: 2.3.1
       pkg-dir: 5.0.0
       pretty-hrtime: 1.0.3
@@ -28513,7 +32437,7 @@ snapshots:
 
   '@storybook/core-events@6.5.16':
     dependencies:
-      core-js: 3.45.0
+      core-js: 3.46.0
 
   '@storybook/core-events@7.4.6':
     dependencies:
@@ -28523,20 +32447,20 @@ snapshots:
     dependencies:
       ts-dedent: 2.2.0
 
-  '@storybook/core-server@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@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))(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)':
+  '@storybook/core-server@6.5.16(@storybook/builder-webpack5@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)':
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@storybook/builder-webpack4': 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/core-client': 6.5.16(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)(webpack-cli@4.10.0)
+      '@storybook/builder-webpack4': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       '@storybook/core-events': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/csf-tools': 6.5.16
-      '@storybook/manager-webpack4': 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)
+      '@storybook/manager-webpack4': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       '@storybook/node-logger': 6.5.16
       '@storybook/semver': 7.3.2
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/telemetry': 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)
+      '@storybook/telemetry': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       '@types/node': 16.18.126
       '@types/node-fetch': 2.6.13
       '@types/pretty-hrtime': 1.0.3
@@ -28547,7 +32471,7 @@ snapshots:
       cli-table3: 0.6.5
       commander: 6.2.1
       compression: 1.8.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       cpy: 8.1.2
       detect-port: 1.6.1
       express: 4.21.2
@@ -28556,7 +32480,7 @@ snapshots:
       globby: 11.1.0
       ip: 2.0.1
       lodash: 4.17.21
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.6.13(encoding@0.1.13)
       open: 8.4.2
       pretty-hrtime: 1.0.3
       prompts: 2.4.2
@@ -28569,12 +32493,12 @@ snapshots:
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
       watchpack: 2.4.4
-      webpack: 5.101.0(webpack-cli@4.10.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
       ws: 8.18.3
       x-default-browser: 0.4.0
     optionalDependencies:
-      '@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)
+      '@storybook/builder-webpack5': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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'
@@ -28589,20 +32513,20 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/core-server@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)':
+  '@storybook/core-server@6.5.16(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.6.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.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)':
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@storybook/builder-webpack4': 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/core-client': 6.5.16(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)(webpack-cli@6.0.1)
+      '@storybook/builder-webpack4': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       '@storybook/core-events': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/csf-tools': 6.5.16
-      '@storybook/manager-webpack4': 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/manager-webpack4': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       '@storybook/node-logger': 6.5.16
       '@storybook/semver': 7.3.2
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/telemetry': 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/telemetry': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       '@types/node': 16.18.126
       '@types/node-fetch': 2.6.13
       '@types/pretty-hrtime': 1.0.3
@@ -28613,7 +32537,7 @@ snapshots:
       cli-table3: 0.6.5
       commander: 6.2.1
       compression: 1.8.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       cpy: 8.1.2
       detect-port: 1.6.1
       express: 4.21.2
@@ -28622,7 +32546,7 @@ snapshots:
       globby: 11.1.0
       ip: 2.0.1
       lodash: 4.17.21
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.6.13(encoding@0.1.13)
       open: 8.4.2
       pretty-hrtime: 1.0.3
       prompts: 2.4.2
@@ -28635,12 +32559,12 @@ snapshots:
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
       watchpack: 2.4.4
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@4.10.0)
       ws: 8.18.3
       x-default-browser: 0.4.0
     optionalDependencies:
-      '@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)
+      '@storybook/builder-webpack5': 6.5.16(eslint@9.27.0(jiti@2.6.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.6.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'
@@ -28655,20 +32579,20 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/core-server@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)':
+  '@storybook/core-server@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@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)
-      '@storybook/core-client': 6.5.16(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/builder-webpack4': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@storybook/core-events': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/csf-tools': 6.5.16
-      '@storybook/manager-webpack4': 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)
+      '@storybook/manager-webpack4': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@storybook/node-logger': 6.5.16
       '@storybook/semver': 7.3.2
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/telemetry': 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)
+      '@storybook/telemetry': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@types/node': 16.18.126
       '@types/node-fetch': 2.6.13
       '@types/pretty-hrtime': 1.0.3
@@ -28679,7 +32603,7 @@ snapshots:
       cli-table3: 0.6.5
       commander: 6.2.1
       compression: 1.8.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       cpy: 8.1.2
       detect-port: 1.6.1
       express: 4.21.2
@@ -28688,7 +32612,7 @@ snapshots:
       globby: 11.1.0
       ip: 2.0.1
       lodash: 4.17.21
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.6.13(encoding@0.1.13)
       open: 8.4.2
       pretty-hrtime: 1.0.3
       prompts: 2.4.2
@@ -28701,7 +32625,7 @@ snapshots:
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
       watchpack: 2.4.4
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
       ws: 8.18.3
       x-default-browser: 0.4.0
     optionalDependencies:
@@ -28719,20 +32643,20 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/core-server@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)':
+  '@storybook/core-server@6.5.16(encoding@0.1.13)(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@storybook/builder-webpack4': 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/core-client': 6.5.16(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/builder-webpack4': 6.5.16(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@storybook/core-events': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/csf-tools': 6.5.16
-      '@storybook/manager-webpack4': 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)
+      '@storybook/manager-webpack4': 6.5.16(encoding@0.1.13)(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@storybook/node-logger': 6.5.16
       '@storybook/semver': 7.3.2
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/telemetry': 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)
+      '@storybook/telemetry': 6.5.16(encoding@0.1.13)(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@types/node': 16.18.126
       '@types/node-fetch': 2.6.13
       '@types/pretty-hrtime': 1.0.3
@@ -28743,7 +32667,7 @@ snapshots:
       cli-table3: 0.6.5
       commander: 6.2.1
       compression: 1.8.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       cpy: 8.1.2
       detect-port: 1.6.1
       express: 4.21.2
@@ -28752,7 +32676,7 @@ snapshots:
       globby: 11.1.0
       ip: 2.0.1
       lodash: 4.17.21
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.6.13(encoding@0.1.13)
       open: 8.4.2
       pretty-hrtime: 1.0.3
       prompts: 2.4.2
@@ -28765,7 +32689,7 @@ snapshots:
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
       watchpack: 2.4.4
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@4.10.0)
       ws: 8.18.3
       x-default-browser: 0.4.0
     optionalDependencies:
@@ -28783,20 +32707,84 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/core-server@6.5.16(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)(typescript@4.9.5)':
+  '@storybook/core-server@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@storybook/builder-webpack4': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
-      '@storybook/core-client': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)(webpack@5.101.0)
-      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
+      '@storybook/builder-webpack4': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@storybook/core-events': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/csf-tools': 6.5.16
-      '@storybook/manager-webpack4': 6.5.16(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)(typescript@4.9.5)
+      '@storybook/manager-webpack4': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      '@storybook/node-logger': 6.5.16
+      '@storybook/semver': 7.3.2
+      '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/telemetry': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      '@types/node': 16.18.126
+      '@types/node-fetch': 2.6.13
+      '@types/pretty-hrtime': 1.0.3
+      '@types/webpack': 4.41.40
+      better-opn: 2.1.1
+      boxen: 5.1.2
+      chalk: 4.1.2
+      cli-table3: 0.6.5
+      commander: 6.2.1
+      compression: 1.8.1
+      core-js: 3.46.0
+      cpy: 8.1.2
+      detect-port: 1.6.1
+      express: 4.21.2
+      fs-extra: 9.1.0
+      global: 4.4.0
+      globby: 11.1.0
+      ip: 2.0.1
+      lodash: 4.17.21
+      node-fetch: 2.6.13(encoding@0.1.13)
+      open: 8.4.2
+      pretty-hrtime: 1.0.3
+      prompts: 2.4.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      regenerator-runtime: 0.13.11
+      serve-favicon: 2.5.1
+      slash: 3.0.0
+      telejson: 6.0.8
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+      watchpack: 2.4.4
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      ws: 8.18.3
+      x-default-browser: 0.4.0
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@storybook/mdx2-csf'
+      - '@swc/core'
+      - bufferutil
+      - encoding
+      - esbuild
+      - eslint
+      - supports-color
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+
+  '@storybook/core-server@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)':
+    dependencies:
+      '@discoveryjs/json-ext': 0.5.7
+      '@storybook/builder-webpack4': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
+      '@storybook/core-client': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
+      '@storybook/core-events': 6.5.16
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/csf-tools': 6.5.16
+      '@storybook/manager-webpack4': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
       '@storybook/node-logger': 6.5.16
       '@storybook/semver': 7.3.2
       '@storybook/store': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@storybook/telemetry': 6.5.16(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)(typescript@4.9.5)
+      '@storybook/telemetry': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
       '@types/node': 16.18.126
       '@types/node-fetch': 2.6.13
       '@types/pretty-hrtime': 1.0.3
@@ -28807,7 +32795,7 @@ snapshots:
       cli-table3: 0.6.5
       commander: 6.2.1
       compression: 1.8.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       cpy: 8.1.2
       detect-port: 1.6.1
       express: 4.21.2
@@ -28816,7 +32804,7 @@ snapshots:
       globby: 11.1.0
       ip: 2.0.1
       lodash: 4.17.21
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.6.13(encoding@0.1.13)
       open: 8.4.2
       pretty-hrtime: 1.0.3
       prompts: 2.4.2
@@ -28829,7 +32817,7 @@ snapshots:
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
       watchpack: 2.4.4
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@4.10.0)
       ws: 8.18.3
       x-default-browser: 0.4.0
     optionalDependencies:
@@ -28865,23 +32853,23 @@ snapshots:
       '@storybook/telemetry': 7.6.20(encoding@0.1.13)
       '@storybook/types': 7.6.20
       '@types/detect-port': 1.3.5
-      '@types/node': 18.19.121
+      '@types/node': 18.19.130
       '@types/pretty-hrtime': 1.0.3
-      '@types/semver': 7.7.0
+      '@types/semver': 7.7.1
       better-opn: 3.0.2
       chalk: 4.1.2
       cli-table3: 0.6.5
       compression: 1.8.1
       detect-port: 1.6.1
       express: 4.21.2
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       globby: 11.1.0
       lodash: 4.17.21
       open: 8.4.2
       pretty-hrtime: 1.0.3
       prompts: 2.4.2
       read-pkg-up: 7.0.1
-      semver: 7.7.2
+      semver: 7.7.3
       telejson: 7.2.0
       tiny-invariant: 1.3.3
       ts-dedent: 2.2.0
@@ -28911,21 +32899,21 @@ snapshots:
       storybook: 8.6.14(prettier@3.5.3)
       ts-dedent: 2.2.0
 
-  '@storybook/core-webpack@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/core-webpack@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
 
-  '@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@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))(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)(webpack@5.101.0)':
+  '@storybook/core@6.5.16(@storybook/builder-webpack5@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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.102.1)':
     dependencies:
-      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.101.0)
-      '@storybook/core-server': 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@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))(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)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-server': 6.5.16(@storybook/builder-webpack5@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      webpack: 5.101.0(webpack-cli@4.10.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
     optionalDependencies:
-      '@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)
+      '@storybook/builder-webpack5': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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'
@@ -28940,16 +32928,16 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@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@6.5.16(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.6.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.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)(webpack@5.102.1)':
     dependencies:
-      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.101.0)
-      '@storybook/core-server': 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)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-server': 6.5.16(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.6.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.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
-      '@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)
+      '@storybook/builder-webpack5': 6.5.16(eslint@9.27.0(jiti@2.6.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.6.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'
@@ -28964,13 +32952,13 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@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@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))':
     dependencies:
-      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.101.0)
-      '@storybook/core-server': 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)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      '@storybook/core-server': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -28986,13 +32974,13 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@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@6.5.16(encoding@0.1.13)(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)':
     dependencies:
-      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.101.0)
-      '@storybook/core-server': 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)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-server': 6.5.16(encoding@0.1.13)(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -29008,13 +32996,35 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/core@6.5.16(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)(typescript@4.9.5)(webpack@5.101.0)':
+  '@storybook/core@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)':
     dependencies:
-      '@storybook/core-client': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)(webpack@5.101.0)
-      '@storybook/core-server': 6.5.16(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)(typescript@4.9.5)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-server': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@storybook/mdx2-csf'
+      - '@swc/core'
+      - bufferutil
+      - encoding
+      - esbuild
+      - eslint
+      - supports-color
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+
+  '@storybook/core@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)(webpack@5.102.1)':
+    dependencies:
+      '@storybook/core-client': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)(webpack@5.102.1)
+      '@storybook/core-server': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
@@ -29035,12 +33045,12 @@ snapshots:
       '@storybook/theming': 8.6.14(storybook@8.6.14(prettier@3.5.3))
       better-opn: 3.0.2
       browser-assert: 1.2.1
-      esbuild: 0.25.8
-      esbuild-register: 3.6.0(esbuild@0.25.8)
-      jsdoc-type-pratt-parser: 4.1.0
+      esbuild: 0.25.12
+      esbuild-register: 3.6.0(esbuild@0.25.12)
+      jsdoc-type-pratt-parser: 4.8.0
       process: 0.11.10
       recast: 0.23.11
-      semver: 7.7.2
+      semver: 7.7.3
       util: 0.12.5
       ws: 8.18.3
     optionalDependencies:
@@ -29063,28 +33073,28 @@ snapshots:
       storybook: 8.6.14(prettier@3.5.3)
       unplugin: 1.16.1
 
-  '@storybook/csf-plugin@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/csf-plugin@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       unplugin: 1.16.1
 
-  '@storybook/csf-plugin@9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/csf-plugin@9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       unplugin: 1.16.1
 
   '@storybook/csf-tools@6.5.16':
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/generator': 7.28.0
-      '@babel/parser': 7.28.0
+      '@babel/generator': 7.28.5
+      '@babel/parser': 7.28.5
       '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.27.7)
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/mdx1-csf': 0.0.1(@babel/core@7.27.7)
-      core-js: 3.45.0
+      core-js: 3.46.0
       fs-extra: 9.1.0
       global: 4.4.0
       regenerator-runtime: 0.13.11
@@ -29094,13 +33104,13 @@ snapshots:
 
   '@storybook/csf-tools@7.4.6':
     dependencies:
-      '@babel/generator': 7.28.0
-      '@babel/parser': 7.28.0
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/generator': 7.28.5
+      '@babel/parser': 7.28.5
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
       '@storybook/csf': 0.1.13
       '@storybook/types': 7.4.6
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       recast: 0.23.11
       ts-dedent: 2.2.0
     transitivePeerDependencies:
@@ -29108,13 +33118,13 @@ snapshots:
 
   '@storybook/csf-tools@7.6.20':
     dependencies:
-      '@babel/generator': 7.28.0
-      '@babel/parser': 7.28.0
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/generator': 7.28.5
+      '@babel/parser': 7.28.5
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
       '@storybook/csf': 0.1.13
       '@storybook/types': 7.6.20
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       recast: 0.23.11
       ts-dedent: 2.2.0
     transitivePeerDependencies:
@@ -29135,7 +33145,7 @@ snapshots:
       '@babel/core': 7.27.7
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       doctrine: 3.0.0
       lodash: 4.17.21
       regenerator-runtime: 0.13.11
@@ -29149,7 +33159,7 @@ snapshots:
       '@babel/core': 7.27.7
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/store': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       doctrine: 3.0.0
       lodash: 4.17.21
       regenerator-runtime: 0.13.11
@@ -29172,12 +33182,12 @@ snapshots:
 
   '@storybook/global@5.0.0': {}
 
-  '@storybook/icons@1.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@storybook/icons@1.6.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@storybook/icons@1.4.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@storybook/icons@1.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
@@ -29188,13 +33198,33 @@ snapshots:
       '@vitest/utils': 2.1.9
       storybook: 8.6.14(prettier@3.5.3)
 
-  '@storybook/instrumenter@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/instrumenter@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       '@storybook/global': 5.0.0
       '@vitest/utils': 2.1.9
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
     optional: true
 
+  '@storybook/manager-api@7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/channels': 7.4.6
+      '@storybook/client-logger': 7.4.6
+      '@storybook/core-events': 7.4.6
+      '@storybook/csf': 0.1.13
+      '@storybook/global': 5.0.0
+      '@storybook/router': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/theming': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/types': 7.4.6
+      dequal: 2.0.3
+      lodash: 4.17.21
+      memoizerific: 1.11.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      semver: 7.7.3
+      store2: 2.14.4
+      telejson: 7.2.0
+      ts-dedent: 2.2.0
+
   '@storybook/manager-api@7.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@storybook/channels': 7.4.6
@@ -29210,7 +33240,7 @@ snapshots:
       memoizerific: 1.11.3
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      semver: 7.7.2
+      semver: 7.7.3
       store2: 2.14.4
       telejson: 7.2.0
       ts-dedent: 2.2.0
@@ -29219,48 +33249,48 @@ snapshots:
     dependencies:
       storybook: 8.6.14(prettier@3.5.3)
 
-  '@storybook/manager-api@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/manager-api@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
 
-  '@storybook/manager-webpack4@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)':
+  '@storybook/manager-webpack4@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.27.7)
       '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/core-client': 6.5.16(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/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@storybook/node-logger': 6.5.16
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/ui': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/node': 16.18.126
       '@types/webpack': 4.41.40
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       case-sensitive-paths-webpack-plugin: 2.4.0
       chalk: 4.1.2
-      core-js: 3.45.0
-      css-loader: 3.6.0(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       express: 4.21.2
-      file-loader: 6.2.0(webpack@5.101.0)
+      file-loader: 6.2.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       find-up: 5.0.0
       fs-extra: 9.1.0
-      html-webpack-plugin: 4.5.2(webpack@5.101.0)
-      node-fetch: 2.7.0(encoding@0.1.13)
+      html-webpack-plugin: 4.5.2(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      node-fetch: 2.6.13(encoding@0.1.13)
       pnp-webpack-plugin: 1.6.4(typescript@5.8.3)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       read-pkg-up: 7.0.1
       regenerator-runtime: 0.13.11
       resolve-from: 5.0.0
-      style-loader: 1.3.0(webpack@5.101.0)
+      style-loader: 1.3.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       telejson: 6.0.8
-      terser-webpack-plugin: 4.2.3(webpack@5.101.0)
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       ts-dedent: 2.2.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.101.0))(webpack@5.101.0)
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))))(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-dev-middleware: 3.7.3(webpack@5.101.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       webpack-virtual-modules: 0.2.2
     optionalDependencies:
       typescript: 5.8.3
@@ -29274,44 +33304,44 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/manager-webpack4@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)':
+  '@storybook/manager-webpack4@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.27.7)
       '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/core-client': 6.5.16(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/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       '@storybook/node-logger': 6.5.16
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/ui': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/node': 16.18.126
       '@types/webpack': 4.41.40
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       case-sensitive-paths-webpack-plugin: 2.4.0
       chalk: 4.1.2
-      core-js: 3.45.0
-      css-loader: 3.6.0(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1)
       express: 4.21.2
-      file-loader: 6.2.0(webpack@5.101.0)
+      file-loader: 6.2.0(webpack@5.102.1)
       find-up: 5.0.0
       fs-extra: 9.1.0
-      html-webpack-plugin: 4.5.2(webpack@5.101.0)
-      node-fetch: 2.7.0(encoding@0.1.13)
+      html-webpack-plugin: 4.5.2(webpack@5.102.1)
+      node-fetch: 2.6.13(encoding@0.1.13)
       pnp-webpack-plugin: 1.6.4(typescript@5.8.3)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       read-pkg-up: 7.0.1
       regenerator-runtime: 0.13.11
       resolve-from: 5.0.0
-      style-loader: 1.3.0(webpack@5.101.0)
+      style-loader: 1.3.0(webpack@5.102.1)
       telejson: 6.0.8
-      terser-webpack-plugin: 4.2.3(webpack@5.101.0)
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1)
       ts-dedent: 2.2.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.101.0))(webpack@5.101.0)
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1))(webpack@5.102.1)
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-dev-middleware: 3.7.3(webpack@5.101.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1)
       webpack-virtual-modules: 0.2.2
     optionalDependencies:
       typescript: 5.8.3
@@ -29325,44 +33355,44 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/manager-webpack4@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)':
+  '@storybook/manager-webpack4@6.5.16(encoding@0.1.13)(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.27.7)
       '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/core-client': 6.5.16(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)(webpack-cli@4.10.0)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@storybook/node-logger': 6.5.16
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/ui': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/node': 16.18.126
       '@types/webpack': 4.41.40
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       case-sensitive-paths-webpack-plugin: 2.4.0
       chalk: 4.1.2
-      core-js: 3.45.0
-      css-loader: 3.6.0(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1)
       express: 4.21.2
-      file-loader: 6.2.0(webpack@5.101.0)
+      file-loader: 6.2.0(webpack@5.102.1)
       find-up: 5.0.0
       fs-extra: 9.1.0
-      html-webpack-plugin: 4.5.2(webpack@5.101.0)
-      node-fetch: 2.7.0(encoding@0.1.13)
+      html-webpack-plugin: 4.5.2(webpack@5.102.1)
+      node-fetch: 2.6.13(encoding@0.1.13)
       pnp-webpack-plugin: 1.6.4(typescript@5.8.3)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       read-pkg-up: 7.0.1
       regenerator-runtime: 0.13.11
       resolve-from: 5.0.0
-      style-loader: 1.3.0(webpack@5.101.0)
+      style-loader: 1.3.0(webpack@5.102.1)
       telejson: 6.0.8
-      terser-webpack-plugin: 4.2.3(webpack@5.101.0)
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1)
       ts-dedent: 2.2.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.101.0))(webpack@5.101.0)
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1))(webpack@5.102.1)
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@4.10.0)
-      webpack-dev-middleware: 3.7.3(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1)
       webpack-virtual-modules: 0.2.2
     optionalDependencies:
       typescript: 5.8.3
@@ -29376,44 +33406,95 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/manager-webpack4@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/manager-webpack4@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.27.7)
       '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/core-client': 6.5.16(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)(webpack-cli@6.0.1)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       '@storybook/node-logger': 6.5.16
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/ui': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/node': 16.18.126
       '@types/webpack': 4.41.40
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       case-sensitive-paths-webpack-plugin: 2.4.0
       chalk: 4.1.2
-      core-js: 3.45.0
-      css-loader: 3.6.0(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1)
       express: 4.21.2
-      file-loader: 6.2.0(webpack@5.101.0)
+      file-loader: 6.2.0(webpack@5.102.1)
       find-up: 5.0.0
       fs-extra: 9.1.0
-      html-webpack-plugin: 4.5.2(webpack@5.101.0)
-      node-fetch: 2.7.0(encoding@0.1.13)
+      html-webpack-plugin: 4.5.2(webpack@5.102.1)
+      node-fetch: 2.6.13(encoding@0.1.13)
+      pnp-webpack-plugin: 1.6.4(typescript@5.8.3)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      read-pkg-up: 7.0.1
+      regenerator-runtime: 0.13.11
+      resolve-from: 5.0.0
+      style-loader: 1.3.0(webpack@5.102.1)
+      telejson: 6.0.8
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1)
+      ts-dedent: 2.2.0
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1))(webpack@5.102.1)
+      util-deprecate: 1.0.2
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1)
+      webpack-virtual-modules: 0.2.2
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - encoding
+      - esbuild
+      - eslint
+      - supports-color
+      - uglify-js
+      - vue-template-compiler
+      - webpack-cli
+
+  '@storybook/manager-webpack4@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)':
+    dependencies:
+      '@babel/core': 7.27.7
+      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.27.7)
+      '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
+      '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
+      '@storybook/node-logger': 6.5.16
+      '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/ui': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@types/node': 16.18.126
+      '@types/webpack': 4.41.40
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
+      case-sensitive-paths-webpack-plugin: 2.4.0
+      chalk: 4.1.2
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1)
+      express: 4.21.2
+      file-loader: 6.2.0(webpack@5.102.1)
+      find-up: 5.0.0
+      fs-extra: 9.1.0
+      html-webpack-plugin: 4.5.2(webpack@5.102.1)
+      node-fetch: 2.6.13(encoding@0.1.13)
       pnp-webpack-plugin: 1.6.4(typescript@5.8.3)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       read-pkg-up: 7.0.1
       regenerator-runtime: 0.13.11
       resolve-from: 5.0.0
-      style-loader: 1.3.0(webpack@5.101.0)
+      style-loader: 1.3.0(webpack@5.102.1)
       telejson: 6.0.8
-      terser-webpack-plugin: 4.2.3(webpack@5.101.0)
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1)
       ts-dedent: 2.2.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.101.0))(webpack@5.101.0)
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1))(webpack@5.102.1)
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-dev-middleware: 3.7.3(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1)
       webpack-virtual-modules: 0.2.2
     optionalDependencies:
       typescript: 5.8.3
@@ -29427,44 +33508,44 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/manager-webpack4@6.5.16(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)(typescript@4.9.5)':
+  '@storybook/manager-webpack4@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.27.7)
       '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
       '@storybook/addons': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@storybook/core-client': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)(webpack@5.101.0)
-      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
+      '@storybook/core-client': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
       '@storybook/node-logger': 6.5.16
       '@storybook/theming': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/ui': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@types/node': 16.18.126
       '@types/webpack': 4.41.40
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       case-sensitive-paths-webpack-plugin: 2.4.0
       chalk: 4.1.2
-      core-js: 3.45.0
-      css-loader: 3.6.0(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 3.6.0(webpack@5.102.1)
       express: 4.21.2
-      file-loader: 6.2.0(webpack@5.101.0)
+      file-loader: 6.2.0(webpack@5.102.1)
       find-up: 5.0.0
       fs-extra: 9.1.0
-      html-webpack-plugin: 4.5.2(webpack@5.101.0)
-      node-fetch: 2.7.0(encoding@0.1.13)
+      html-webpack-plugin: 4.5.2(webpack@5.102.1)
+      node-fetch: 2.6.13(encoding@0.1.13)
       pnp-webpack-plugin: 1.6.4(typescript@4.9.5)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
       read-pkg-up: 7.0.1
       regenerator-runtime: 0.13.11
       resolve-from: 5.0.0
-      style-loader: 1.3.0(webpack@5.101.0)
+      style-loader: 1.3.0(webpack@5.102.1)
       telejson: 6.0.8
-      terser-webpack-plugin: 4.2.3(webpack@5.101.0)
+      terser-webpack-plugin: 4.2.3(webpack@5.102.1)
       ts-dedent: 2.2.0
-      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.101.0))(webpack@5.101.0)
+      url-loader: 4.1.1(file-loader@6.2.0(webpack@5.102.1))(webpack@5.102.1)
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-dev-middleware: 3.7.3(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-dev-middleware: 3.7.3(webpack@5.102.1)
       webpack-virtual-modules: 0.2.2
     optionalDependencies:
       typescript: 4.9.5
@@ -29478,41 +33559,41 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@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)':
+  '@storybook/manager-webpack5@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.27.7)
       '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/core-client': 6.5.16(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)(webpack-cli@4.10.0)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       '@storybook/node-logger': 6.5.16
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/ui': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/node': 16.18.126
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       case-sensitive-paths-webpack-plugin: 2.4.0
       chalk: 4.1.2
-      core-js: 3.45.0
-      css-loader: 5.2.7(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 5.2.7(webpack@5.102.1)
       express: 4.21.2
       find-up: 5.0.0
       fs-extra: 9.1.0
-      html-webpack-plugin: 5.6.3(webpack@5.101.0)
-      node-fetch: 2.7.0(encoding@0.1.13)
+      html-webpack-plugin: 5.6.4(webpack@5.102.1)
+      node-fetch: 2.6.13(encoding@0.1.13)
       process: 0.11.10
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       read-pkg-up: 7.0.1
       regenerator-runtime: 0.13.11
       resolve-from: 5.0.0
-      style-loader: 2.0.0(webpack@5.101.0)
+      style-loader: 2.0.0(webpack@5.102.1)
       telejson: 6.0.8
-      terser-webpack-plugin: 5.3.14(webpack@5.101.0)
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@4.10.0)
-      webpack-dev-middleware: 4.3.0(webpack@5.101.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+      webpack-dev-middleware: 4.3.0(webpack@5.102.1)
       webpack-virtual-modules: 0.4.6
     optionalDependencies:
       typescript: 5.8.3
@@ -29527,41 +33608,41 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@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)':
+  '@storybook/manager-webpack5@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.27.7)
       '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
       '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/core-client': 6.5.16(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)(webpack-cli@6.0.1)
+      '@storybook/core-client': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       '@storybook/node-logger': 6.5.16
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/ui': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/node': 16.18.126
-      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.101.0)
+      babel-loader: 8.4.1(@babel/core@7.27.7)(webpack@5.102.1)
       case-sensitive-paths-webpack-plugin: 2.4.0
       chalk: 4.1.2
-      core-js: 3.45.0
-      css-loader: 5.2.7(webpack@5.101.0)
+      core-js: 3.46.0
+      css-loader: 5.2.7(webpack@5.102.1)
       express: 4.21.2
       find-up: 5.0.0
       fs-extra: 9.1.0
-      html-webpack-plugin: 5.6.3(webpack@5.101.0)
-      node-fetch: 2.7.0(encoding@0.1.13)
+      html-webpack-plugin: 5.6.4(webpack@5.102.1)
+      node-fetch: 2.6.13(encoding@0.1.13)
       process: 0.11.10
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       read-pkg-up: 7.0.1
       regenerator-runtime: 0.13.11
       resolve-from: 5.0.0
-      style-loader: 2.0.0(webpack@5.101.0)
+      style-loader: 2.0.0(webpack@5.102.1)
       telejson: 6.0.8
-      terser-webpack-plugin: 5.3.14(webpack@5.101.0)
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-dev-middleware: 4.3.0(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-dev-middleware: 4.3.0(webpack@5.102.1)
       webpack-virtual-modules: 0.4.6
     optionalDependencies:
       typescript: 5.8.3
@@ -29580,10 +33661,10 @@ snapshots:
 
   '@storybook/mdx1-csf@0.0.1(@babel/core@7.27.7)':
     dependencies:
-      '@babel/generator': 7.28.0
-      '@babel/parser': 7.28.0
+      '@babel/generator': 7.28.5
+      '@babel/parser': 7.28.5
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
       '@mdx-js/mdx': 1.6.22
       '@types/lodash': 4.17.17
       js-string-escape: 1.0.1
@@ -29601,7 +33682,7 @@ snapshots:
     dependencies:
       '@types/npmlog': 4.1.6
       chalk: 4.1.2
-      core-js: 3.45.0
+      core-js: 3.46.0
       npmlog: 5.0.1
       pretty-hrtime: 1.0.3
 
@@ -29611,32 +33692,69 @@ snapshots:
 
   '@storybook/postinstall@6.5.16':
     dependencies:
-      core-js: 3.45.0
+      core-js: 3.46.0
 
   '@storybook/postinstall@7.4.6': {}
 
-  '@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/preset-react-webpack@7.4.6(@babel/core@7.28.5)(@types/webpack@5.28.5(webpack-cli@5.1.4))(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-cli@5.1.4)(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)(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)
+      '@babel/preset-flow': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-react': 7.27.1(@babel/core@7.28.5)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@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.102.1)
+      '@storybook/core-webpack': 7.4.6(encoding@0.1.13)
+      '@storybook/docs-tools': 7.4.6(encoding@0.1.13)
+      '@storybook/node-logger': 7.4.6
+      '@storybook/react': 7.4.6(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.102.1)
+      '@types/node': 16.18.126
+      '@types/semver': 7.7.1
+      babel-plugin-add-react-displayname: 0.0.5
+      babel-plugin-react-docgen: 4.2.1
+      fs-extra: 11.3.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-refresh: 0.11.0
+      semver: 7.7.3
+      webpack: 5.102.1(webpack-cli@5.1.4)
+    optionalDependencies:
+      '@babel/core': 7.28.5
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - '@types/webpack'
+      - encoding
+      - esbuild
+      - sockjs-client
+      - supports-color
+      - type-fest
+      - uglify-js
+      - webpack-cli
+      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
+
+  '@storybook/preset-react-webpack@7.4.6(@babel/core@7.28.5)(@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-hot-middleware@2.26.1)':
+    dependencies:
+      '@babel/preset-flow': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-react': 7.27.1(@babel/core@7.28.5)
+      '@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.102.1))(webpack-hot-middleware@2.26.1)(webpack@5.102.1)
       '@storybook/core-webpack': 7.4.6(encoding@0.1.13)
       '@storybook/docs-tools': 7.4.6(encoding@0.1.13)
       '@storybook/node-logger': 7.4.6
       '@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)
-      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.101.0)
+      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.102.1)
       '@types/node': 16.18.126
-      '@types/semver': 7.7.0
+      '@types/semver': 7.7.1
       babel-plugin-add-react-displayname: 0.0.5
       babel-plugin-react-docgen: 4.2.1
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
       react-refresh: 0.11.0
-      semver: 7.7.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      semver: 7.7.3
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
-      '@babel/core': 7.27.7
+      '@babel/core': 7.28.5
       typescript: 5.8.3
     transitivePeerDependencies:
       - '@swc/core'
@@ -29652,22 +33770,22 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
-  '@storybook/preset-react-webpack@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)':
+  '@storybook/preset-react-webpack@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.3)))(@swc/core@1.14.0(@swc/helpers@0.5.17))(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)':
     dependencies:
       '@storybook/core-webpack': 8.6.14(storybook@8.6.14(prettier@3.5.3))
       '@storybook/react': 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)
-      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.101.0)
-      '@types/semver': 7.7.0
+      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      '@types/semver': 7.7.1
       find-up: 5.0.0
-      magic-string: 0.30.17
+      magic-string: 0.30.21
       react: 18.2.0
       react-docgen: 7.1.1
       react-dom: 18.2.0(react@18.2.0)
-      resolve: 1.22.10
-      semver: 7.7.2
+      resolve: 1.22.11
+      semver: 7.7.3
       storybook: 8.6.14(prettier@3.5.3)
       tsconfig-paths: 4.2.0
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -29678,22 +33796,22 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/preset-react-webpack@8.6.14(@storybook/test@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@5.1.4)':
+  '@storybook/preset-react-webpack@8.6.14(@storybook/test@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.16(@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.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
-      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.101.0)
-      '@types/semver': 7.7.0
+      '@storybook/core-webpack': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
+      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.102.1)
+      '@types/semver': 7.7.1
       find-up: 5.0.0
-      magic-string: 0.30.17
+      magic-string: 0.30.21
       react: 18.2.0
       react-docgen: 7.1.1
       react-dom: 18.2.0(react@18.2.0)
-      resolve: 1.22.10
-      semver: 7.7.2
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      resolve: 1.22.11
+      semver: 7.7.3
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       tsconfig-paths: 4.2.0
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@5.1.4)
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -29742,9 +33860,9 @@ snapshots:
     dependencies:
       storybook: 8.6.14(prettier@3.5.3)
 
-  '@storybook/preview-api@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/preview-api@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
 
   '@storybook/preview-web@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
@@ -29755,7 +33873,7 @@ snapshots:
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       ansi-to-html: 0.6.15
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       lodash: 4.17.21
       qs: 6.14.0
@@ -29776,7 +33894,7 @@ snapshots:
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/store': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       ansi-to-html: 0.6.15
-      core-js: 3.45.0
+      core-js: 3.46.0
       global: 4.4.0
       lodash: 4.17.21
       qs: 6.14.0
@@ -29790,9 +33908,9 @@ snapshots:
 
   '@storybook/preview@7.4.6': {}
 
-  '@storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@4.9.5)(webpack@5.101.0)':
+  '@storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@4.9.5)(webpack@5.102.1)':
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       endent: 2.1.0
       find-cache-dir: 3.3.2
       flat-cache: 3.2.0
@@ -29800,13 +33918,27 @@ snapshots:
       react-docgen-typescript: 2.4.0(typescript@4.9.5)
       tslib: 2.8.1
       typescript: 4.9.5
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))':
+    dependencies:
+      debug: 4.4.3(supports-color@8.1.1)
+      endent: 2.1.0
+      find-cache-dir: 3.3.2
+      flat-cache: 3.2.0
+      micromatch: 4.0.8
+      react-docgen-typescript: 2.4.0(typescript@5.8.3)
+      tslib: 2.8.1
+      typescript: 5.8.3
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
     transitivePeerDependencies:
       - supports-color
 
-  '@storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.101.0)':
+  '@storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.102.1)':
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       endent: 2.1.0
       find-cache-dir: 3.3.2
       flat-cache: 3.2.0
@@ -29814,13 +33946,13 @@ snapshots:
       react-docgen-typescript: 2.4.0(typescript@5.8.3)
       tslib: 2.8.1
       typescript: 5.8.3
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.101.0)':
+  '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))':
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       endent: 2.1.0
       find-cache-dir: 3.3.2
       flat-cache: 3.2.0
@@ -29828,10 +33960,29 @@ snapshots:
       react-docgen-typescript: 2.4.0(typescript@5.8.3)
       tslib: 2.8.1
       typescript: 5.8.3
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
     transitivePeerDependencies:
       - supports-color
 
+  '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.102.1)':
+    dependencies:
+      debug: 4.4.3(supports-color@8.1.1)
+      endent: 2.1.0
+      find-cache-dir: 3.3.2
+      flat-cache: 3.2.0
+      micromatch: 4.0.8
+      react-docgen-typescript: 2.4.0(typescript@5.8.3)
+      tslib: 2.8.1
+      typescript: 5.8.3
+      webpack: 5.102.1(webpack-cli@5.1.4)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@storybook/react-dom-shim@7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   '@storybook/react-dom-shim@7.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       react: 19.1.0
@@ -29843,11 +33994,11 @@ snapshots:
       react-dom: 18.2.0(react@18.2.0)
       storybook: 8.6.14(prettier@3.5.3)
 
-  '@storybook/react-dom-shim@8.6.14(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/react-dom-shim@8.6.14(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
 
   '@storybook/react-dom-shim@8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@8.6.14(prettier@3.5.3))':
     dependencies:
@@ -29855,47 +34006,76 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       storybook: 8.6.14(prettier@3.5.3)
 
-  '@storybook/react-dom-shim@8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/react-dom-shim@8.6.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
 
-  '@storybook/react-dom-shim@9.1.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/react-dom-shim@9.1.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
 
-  '@storybook/react-vite@9.1.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(rollup@4.46.2)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)':
+  '@storybook/react-vite@9.1.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(rollup@4.52.5)(storybook@9.1.16(@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)
-      '@rollup/pluginutils': 5.2.0(rollup@4.46.2)
-      '@storybook/builder-vite': 9.1.1(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/react': 9.1.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@storybook/builder-vite': 9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/react': 9.1.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
       find-up: 7.0.0
-      magic-string: 0.30.17
+      magic-string: 0.30.21
       react: 19.1.0
-      react-docgen: 8.0.0
+      react-docgen: 8.0.2
       react-dom: 19.1.0(react@19.1.0)
-      resolve: 1.22.10
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      resolve: 1.22.11
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
       tsconfig-paths: 4.2.0
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  '@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)':
+  '@storybook/react-webpack5@7.4.6(@babel/core@7.28.5)(@swc/helpers@0.5.17)(@types/react-dom@18.2.0)(@types/react@18.2.0)(@types/webpack@5.28.5(webpack-cli@5.1.4))(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-cli@5.1.4)(webpack-dev-server@5.2.2)(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@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@5.1.4)
+      '@storybook/preset-react-webpack': 7.4.6(@babel/core@7.28.5)(@types/webpack@5.28.5(webpack-cli@5.1.4))(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-cli@5.1.4)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)
+      '@storybook/react': 7.4.6(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      '@types/node': 16.18.126
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@babel/core': 7.28.5
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - '@swc/core'
+      - '@swc/helpers'
+      - '@types/react'
+      - '@types/react-dom'
+      - '@types/webpack'
+      - encoding
+      - esbuild
+      - sockjs-client
+      - supports-color
+      - type-fest
+      - uglify-js
+      - webpack-cli
+      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
+
+  '@storybook/react-webpack5@7.4.6(@babel/core@7.28.5)(@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-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.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/preset-react-webpack': 7.4.6(@babel/core@7.28.5)(@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-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.27.7
+      '@babel/core': 7.28.5
       typescript: 5.8.3
     transitivePeerDependencies:
       - '@rspack/core'
@@ -29915,10 +34095,10 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
-  '@storybook/react-webpack5@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)':
+  '@storybook/react-webpack5@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.3)))(@swc/core@1.14.0(@swc/helpers@0.5.17))(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)':
     dependencies:
-      '@storybook/builder-webpack5': 8.6.14(storybook@8.6.14(prettier@3.5.3))(typescript@5.8.3)
-      '@storybook/preset-react-webpack': 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)
+      '@storybook/builder-webpack5': 8.6.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(storybook@8.6.14(prettier@3.5.3))(typescript@5.8.3)
+      '@storybook/preset-react-webpack': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.3)))(@swc/core@1.14.0(@swc/helpers@0.5.17))(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)
       '@storybook/react': 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)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -29934,14 +34114,14 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/react-webpack5@8.6.14(@storybook/test@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@5.1.4)':
+  '@storybook/react-webpack5@8.6.14(@storybook/test@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@5.1.4)':
     dependencies:
-      '@storybook/builder-webpack5': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@5.1.4)
-      '@storybook/preset-react-webpack': 8.6.14(@storybook/test@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@5.1.4)
-      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
+      '@storybook/builder-webpack5': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@5.1.4)
+      '@storybook/preset-react-webpack': 8.6.14(@storybook/test@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@5.1.4)
+      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -29953,19 +34133,19 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@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@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))(@types/webpack@5.28.5(webpack-cli@4.10.0))(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@4.10.0)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)':
+  '@storybook/react@6.5.16(@babel/core@7.27.7)(@storybook/builder-webpack5@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/webpack@5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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@4.10.0))(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)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17))(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.102.1)
       '@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@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))(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)(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@4.10.0)
+      '@storybook/core': 6.5.16(@storybook/builder-webpack5@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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.102.1)
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.102.1)
       '@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
@@ -29976,7 +34156,7 @@ snapshots:
       acorn-walk: 7.2.0
       babel-plugin-add-react-displayname: 0.0.5
       babel-plugin-react-docgen: 4.2.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       escodegen: 2.1.0
       fs-extra: 9.1.0
       global: 4.4.0
@@ -29992,11 +34172,11 @@ 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.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(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@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)
+      '@storybook/builder-webpack5': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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'
@@ -30017,19 +34197,19 @@ 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)(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.6.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.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0))(@types/webpack@5.28.5(webpack-cli@4.10.0))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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@4.10.0)(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)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@5.28.5(webpack-cli@4.10.0))(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)(webpack@5.102.1)
       '@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/core': 6.5.16(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.6.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.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       '@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/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.102.1)
       '@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
@@ -30040,7 +34220,7 @@ snapshots:
       acorn-walk: 7.2.0
       babel-plugin-add-react-displayname: 0.0.5
       babel-plugin-react-docgen: 4.2.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       escodegen: 2.1.0
       fs-extra: 9.1.0
       global: 4.4.0
@@ -30056,11 +34236,11 @@ snapshots:
       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)
+      webpack: 5.102.1(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@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)
+      '@storybook/builder-webpack5': 6.5.16(eslint@9.27.0(jiti@2.6.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.6.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'
@@ -30081,19 +34261,19 @@ snapshots:
       - 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)':
+  '@storybook/react@6.5.16(@babel/core@7.27.7)(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/webpack@5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17)))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))))(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)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17)))(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))))(webpack-hot-middleware@2.26.1)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       '@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/core': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      '@storybook/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.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/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       '@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
@@ -30104,7 +34284,7 @@ snapshots:
       acorn-walk: 7.2.0
       babel-plugin-add-react-displayname: 0.0.5
       babel-plugin-react-docgen: 4.2.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       escodegen: 2.1.0
       fs-extra: 9.1.0
       global: 4.4.0
@@ -30120,7 +34300,7 @@ snapshots:
       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)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
     optionalDependencies:
       '@babel/core': 7.27.7
       typescript: 5.8.3
@@ -30143,19 +34323,19 @@ snapshots:
       - 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)':
+  '@storybook/react@6.5.16(@babel/core@7.28.5)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.26.0(jiti@2.6.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.102.1))(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)
+      '@babel/preset-flow': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-react': 7.27.1(@babel/core@7.28.5)
+      '@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.102.1))(webpack-hot-middleware@2.26.1)(webpack@5.102.1)
       '@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/core': 6.5.16(encoding@0.1.13)(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.26.0(jiti@2.6.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/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.102.1)
       '@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
@@ -30166,7 +34346,7 @@ snapshots:
       acorn-walk: 7.2.0
       babel-plugin-add-react-displayname: 0.0.5
       babel-plugin-react-docgen: 4.2.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       escodegen: 2.1.0
       fs-extra: 9.1.0
       global: 4.4.0
@@ -30182,9 +34362,9 @@ snapshots:
       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)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
-      '@babel/core': 7.27.7
+      '@babel/core': 7.28.5
       typescript: 5.8.3
     transitivePeerDependencies:
       - '@storybook/mdx2-csf'
@@ -30205,19 +34385,81 @@ snapshots:
       - 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@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)':
+  '@storybook/react@6.5.16(@babel/core@7.28.5)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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.102.1))(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)
+      '@babel/preset-flow': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-react': 7.27.1(@babel/core@7.28.5)
+      '@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.102.1))(webpack-hot-middleware@2.26.1)(webpack@5.102.1)
+      '@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.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.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.102.1)
+      '@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.46.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.102.1(webpack-cli@4.10.0)
+    optionalDependencies:
+      '@babel/core': 7.28.5
+      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.5)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.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.102.1))(webpack-hot-middleware@2.26.1)':
+    dependencies:
+      '@babel/preset-flow': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-react': 7.27.1(@babel/core@7.28.5)
+      '@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.102.1))(webpack-hot-middleware@2.26.1)(webpack@5.102.1)
       '@storybook/addons': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.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@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)(webpack@5.101.0)
-      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
+      '@storybook/core': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)(webpack@5.102.1)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/docs-tools': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/node-logger': 6.5.16
-      '@storybook/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@4.9.5)(webpack@5.101.0)
+      '@storybook/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@4.9.5)(webpack@5.102.1)
       '@storybook/semver': 7.3.2
       '@storybook/store': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@types/estree': 0.0.51
@@ -30228,7 +34470,7 @@ snapshots:
       acorn-walk: 7.2.0
       babel-plugin-add-react-displayname: 0.0.5
       babel-plugin-react-docgen: 4.2.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       escodegen: 2.1.0
       fs-extra: 9.1.0
       global: 4.4.0
@@ -30244,9 +34486,9 @@ snapshots:
       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)
+      webpack: 5.102.1(webpack-cli@4.10.0)
     optionalDependencies:
-      '@babel/core': 7.27.7
+      '@babel/core': 7.28.5
       typescript: 4.9.5
     transitivePeerDependencies:
       - '@storybook/mdx2-csf'
@@ -30267,6 +34509,37 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
+  '@storybook/react@7.4.6(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
+    dependencies:
+      '@storybook/client-logger': 7.4.6
+      '@storybook/core-client': 7.4.6
+      '@storybook/docs-tools': 7.4.6(encoding@0.1.13)
+      '@storybook/global': 5.0.0
+      '@storybook/preview-api': 7.4.6
+      '@storybook/react-dom-shim': 7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/types': 7.4.6
+      '@types/escodegen': 0.0.6
+      '@types/estree': 0.0.51
+      '@types/node': 16.18.126
+      acorn: 7.4.1
+      acorn-jsx: 5.3.2(acorn@7.4.1)
+      acorn-walk: 7.2.0
+      escodegen: 2.1.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: 15.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      ts-dedent: 2.2.0
+      type-fest: 2.19.0
+      util-deprecate: 1.0.2
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@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)':
     dependencies:
       '@storybook/client-logger': 7.4.6
@@ -30313,35 +34586,35 @@ snapshots:
       '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.5.3))
       typescript: 5.8.3
 
-  '@storybook/react@8.6.14(@storybook/test@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)':
+  '@storybook/react@8.6.14(@storybook/test@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)':
     dependencies:
-      '@storybook/components': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/components': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/preview-api': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/react-dom-shim': 8.6.14(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
-      '@storybook/theming': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/manager-api': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/preview-api': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/react-dom-shim': 8.6.14(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/theming': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
     optionalDependencies:
-      '@storybook/test': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/test': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       typescript: 5.8.3
 
-  '@storybook/react@9.1.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)':
+  '@storybook/react@9.1.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/react-dom-shim': 9.1.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
     optionalDependencies:
       typescript: 5.8.3
 
   '@storybook/router@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@storybook/client-logger': 6.5.16
-      core-js: 3.45.0
+      core-js: 3.46.0
       memoizerific: 1.11.3
       qs: 6.14.0
       react: 18.2.0
@@ -30351,13 +34624,21 @@ snapshots:
   '@storybook/router@6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@storybook/client-logger': 6.5.16
-      core-js: 3.45.0
+      core-js: 3.46.0
       memoizerific: 1.11.3
       qs: 6.14.0
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
       regenerator-runtime: 0.13.11
 
+  '@storybook/router@7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@storybook/client-logger': 7.4.6
+      memoizerific: 1.11.3
+      qs: 6.14.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   '@storybook/router@7.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@storybook/client-logger': 7.4.6
@@ -30368,7 +34649,7 @@ snapshots:
 
   '@storybook/semver@7.3.2':
     dependencies:
-      core-js: 3.45.0
+      core-js: 3.46.0
       find-up: 4.1.0
 
   '@storybook/source-loader@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
@@ -30376,7 +34657,7 @@ snapshots:
       '@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/csf': 0.0.2--canary.4566f4d.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       estraverse: 5.3.0
       global: 4.4.0
       loader-utils: 2.0.4
@@ -30392,7 +34673,7 @@ snapshots:
       '@storybook/client-logger': 6.5.16
       '@storybook/core-events': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       fast-deep-equal: 3.1.3
       global: 4.4.0
       lodash: 4.17.21
@@ -30412,7 +34693,7 @@ snapshots:
       '@storybook/client-logger': 6.5.16
       '@storybook/core-events': 6.5.16
       '@storybook/csf': 0.0.2--canary.4566f4d.1
-      core-js: 3.45.0
+      core-js: 3.46.0
       fast-deep-equal: 3.1.3
       global: 4.4.0
       lodash: 4.17.21
@@ -30431,12 +34712,12 @@ snapshots:
       '@storybook/client-logger': 7.4.6
       '@storybook/preview-api': 7.4.6
 
-  '@storybook/telemetry@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)':
+  '@storybook/telemetry@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@storybook/client-logger': 6.5.16
-      '@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/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       chalk: 4.1.2
-      core-js: 3.45.0
+      core-js: 3.46.0
       detect-package-manager: 2.0.1
       fetch-retry: 5.0.6
       fs-extra: 9.1.0
@@ -30458,12 +34739,12 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/telemetry@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)':
+  '@storybook/telemetry@6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)':
     dependencies:
       '@storybook/client-logger': 6.5.16
-      '@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/core-common': 6.5.16(@swc/core@1.14.0(@swc/helpers@0.5.17))(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
       chalk: 4.1.2
-      core-js: 3.45.0
+      core-js: 3.46.0
       detect-package-manager: 2.0.1
       fetch-retry: 5.0.6
       fs-extra: 9.1.0
@@ -30485,12 +34766,12 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/telemetry@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)':
+  '@storybook/telemetry@6.5.16(encoding@0.1.13)(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@storybook/client-logger': 6.5.16
-      '@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@4.10.0)
+      '@storybook/core-common': 6.5.16(eslint@9.26.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       chalk: 4.1.2
-      core-js: 3.45.0
+      core-js: 3.46.0
       detect-package-manager: 2.0.1
       fetch-retry: 5.0.6
       fs-extra: 9.1.0
@@ -30512,12 +34793,12 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/telemetry@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/telemetry@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
       '@storybook/client-logger': 6.5.16
-      '@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/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
       chalk: 4.1.2
-      core-js: 3.45.0
+      core-js: 3.46.0
       detect-package-manager: 2.0.1
       fetch-retry: 5.0.6
       fs-extra: 9.1.0
@@ -30539,12 +34820,39 @@ snapshots:
       - vue-template-compiler
       - webpack-cli
 
-  '@storybook/telemetry@6.5.16(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)(typescript@4.9.5)':
+  '@storybook/telemetry@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)':
     dependencies:
       '@storybook/client-logger': 6.5.16
-      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       chalk: 4.1.2
-      core-js: 3.45.0
+      core-js: 3.46.0
+      detect-package-manager: 2.0.1
+      fetch-retry: 5.0.6
+      fs-extra: 9.1.0
+      global: 4.4.0
+      isomorphic-unfetch: 3.1.0(encoding@0.1.13)
+      nanoid: 3.3.11
+      read-pkg-up: 7.0.1
+      regenerator-runtime: 0.13.11
+    transitivePeerDependencies:
+      - '@swc/core'
+      - encoding
+      - esbuild
+      - eslint
+      - react
+      - react-dom
+      - supports-color
+      - typescript
+      - uglify-js
+      - vue-template-compiler
+      - webpack-cli
+
+  '@storybook/telemetry@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)':
+    dependencies:
+      '@storybook/client-logger': 6.5.16
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.6.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@4.9.5)
+      chalk: 4.1.2
+      core-js: 3.46.0
       detect-package-manager: 2.0.1
       fetch-retry: 5.0.6
       fs-extra: 9.1.0
@@ -30574,7 +34882,7 @@ snapshots:
       chalk: 4.1.2
       detect-package-manager: 2.0.1
       fetch-retry: 5.0.6
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       read-pkg-up: 7.0.1
     transitivePeerDependencies:
       - encoding
@@ -30591,22 +34899,22 @@ snapshots:
       '@vitest/spy': 2.0.5
       storybook: 8.6.14(prettier@3.5.3)
 
-  '@storybook/test@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/test@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))
+      '@storybook/instrumenter': 8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))
       '@testing-library/dom': 10.4.0
       '@testing-library/jest-dom': 6.5.0
       '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
       '@vitest/expect': 2.0.5
       '@vitest/spy': 2.0.5
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
     optional: true
 
   '@storybook/theming@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@storybook/client-logger': 6.5.16
-      core-js: 3.45.0
+      core-js: 3.46.0
       memoizerific: 1.11.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -30615,12 +34923,21 @@ snapshots:
   '@storybook/theming@6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@storybook/client-logger': 6.5.16
-      core-js: 3.45.0
+      core-js: 3.46.0
       memoizerific: 1.11.3
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
       regenerator-runtime: 0.13.11
 
+  '@storybook/theming@7.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.2.0)
+      '@storybook/client-logger': 7.4.6
+      '@storybook/global': 5.0.0
+      memoizerific: 1.11.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   '@storybook/theming@7.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.1.0)
@@ -30634,22 +34951,22 @@ snapshots:
     dependencies:
       storybook: 8.6.14(prettier@3.5.3)
 
-  '@storybook/theming@8.6.14(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))':
+  '@storybook/theming@8.6.14(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
 
   '@storybook/types@7.4.6':
     dependencies:
       '@storybook/channels': 7.4.6
       '@types/babel__core': 7.20.5
-      '@types/express': 4.17.23
+      '@types/express': 4.17.25
       file-system-cache: 2.3.0
 
   '@storybook/types@7.6.20':
     dependencies:
       '@storybook/channels': 7.6.20
       '@types/babel__core': 7.20.5
-      '@types/express': 4.17.23
+      '@types/express': 4.17.25
       file-system-cache: 2.3.0
 
   '@storybook/ui@6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
@@ -30663,7 +34980,7 @@ snapshots:
       '@storybook/router': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/semver': 7.3.2
       '@storybook/theming': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       memoizerific: 1.11.3
       qs: 6.14.0
       react: 18.2.0
@@ -30682,7 +34999,7 @@ snapshots:
       '@storybook/router': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/semver': 7.3.2
       '@storybook/theming': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      core-js: 3.45.0
+      core-js: 3.46.0
       memoizerific: 1.11.3
       qs: 6.14.0
       react: 19.1.0
@@ -30690,20 +35007,20 @@ snapshots:
       regenerator-runtime: 0.13.11
       resolve-from: 5.0.0
 
-  '@swagger-api/apidom-ast@1.0.0-beta.45':
+  '@swagger-api/apidom-ast@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-error': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-error': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       unraw: 3.0.0
 
-  '@swagger-api/apidom-core@1.0.0-beta.45':
+  '@swagger-api/apidom-core@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-ast': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-ast': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       minim: 0.23.8
       ramda: 0.30.1
@@ -30711,213 +35028,213 @@ snapshots:
       short-unique-id: 5.3.2
       ts-mixer: 6.0.4
 
-  '@swagger-api/apidom-error@1.0.0-beta.45':
+  '@swagger-api/apidom-error@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
+      '@babel/runtime-corejs3': 7.28.4
 
-  '@swagger-api/apidom-json-pointer@1.0.0-beta.45':
+  '@swagger-api/apidom-json-pointer@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
       '@swaggerexpert/json-pointer': 2.10.2
 
-  '@swagger-api/apidom-ns-api-design-systems@1.0.0-beta.45':
+  '@swagger-api/apidom-ns-api-design-systems@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-3-1': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-3-1': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       ts-mixer: 6.0.4
     optional: true
 
-  '@swagger-api/apidom-ns-arazzo-1@1.0.0-beta.45':
+  '@swagger-api/apidom-ns-arazzo-1@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-json-schema-2020-12': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-json-schema-2020-12': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       ts-mixer: 6.0.4
     optional: true
 
-  '@swagger-api/apidom-ns-asyncapi-2@1.0.0-beta.45':
+  '@swagger-api/apidom-ns-asyncapi-2@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-json-schema-draft-7': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-json-schema-draft-7': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       ts-mixer: 6.0.4
     optional: true
 
-  '@swagger-api/apidom-ns-json-schema-2019-09@1.0.0-beta.45':
+  '@swagger-api/apidom-ns-json-schema-2019-09@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-json-schema-draft-7': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-json-schema-draft-7': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       ts-mixer: 6.0.4
 
-  '@swagger-api/apidom-ns-json-schema-2020-12@1.0.0-beta.45':
+  '@swagger-api/apidom-ns-json-schema-2020-12@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-json-schema-2019-09': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-json-schema-2019-09': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       ts-mixer: 6.0.4
 
-  '@swagger-api/apidom-ns-json-schema-draft-4@1.0.0-beta.45':
+  '@swagger-api/apidom-ns-json-schema-draft-4@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-ast': 1.0.0-beta.45
-      '@swagger-api/apidom-core': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-ast': 1.0.0-rc.1
+      '@swagger-api/apidom-core': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       ts-mixer: 6.0.4
 
-  '@swagger-api/apidom-ns-json-schema-draft-6@1.0.0-beta.45':
+  '@swagger-api/apidom-ns-json-schema-draft-6@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-json-schema-draft-4': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-json-schema-draft-4': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       ts-mixer: 6.0.4
 
-  '@swagger-api/apidom-ns-json-schema-draft-7@1.0.0-beta.45':
+  '@swagger-api/apidom-ns-json-schema-draft-7@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-json-schema-draft-6': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-json-schema-draft-6': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       ts-mixer: 6.0.4
 
-  '@swagger-api/apidom-ns-openapi-2@1.0.0-beta.45':
+  '@swagger-api/apidom-ns-openapi-2@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-json-schema-draft-4': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-json-schema-draft-4': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       ts-mixer: 6.0.4
     optional: true
 
-  '@swagger-api/apidom-ns-openapi-3-0@1.0.0-beta.45':
+  '@swagger-api/apidom-ns-openapi-3-0@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-json-schema-draft-4': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-json-schema-draft-4': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       ts-mixer: 6.0.4
 
-  '@swagger-api/apidom-ns-openapi-3-1@1.0.0-beta.45':
+  '@swagger-api/apidom-ns-openapi-3-1@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-ast': 1.0.0-beta.45
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-json-pointer': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-json-schema-2020-12': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-3-0': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-ast': 1.0.0-rc.1
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-json-pointer': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-json-schema-2020-12': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-3-0': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
       ts-mixer: 6.0.4
 
-  '@swagger-api/apidom-parser-adapter-api-design-systems-json@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-api-design-systems-json@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-api-design-systems': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-json': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-api-design-systems': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-json': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-api-design-systems-yaml@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-api-design-systems-yaml@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-api-design-systems': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-api-design-systems': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-arazzo-json-1@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-arazzo-json-1@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-arazzo-1': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-json': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-arazzo-1': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-json': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-arazzo-yaml-1@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-arazzo-yaml-1@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-arazzo-1': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-arazzo-1': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-asyncapi-json-2@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-asyncapi-json-2@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-asyncapi-2': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-json': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-asyncapi-2': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-json': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-asyncapi-yaml-2@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-asyncapi-yaml-2@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-asyncapi-2': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-asyncapi-2': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-json@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-json@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-ast': 1.0.0-beta.45
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-ast': 1.0.0-rc.1
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
@@ -30926,78 +35243,78 @@ snapshots:
       web-tree-sitter: 0.24.5
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-openapi-json-2@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-openapi-json-2@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-2': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-json': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-2': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-json': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-openapi-json-3-0@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-openapi-json-3-0@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-3-0': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-json': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-3-0': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-json': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-openapi-json-3-1@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-openapi-json-3-1@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-3-1': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-json': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-3-1': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-json': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-openapi-yaml-2@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-openapi-yaml-2@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-2': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-2': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-openapi-yaml-3-0@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-openapi-yaml-3-0@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-3-0': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-3-0': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-openapi-yaml-3-1@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-openapi-yaml-3-1@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-3-1': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-3-1': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-rc.1
       '@types/ramda': 0.30.2
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optional: true
 
-  '@swagger-api/apidom-parser-adapter-yaml-1-2@1.0.0-beta.45':
+  '@swagger-api/apidom-parser-adapter-yaml-1-2@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-ast': 1.0.0-beta.45
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-ast': 1.0.0-rc.1
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
       '@tree-sitter-grammars/tree-sitter-yaml': 0.7.1(tree-sitter@0.22.4)
       '@types/ramda': 0.30.2
       ramda: 0.30.1
@@ -31006,38 +35323,38 @@ snapshots:
       web-tree-sitter: 0.24.5
     optional: true
 
-  '@swagger-api/apidom-reference@1.0.0-beta.45':
+  '@swagger-api/apidom-reference@1.0.0-rc.1':
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
+      '@babel/runtime-corejs3': 7.28.4
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
       '@types/ramda': 0.30.2
-      axios: 1.12.0
+      axios: 1.12.2
       minimatch: 7.4.6
       process: 0.11.10
       ramda: 0.30.1
       ramda-adjunct: 5.1.0(ramda@0.30.1)
     optionalDependencies:
-      '@swagger-api/apidom-json-pointer': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-arazzo-1': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-asyncapi-2': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-2': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-3-0': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-3-1': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-api-design-systems-json': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-api-design-systems-yaml': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-arazzo-json-1': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-arazzo-yaml-1': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-asyncapi-json-2': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-asyncapi-yaml-2': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-json': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-openapi-json-2': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-openapi-json-3-0': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-openapi-json-3-1': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-openapi-yaml-2': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-openapi-yaml-3-0': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-openapi-yaml-3-1': 1.0.0-beta.45
-      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-beta.45
+      '@swagger-api/apidom-json-pointer': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-arazzo-1': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-asyncapi-2': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-2': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-3-0': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-3-1': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-api-design-systems-json': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-api-design-systems-yaml': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-arazzo-json-1': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-arazzo-yaml-1': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-asyncapi-json-2': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-asyncapi-yaml-2': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-json': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-openapi-json-2': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-openapi-json-3-0': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-openapi-json-3-1': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-openapi-yaml-2': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-openapi-yaml-3-0': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-openapi-yaml-3-1': 1.0.0-rc.1
+      '@swagger-api/apidom-parser-adapter-yaml-1-2': 1.0.0-rc.1
     transitivePeerDependencies:
       - debug
 
@@ -31049,51 +35366,51 @@ snapshots:
     dependencies:
       apg-lite: 1.0.5
 
-  '@swc/core-darwin-arm64@1.13.3':
+  '@swc/core-darwin-arm64@1.14.0':
     optional: true
 
-  '@swc/core-darwin-x64@1.13.3':
+  '@swc/core-darwin-x64@1.14.0':
     optional: true
 
-  '@swc/core-linux-arm-gnueabihf@1.13.3':
+  '@swc/core-linux-arm-gnueabihf@1.14.0':
     optional: true
 
-  '@swc/core-linux-arm64-gnu@1.13.3':
+  '@swc/core-linux-arm64-gnu@1.14.0':
     optional: true
 
-  '@swc/core-linux-arm64-musl@1.13.3':
+  '@swc/core-linux-arm64-musl@1.14.0':
     optional: true
 
-  '@swc/core-linux-x64-gnu@1.13.3':
+  '@swc/core-linux-x64-gnu@1.14.0':
     optional: true
 
-  '@swc/core-linux-x64-musl@1.13.3':
+  '@swc/core-linux-x64-musl@1.14.0':
     optional: true
 
-  '@swc/core-win32-arm64-msvc@1.13.3':
+  '@swc/core-win32-arm64-msvc@1.14.0':
     optional: true
 
-  '@swc/core-win32-ia32-msvc@1.13.3':
+  '@swc/core-win32-ia32-msvc@1.14.0':
     optional: true
 
-  '@swc/core-win32-x64-msvc@1.13.3':
+  '@swc/core-win32-x64-msvc@1.14.0':
     optional: true
 
-  '@swc/core@1.13.3(@swc/helpers@0.5.17)':
+  '@swc/core@1.14.0(@swc/helpers@0.5.17)':
     dependencies:
       '@swc/counter': 0.1.3
-      '@swc/types': 0.1.24
-    optionalDependencies:
-      '@swc/core-darwin-arm64': 1.13.3
-      '@swc/core-darwin-x64': 1.13.3
-      '@swc/core-linux-arm-gnueabihf': 1.13.3
-      '@swc/core-linux-arm64-gnu': 1.13.3
-      '@swc/core-linux-arm64-musl': 1.13.3
-      '@swc/core-linux-x64-gnu': 1.13.3
-      '@swc/core-linux-x64-musl': 1.13.3
-      '@swc/core-win32-arm64-msvc': 1.13.3
-      '@swc/core-win32-ia32-msvc': 1.13.3
-      '@swc/core-win32-x64-msvc': 1.13.3
+      '@swc/types': 0.1.25
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.14.0
+      '@swc/core-darwin-x64': 1.14.0
+      '@swc/core-linux-arm-gnueabihf': 1.14.0
+      '@swc/core-linux-arm64-gnu': 1.14.0
+      '@swc/core-linux-arm64-musl': 1.14.0
+      '@swc/core-linux-x64-gnu': 1.14.0
+      '@swc/core-linux-x64-musl': 1.14.0
+      '@swc/core-win32-arm64-msvc': 1.14.0
+      '@swc/core-win32-ia32-msvc': 1.14.0
+      '@swc/core-win32-x64-msvc': 1.14.0
       '@swc/helpers': 0.5.17
 
   '@swc/counter@0.1.3': {}
@@ -31102,7 +35419,7 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@swc/types@0.1.24':
+  '@swc/types@0.1.25':
     dependencies:
       '@swc/counter': 0.1.3
 
@@ -31112,7 +35429,7 @@ snapshots:
 
   '@tanstack/query-core@4.27.0': {}
 
-  '@tanstack/query-core@4.40.0': {}
+  '@tanstack/query-core@4.41.0': {}
 
   '@tanstack/query-core@5.76.0': {}
 
@@ -31120,7 +35437,7 @@ snapshots:
 
   '@tanstack/query-core@5.77.1': {}
 
-  '@tanstack/query-core@5.83.1': {}
+  '@tanstack/query-core@5.90.6': {}
 
   '@tanstack/query-persist-client-core@4.27.0':
     dependencies:
@@ -31131,12 +35448,21 @@ snapshots:
       '@tanstack/query-persist-client-core': 4.27.0
       '@tanstack/react-query': 4.28.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
 
+  '@tanstack/react-query@4.0.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@tanstack/query-core': 4.41.0
+      '@types/use-sync-external-store': 0.0.3
+      react: 18.2.0
+      use-sync-external-store: 1.6.0(react@18.2.0)
+    optionalDependencies:
+      react-dom: 18.2.0(react@18.2.0)
+
   '@tanstack/react-query@4.0.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@tanstack/query-core': 4.40.0
+      '@tanstack/query-core': 4.41.0
       '@types/use-sync-external-store': 0.0.3
       react: 19.1.0
-      use-sync-external-store: 1.5.0(react@19.1.0)
+      use-sync-external-store: 1.6.0(react@19.1.0)
     optionalDependencies:
       react-dom: 19.1.0(react@19.1.0)
 
@@ -31144,7 +35470,7 @@ snapshots:
     dependencies:
       '@tanstack/query-core': 4.27.0
       react: 18.2.0
-      use-sync-external-store: 1.5.0(react@18.2.0)
+      use-sync-external-store: 1.6.0(react@18.2.0)
     optionalDependencies:
       react-dom: 18.2.0(react@18.2.0)
 
@@ -31180,7 +35506,7 @@ snapshots:
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       chalk: 4.1.2
@@ -31191,7 +35517,7 @@ snapshots:
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       dom-accessibility-api: 0.5.16
@@ -31201,7 +35527,7 @@ snapshots:
 
   '@testing-library/jest-dom@6.5.0':
     dependencies:
-      '@adobe/css-tools': 4.4.3
+      '@adobe/css-tools': 4.4.4
       aria-query: 5.3.2
       chalk: 3.0.0
       css.escape: 1.5.1
@@ -31211,7 +35537,7 @@ snapshots:
 
   '@testing-library/jest-dom@6.6.4':
     dependencies:
-      '@adobe/css-tools': 4.4.3
+      '@adobe/css-tools': 4.4.4
       aria-query: 5.3.2
       css.escape: 1.5.1
       dom-accessibility-api: 0.6.3
@@ -31221,7 +35547,7 @@ snapshots:
 
   '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       '@testing-library/dom': 10.4.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -31247,7 +35573,7 @@ snapshots:
       '@textlint/resolver': 14.8.4
       '@textlint/types': 14.8.4
       chalk: 4.1.2
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       js-yaml: 3.14.1
       lodash: 4.17.21
       pluralize: 2.0.0
@@ -31292,31 +35618,39 @@ snapshots:
   '@ts-morph/common@0.27.0':
     dependencies:
       fast-glob: 3.3.3
-      minimatch: 10.0.3
+      minimatch: 10.1.1
       path-browserify: 1.0.1
 
+  '@tsconfig/node10@1.0.11': {}
+
+  '@tsconfig/node12@1.0.11': {}
+
+  '@tsconfig/node14@1.0.3': {}
+
+  '@tsconfig/node16@1.0.4': {}
+
   '@types/aria-query@5.0.4': {}
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
       '@types/babel__generator': 7.27.0
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.28.0
 
   '@types/babel__generator@7.27.0':
     dependencies:
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
 
   '@types/babel__traverse@7.28.0':
     dependencies:
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
 
   '@types/blueimp-md5@2.18.2': {}
 
@@ -31335,9 +35669,10 @@ snapshots:
 
   '@types/chai@4.3.20': {}
 
-  '@types/chai@5.2.2':
+  '@types/chai@5.2.3':
     dependencies:
       '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
 
   '@types/classnames@2.3.4':
     dependencies:
@@ -31347,13 +35682,13 @@ snapshots:
     dependencies:
       '@types/tern': 0.23.9
 
-  '@types/codemirror@5.60.16':
+  '@types/codemirror@5.60.17':
     dependencies:
       '@types/tern': 0.23.9
 
   '@types/connect-history-api-fallback@1.5.4':
     dependencies:
-      '@types/express-serve-static-core': 4.19.6
+      '@types/express-serve-static-core': 4.19.7
       '@types/node': 22.15.35
 
   '@types/connect@3.4.38':
@@ -31382,7 +35717,7 @@ snapshots:
 
   '@types/ejs@3.1.5': {}
 
-  '@types/emscripten@1.40.1': {}
+  '@types/emscripten@1.41.5': {}
 
   '@types/escodegen@0.0.6': {}
 
@@ -31408,19 +35743,19 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
-  '@types/express-serve-static-core@4.19.6':
+  '@types/express-serve-static-core@4.19.7':
     dependencies:
       '@types/node': 22.15.35
       '@types/qs': 6.14.0
       '@types/range-parser': 1.2.7
-      '@types/send': 0.17.5
+      '@types/send': 1.2.1
 
-  '@types/express@4.17.23':
+  '@types/express@4.17.25':
     dependencies:
       '@types/body-parser': 1.19.6
-      '@types/express-serve-static-core': 4.19.6
+      '@types/express-serve-static-core': 4.19.7
       '@types/qs': 6.14.0
-      '@types/serve-static': 1.15.8
+      '@types/serve-static': 1.15.10
 
   '@types/find-cache-dir@3.2.1': {}
 
@@ -31468,7 +35803,7 @@ snapshots:
 
   '@types/http-errors@2.0.5': {}
 
-  '@types/http-proxy@1.17.16':
+  '@types/http-proxy@1.17.17':
     dependencies:
       '@types/node': 22.15.35
 
@@ -31553,7 +35888,7 @@ snapshots:
 
   '@types/minimatch@6.0.0':
     dependencies:
-      minimatch: 10.0.3
+      minimatch: 10.1.1
 
   '@types/minimist@1.2.5': {}
 
@@ -31570,16 +35905,20 @@ snapshots:
       '@types/node': 22.15.35
       form-data: 4.0.4
 
-  '@types/node-forge@1.3.13':
+  '@types/node-forge@1.3.14':
     dependencies:
       '@types/node': 22.15.35
 
   '@types/node@16.18.126': {}
 
-  '@types/node@18.19.121':
+  '@types/node@18.19.130':
     dependencies:
       undici-types: 5.26.5
 
+  '@types/node@20.19.24':
+    dependencies:
+      undici-types: 6.21.0
+
   '@types/node@22.15.18':
     dependencies:
       undici-types: 6.21.0
@@ -31655,7 +35994,7 @@ snapshots:
     dependencies:
       '@types/react': 18.2.0
 
-  '@types/react@17.0.87':
+  '@types/react@17.0.89':
     dependencies:
       '@types/prop-types': 15.7.15
       '@types/scheduler': 0.16.8
@@ -31683,27 +36022,31 @@ snapshots:
 
   '@types/scheduler@0.26.0': {}
 
-  '@types/selenium-webdriver@4.1.28':
+  '@types/selenium-webdriver@4.35.3':
     dependencies:
       '@types/node': 22.15.35
       '@types/ws': 8.18.1
 
-  '@types/semver@7.7.0': {}
+  '@types/semver@7.7.1': {}
 
-  '@types/send@0.17.5':
+  '@types/send@0.17.6':
     dependencies:
       '@types/mime': 1.3.5
       '@types/node': 22.15.35
 
+  '@types/send@1.2.1':
+    dependencies:
+      '@types/node': 22.15.35
+
   '@types/serve-index@1.9.4':
     dependencies:
-      '@types/express': 4.17.23
+      '@types/express': 4.17.25
 
-  '@types/serve-static@1.15.8':
+  '@types/serve-static@1.15.10':
     dependencies:
       '@types/http-errors': 2.0.5
       '@types/node': 22.15.35
-      '@types/send': 0.17.5
+      '@types/send': 0.17.6
 
   '@types/sockjs@0.3.36':
     dependencies:
@@ -31756,11 +36099,11 @@ snapshots:
 
   '@types/uuid@9.0.8': {}
 
-  '@types/vscode-notebook-renderer@1.72.3': {}
+  '@types/vscode-notebook-renderer@1.72.4': {}
 
   '@types/vscode-webview@1.57.5': {}
 
-  '@types/vscode@1.102.0': {}
+  '@types/vscode@1.105.0': {}
 
   '@types/webpack-env@1.18.8': {}
 
@@ -31782,8 +36125,8 @@ snapshots:
   '@types/webpack@5.28.5':
     dependencies:
       '@types/node': 22.15.35
-      tapable: 2.2.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      tapable: 2.3.0
+      webpack: 5.102.1(webpack-cli@4.10.0)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -31791,11 +36134,11 @@ snapshots:
       - webpack-cli
     optional: true
 
-  '@types/webpack@5.28.5(webpack-cli@4.10.0)':
+  '@types/webpack@5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17))':
     dependencies:
       '@types/node': 22.15.35
-      tapable: 2.2.2
-      webpack: 5.101.0(webpack-cli@4.10.0)
+      tapable: 2.3.0
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -31803,22 +36146,34 @@ snapshots:
       - webpack-cli
     optional: true
 
-  '@types/webpack@5.28.5(webpack-cli@5.1.4)':
+  '@types/webpack@5.28.5(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)':
     dependencies:
       '@types/node': 22.15.35
-      tapable: 2.2.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      tapable: 2.3.0
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
       - uglify-js
       - webpack-cli
 
-  '@types/webpack@5.28.5(webpack-cli@6.0.1)':
+  '@types/webpack@5.28.5(webpack-cli@4.10.0)':
     dependencies:
       '@types/node': 22.15.35
-      tapable: 2.2.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      tapable: 2.3.0
+      webpack: 5.102.1(webpack-cli@4.10.0)
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+      - webpack-cli
+    optional: true
+
+  '@types/webpack@5.28.5(webpack-cli@5.1.4)':
+    dependencies:
+      '@types/node': 22.15.35
+      tapable: 2.3.0
+      webpack: 5.102.1(webpack-cli@5.1.4)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -31841,7 +36196,7 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@types/yargs@17.0.33':
+  '@types/yargs@17.0.34':
     dependencies:
       '@types/yargs-parser': 21.0.3
 
@@ -31864,12 +36219,12 @@ snapshots:
       '@typescript-eslint/scope-manager': 5.48.2
       '@typescript-eslint/type-utils': 5.48.2(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/utils': 5.48.2(eslint@8.57.1)(typescript@5.8.3)
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       eslint: 8.57.1
       ignore: 5.3.2
       natural-compare-lite: 1.4.0
       regexpp: 3.2.0
-      semver: 7.7.2
+      semver: 7.7.3
       tsutils: 3.21.0(typescript@5.8.3)
     optionalDependencies:
       typescript: 5.8.3
@@ -31878,18 +36233,18 @@ snapshots:
 
   '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
+      '@eslint-community/regexpp': 4.12.2
       '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       eslint: 8.57.1
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      semver: 7.7.2
+      semver: 7.7.3
       ts-api-utils: 1.4.3(typescript@5.8.3)
     optionalDependencies:
       typescript: 5.8.3
@@ -31898,18 +36253,18 @@ snapshots:
 
   '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@8.33.1(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
+      '@eslint-community/regexpp': 4.12.2
       '@typescript-eslint/parser': 8.33.1(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       eslint: 8.57.1
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      semver: 7.7.2
+      semver: 7.7.3
       ts-api-utils: 1.4.3(typescript@5.8.3)
     optionalDependencies:
       typescript: 5.8.3
@@ -31918,7 +36273,7 @@ snapshots:
 
   '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
+      '@eslint-community/regexpp': 4.12.2
       '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 7.18.0
       '@typescript-eslint/type-utils': 7.18.0(eslint@8.57.1)(typescript@5.8.3)
@@ -31934,15 +36289,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@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/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 8.32.1
-      '@typescript-eslint/type-utils': 8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+      '@typescript-eslint/type-utils': 8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.32.1
-      eslint: 9.27.0(jiti@2.5.1)
+      eslint: 9.27.0(jiti@2.6.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -31951,15 +36306,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)':
+  '@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.33.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.33.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 8.32.1
-      '@typescript-eslint/type-utils': 8.32.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.32.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)
+      '@typescript-eslint/type-utils': 8.32.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.32.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.32.1
-      eslint: 9.26.0(jiti@2.5.1)
+      eslint: 9.26.0(jiti@2.6.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -31968,15 +36323,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.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/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 8.32.1
-      '@typescript-eslint/type-utils': 8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+      '@typescript-eslint/type-utils': 8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.32.1
-      eslint: 9.27.0(jiti@2.5.1)
+      eslint: 9.27.0(jiti@2.6.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -31985,15 +36340,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.33.1(@typescript-eslint/parser@8.33.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/eslint-plugin@8.33.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 8.33.1
-      '@typescript-eslint/type-utils': 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
+      '@typescript-eslint/type-utils': 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.33.1
-      eslint: 9.27.0(jiti@2.5.1)
+      eslint: 9.27.0(jiti@2.6.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -32030,7 +36385,7 @@ snapshots:
       '@typescript-eslint/scope-manager': 5.48.2
       '@typescript-eslint/types': 5.48.2
       '@typescript-eslint/typescript-estree': 5.48.2(typescript@5.8.3)
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       eslint: 8.57.1
     optionalDependencies:
       typescript: 5.8.3
@@ -32043,7 +36398,7 @@ snapshots:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       eslint: 8.57.1
     optionalDependencies:
       typescript: 5.8.3
@@ -32056,21 +36411,21 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 7.18.0
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       eslint: 8.57.1
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)':
+  '@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.32.1
       '@typescript-eslint/types': 8.32.1
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.32.1
-      debug: 4.4.1(supports-color@8.1.1)
-      eslint: 9.27.0(jiti@2.5.1)
+      debug: 4.4.3(supports-color@8.1.1)
+      eslint: 9.27.0(jiti@2.6.1)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
@@ -32081,32 +36436,32 @@ snapshots:
       '@typescript-eslint/types': 8.33.1
       '@typescript-eslint/typescript-estree': 8.33.1(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.33.1
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       eslint: 8.57.1
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)':
+  '@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.33.1
       '@typescript-eslint/types': 8.33.1
       '@typescript-eslint/typescript-estree': 8.33.1(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.33.1
-      debug: 4.4.1(supports-color@8.1.1)
-      eslint: 9.26.0(jiti@2.5.1)
+      debug: 4.4.3(supports-color@8.1.1)
+      eslint: 9.26.0(jiti@2.6.1)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)':
+  '@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.33.1
       '@typescript-eslint/types': 8.33.1
       '@typescript-eslint/typescript-estree': 8.33.1(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.33.1
-      debug: 4.4.1(supports-color@8.1.1)
-      eslint: 9.27.0(jiti@2.5.1)
+      debug: 4.4.3(supports-color@8.1.1)
+      eslint: 9.27.0(jiti@2.6.1)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
@@ -32115,16 +36470,16 @@ snapshots:
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.33.1(typescript@5.8.3)
       '@typescript-eslint/types': 8.33.1
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.39.0(typescript@5.8.3)':
+  '@typescript-eslint/project-service@8.46.3(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.8.3)
-      '@typescript-eslint/types': 8.39.0
-      debug: 4.4.1(supports-color@8.1.1)
+      '@typescript-eslint/tsconfig-utils': 8.46.3(typescript@5.8.3)
+      '@typescript-eslint/types': 8.46.3
+      debug: 4.4.3(supports-color@8.1.1)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
@@ -32154,16 +36509,16 @@ snapshots:
       '@typescript-eslint/types': 8.33.1
       '@typescript-eslint/visitor-keys': 8.33.1
 
-  '@typescript-eslint/scope-manager@8.39.0':
+  '@typescript-eslint/scope-manager@8.46.3':
     dependencies:
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/visitor-keys': 8.39.0
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/visitor-keys': 8.46.3
 
   '@typescript-eslint/tsconfig-utils@8.33.1(typescript@5.8.3)':
     dependencies:
       typescript: 5.8.3
 
-  '@typescript-eslint/tsconfig-utils@8.39.0(typescript@5.8.3)':
+  '@typescript-eslint/tsconfig-utils@8.46.3(typescript@5.8.3)':
     dependencies:
       typescript: 5.8.3
 
@@ -32171,7 +36526,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 5.48.2(typescript@5.8.3)
       '@typescript-eslint/utils': 5.48.2(eslint@8.57.1)(typescript@5.8.3)
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       eslint: 8.57.1
       tsutils: 3.21.0(typescript@5.8.3)
     optionalDependencies:
@@ -32183,7 +36538,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.3)
       '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.8.3)
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       eslint: 8.57.1
       ts-api-utils: 1.4.3(typescript@5.8.3)
     optionalDependencies:
@@ -32195,7 +36550,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.8.3)
       '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.8.3)
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       eslint: 8.57.1
       ts-api-utils: 1.4.3(typescript@5.8.3)
     optionalDependencies:
@@ -32203,34 +36558,34 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.32.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)':
+  '@typescript-eslint/type-utils@8.32.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.32.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)
-      debug: 4.4.1(supports-color@8.1.1)
-      eslint: 9.26.0(jiti@2.5.1)
+      '@typescript-eslint/utils': 8.32.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)
+      debug: 4.4.3(supports-color@8.1.1)
+      eslint: 9.26.0(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.8.3)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)':
+  '@typescript-eslint/type-utils@8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
-      debug: 4.4.1(supports-color@8.1.1)
-      eslint: 9.27.0(jiti@2.5.1)
+      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
+      debug: 4.4.3(supports-color@8.1.1)
+      eslint: 9.27.0(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.8.3)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)':
+  '@typescript-eslint/type-utils@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.33.1(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
-      debug: 4.4.1(supports-color@8.1.1)
-      eslint: 9.27.0(jiti@2.5.1)
+      '@typescript-eslint/utils': 8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
+      debug: 4.4.3(supports-color@8.1.1)
+      eslint: 9.27.0(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.8.3)
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -32246,16 +36601,16 @@ snapshots:
 
   '@typescript-eslint/types@8.33.1': {}
 
-  '@typescript-eslint/types@8.39.0': {}
+  '@typescript-eslint/types@8.46.3': {}
 
   '@typescript-eslint/typescript-estree@2.34.0(typescript@3.9.10)':
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       eslint-visitor-keys: 1.3.0
       glob: 7.2.3
       is-glob: 4.0.3
       lodash: 4.17.21
-      semver: 7.7.2
+      semver: 7.7.3
       tsutils: 3.21.0(typescript@3.9.10)
     optionalDependencies:
       typescript: 3.9.10
@@ -32266,10 +36621,10 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 5.48.2
       '@typescript-eslint/visitor-keys': 5.48.2
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.7.2
+      semver: 7.7.3
       tsutils: 3.21.0(typescript@5.8.3)
     optionalDependencies:
       typescript: 5.8.3
@@ -32280,11 +36635,11 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
-      semver: 7.7.2
+      semver: 7.7.3
       ts-api-utils: 1.4.3(typescript@5.8.3)
     optionalDependencies:
       typescript: 5.8.3
@@ -32295,11 +36650,11 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/visitor-keys': 7.18.0
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.2
+      semver: 7.7.3
       ts-api-utils: 1.4.3(typescript@5.8.3)
     optionalDependencies:
       typescript: 5.8.3
@@ -32310,11 +36665,11 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.32.1
       '@typescript-eslint/visitor-keys': 8.32.1
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.2
+      semver: 7.7.3
       ts-api-utils: 2.1.0(typescript@5.8.3)
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -32326,27 +36681,27 @@ snapshots:
       '@typescript-eslint/tsconfig-utils': 8.33.1(typescript@5.8.3)
       '@typescript-eslint/types': 8.33.1
       '@typescript-eslint/visitor-keys': 8.33.1
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.2
+      semver: 7.7.3
       ts-api-utils: 2.1.0(typescript@5.8.3)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.39.0(typescript@5.8.3)':
+  '@typescript-eslint/typescript-estree@8.46.3(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.39.0(typescript@5.8.3)
-      '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.8.3)
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/visitor-keys': 8.39.0
-      debug: 4.4.1(supports-color@8.1.1)
+      '@typescript-eslint/project-service': 8.46.3(typescript@5.8.3)
+      '@typescript-eslint/tsconfig-utils': 8.46.3(typescript@5.8.3)
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/visitor-keys': 8.46.3
+      debug: 4.4.3(supports-color@8.1.1)
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.2
+      semver: 7.7.3
       ts-api-utils: 2.1.0(typescript@5.8.3)
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -32355,35 +36710,35 @@ snapshots:
   '@typescript-eslint/utils@5.48.2(eslint@8.57.1)(typescript@5.8.3)':
     dependencies:
       '@types/json-schema': 7.0.15
-      '@types/semver': 7.7.0
+      '@types/semver': 7.7.1
       '@typescript-eslint/scope-manager': 5.48.2
       '@typescript-eslint/types': 5.48.2
       '@typescript-eslint/typescript-estree': 5.48.2(typescript@5.8.3)
       eslint: 8.57.1
       eslint-scope: 5.1.1
       eslint-utils: 3.0.0(eslint@8.57.1)
-      semver: 7.7.2
+      semver: 7.7.3
     transitivePeerDependencies:
       - supports-color
       - typescript
 
   '@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.1)
       '@types/json-schema': 7.0.15
-      '@types/semver': 7.7.0
+      '@types/semver': 7.7.1
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.3)
       eslint: 8.57.1
-      semver: 7.7.2
+      semver: 7.7.3
     transitivePeerDependencies:
       - supports-color
       - typescript
 
   '@typescript-eslint/utils@7.18.0(eslint@8.57.1)(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.1)
       '@typescript-eslint/scope-manager': 7.18.0
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.8.3)
@@ -32392,45 +36747,45 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@8.32.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)':
+  '@typescript-eslint/utils@8.32.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.26.0(jiti@2.5.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.26.0(jiti@2.6.1))
       '@typescript-eslint/scope-manager': 8.32.1
       '@typescript-eslint/types': 8.32.1
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
-      eslint: 9.26.0(jiti@2.5.1)
+      eslint: 9.26.0(jiti@2.6.1)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)':
+  '@typescript-eslint/utils@8.32.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@2.5.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.27.0(jiti@2.6.1))
       '@typescript-eslint/scope-manager': 8.32.1
       '@typescript-eslint/types': 8.32.1
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.5.1)
+      eslint: 9.27.0(jiti@2.6.1)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.33.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)':
+  '@typescript-eslint/utils@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@2.5.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.27.0(jiti@2.6.1))
       '@typescript-eslint/scope-manager': 8.33.1
       '@typescript-eslint/types': 8.33.1
       '@typescript-eslint/typescript-estree': 8.33.1(typescript@5.8.3)
-      eslint: 9.27.0(jiti@2.5.1)
+      eslint: 9.27.0(jiti@2.6.1)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.39.0(eslint@8.57.1)(typescript@5.8.3)':
+  '@typescript-eslint/utils@8.46.3(eslint@8.57.1)(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.1)
-      '@typescript-eslint/scope-manager': 8.39.0
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.8.3)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.1)
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.8.3)
       eslint: 8.57.1
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -32461,12 +36816,12 @@ snapshots:
       '@typescript-eslint/types': 8.33.1
       eslint-visitor-keys: 4.2.1
 
-  '@typescript-eslint/visitor-keys@8.39.0':
+  '@typescript-eslint/visitor-keys@8.46.3':
     dependencies:
-      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/types': 8.46.3
       eslint-visitor-keys: 4.2.1
 
-  '@typespec/ts-http-runtime@0.3.0':
+  '@typespec/ts-http-runtime@0.3.1':
     dependencies:
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
@@ -32476,21 +36831,21 @@ snapshots:
 
   '@uiw/codemirror-extensions-basic-setup@4.23.14(@codemirror/lint@6.8.5)':
     dependencies:
-      '@codemirror/autocomplete': 6.18.6
-      '@codemirror/commands': 6.8.1
-      '@codemirror/language': 6.11.2
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/commands': 6.10.0
+      '@codemirror/language': 6.11.3
       '@codemirror/lint': 6.8.5
       '@codemirror/search': 6.5.11
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.1
+      '@codemirror/view': 6.38.6
 
-  '@uiw/react-codemirror@4.23.14(@codemirror/lint@6.8.5)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.38.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@uiw/react-codemirror@4.23.14(@codemirror/lint@6.8.5)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.38.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
-      '@codemirror/commands': 6.8.1
+      '@babel/runtime': 7.28.4
+      '@codemirror/commands': 6.10.0
       '@codemirror/state': 6.5.2
       '@codemirror/theme-one-dark': 6.1.3
-      '@codemirror/view': 6.38.1
+      '@codemirror/view': 6.38.6
       '@uiw/codemirror-extensions-basic-setup': 4.23.14(@codemirror/lint@6.8.5)
       codemirror: 6.0.2
       react: 18.2.0
@@ -32500,26 +36855,28 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
+  '@vercel/oidc@3.0.3': {}
+
   '@vitest/expect@2.0.5':
     dependencies:
       '@vitest/spy': 2.0.5
       '@vitest/utils': 2.0.5
-      chai: 5.2.1
+      chai: 5.3.3
       tinyrainbow: 1.2.0
 
   '@vitest/expect@3.2.4':
     dependencies:
-      '@types/chai': 5.2.2
+      '@types/chai': 5.2.3
       '@vitest/spy': 3.2.4
       '@vitest/utils': 3.2.4
-      chai: 5.2.1
+      chai: 5.3.3
       tinyrainbow: 2.0.0
 
   '@vitest/mocker@3.2.4':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
-      magic-string: 0.30.17
+      magic-string: 0.30.21
 
   '@vitest/pretty-format@2.0.5':
     dependencies:
@@ -32539,25 +36896,25 @@ snapshots:
 
   '@vitest/spy@3.2.4':
     dependencies:
-      tinyspy: 4.0.3
+      tinyspy: 4.0.4
 
   '@vitest/utils@2.0.5':
     dependencies:
       '@vitest/pretty-format': 2.0.5
       estree-walker: 3.0.3
-      loupe: 3.2.0
+      loupe: 3.2.1
       tinyrainbow: 1.2.0
 
   '@vitest/utils@2.1.9':
     dependencies:
       '@vitest/pretty-format': 2.1.9
-      loupe: 3.2.0
+      loupe: 3.2.1
       tinyrainbow: 1.2.0
 
   '@vitest/utils@3.2.4':
     dependencies:
       '@vitest/pretty-format': 3.2.4
-      loupe: 3.2.0
+      loupe: 3.2.1
       tinyrainbow: 2.0.0
 
   '@vscode-logging/logger@2.0.0':
@@ -32589,13 +36946,13 @@ snapshots:
 
   '@vscode/extension-telemetry@1.0.0(tslib@2.8.1)':
     dependencies:
-      '@microsoft/1ds-core-js': 4.3.9(tslib@2.8.1)
-      '@microsoft/1ds-post-js': 4.3.9(tslib@2.8.1)
-      '@microsoft/applicationinsights-web-basic': 3.3.9(tslib@2.8.1)
+      '@microsoft/1ds-core-js': 4.3.10(tslib@2.8.1)
+      '@microsoft/1ds-post-js': 4.3.10(tslib@2.8.1)
+      '@microsoft/applicationinsights-web-basic': 3.3.10(tslib@2.8.1)
     transitivePeerDependencies:
       - tslib
 
-  '@vscode/iconv-lite-umd@0.7.0': {}
+  '@vscode/iconv-lite-umd@0.7.1': {}
 
   '@vscode/test-electron@2.5.2':
     dependencies:
@@ -32603,53 +36960,82 @@ snapshots:
       https-proxy-agent: 7.0.6
       jszip: 3.10.1
       ora: 8.2.0
-      semver: 7.7.2
+      semver: 7.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@vscode/vsce-sign-alpine-arm64@2.0.5':
+  '@vscode/vsce-sign-alpine-arm64@2.0.6':
     optional: true
 
-  '@vscode/vsce-sign-alpine-x64@2.0.5':
+  '@vscode/vsce-sign-alpine-x64@2.0.6':
     optional: true
 
-  '@vscode/vsce-sign-darwin-arm64@2.0.5':
+  '@vscode/vsce-sign-darwin-arm64@2.0.2':
     optional: true
 
-  '@vscode/vsce-sign-darwin-x64@2.0.5':
+  '@vscode/vsce-sign-darwin-x64@2.0.2':
     optional: true
 
-  '@vscode/vsce-sign-linux-arm64@2.0.5':
+  '@vscode/vsce-sign-linux-arm64@2.0.6':
     optional: true
 
-  '@vscode/vsce-sign-linux-arm@2.0.5':
+  '@vscode/vsce-sign-linux-arm@2.0.6':
     optional: true
 
-  '@vscode/vsce-sign-linux-x64@2.0.5':
+  '@vscode/vsce-sign-linux-x64@2.0.6':
     optional: true
 
-  '@vscode/vsce-sign-win32-arm64@2.0.5':
+  '@vscode/vsce-sign-win32-arm64@2.0.6':
     optional: true
 
-  '@vscode/vsce-sign-win32-x64@2.0.5':
+  '@vscode/vsce-sign-win32-x64@2.0.6':
     optional: true
 
-  '@vscode/vsce-sign@2.0.6':
+  '@vscode/vsce-sign@2.0.8':
+    optionalDependencies:
+      '@vscode/vsce-sign-alpine-arm64': 2.0.6
+      '@vscode/vsce-sign-alpine-x64': 2.0.6
+      '@vscode/vsce-sign-darwin-arm64': 2.0.2
+      '@vscode/vsce-sign-darwin-x64': 2.0.2
+      '@vscode/vsce-sign-linux-arm': 2.0.6
+      '@vscode/vsce-sign-linux-arm64': 2.0.6
+      '@vscode/vsce-sign-linux-x64': 2.0.6
+      '@vscode/vsce-sign-win32-arm64': 2.0.6
+      '@vscode/vsce-sign-win32-x64': 2.0.6
+
+  '@vscode/vsce@2.21.1':
+    dependencies:
+      azure-devops-node-api: 11.2.0
+      chalk: 2.4.2
+      cheerio: 1.1.2
+      commander: 6.2.1
+      glob: 7.2.3
+      hosted-git-info: 4.1.0
+      jsonc-parser: 3.3.1
+      leven: 3.1.0
+      markdown-it: 12.3.2
+      mime: 1.6.0
+      minimatch: 3.1.2
+      parse-semver: 1.1.1
+      read: 1.0.7
+      semver: 7.7.3
+      tmp: 0.2.5
+      typed-rest-client: 1.8.11
+      url-join: 4.0.1
+      xml2js: 0.5.0
+      yauzl: 2.10.0
+      yazl: 2.5.1
     optionalDependencies:
-      '@vscode/vsce-sign-alpine-arm64': 2.0.5
-      '@vscode/vsce-sign-alpine-x64': 2.0.5
-      '@vscode/vsce-sign-darwin-arm64': 2.0.5
-      '@vscode/vsce-sign-darwin-x64': 2.0.5
-      '@vscode/vsce-sign-linux-arm': 2.0.5
-      '@vscode/vsce-sign-linux-arm64': 2.0.5
-      '@vscode/vsce-sign-linux-x64': 2.0.5
-      '@vscode/vsce-sign-win32-arm64': 2.0.5
-      '@vscode/vsce-sign-win32-x64': 2.0.5
+      keytar: 7.9.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
 
   '@vscode/vsce@2.32.0':
     dependencies:
-      '@azure/identity': 4.11.1
-      '@vscode/vsce-sign': 2.0.6
+      '@azure/identity': 4.13.0
+      '@vscode/vsce-sign': 2.0.8
       azure-devops-node-api: 12.5.0
       chalk: 2.4.2
       cheerio: 1.1.2
@@ -32665,8 +37051,8 @@ snapshots:
       minimatch: 3.1.2
       parse-semver: 1.1.1
       read: 1.0.7
-      semver: 7.7.2
-      tmp: 0.2.4
+      semver: 7.7.3
+      tmp: 0.2.5
       typed-rest-client: 1.8.11
       url-join: 4.0.1
       xml2js: 0.5.0
@@ -32675,18 +37061,19 @@ snapshots:
     optionalDependencies:
       keytar: 7.9.0
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - react-native-b4a
       - supports-color
 
   '@vscode/vsce@3.4.2':
     dependencies:
-      '@azure/identity': 4.11.1
+      '@azure/identity': 4.13.0
       '@secretlint/node': 9.3.4
       '@secretlint/secretlint-formatter-sarif': 9.3.4
       '@secretlint/secretlint-rule-no-dotenv': 9.3.4
       '@secretlint/secretlint-rule-preset-recommend': 9.3.4
-      '@vscode/vsce-sign': 2.0.6
+      '@vscode/vsce-sign': 2.0.8
       azure-devops-node-api: 12.5.0
       chalk: 2.4.2
       cheerio: 1.1.2
@@ -32703,8 +37090,8 @@ snapshots:
       parse-semver: 1.1.1
       read: 1.0.7
       secretlint: 9.3.4
-      semver: 7.7.2
-      tmp: 0.2.4
+      semver: 7.7.3
+      tmp: 0.2.5
       typed-rest-client: 1.8.11
       url-join: 4.0.1
       xml2js: 0.5.0
@@ -32713,6 +37100,7 @@ snapshots:
     optionalDependencies:
       keytar: 7.9.0
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - react-native-b4a
       - supports-color
@@ -32809,76 +37197,81 @@ snapshots:
       '@webassemblyjs/ast': 1.14.1
       '@xtuc/long': 4.2.2
 
-  '@webpack-cli/configtest@1.2.0(webpack-cli@4.10.0)(webpack@5.101.0)':
+  '@webpack-cli/configtest@1.2.0(webpack-cli@4.10.0)(webpack@5.102.1)':
     dependencies:
-      webpack: 5.101.0(webpack-cli@4.10.0)
-      webpack-cli: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-cli: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.102.1)
 
-  '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4)(webpack@5.101.0)':
+  '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4)(webpack@5.102.1)':
     dependencies:
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-cli: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@5.1.4)
+      webpack-cli: 5.1.4(webpack@5.102.1)
 
-  '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1)(webpack@5.101.0)':
+  '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1)(webpack@5.102.1)':
     dependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-cli: 6.0.1(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@6.0.1)
+      webpack-cli: 6.0.1(webpack@5.102.1)
 
   '@webpack-cli/info@1.5.0(webpack-cli@4.10.0)':
     dependencies:
-      envinfo: 7.14.0
-      webpack-cli: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      envinfo: 7.20.0
+      webpack-cli: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.102.1)
 
-  '@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.101.0)':
+  '@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.102.1)':
     dependencies:
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-cli: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@5.1.4)
+      webpack-cli: 5.1.4(webpack@5.102.1)
 
-  '@webpack-cli/info@3.0.1(webpack-cli@6.0.1)(webpack@5.101.0)':
+  '@webpack-cli/info@3.0.1(webpack-cli@6.0.1)(webpack@5.102.1)':
     dependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-cli: 6.0.1(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@6.0.1)
+      webpack-cli: 6.0.1(webpack@5.102.1)
 
   '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0)':
     dependencies:
-      webpack-cli: 4.10.0(webpack@5.101.0)
+      webpack-cli: 4.10.0(webpack@5.102.1)
 
   '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0)(webpack-dev-server@5.2.2)':
     dependencies:
-      webpack-cli: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      webpack-cli: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.102.1)
     optionalDependencies:
-      webpack-dev-server: 5.2.2(webpack-cli@4.10.0)(webpack@5.101.0)
+      webpack-dev-server: 5.2.2(webpack-cli@4.10.0)(webpack@5.102.1)
 
-  '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack-dev-server@5.2.2)(webpack@5.101.0)':
+  '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack-dev-server@5.2.2)(webpack@5.102.1)':
     dependencies:
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-cli: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@5.1.4)
+      webpack-cli: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.102.1)
     optionalDependencies:
-      webpack-dev-server: 5.2.2(webpack-cli@5.1.4)(webpack@5.101.0)
+      webpack-dev-server: 5.2.2(webpack-cli@5.1.4)(webpack@5.102.1)
+
+  '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack@5.102.1)':
+    dependencies:
+      webpack: 5.102.1(webpack-cli@5.1.4)
+      webpack-cli: 5.1.4(webpack@5.102.1)
 
-  '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1)(webpack-dev-server@5.2.2)(webpack@5.101.0)':
+  '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1)(webpack-dev-server@5.2.2)(webpack@5.102.1)':
     dependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-cli: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+      webpack-cli: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.102.1)
     optionalDependencies:
-      webpack-dev-server: 5.2.2(webpack-cli@6.0.1)(webpack@5.101.0)
+      webpack-dev-server: 5.2.2(webpack-cli@6.0.1)(webpack@5.102.1)
 
-  '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1)(webpack@5.101.0)':
+  '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1)(webpack@5.102.1)':
     dependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-cli: 6.0.1(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@6.0.1)
+      webpack-cli: 6.0.1(webpack@5.102.1)
 
   '@xmldom/xmldom@0.7.13': {}
 
-  '@xmldom/xmldom@0.8.10': {}
+  '@xmldom/xmldom@0.8.11': {}
 
   '@xtuc/ieee754@1.2.0': {}
 
   '@xtuc/long@4.2.2': {}
 
-  '@yarnpkg/esbuild-plugin-pnp@3.0.0-rc.15(esbuild@0.25.8)':
+  '@yarnpkg/esbuild-plugin-pnp@3.0.0-rc.15(esbuild@0.25.12)':
     dependencies:
-      esbuild: 0.25.8
+      esbuild: 0.25.12
       tslib: 2.8.1
 
   '@yarnpkg/fslib@2.10.3':
@@ -32888,7 +37281,7 @@ snapshots:
 
   '@yarnpkg/libzip@2.3.0':
     dependencies:
-      '@types/emscripten': 1.40.1
+      '@types/emscripten': 1.41.5
       tslib: 1.14.1
 
   abab@1.0.4: {}
@@ -32967,7 +37360,7 @@ snapshots:
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -32987,11 +37380,11 @@ snapshots:
       clean-stack: 4.2.0
       indent-string: 5.0.0
 
-  ai@5.0.59(zod@4.1.11):
+  ai@5.0.87(zod@4.1.11):
     dependencies:
-      '@ai-sdk/gateway': 1.0.32(zod@4.1.11)
+      '@ai-sdk/gateway': 2.0.6(zod@4.1.11)
       '@ai-sdk/provider': 2.0.0
-      '@ai-sdk/provider-utils': 3.0.10(zod@4.1.11)
+      '@ai-sdk/provider-utils': 3.0.16(zod@4.1.11)
       '@opentelemetry/api': 1.9.0
       zod: 4.1.11
 
@@ -33049,7 +37442,7 @@ snapshots:
   ajv@8.17.1:
     dependencies:
       fast-deep-equal: 3.1.3
-      fast-uri: 3.0.6
+      fast-uri: 3.1.0
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
@@ -33086,7 +37479,7 @@ snapshots:
     dependencies:
       type-fest: 0.21.3
 
-  ansi-escapes@7.0.0:
+  ansi-escapes@7.1.1:
     dependencies:
       environment: 1.1.0
 
@@ -33102,7 +37495,7 @@ snapshots:
 
   ansi-regex@5.0.1: {}
 
-  ansi-regex@6.1.0: {}
+  ansi-regex@6.2.2: {}
 
   ansi-styles@2.2.1: {}
 
@@ -33116,7 +37509,7 @@ snapshots:
 
   ansi-styles@5.2.0: {}
 
-  ansi-styles@6.2.1: {}
+  ansi-styles@6.2.3: {}
 
   ansi-to-html@0.6.15:
     dependencies:
@@ -33175,6 +37568,8 @@ snapshots:
       delegates: 1.0.0
       readable-stream: 3.6.2
 
+  arg@4.1.3: {}
+
   arg@5.0.2: {}
 
   argparse@1.0.10:
@@ -33374,8 +37769,8 @@ snapshots:
 
   autoprefixer@10.4.21(postcss@8.5.6):
     dependencies:
-      browserslist: 4.25.1
-      caniuse-lite: 1.0.30001731
+      browserslist: 4.27.0
+      caniuse-lite: 1.0.30001753
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
@@ -33385,7 +37780,7 @@ snapshots:
   autoprefixer@6.7.7:
     dependencies:
       browserslist: 1.7.7
-      caniuse-db: 1.0.30001731
+      caniuse-db: 1.0.30001753
       normalize-range: 0.1.2
       num2fraction: 1.2.2
       postcss: 5.2.18
@@ -33394,7 +37789,7 @@ snapshots:
   autoprefixer@7.1.6:
     dependencies:
       browserslist: 2.11.3
-      caniuse-lite: 1.0.30001731
+      caniuse-lite: 1.0.30001753
       normalize-range: 0.1.2
       num2fraction: 1.2.2
       postcss: 6.0.23
@@ -33402,8 +37797,8 @@ snapshots:
 
   autoprefixer@9.8.8:
     dependencies:
-      browserslist: 4.25.1
-      caniuse-lite: 1.0.30001731
+      browserslist: 4.27.0
+      caniuse-lite: 1.0.30001753
       normalize-range: 0.1.2
       num2fraction: 1.2.2
       picocolors: 0.2.1
@@ -33422,9 +37817,9 @@ snapshots:
 
   aws4fetch@1.0.20: {}
 
-  axe-core@4.10.3: {}
+  axe-core@4.11.0: {}
 
-  axios@1.12.0:
+  axios@1.12.2:
     dependencies:
       follow-redirects: 1.15.11
       form-data: 4.0.4
@@ -33478,15 +37873,19 @@ snapshots:
     dependencies:
       '@babel/core': 7.27.7
 
+  babel-core@7.0.0-bridge.0(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+
   babel-eslint@10.1.0(eslint@6.8.0):
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.0
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/parser': 7.28.5
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
       eslint: 6.8.0
       eslint-visitor-keys: 1.3.0
-      resolve: 1.22.10
+      resolve: 1.22.11
     transitivePeerDependencies:
       - supports-color
 
@@ -33617,35 +38016,59 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-loader@10.0.0(@babel/core@7.27.7)(webpack@5.101.0):
+  babel-loader@10.0.0(@babel/core@7.27.7)(webpack@5.102.1):
     dependencies:
       '@babel/core': 7.27.7
       find-up: 5.0.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
-  babel-loader@7.1.2(babel-core@7.0.0-bridge.0(@babel/core@7.27.7))(webpack@5.101.0):
+  babel-loader@7.1.2(babel-core@7.0.0-bridge.0(@babel/core@7.27.7))(webpack@5.102.1):
     dependencies:
       babel-core: 7.0.0-bridge.0(@babel/core@7.27.7)
       find-cache-dir: 1.0.0
       loader-utils: 1.4.2
       mkdirp: 0.5.6
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+
+  babel-loader@7.1.2(babel-core@7.0.0-bridge.0(@babel/core@7.28.5))(webpack@5.102.1):
+    dependencies:
+      babel-core: 7.0.0-bridge.0(@babel/core@7.28.5)
+      find-cache-dir: 1.0.0
+      loader-utils: 1.4.2
+      mkdirp: 0.5.6
+      webpack: 5.102.1(webpack-cli@4.10.0)
 
-  babel-loader@8.4.1(@babel/core@7.27.7)(webpack@5.101.0):
+  babel-loader@8.4.1(@babel/core@7.27.7)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
     dependencies:
       '@babel/core': 7.27.7
       find-cache-dir: 3.3.2
       loader-utils: 2.0.4
       make-dir: 3.1.0
       schema-utils: 2.7.1
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+
+  babel-loader@8.4.1(@babel/core@7.27.7)(webpack@5.102.1):
+    dependencies:
+      '@babel/core': 7.27.7
+      find-cache-dir: 3.3.2
+      loader-utils: 2.0.4
+      make-dir: 3.1.0
+      schema-utils: 2.7.1
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+
+  babel-loader@9.2.1(@babel/core@7.27.7)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
+    dependencies:
+      '@babel/core': 7.27.7
+      find-cache-dir: 4.0.0
+      schema-utils: 4.3.3
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
 
-  babel-loader@9.2.1(@babel/core@7.27.7)(webpack@5.101.0):
+  babel-loader@9.2.1(@babel/core@7.27.7)(webpack@5.102.1):
     dependencies:
       '@babel/core': 7.27.7
       find-cache-dir: 4.0.0
-      schema-utils: 4.3.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      schema-utils: 4.3.3
+      webpack: 5.102.1(webpack-cli@5.1.4)
 
   babel-messages@6.23.0:
     dependencies:
@@ -33705,44 +38128,54 @@ snapshots:
   babel-plugin-jest-hoist@25.5.0:
     dependencies:
       '@babel/template': 7.27.2
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
       '@types/babel__traverse': 7.28.0
 
   babel-plugin-jest-hoist@29.6.3:
     dependencies:
       '@babel/template': 7.27.2
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.28.0
 
   babel-plugin-macros@2.8.0:
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       cosmiconfig: 6.0.0
-      resolve: 1.22.10
+      resolve: 1.22.11
 
   babel-plugin-macros@3.1.0:
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       cosmiconfig: 7.1.0
-      resolve: 1.22.10
+      resolve: 1.22.11
 
   babel-plugin-named-exports-order@0.0.2: {}
 
   babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.27.7):
     dependencies:
-      '@babel/compat-data': 7.28.0
+      '@babel/compat-data': 7.28.5
       '@babel/core': 7.27.7
       '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.27.7)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
+  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.5):
+    dependencies:
+      '@babel/compat-data': 7.28.5
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+      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
       '@babel/helper-define-polyfill-provider': 0.1.5(@babel/core@7.27.7)
-      core-js-compat: 3.45.0
+      core-js-compat: 3.46.0
     transitivePeerDependencies:
       - supports-color
 
@@ -33750,9 +38183,18 @@ snapshots:
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.27.7)
-      core-js-compat: 3.45.0
+      core-js-compat: 3.46.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-polyfill-corejs3@0.11.1(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+      core-js-compat: 3.46.0
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
   babel-plugin-polyfill-regenerator@0.0.4(@babel/core@7.27.7):
     dependencies:
@@ -33768,6 +38210,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   babel-plugin-react-docgen@4.2.1:
     dependencies:
       ast-types: 0.14.2
@@ -34156,16 +38606,17 @@ snapshots:
 
   balanced-match@2.0.0: {}
 
-  bare-events@2.7.0: {}
+  bare-events@2.8.1: {}
 
-  bare-fs@4.4.4:
+  bare-fs@4.5.0:
     dependencies:
-      bare-events: 2.7.0
+      bare-events: 2.8.1
       bare-path: 3.0.0
-      bare-stream: 2.7.0(bare-events@2.7.0)
-      bare-url: 2.2.2
+      bare-stream: 2.7.0(bare-events@2.8.1)
+      bare-url: 2.3.2
       fast-fifo: 1.3.2
     transitivePeerDependencies:
+      - bare-abort-controller
       - react-native-b4a
     optional: true
 
@@ -34177,16 +38628,17 @@ snapshots:
       bare-os: 3.6.2
     optional: true
 
-  bare-stream@2.7.0(bare-events@2.7.0):
+  bare-stream@2.7.0(bare-events@2.8.1):
     dependencies:
       streamx: 2.23.0
     optionalDependencies:
-      bare-events: 2.7.0
+      bare-events: 2.8.1
     transitivePeerDependencies:
+      - bare-abort-controller
       - react-native-b4a
     optional: true
 
-  bare-url@2.2.2:
+  bare-url@2.3.2:
     dependencies:
       bare-path: 3.0.0
     optional: true
@@ -34195,6 +38647,8 @@ snapshots:
 
   base64-js@1.5.1: {}
 
+  baseline-browser-mapping@2.8.23: {}
+
   basic-auth@2.0.1:
     dependencies:
       safe-buffer: 5.1.2
@@ -34230,7 +38684,7 @@ snapshots:
 
   binaryextensions@6.11.0:
     dependencies:
-      editions: 6.21.0
+      editions: 6.22.0
 
   bindings@1.5.0:
     dependencies:
@@ -34271,12 +38725,12 @@ snapshots:
     dependencies:
       bytes: 3.1.2
       content-type: 1.0.5
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       http-errors: 2.0.0
       iconv-lite: 0.6.3
       on-finished: 2.4.1
       qs: 6.14.0
-      raw-body: 3.0.0
+      raw-body: 3.0.1
       type-is: 2.0.1
     transitivePeerDependencies:
       - supports-color
@@ -34290,7 +38744,7 @@ snapshots:
 
   boundary@2.0.0: {}
 
-  bowser@2.11.0: {}
+  bowser@2.12.1: {}
 
   boxen@1.3.0:
     dependencies:
@@ -34346,20 +38800,21 @@ snapshots:
 
   browserslist@1.7.7:
     dependencies:
-      caniuse-db: 1.0.30001731
-      electron-to-chromium: 1.5.198
+      caniuse-db: 1.0.30001753
+      electron-to-chromium: 1.5.244
 
   browserslist@2.11.3:
     dependencies:
-      caniuse-lite: 1.0.30001731
-      electron-to-chromium: 1.5.198
+      caniuse-lite: 1.0.30001753
+      electron-to-chromium: 1.5.244
 
-  browserslist@4.25.1:
+  browserslist@4.27.0:
     dependencies:
-      caniuse-lite: 1.0.30001731
-      electron-to-chromium: 1.5.198
-      node-releases: 2.0.19
-      update-browserslist-db: 1.1.3(browserslist@4.25.1)
+      baseline-browser-mapping: 2.8.23
+      caniuse-lite: 1.0.30001753
+      electron-to-chromium: 1.5.244
+      node-releases: 2.0.27
+      update-browserslist-db: 1.1.4(browserslist@4.27.0)
 
   bs-logger@0.2.6:
     dependencies:
@@ -34407,12 +38862,14 @@ snapshots:
 
   bundle-name@4.1.0:
     dependencies:
-      run-applescript: 7.0.0
+      run-applescript: 7.1.0
 
   byline@5.0.0: {}
 
   bytes-iec@3.1.1: {}
 
+  bytes@3.0.0: {}
+
   bytes@3.1.2: {}
 
   c8@10.1.3:
@@ -34423,7 +38880,7 @@ snapshots:
       foreground-child: 3.3.1
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
-      istanbul-reports: 3.1.7
+      istanbul-reports: 3.2.0
       test-exclude: 7.0.1
       v8-to-istanbul: 9.3.0
       yargs: 17.7.2
@@ -34437,7 +38894,7 @@ snapshots:
       foreground-child: 2.0.0
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
-      istanbul-reports: 3.1.7
+      istanbul-reports: 3.2.0
       rimraf: 3.0.2
       test-exclude: 6.0.0
       v8-to-istanbul: 9.3.0
@@ -34511,7 +38968,7 @@ snapshots:
       http-cache-semantics: 4.2.0
       keyv: 4.5.4
       mimic-response: 4.0.0
-      normalize-url: 8.0.2
+      normalize-url: 8.1.0
       responselike: 3.0.0
 
   cacheable-request@12.0.1:
@@ -34521,13 +38978,17 @@ snapshots:
       http-cache-semantics: 4.2.0
       keyv: 4.5.4
       mimic-response: 4.0.0
-      normalize-url: 8.0.2
+      normalize-url: 8.1.0
       responselike: 3.0.0
 
-  cacheable@1.10.3:
+  cacheable@2.1.1:
     dependencies:
-      hookified: 1.11.0
-      keyv: 5.5.0
+      '@cacheable/memoize': 2.0.3
+      '@cacheable/memory': 2.0.4
+      '@cacheable/utils': 2.2.0
+      hookified: 1.12.2
+      keyv: 5.5.3
+      qified: 0.5.1
 
   call-bind-apply-helpers@1.0.2:
     dependencies:
@@ -34591,26 +39052,27 @@ snapshots:
   caniuse-api@1.6.1:
     dependencies:
       browserslist: 1.7.7
-      caniuse-db: 1.0.30001731
+      caniuse-db: 1.0.30001753
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
   caniuse-api@3.0.0:
     dependencies:
-      browserslist: 4.25.1
-      caniuse-lite: 1.0.30001731
+      browserslist: 4.27.0
+      caniuse-lite: 1.0.30001753
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  caniuse-db@1.0.30001731: {}
+  caniuse-db@1.0.30001753: {}
 
-  caniuse-lite@1.0.30001731: {}
+  caniuse-lite@1.0.30001753: {}
 
-  canvas@3.1.2:
+  canvas@3.2.0:
     dependencies:
       node-addon-api: 7.1.1
       prebuild-install: 7.1.3
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - react-native-b4a
     optional: true
@@ -34647,12 +39109,12 @@ snapshots:
       pathval: 1.1.1
       type-detect: 4.1.0
 
-  chai@5.2.1:
+  chai@5.3.3:
     dependencies:
       assertion-error: 2.0.1
       check-error: 2.1.1
       deep-eql: 5.0.2
-      loupe: 3.2.0
+      loupe: 3.2.1
       pathval: 2.0.1
 
   chainsaw@0.1.0:
@@ -34683,7 +39145,7 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
-  chalk@5.5.0: {}
+  chalk@5.6.2: {}
 
   change-case@4.1.2:
     dependencies:
@@ -34746,7 +39208,7 @@ snapshots:
       parse5: 7.3.0
       parse5-htmlparser2-tree-adapter: 7.1.0
       parse5-parser-stream: 7.1.2
-      undici: 7.13.0
+      undici: 7.16.0
       whatwg-mimetype: 4.0.0
 
   chokidar@1.7.0:
@@ -34800,6 +39262,10 @@ snapshots:
     dependencies:
       chalk: 1.1.3
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   classnames@2.5.1: {}
 
   clean-css@4.2.4:
@@ -34810,6 +39276,8 @@ snapshots:
     dependencies:
       source-map: 0.6.1
 
+  clean-set@1.1.2: {}
+
   clean-stack@2.2.0: {}
 
   clean-stack@4.2.0:
@@ -34850,10 +39318,10 @@ snapshots:
     optionalDependencies:
       '@colors/colors': 1.5.0
 
-  cli-truncate@4.0.0:
+  cli-truncate@5.1.1:
     dependencies:
-      slice-ansi: 5.0.0
-      string-width: 7.2.0
+      slice-ansi: 7.1.2
+      string-width: 8.1.0
 
   cli-width@2.2.1: {}
 
@@ -34869,6 +39337,13 @@ snapshots:
       is-wsl: 3.1.0
       is64bit: 2.0.0
 
+  clipboardy@5.0.0:
+    dependencies:
+      execa: 9.6.0
+      is-wayland: 0.1.0
+      is-wsl: 3.1.0
+      is64bit: 2.0.0
+
   cliui@3.2.0:
     dependencies:
       string-width: 1.0.2
@@ -34921,6 +39396,25 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cm6-theme-basic-light@0.2.0(@codemirror/language@6.11.3)(@codemirror/state@6.5.2)(@codemirror/view@6.38.6)(@lezer/highlight@1.2.3):
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.6
+      '@lezer/highlight': 1.2.3
+
+  cmdk@1.1.1(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.2.0)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.0)(@types/react@18.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   co@4.6.0: {}
 
   coa@1.0.4:
@@ -34933,29 +39427,29 @@ snapshots:
 
   code-point-at@1.1.0: {}
 
-  codemirror-graphql@2.2.4(@codemirror/language@6.11.2)(codemirror@5.65.19)(graphql@16.11.0):
+  codemirror-graphql@2.2.4(@codemirror/language@6.11.3)(codemirror@5.65.20)(graphql@16.12.0):
     dependencies:
-      '@codemirror/language': 6.11.2
+      '@codemirror/language': 6.11.3
       '@types/codemirror': 0.0.90
-      codemirror: 5.65.19
-      graphql: 16.11.0
-      graphql-language-service: 5.5.0(graphql@16.11.0)
+      codemirror: 5.65.20
+      graphql: 16.12.0
+      graphql-language-service: 5.5.0(graphql@16.12.0)
 
-  codemirror@5.65.19: {}
+  codemirror@5.65.20: {}
 
   codemirror@6.0.2:
     dependencies:
-      '@codemirror/autocomplete': 6.18.6
-      '@codemirror/commands': 6.8.1
-      '@codemirror/language': 6.11.2
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/commands': 6.10.0
+      '@codemirror/language': 6.11.3
       '@codemirror/lint': 6.8.5
       '@codemirror/search': 6.5.11
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.1
+      '@codemirror/view': 6.38.6
 
   collapse-white-space@1.0.6: {}
 
-  collect-v8-coverage@1.0.2: {}
+  collect-v8-coverage@1.0.3: {}
 
   color-convert@1.9.3:
     dependencies:
@@ -34965,18 +39459,23 @@ snapshots:
     dependencies:
       color-name: 1.1.4
 
+  color-convert@3.1.2:
+    dependencies:
+      color-name: 2.0.2
+
   color-name@1.1.3: {}
 
   color-name@1.1.4: {}
 
+  color-name@2.0.2: {}
+
   color-string@0.3.0:
     dependencies:
       color-name: 1.1.4
 
-  color-string@1.9.1:
+  color-string@2.1.2:
     dependencies:
-      color-name: 1.1.4
-      simple-swizzle: 0.2.2
+      color-name: 2.0.2
 
   color-support@1.1.3: {}
 
@@ -34986,10 +39485,10 @@ snapshots:
       color-convert: 1.9.3
       color-string: 0.3.0
 
-  color@3.2.1:
+  color@5.0.2:
     dependencies:
-      color-convert: 1.9.3
-      color-string: 1.9.1
+      color-convert: 3.1.2
+      color-string: 2.1.2
 
   colord@2.9.3: {}
 
@@ -35007,11 +39506,6 @@ snapshots:
 
   colors@1.4.0: {}
 
-  colorspace@1.1.4:
-    dependencies:
-      color: 3.2.1
-      text-hex: 1.0.0
-
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -35028,7 +39522,7 @@ snapshots:
 
   commander@13.1.0: {}
 
-  commander@14.0.0: {}
+  commander@14.0.2: {}
 
   commander@2.13.0: {}
 
@@ -35066,6 +39560,8 @@ snapshots:
       safe-buffer: 5.2.1
       vary: 1.1.2
 
+  compute-scroll-into-view@2.0.4: {}
+
   concat-stream@1.6.2:
     dependencies:
       buffer-from: 1.1.2
@@ -35077,6 +39573,15 @@ snapshots:
     dependencies:
       source-map: 0.6.1
 
+  concurrently@9.2.1:
+    dependencies:
+      chalk: 4.1.2
+      rxjs: 7.8.2
+      shell-quote: 1.8.3
+      supports-color: 8.1.1
+      tree-kill: 1.2.2
+      yargs: 17.7.2
+
   confbox@0.1.8: {}
 
   configstore@3.1.5:
@@ -35104,6 +39609,8 @@ snapshots:
 
   constants-browserify@1.0.0: {}
 
+  content-disposition@0.5.2: {}
+
   content-disposition@0.5.4:
     dependencies:
       safe-buffer: 5.2.1
@@ -35146,14 +39653,14 @@ snapshots:
     dependencies:
       toggle-selection: 1.0.6
 
-  copy-webpack-plugin@13.0.0(webpack@5.101.0):
+  copy-webpack-plugin@13.0.1(webpack@5.102.1):
     dependencies:
       glob-parent: 6.0.2
       normalize-path: 3.0.0
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       serialize-javascript: 6.0.2
-      tinyglobby: 0.2.14
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      tinyglobby: 0.2.15
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
   copyfiles@2.4.1:
     dependencies:
@@ -35165,15 +39672,15 @@ snapshots:
       untildify: 4.0.0
       yargs: 16.2.0
 
-  core-js-compat@3.45.0:
+  core-js-compat@3.46.0:
     dependencies:
-      browserslist: 4.25.1
+      browserslist: 4.27.0
 
-  core-js-pure@3.45.0: {}
+  core-js-pure@3.46.0: {}
 
   core-js@2.6.12: {}
 
-  core-js@3.45.0: {}
+  core-js@3.46.0: {}
 
   core-util-is@1.0.2: {}
 
@@ -35274,13 +39781,13 @@ snapshots:
     dependencies:
       capture-stack-trace: 1.0.2
 
-  create-jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0):
+  create-jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)):
     dependencies:
       '@jest/types': 29.6.3
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)
+      jest-config: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       jest-util: 29.7.0
       prompts: 2.4.2
     transitivePeerDependencies:
@@ -35289,9 +39796,11 @@ snapshots:
       - supports-color
       - ts-node
 
-  create-storybook@9.1.1:
+  create-require@1.1.1: {}
+
+  create-storybook@9.1.16:
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.3
 
   crelt@1.0.6: {}
 
@@ -35299,7 +39808,7 @@ snapshots:
 
   cron-parser@4.9.0:
     dependencies:
-      luxon: 3.7.1
+      luxon: 3.7.2
 
   cron-validator@1.3.1: {}
 
@@ -35364,7 +39873,24 @@ snapshots:
       postcss-value-parser: 3.3.1
       source-list-map: 2.0.1
 
-  css-loader@3.6.0(webpack@5.101.0):
+  css-loader@3.6.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
+    dependencies:
+      camelcase: 5.3.1
+      cssesc: 3.0.0
+      icss-utils: 4.1.1
+      loader-utils: 1.4.2
+      normalize-path: 3.0.0
+      postcss: 7.0.39
+      postcss-modules-extract-imports: 2.0.0
+      postcss-modules-local-by-default: 3.0.3
+      postcss-modules-scope: 2.2.0
+      postcss-modules-values: 3.0.0
+      postcss-value-parser: 4.2.0
+      schema-utils: 2.7.1
+      semver: 6.3.1
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+
+  css-loader@3.6.0(webpack@5.102.1):
     dependencies:
       camelcase: 5.3.1
       cssesc: 3.0.0
@@ -35379,9 +39905,9 @@ snapshots:
       postcss-value-parser: 4.2.0
       schema-utils: 2.7.1
       semver: 6.3.1
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
-  css-loader@5.2.7(webpack@5.101.0):
+  css-loader@5.2.7(webpack@5.102.1):
     dependencies:
       icss-utils: 5.1.0(postcss@8.5.6)
       loader-utils: 2.0.4
@@ -35392,10 +39918,23 @@ snapshots:
       postcss-modules-values: 4.0.0(postcss@8.5.6)
       postcss-value-parser: 4.2.0
       schema-utils: 3.3.0
-      semver: 7.7.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      semver: 7.7.3
+      webpack: 5.102.1(webpack-cli@5.1.4)
+
+  css-loader@6.11.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.6)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.6)
+      postcss-modules-scope: 3.2.1(postcss@8.5.6)
+      postcss-modules-values: 4.0.0(postcss@8.5.6)
+      postcss-value-parser: 4.2.0
+      semver: 7.7.3
+    optionalDependencies:
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
 
-  css-loader@6.11.0(webpack@5.101.0):
+  css-loader@6.11.0(webpack@5.102.1):
     dependencies:
       icss-utils: 5.1.0(postcss@8.5.6)
       postcss: 8.5.6
@@ -35404,11 +39943,11 @@ snapshots:
       postcss-modules-scope: 3.2.1(postcss@8.5.6)
       postcss-modules-values: 4.0.0(postcss@8.5.6)
       postcss-value-parser: 4.2.0
-      semver: 7.7.2
+      semver: 7.7.3
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@5.1.4)
 
-  css-loader@7.1.2(webpack@5.101.0):
+  css-loader@7.1.2(webpack@5.102.1):
     dependencies:
       icss-utils: 5.1.0(postcss@8.5.6)
       postcss: 8.5.6
@@ -35417,9 +39956,9 @@ snapshots:
       postcss-modules-scope: 3.2.1(postcss@8.5.6)
       postcss-modules-values: 4.0.0(postcss@8.5.6)
       postcss-value-parser: 4.2.0
-      semver: 7.7.2
+      semver: 7.7.3
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
   css-select@4.3.0:
     dependencies:
@@ -35644,7 +40183,7 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
-  debug@4.4.1(supports-color@8.1.1):
+  debug@4.4.3(supports-color@8.1.1):
     dependencies:
       ms: 2.1.3
     optionalDependencies:
@@ -35679,7 +40218,7 @@ snapshots:
 
   dedent@0.7.0: {}
 
-  dedent@1.6.0(babel-plugin-macros@3.1.0):
+  dedent@1.7.0(babel-plugin-macros@3.1.0):
     optionalDependencies:
       babel-plugin-macros: 3.1.0
 
@@ -35772,7 +40311,7 @@ snapshots:
 
   del-cli@6.0.0:
     dependencies:
-      del: 8.0.0
+      del: 8.0.1
       meow: 13.2.0
 
   del@2.2.2:
@@ -35807,13 +40346,14 @@ snapshots:
       rimraf: 3.0.2
       slash: 4.0.0
 
-  del@8.0.0:
+  del@8.0.1:
     dependencies:
       globby: 14.1.0
       is-glob: 4.0.3
       is-path-cwd: 3.0.0
       is-path-inside: 4.0.0
       p-map: 7.0.3
+      presentable-error: 0.0.1
       slash: 5.1.0
 
   delayed-stream@1.0.0: {}
@@ -35841,7 +40381,7 @@ snapshots:
   detect-libc@1.0.3:
     optional: true
 
-  detect-libc@2.0.4: {}
+  detect-libc@2.1.2: {}
 
   detect-newline@3.1.0: {}
 
@@ -35861,7 +40401,7 @@ snapshots:
   detect-port@1.6.1:
     dependencies:
       address: 1.2.2
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -35869,7 +40409,7 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  dexie@4.0.11: {}
+  dexie@4.2.1: {}
 
   diagnostic-channel-publishers@0.3.5(diagnostic-channel@0.2.0):
     dependencies:
@@ -35969,6 +40509,10 @@ snapshots:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
+  dompurify@3.2.6:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@2.8.0:
     dependencies:
       dom-serializer: 1.4.1
@@ -36002,6 +40546,15 @@ snapshots:
 
   dotenv@8.6.0: {}
 
+  downshift@7.6.2(react@18.2.0):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      compute-scroll-into-view: 2.0.4
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-is: 17.0.2
+      tslib: 2.8.1
+
   drange@1.1.1: {}
 
   dunder-proto@1.0.1:
@@ -36036,9 +40589,9 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
-  editions@6.21.0:
+  editions@6.22.0:
     dependencies:
-      version-range: 4.14.0
+      version-range: 4.15.0
 
   ee-first@1.1.1: {}
 
@@ -36046,7 +40599,7 @@ snapshots:
     dependencies:
       jake: 10.9.4
 
-  electron-to-chromium@1.5.198: {}
+  electron-to-chromium@1.5.244: {}
 
   email-addresses@5.0.0: {}
 
@@ -36056,7 +40609,7 @@ snapshots:
 
   emittery@0.13.1: {}
 
-  emoji-regex@10.4.0: {}
+  emoji-regex@10.6.0: {}
 
   emoji-regex@7.0.3: {}
 
@@ -36104,7 +40657,7 @@ snapshots:
   enhanced-resolve@5.18.3:
     dependencies:
       graceful-fs: 4.2.11
-      tapable: 2.2.2
+      tapable: 2.3.0
 
   enquirer@2.4.1:
     dependencies:
@@ -36121,7 +40674,7 @@ snapshots:
 
   env-paths@2.2.1: {}
 
-  envinfo@7.14.0: {}
+  envinfo@7.20.0: {}
 
   environment@1.1.0: {}
 
@@ -36133,7 +40686,7 @@ snapshots:
     dependencies:
       prr: 1.0.1
 
-  error-ex@1.3.2:
+  error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
 
@@ -36258,7 +40811,7 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
-  es-toolkit@1.39.8: {}
+  es-toolkit@1.41.0: {}
 
   es5-ext@0.10.64:
     dependencies:
@@ -36295,44 +40848,46 @@ snapshots:
 
   esbuild-plugin-alias@0.2.1: {}
 
-  esbuild-register@3.6.0(esbuild@0.25.8):
-    dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
-      esbuild: 0.25.8
-    transitivePeerDependencies:
-      - supports-color
-
-  esbuild@0.25.8:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.8
-      '@esbuild/android-arm': 0.25.8
-      '@esbuild/android-arm64': 0.25.8
-      '@esbuild/android-x64': 0.25.8
-      '@esbuild/darwin-arm64': 0.25.8
-      '@esbuild/darwin-x64': 0.25.8
-      '@esbuild/freebsd-arm64': 0.25.8
-      '@esbuild/freebsd-x64': 0.25.8
-      '@esbuild/linux-arm': 0.25.8
-      '@esbuild/linux-arm64': 0.25.8
-      '@esbuild/linux-ia32': 0.25.8
-      '@esbuild/linux-loong64': 0.25.8
-      '@esbuild/linux-mips64el': 0.25.8
-      '@esbuild/linux-ppc64': 0.25.8
-      '@esbuild/linux-riscv64': 0.25.8
-      '@esbuild/linux-s390x': 0.25.8
-      '@esbuild/linux-x64': 0.25.8
-      '@esbuild/netbsd-arm64': 0.25.8
-      '@esbuild/netbsd-x64': 0.25.8
-      '@esbuild/openbsd-arm64': 0.25.8
-      '@esbuild/openbsd-x64': 0.25.8
-      '@esbuild/openharmony-arm64': 0.25.8
-      '@esbuild/sunos-x64': 0.25.8
-      '@esbuild/win32-arm64': 0.25.8
-      '@esbuild/win32-ia32': 0.25.8
-      '@esbuild/win32-x64': 0.25.8
+  esbuild-register@3.6.0(esbuild@0.25.12):
+    dependencies:
+      debug: 4.4.3(supports-color@8.1.1)
+      esbuild: 0.25.12
+    transitivePeerDependencies:
+      - supports-color
+
+  esbuild@0.25.12:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.12
+      '@esbuild/android-arm': 0.25.12
+      '@esbuild/android-arm64': 0.25.12
+      '@esbuild/android-x64': 0.25.12
+      '@esbuild/darwin-arm64': 0.25.12
+      '@esbuild/darwin-x64': 0.25.12
+      '@esbuild/freebsd-arm64': 0.25.12
+      '@esbuild/freebsd-x64': 0.25.12
+      '@esbuild/linux-arm': 0.25.12
+      '@esbuild/linux-arm64': 0.25.12
+      '@esbuild/linux-ia32': 0.25.12
+      '@esbuild/linux-loong64': 0.25.12
+      '@esbuild/linux-mips64el': 0.25.12
+      '@esbuild/linux-ppc64': 0.25.12
+      '@esbuild/linux-riscv64': 0.25.12
+      '@esbuild/linux-s390x': 0.25.12
+      '@esbuild/linux-x64': 0.25.12
+      '@esbuild/netbsd-arm64': 0.25.12
+      '@esbuild/netbsd-x64': 0.25.12
+      '@esbuild/openbsd-arm64': 0.25.12
+      '@esbuild/openbsd-x64': 0.25.12
+      '@esbuild/openharmony-arm64': 0.25.12
+      '@esbuild/sunos-x64': 0.25.12
+      '@esbuild/win32-arm64': 0.25.12
+      '@esbuild/win32-ia32': 0.25.12
+      '@esbuild/win32-x64': 0.25.12
 
   escalade@3.2.0: {}
 
+  escape-carriage@1.3.1: {}
+
   escape-html@1.0.3: {}
 
   escape-string-regexp@1.0.5: {}
@@ -36391,7 +40946,7 @@ snapshots:
     dependencies:
       debug: 3.2.7
       is-core-module: 2.16.1
-      resolve: 1.22.10
+      resolve: 1.22.11
 
   eslint-module-utils@2.12.1(eslint@6.8.0):
     dependencies:
@@ -36433,7 +40988,7 @@ snapshots:
       array-includes: 3.1.9
       array.prototype.flatmap: 1.3.3
       ast-types-flow: 0.0.8
-      axe-core: 4.10.3
+      axe-core: 4.11.0
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
@@ -36466,21 +41021,21 @@ snapshots:
     dependencies:
       eslint: 8.57.1
 
-  eslint-plugin-react-hooks@5.2.0(eslint@9.26.0(jiti@2.5.1)):
+  eslint-plugin-react-hooks@5.2.0(eslint@9.26.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.26.0(jiti@2.5.1)
+      eslint: 9.26.0(jiti@2.6.1)
 
-  eslint-plugin-react-hooks@5.2.0(eslint@9.27.0(jiti@2.5.1)):
+  eslint-plugin-react-hooks@5.2.0(eslint@9.27.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.27.0(jiti@2.5.1)
+      eslint: 9.27.0(jiti@2.6.1)
 
-  eslint-plugin-react-refresh@0.4.20(eslint@8.57.1):
+  eslint-plugin-react-refresh@0.4.24(eslint@8.57.1):
     dependencies:
       eslint: 8.57.1
 
-  eslint-plugin-react-refresh@0.4.20(eslint@9.27.0(jiti@2.5.1)):
+  eslint-plugin-react-refresh@0.4.24(eslint@9.27.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.27.0(jiti@2.5.1)
+      eslint: 9.27.0(jiti@2.6.1)
 
   eslint-plugin-react@7.37.5(eslint@6.8.0):
     dependencies:
@@ -36526,26 +41081,26 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-storybook@9.1.1(eslint@8.57.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3):
+  eslint-plugin-storybook@9.1.16(eslint@8.57.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3):
     dependencies:
-      '@typescript-eslint/utils': 8.39.0(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.46.3(eslint@8.57.1)(typescript@5.8.3)
       eslint: 8.57.1
-      storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3)
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.5.1)):
+  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.26.0(jiti@2.5.1)
+      eslint: 9.26.0(jiti@2.6.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)
+      '@typescript-eslint/eslint-plugin': 8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)
 
-  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.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))(eslint@9.27.0(jiti@2.5.1)):
+  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.27.0(jiti@2.5.1)
+      eslint: 9.27.0(jiti@2.6.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.32.1(@typescript-eslint/parser@8.33.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/eslint-plugin': 8.32.1(@typescript-eslint/parser@8.33.1(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)
 
   eslint-scope@5.1.1:
     dependencies:
@@ -36589,7 +41144,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 2.4.2
       cross-spawn: 6.0.6
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       doctrine: 3.0.0
       eslint-scope: 5.1.1
       eslint-utils: 1.4.3
@@ -36627,8 +41182,8 @@ snapshots:
 
   eslint@8.57.1:
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.1)
-      '@eslint-community/regexpp': 4.12.1
+      '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.1)
+      '@eslint-community/regexpp': 4.12.2
       '@eslint/eslintrc': 2.1.4
       '@eslint/js': 8.57.1
       '@humanwhocodes/config-array': 0.13.0
@@ -36638,7 +41193,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -36668,26 +41223,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint@9.26.0(jiti@2.5.1):
+  eslint@9.26.0(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.26.0(jiti@2.5.1))
-      '@eslint-community/regexpp': 4.12.1
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.26.0(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
       '@eslint/config-array': 0.20.1
       '@eslint/config-helpers': 0.2.3
       '@eslint/core': 0.13.0
       '@eslint/eslintrc': 3.3.1
       '@eslint/js': 9.26.0
-      '@eslint/plugin-kit': 0.3.4
-      '@humanfs/node': 0.16.6
+      '@eslint/plugin-kit': 0.3.5
+      '@humanfs/node': 0.16.7
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.3
-      '@modelcontextprotocol/sdk': 1.17.1
+      '@modelcontextprotocol/sdk': 1.21.0
       '@types/estree': 1.0.8
       '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       escape-string-regexp: 4.0.0
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
@@ -36708,21 +41263,22 @@ snapshots:
       optionator: 0.9.4
       zod: 3.25.76
     optionalDependencies:
-      jiti: 2.5.1
+      jiti: 2.6.1
     transitivePeerDependencies:
+      - '@cfworker/json-schema'
       - supports-color
 
-  eslint@9.27.0(jiti@2.5.1):
+  eslint@9.27.0(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@2.5.1))
-      '@eslint-community/regexpp': 4.12.1
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.27.0(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
       '@eslint/config-array': 0.20.1
       '@eslint/config-helpers': 0.2.3
       '@eslint/core': 0.14.0
       '@eslint/eslintrc': 3.3.1
       '@eslint/js': 9.27.0
-      '@eslint/plugin-kit': 0.3.4
-      '@humanfs/node': 0.16.6
+      '@eslint/plugin-kit': 0.3.5
+      '@humanfs/node': 0.16.7
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.3
       '@types/estree': 1.0.8
@@ -36730,7 +41286,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       escape-string-regexp: 4.0.0
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
@@ -36750,7 +41306,7 @@ snapshots:
       natural-compare: 1.4.0
       optionator: 0.9.4
     optionalDependencies:
-      jiti: 2.5.1
+      jiti: 2.6.1
     transitivePeerDependencies:
       - supports-color
 
@@ -36799,14 +41355,19 @@ snapshots:
 
   estree-to-babel@3.2.1:
     dependencies:
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
       c8: 7.14.0
     transitivePeerDependencies:
       - supports-color
 
   estree-util-is-identifier-name@3.0.0: {}
 
+  estree-util-visit@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/unist': 3.0.3
+
   estree-walker@0.2.1: {}
 
   estree-walker@0.6.1: {}
@@ -36836,7 +41397,9 @@ snapshots:
 
   events-universal@1.0.1:
     dependencies:
-      bare-events: 2.7.0
+      bare-events: 2.8.1
+    transitivePeerDependencies:
+      - bare-abort-controller
 
   events@3.3.0: {}
 
@@ -36925,6 +41488,21 @@ snapshots:
       signal-exit: 4.1.0
       strip-final-newline: 3.0.0
 
+  execa@9.6.0:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.2
+
   exenv-es6@1.1.1: {}
 
   exit@0.1.2: {}
@@ -36961,7 +41539,7 @@ snapshots:
       jest-message-util: 29.7.0
       jest-util: 29.7.0
 
-  exponential-backoff@3.1.2: {}
+  exponential-backoff@3.1.3: {}
 
   express-rate-limit@7.5.1(express@5.1.0):
     dependencies:
@@ -37009,7 +41587,7 @@ snapshots:
       content-type: 1.0.5
       cookie: 0.7.2
       cookie-signature: 1.2.2
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       encodeurl: 2.0.0
       escape-html: 1.0.3
       etag: 1.8.1
@@ -37056,12 +41634,12 @@ snapshots:
       iconv-lite: 0.4.24
       tmp: 0.0.33
 
-  extract-text-webpack-plugin@3.0.2(webpack@5.101.0):
+  extract-text-webpack-plugin@3.0.2(webpack@5.102.1):
     dependencies:
       async: 2.6.4
       loader-utils: 1.4.2
       schema-utils: 0.3.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
       webpack-sources: 1.4.3
 
   extract-zip@1.7.0:
@@ -37124,7 +41702,7 @@ snapshots:
 
   fast-safe-stringify@2.1.1: {}
 
-  fast-uri@3.0.6: {}
+  fast-uri@3.1.0: {}
 
   fast-xml-parser@5.2.5:
     dependencies:
@@ -37142,6 +41720,10 @@ snapshots:
     dependencies:
       format: 0.2.2
 
+  fault@2.0.1:
+    dependencies:
+      format: 0.2.2
+
   faye-websocket@0.11.4:
     dependencies:
       websocket-driver: 0.7.4
@@ -37170,7 +41752,7 @@ snapshots:
       object-assign: 4.1.1
       promise: 7.3.1
       setimmediate: 1.0.5
-      ua-parser-js: 1.0.40
+      ua-parser-js: 1.0.41
     transitivePeerDependencies:
       - encoding
 
@@ -37178,7 +41760,7 @@ snapshots:
     dependencies:
       pend: 1.2.0
 
-  fdir@6.4.6(picomatch@4.0.3):
+  fdir@6.5.0(picomatch@4.0.3):
     optionalDependencies:
       picomatch: 4.0.3
 
@@ -37199,9 +41781,13 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
-  file-entry-cache@10.1.3:
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
+  file-entry-cache@10.1.4:
     dependencies:
-      flat-cache: 6.1.12
+      flat-cache: 6.1.18
 
   file-entry-cache@5.0.1:
     dependencies:
@@ -37221,17 +41807,23 @@ snapshots:
       minimatch: 3.1.2
       proper-lockfile: 1.2.0
 
-  file-loader@1.1.5(webpack@5.101.0):
+  file-loader@1.1.5(webpack@5.102.1):
     dependencies:
       loader-utils: 1.4.2
       schema-utils: 0.3.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+
+  file-loader@6.2.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
+    dependencies:
+      loader-utils: 2.0.4
+      schema-utils: 3.3.0
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
 
-  file-loader@6.2.0(webpack@5.101.0):
+  file-loader@6.2.0(webpack@5.102.1):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
   file-system-cache@1.1.0:
     dependencies:
@@ -37297,7 +41889,7 @@ snapshots:
 
   finalhandler@2.1.0:
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       encodeurl: 2.0.0
       escape-html: 1.0.3
       on-finished: 2.4.1
@@ -37390,11 +41982,11 @@ snapshots:
       flatted: 3.3.3
       keyv: 4.5.4
 
-  flat-cache@6.1.12:
+  flat-cache@6.1.18:
     dependencies:
-      cacheable: 1.10.3
+      cacheable: 2.1.1
       flatted: 3.3.3
-      hookified: 1.11.0
+      hookified: 1.12.2
 
   flat@5.0.2: {}
 
@@ -37404,7 +41996,7 @@ snapshots:
 
   flatten@1.0.3: {}
 
-  flow-parser@0.278.0: {}
+  flow-parser@0.289.0: {}
 
   flush-write-stream@1.1.1:
     dependencies:
@@ -37439,7 +42031,7 @@ snapshots:
 
   forever-agent@0.6.1: {}
 
-  fork-ts-checker-webpack-plugin@0.2.10(typescript@5.8.3)(webpack@5.101.0):
+  fork-ts-checker-webpack-plugin@0.2.10(typescript@5.8.3)(webpack@5.102.1):
     dependencies:
       babel-code-frame: 6.26.0
       chalk: 1.1.3
@@ -37450,7 +42042,7 @@ snapshots:
       lodash.startswith: 4.2.1
       minimatch: 3.1.2
       typescript: 5.8.3
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
   fork-ts-checker-webpack-plugin@4.1.6:
     dependencies:
@@ -37462,7 +42054,47 @@ snapshots:
       tapable: 1.1.3
       worker-rpc: 0.1.1
 
-  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.26.0(jiti@2.5.1))(typescript@5.8.3)(webpack@5.101.0):
+  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.26.0(jiti@2.6.1))(typescript@5.8.3)(webpack@5.102.1):
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@types/json-schema': 7.0.15
+      chalk: 4.1.2
+      chokidar: 3.6.0
+      cosmiconfig: 6.0.0
+      deepmerge: 4.3.1
+      fs-extra: 9.1.0
+      glob: 7.2.3
+      memfs: 3.5.3
+      minimatch: 3.1.2
+      schema-utils: 2.7.0
+      semver: 7.7.3
+      tapable: 1.1.3
+      typescript: 5.8.3
+      webpack: 5.102.1(webpack-cli@4.10.0)
+    optionalDependencies:
+      eslint: 9.26.0(jiti@2.6.1)
+
+  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.27.0(jiti@2.6.1))(typescript@4.9.5)(webpack@5.102.1):
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@types/json-schema': 7.0.15
+      chalk: 4.1.2
+      chokidar: 3.6.0
+      cosmiconfig: 6.0.0
+      deepmerge: 4.3.1
+      fs-extra: 9.1.0
+      glob: 7.2.3
+      memfs: 3.5.3
+      minimatch: 3.1.2
+      schema-utils: 2.7.0
+      semver: 7.7.3
+      tapable: 1.1.3
+      typescript: 4.9.5
+      webpack: 5.102.1(webpack-cli@4.10.0)
+    optionalDependencies:
+      eslint: 9.27.0(jiti@2.6.1)
+
+  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
     dependencies:
       '@babel/code-frame': 7.27.1
       '@types/json-schema': 7.0.15
@@ -37475,14 +42107,14 @@ snapshots:
       memfs: 3.5.3
       minimatch: 3.1.2
       schema-utils: 2.7.0
-      semver: 7.7.2
+      semver: 7.7.3
       tapable: 1.1.3
       typescript: 5.8.3
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
     optionalDependencies:
-      eslint: 9.26.0(jiti@2.5.1)
+      eslint: 9.27.0(jiti@2.6.1)
 
-  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.27.0(jiti@2.5.1))(typescript@4.9.5)(webpack@5.101.0):
+  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.27.0(jiti@2.6.1))(typescript@5.8.3)(webpack@5.102.1):
     dependencies:
       '@babel/code-frame': 7.27.1
       '@types/json-schema': 7.0.15
@@ -37495,34 +42127,31 @@ snapshots:
       memfs: 3.5.3
       minimatch: 3.1.2
       schema-utils: 2.7.0
-      semver: 7.7.2
+      semver: 7.7.3
       tapable: 1.1.3
-      typescript: 4.9.5
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      typescript: 5.8.3
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
     optionalDependencies:
-      eslint: 9.27.0(jiti@2.5.1)
+      eslint: 9.27.0(jiti@2.6.1)
 
-  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)(webpack@5.101.0):
+  fork-ts-checker-webpack-plugin@8.0.0(typescript@5.8.3)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@types/json-schema': 7.0.15
       chalk: 4.1.2
       chokidar: 3.6.0
-      cosmiconfig: 6.0.0
+      cosmiconfig: 7.1.0
       deepmerge: 4.3.1
-      fs-extra: 9.1.0
-      glob: 7.2.3
+      fs-extra: 10.1.0
       memfs: 3.5.3
       minimatch: 3.1.2
-      schema-utils: 2.7.0
-      semver: 7.7.2
-      tapable: 1.1.3
+      node-abort-controller: 3.1.1
+      schema-utils: 3.3.0
+      semver: 7.7.3
+      tapable: 2.3.0
       typescript: 5.8.3
-      webpack: 5.101.0(webpack-cli@6.0.1)
-    optionalDependencies:
-      eslint: 9.27.0(jiti@2.5.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
 
-  fork-ts-checker-webpack-plugin@8.0.0(typescript@5.8.3)(webpack@5.101.0):
+  fork-ts-checker-webpack-plugin@8.0.0(typescript@5.8.3)(webpack@5.102.1):
     dependencies:
       '@babel/code-frame': 7.27.1
       chalk: 4.1.2
@@ -37534,12 +42163,12 @@ snapshots:
       minimatch: 3.1.2
       node-abort-controller: 3.1.1
       schema-utils: 3.3.0
-      semver: 7.7.2
-      tapable: 2.2.2
+      semver: 7.7.3
+      tapable: 2.3.0
       typescript: 5.8.3
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@5.1.4)
 
-  fork-ts-checker-webpack-plugin@9.1.0(typescript@5.8.3)(webpack@5.101.0):
+  fork-ts-checker-webpack-plugin@9.1.0(typescript@5.8.3)(webpack@5.102.1):
     dependencies:
       '@babel/code-frame': 7.27.1
       chalk: 4.1.2
@@ -37551,10 +42180,10 @@ snapshots:
       minimatch: 3.1.2
       node-abort-controller: 3.1.1
       schema-utils: 3.3.0
-      semver: 7.7.2
-      tapable: 2.2.2
+      semver: 7.7.3
+      tapable: 2.3.0
       typescript: 5.8.3
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
   form-data-encoder@2.1.4: {}
 
@@ -37615,25 +42244,25 @@ snapshots:
   fs-extra@10.1.0:
     dependencies:
       graceful-fs: 4.2.11
-      jsonfile: 6.1.0
+      jsonfile: 6.2.0
       universalify: 2.0.1
 
   fs-extra@11.1.1:
     dependencies:
       graceful-fs: 4.2.11
-      jsonfile: 6.1.0
+      jsonfile: 6.2.0
       universalify: 2.0.1
 
   fs-extra@11.2.0:
     dependencies:
       graceful-fs: 4.2.11
-      jsonfile: 6.1.0
+      jsonfile: 6.2.0
       universalify: 2.0.1
 
-  fs-extra@11.3.1:
+  fs-extra@11.3.2:
     dependencies:
       graceful-fs: 4.2.11
-      jsonfile: 6.1.0
+      jsonfile: 6.2.0
       universalify: 2.0.1
 
   fs-extra@3.0.1:
@@ -37658,7 +42287,7 @@ snapshots:
     dependencies:
       at-least-node: 1.0.0
       graceful-fs: 4.2.11
-      jsonfile: 6.1.0
+      jsonfile: 6.2.0
       universalify: 2.0.1
 
   fs-minipass@2.1.0:
@@ -37744,6 +42373,8 @@ snapshots:
       strip-ansi: 6.0.1
       wide-align: 1.1.5
 
+  generator-function@2.0.1: {}
+
   generic-names@4.0.0:
     dependencies:
       loader-utils: 3.3.1
@@ -37756,7 +42387,7 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
-  get-east-asian-width@1.3.0: {}
+  get-east-asian-width@1.4.0: {}
 
   get-func-name@2.0.2: {}
 
@@ -37832,7 +42463,7 @@ snapshots:
       email-addresses: 5.0.0
       filenamify: 4.3.0
       find-cache-dir: 3.3.2
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       globby: 11.1.0
 
   giget@1.2.5:
@@ -37871,6 +42502,10 @@ snapshots:
       '@types/glob': 8.1.0
       glob: 7.2.3
 
+  glob-to-regex.js@1.2.0(tslib@2.8.1):
+    dependencies:
+      tslib: 2.8.1
+
   glob-to-regexp@0.3.0: {}
 
   glob-to-regexp@0.4.1: {}
@@ -37892,7 +42527,7 @@ snapshots:
     dependencies:
       foreground-child: 3.3.1
       jackspeak: 4.1.1
-      minimatch: 10.0.3
+      minimatch: 10.1.1
       minipass: 7.1.2
       package-json-from-dist: 1.0.1
       path-scurry: 2.0.0
@@ -38042,7 +42677,7 @@ snapshots:
 
   got@14.4.7:
     dependencies:
-      '@sindresorhus/is': 7.0.2
+      '@sindresorhus/is': 7.1.1
       '@szmarczak/http-timer': 5.0.1
       cacheable-lookup: 7.0.0
       cacheable-request: 12.0.1
@@ -38072,16 +42707,16 @@ snapshots:
 
   graphemer@1.4.0: {}
 
-  graphiql-explorer@0.9.0(graphql@16.11.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  graphiql-explorer@0.9.0(graphql@16.12.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      graphql: 16.11.0
+      graphql: 16.12.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  graphiql@3.7.0(@codemirror/language@6.11.2)(@types/node@22.15.35)(@types/react-dom@18.2.0)(@types/react@18.2.0)(graphql@16.11.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  graphiql@3.7.0(@codemirror/language@6.11.3)(@types/node@22.15.35)(@types/react-dom@18.2.0)(@types/react@18.2.0)(graphql@16.12.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@graphiql/react': 0.26.2(@codemirror/language@6.11.2)(@types/node@22.15.35)(@types/react-dom@18.2.0)(@types/react@18.2.0)(graphql@16.11.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      graphql: 16.11.0
+      '@graphiql/react': 0.26.2(@codemirror/language@6.11.3)(@types/node@22.15.35)(@types/react-dom@18.2.0)(@types/react@18.2.0)(graphql@16.12.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      graphql: 16.12.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
@@ -38095,14 +42730,14 @@ snapshots:
     dependencies:
       lodash: 4.17.21
 
-  graphql-language-service@5.5.0(graphql@16.11.0):
+  graphql-language-service@5.5.0(graphql@16.12.0):
     dependencies:
       debounce-promise: 3.1.2
-      graphql: 16.11.0
+      graphql: 16.12.0
       nullthrows: 1.1.1
       vscode-languageserver-types: 3.17.5
 
-  graphql@16.11.0: {}
+  graphql@16.12.0: {}
 
   growly@1.3.0: {}
 
@@ -38286,7 +42921,7 @@ snapshots:
       mdast-util-mdxjs-esm: 2.0.1
       property-information: 7.1.0
       space-separated-tokens: 2.0.2
-      style-to-js: 1.1.17
+      style-to-js: 1.1.19
       unist-util-position: 5.0.0
       vfile-message: 4.0.3
     transitivePeerDependencies:
@@ -38379,7 +43014,7 @@ snapshots:
     dependencies:
       parse-passwd: 1.0.0
 
-  hookified@1.11.0: {}
+  hookified@1.12.2: {}
 
   hosted-git-info@2.8.9: {}
 
@@ -38432,7 +43067,7 @@ snapshots:
       he: 1.2.0
       param-case: 3.0.4
       relateurl: 0.2.7
-      terser: 5.43.1
+      terser: 5.44.0
 
   html-minifier@3.5.21:
     dependencies:
@@ -38456,7 +43091,7 @@ snapshots:
 
   html-void-elements@3.0.0: {}
 
-  html-webpack-plugin@2.29.0(webpack@5.101.0):
+  html-webpack-plugin@2.29.0(webpack@5.102.1):
     dependencies:
       bluebird: 3.7.2
       html-minifier: 3.5.21
@@ -38464,9 +43099,9 @@ snapshots:
       lodash: 4.17.21
       pretty-error: 2.1.2
       toposort: 1.0.7
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
-  html-webpack-plugin@4.5.2(webpack@5.101.0):
+  html-webpack-plugin@4.5.2(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
     dependencies:
       '@types/html-minifier-terser': 5.1.2
       '@types/tapable': 1.0.12
@@ -38477,17 +43112,40 @@ snapshots:
       pretty-error: 2.1.2
       tapable: 1.1.3
       util.promisify: 1.0.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
 
-  html-webpack-plugin@5.6.3(webpack@5.101.0):
+  html-webpack-plugin@4.5.2(webpack@5.102.1):
+    dependencies:
+      '@types/html-minifier-terser': 5.1.2
+      '@types/tapable': 1.0.12
+      '@types/webpack': 4.41.40
+      html-minifier-terser: 5.1.1
+      loader-utils: 1.4.2
+      lodash: 4.17.21
+      pretty-error: 2.1.2
+      tapable: 1.1.3
+      util.promisify: 1.0.0
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+
+  html-webpack-plugin@5.6.4(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
       lodash: 4.17.21
       pretty-error: 4.0.0
-      tapable: 2.2.2
+      tapable: 2.3.0
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+
+  html-webpack-plugin@5.6.4(webpack@5.102.1):
+    dependencies:
+      '@types/html-minifier-terser': 6.1.0
+      html-minifier-terser: 6.1.0
+      lodash: 4.17.21
+      pretty-error: 4.0.0
+      tapable: 2.3.0
+    optionalDependencies:
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
   htmlparser2@10.0.0:
     dependencies:
@@ -38528,7 +43186,7 @@ snapshots:
     dependencies:
       '@tootallnate/once': 1.1.2
       agent-base: 6.0.2
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -38536,26 +43194,26 @@ snapshots:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
-  http-proxy-middleware@2.0.9(@types/express@4.17.23):
+  http-proxy-middleware@2.0.9(@types/express@4.17.25):
     dependencies:
-      '@types/http-proxy': 1.17.16
+      '@types/http-proxy': 1.17.17
       http-proxy: 1.18.1
       is-glob: 4.0.3
       is-plain-obj: 3.0.0
       micromatch: 4.0.8
     optionalDependencies:
-      '@types/express': 4.17.23
+      '@types/express': 4.17.25
     transitivePeerDependencies:
       - debug
 
@@ -38578,7 +43236,7 @@ snapshots:
       mime: 1.6.0
       minimist: 1.2.8
       opener: 1.5.2
-      portfinder: 1.0.37
+      portfinder: 1.0.38
       secure-compare: 3.0.1
       union: 0.5.0
       url-join: 4.0.1
@@ -38600,21 +43258,21 @@ snapshots:
   https-proxy-agent@4.0.0:
     dependencies:
       agent-base: 5.1.1
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -38624,7 +43282,9 @@ snapshots:
 
   human-signals@5.0.0: {}
 
-  humanize-duration@3.33.0: {}
+  human-signals@8.0.1: {}
+
+  humanize-duration@3.33.1: {}
 
   humanize-ms@1.2.1:
     dependencies:
@@ -38649,6 +43309,10 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
+  iconv-lite@0.7.0:
+    dependencies:
+      safer-buffer: 2.1.2
+
   icss-replace-symbols@1.1.0: {}
 
   icss-utils@2.1.0:
@@ -38681,7 +43345,7 @@ snapshots:
 
   immutable@3.8.2: {}
 
-  immutable@5.1.3: {}
+  immutable@5.1.4: {}
 
   import-cwd@3.0.0:
     dependencies:
@@ -38730,7 +43394,7 @@ snapshots:
 
   inline-style-parser@0.1.1: {}
 
-  inline-style-parser@0.2.4: {}
+  inline-style-parser@0.2.6: {}
 
   inquirer@3.3.0:
     dependencies:
@@ -38777,11 +43441,13 @@ snapshots:
 
   interpret@3.1.1: {}
 
-  intl-messageformat@10.7.16:
+  intersection-observer@0.10.0: {}
+
+  intl-messageformat@10.7.18:
     dependencies:
-      '@formatjs/ecma402-abstract': 2.3.4
+      '@formatjs/ecma402-abstract': 2.3.6
       '@formatjs/fast-memoize': 2.2.7
-      '@formatjs/icu-messageformat-parser': 2.11.2
+      '@formatjs/icu-messageformat-parser': 2.11.4
       tslib: 2.8.1
 
   invariant@2.2.4:
@@ -38790,10 +43456,7 @@ snapshots:
 
   invert-kv@1.0.0: {}
 
-  ip-address@9.0.5:
-    dependencies:
-      jsbn: 1.1.0
-      sprintf-js: 1.1.3
+  ip-address@10.0.1: {}
 
   ip-regex@2.1.0: {}
 
@@ -38836,8 +43499,6 @@ snapshots:
 
   is-arrayish@0.2.1: {}
 
-  is-arrayish@0.3.2: {}
-
   is-async-function@2.1.1:
     dependencies:
       async-function: 1.0.0
@@ -38933,11 +43594,9 @@ snapshots:
 
   is-fullwidth-code-point@3.0.0: {}
 
-  is-fullwidth-code-point@4.0.0: {}
-
-  is-fullwidth-code-point@5.0.0:
+  is-fullwidth-code-point@5.1.0:
     dependencies:
-      get-east-asian-width: 1.3.0
+      get-east-asian-width: 1.4.0
 
   is-function@1.0.2: {}
 
@@ -38945,9 +43604,10 @@ snapshots:
 
   is-generator-fn@2.1.0: {}
 
-  is-generator-function@1.1.0:
+  is-generator-function@1.1.2:
     dependencies:
       call-bound: 1.0.4
+      generator-function: 2.0.1
       get-proto: 1.0.1
       has-tostringtag: 1.0.2
       safe-regex-test: 1.1.0
@@ -38991,7 +43651,7 @@ snapshots:
 
   is-negative-zero@2.0.3: {}
 
-  is-network-error@1.1.0: {}
+  is-network-error@1.3.0: {}
 
   is-npm@1.0.0: {}
 
@@ -39108,6 +43768,8 @@ snapshots:
 
   is-utf8@0.2.1: {}
 
+  is-wayland@0.1.0: {}
+
   is-weakmap@2.0.2: {}
 
   is-weakref@1.1.1:
@@ -39163,7 +43825,7 @@ snapshots:
 
   isomorphic-unfetch@3.1.0(encoding@0.1.13):
     dependencies:
-      node-fetch: 2.7.0(encoding@0.1.13)
+      node-fetch: 2.6.13(encoding@0.1.13)
       unfetch: 4.2.0
     transitivePeerDependencies:
       - encoding
@@ -39218,7 +43880,7 @@ snapshots:
   istanbul-lib-instrument@5.2.1:
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/parser': 7.28.0
+      '@babel/parser': 7.28.5
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
       semver: 6.3.1
@@ -39228,10 +43890,10 @@ snapshots:
   istanbul-lib-instrument@6.0.3:
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/parser': 7.28.0
+      '@babel/parser': 7.28.5
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
-      semver: 7.7.2
+      semver: 7.7.3
     transitivePeerDependencies:
       - supports-color
 
@@ -39258,7 +43920,7 @@ snapshots:
 
   istanbul-lib-source-maps@4.0.1:
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -39268,7 +43930,7 @@ snapshots:
     dependencies:
       handlebars: 4.7.8
 
-  istanbul-reports@3.1.7:
+  istanbul-reports@3.2.0:
     dependencies:
       html-escaper: 2.0.2
       istanbul-lib-report: 3.0.1
@@ -39293,7 +43955,7 @@ snapshots:
   istextorbinary@9.5.0:
     dependencies:
       binaryextensions: 6.11.0
-      editions: 6.21.0
+      editions: 6.22.0
       textextensions: 6.11.0
 
   iterate-iterator@1.0.2: {}
@@ -39351,7 +44013,7 @@ snapshots:
       '@types/node': 22.15.35
       chalk: 4.1.2
       co: 4.6.0
-      dedent: 1.6.0(babel-plugin-macros@3.1.0)
+      dedent: 1.7.0(babel-plugin-macros@3.1.0)
       is-generator-fn: 2.1.0
       jest-each: 29.7.0
       jest-matcher-utils: 29.7.0
@@ -39423,16 +44085,16 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  jest-cli@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0):
+  jest-cli@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)):
     dependencies:
-      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)
+      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
       chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)
+      create-jest: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       exit: 0.1.2
       import-local: 3.2.0
-      jest-config: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)
+      jest-config: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       jest-util: 29.7.0
       jest-validate: 29.7.0
       yargs: 17.7.2
@@ -39496,7 +44158,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  jest-config@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0):
+  jest-config@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)):
     dependencies:
       '@babel/core': 7.27.7
       '@jest/test-sequencer': 29.7.0
@@ -39522,6 +44184,7 @@ snapshots:
       strip-json-comments: 3.1.1
     optionalDependencies:
       '@types/node': 22.15.35
+      ts-node: 10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -39742,7 +44405,7 @@ snapshots:
 
   jest-jasmine2@25.5.4:
     dependencies:
-      '@babel/traverse': 7.28.0
+      '@babel/traverse': 7.28.5
       '@jest/environment': 25.5.0
       '@jest/source-map': 25.5.0
       '@jest/test-result': 25.5.0
@@ -39913,7 +44576,7 @@ snapshots:
       jest-pnp-resolver: 1.2.3(jest-resolve@25.5.1)
       read-pkg-up: 7.0.1
       realpath-native: 2.0.0
-      resolve: 1.22.10
+      resolve: 1.22.11
       slash: 3.0.0
 
   jest-resolve@29.7.0:
@@ -39924,7 +44587,7 @@ snapshots:
       jest-pnp-resolver: 1.2.3(jest-resolve@29.7.0)
       jest-util: 29.7.0
       jest-validate: 29.7.0
-      resolve: 1.22.10
+      resolve: 1.22.11
       resolve.exports: 2.0.3
       slash: 3.0.0
 
@@ -40010,7 +44673,7 @@ snapshots:
       '@jest/types': 25.5.0
       '@types/yargs': 15.0.19
       chalk: 3.0.0
-      collect-v8-coverage: 1.0.2
+      collect-v8-coverage: 1.0.3
       exit: 0.1.2
       glob: 7.2.3
       graceful-fs: 4.2.11
@@ -40045,7 +44708,7 @@ snapshots:
       '@types/node': 22.15.35
       chalk: 4.1.2
       cjs-module-lexer: 1.4.3
-      collect-v8-coverage: 1.0.2
+      collect-v8-coverage: 1.0.3
       glob: 7.2.3
       graceful-fs: 4.2.11
       jest-haste-map: 29.7.0
@@ -40089,7 +44752,7 @@ snapshots:
 
   jest-snapshot@25.5.1:
     dependencies:
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
       '@jest/types': 25.5.0
       '@types/prettier': 1.19.1
       chalk: 3.0.0
@@ -40108,10 +44771,10 @@ snapshots:
   jest-snapshot@29.7.0:
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/generator': 7.28.0
+      '@babel/generator': 7.28.5
       '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.27.7)
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.27.7)
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.5
       '@jest/expect-utils': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
@@ -40126,7 +44789,7 @@ snapshots:
       jest-util: 29.7.0
       natural-compare: 1.4.0
       pretty-format: 29.7.0
-      semver: 7.7.2
+      semver: 7.7.3
     transitivePeerDependencies:
       - supports-color
 
@@ -40283,12 +44946,12 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0):
+  jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)):
     dependencies:
-      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)
+      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       '@jest/types': 29.6.3
       import-local: 3.2.0
-      jest-cli: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)
+      jest-cli: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -40297,7 +44960,7 @@ snapshots:
 
   jiti@1.21.7: {}
 
-  jiti@2.5.1: {}
+  jiti@2.6.1: {}
 
   joi@17.13.3:
     dependencies:
@@ -40335,25 +44998,23 @@ snapshots:
 
   jsbn@0.1.1: {}
 
-  jsbn@1.1.0: {}
-
   jschardet@3.1.4: {}
 
   jscodeshift@0.15.2(@babel/preset-env@7.27.2(@babel/core@7.27.7)):
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/parser': 7.28.0
+      '@babel/parser': 7.28.5
       '@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-optional-chaining': 7.28.5(@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/register': 7.28.3(@babel/core@7.27.7)
       babel-core: 7.0.0-bridge.0(@babel/core@7.27.7)
       chalk: 4.1.2
-      flow-parser: 0.278.0
+      flow-parser: 0.289.0
       graceful-fs: 4.2.11
       micromatch: 4.0.8
       neo-async: 2.6.2
@@ -40366,7 +45027,34 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  jsdoc-type-pratt-parser@4.1.0: {}
+  jscodeshift@0.15.2(@babel/preset-env@7.27.2(@babel/core@7.28.5)):
+    dependencies:
+      '@babel/core': 7.27.7
+      '@babel/parser': 7.28.5
+      '@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.28.5(@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.28.3(@babel/core@7.27.7)
+      babel-core: 7.0.0-bridge.0(@babel/core@7.27.7)
+      chalk: 4.1.2
+      flow-parser: 0.289.0
+      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.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  jsdoc-type-pratt-parser@4.8.0: {}
 
   jsdom@11.12.0:
     dependencies:
@@ -40381,12 +45069,12 @@ snapshots:
       escodegen: 1.14.3
       html-encoding-sniffer: 1.0.2
       left-pad: 1.3.0
-      nwsapi: 2.2.21
+      nwsapi: 2.2.22
       parse5: 4.0.0
       pn: 1.1.0
       request: 2.88.2
       request-promise-native: 1.0.9(request@2.88.2)
-      sax: 1.4.1
+      sax: 1.4.2
       symbol-tree: 3.2.4
       tough-cookie: 2.5.0
       w3c-hr-time: 1.0.2
@@ -40409,7 +45097,7 @@ snapshots:
       domexception: 1.0.1
       escodegen: 1.14.3
       html-encoding-sniffer: 1.0.2
-      nwsapi: 2.2.21
+      nwsapi: 2.2.22
       parse5: 5.1.0
       pn: 1.1.0
       request: 2.88.2
@@ -40445,7 +45133,7 @@ snapshots:
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.21
+      nwsapi: 2.2.22
       parse5: 7.3.0
       saxes: 6.0.0
       symbol-tree: 3.2.4
@@ -40476,7 +45164,7 @@ snapshots:
       nwmatcher: 1.4.4
       parse5: 1.5.1
       request: 2.88.2
-      sax: 1.4.1
+      sax: 1.4.2
       symbol-tree: 3.2.4
       tough-cookie: 2.5.0
       webidl-conversions: 4.0.2
@@ -40488,8 +45176,6 @@ snapshots:
 
   jsesc@1.3.0: {}
 
-  jsesc@3.0.2: {}
-
   jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
@@ -40500,7 +45186,7 @@ snapshots:
 
   json-schema-to-ts@3.1.1:
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       ts-algebra: 2.0.0
 
   json-schema-traverse@0.3.1: {}
@@ -40547,7 +45233,7 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
-  jsonfile@6.1.0:
+  jsonfile@6.2.0:
     dependencies:
       universalify: 2.0.1
     optionalDependencies:
@@ -40558,7 +45244,7 @@ snapshots:
   jsonix@3.0.0:
     dependencies:
       amdefine: 0.1.1
-      xmldom: '@xmldom/xmldom@0.8.10'
+      xmldom: '@xmldom/xmldom@0.8.11'
       xmlhttprequest: 1.8.0
 
   jsonwebtoken@9.0.2:
@@ -40572,7 +45258,7 @@ snapshots:
       lodash.isstring: 4.0.1
       lodash.once: 4.1.1
       ms: 2.1.3
-      semver: 7.7.2
+      semver: 7.7.3
 
   jsprim@1.4.2:
     dependencies:
@@ -40615,6 +45301,7 @@ snapshots:
       node-addon-api: 4.3.0
       prebuild-install: 7.1.3
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - react-native-b4a
 
@@ -40622,9 +45309,9 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
-  keyv@5.5.0:
+  keyv@5.5.3:
     dependencies:
-      '@keyv/serialize': 1.1.0
+      '@keyv/serialize': 1.1.1
 
   kill-port@2.0.1:
     dependencies:
@@ -40657,16 +45344,16 @@ snapshots:
     dependencies:
       package-json: 4.0.1
 
-  launch-editor@2.11.0:
+  launch-editor@2.12.0:
     dependencies:
       picocolors: 1.1.1
       shell-quote: 1.8.3
 
   lazy-universal-dotenv@3.0.1:
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       app-root-dir: 1.0.2
-      core-js: 3.45.0
+      core-js: 3.46.0
       dotenv: 8.6.0
       dotenv-expand: 5.1.0
 
@@ -40696,6 +45383,8 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lexical@0.17.1: {}
+
   lie@3.3.0:
     dependencies:
       immediate: 3.0.6
@@ -40716,31 +45405,26 @@ snapshots:
     dependencies:
       uc.micro: 2.1.0
 
-  lint-staged@16.1.4:
+  lint-staged@16.2.6:
     dependencies:
-      chalk: 5.5.0
-      commander: 14.0.0
-      debug: 4.4.1(supports-color@8.1.1)
-      lilconfig: 3.1.3
-      listr2: 9.0.1
+      commander: 14.0.2
+      listr2: 9.0.5
       micromatch: 4.0.8
-      nano-spawn: 1.0.2
+      nano-spawn: 2.0.0
       pidtree: 0.6.0
       string-argv: 0.3.2
       yaml: 2.8.1
-    transitivePeerDependencies:
-      - supports-color
 
   listenercount@1.0.1: {}
 
-  listr2@9.0.1:
+  listr2@9.0.5:
     dependencies:
-      cli-truncate: 4.0.0
+      cli-truncate: 5.1.1
       colorette: 2.0.20
       eventemitter3: 5.0.1
       log-update: 6.1.0
       rfdc: 1.4.1
-      wrap-ansi: 9.0.0
+      wrap-ansi: 9.0.2
 
   load-json-file@1.1.0:
     dependencies:
@@ -40750,7 +45434,7 @@ snapshots:
       pinkie-promise: 2.0.1
       strip-bom: 2.0.0
 
-  loader-runner@4.3.0: {}
+  loader-runner@4.3.1: {}
 
   loader-utils@0.2.17:
     dependencies:
@@ -40871,7 +45555,7 @@ snapshots:
 
   log-symbols@6.0.0:
     dependencies:
-      chalk: 5.5.0
+      chalk: 5.6.2
       is-unicode-supported: 1.3.0
 
   log-update@2.3.0:
@@ -40882,11 +45566,11 @@ snapshots:
 
   log-update@6.1.0:
     dependencies:
-      ansi-escapes: 7.0.0
+      ansi-escapes: 7.1.1
       cli-cursor: 5.0.0
-      slice-ansi: 7.1.0
-      strip-ansi: 7.1.0
-      wrap-ansi: 9.0.0
+      slice-ansi: 7.1.2
+      strip-ansi: 7.1.2
+      wrap-ansi: 9.0.2
 
   logform@2.7.0:
     dependencies:
@@ -40905,6 +45589,8 @@ snapshots:
 
   long-timeout@0.1.1: {}
 
+  long@5.3.2: {}
+
   longest-streak@3.1.0: {}
 
   loose-envify@1.4.0:
@@ -40922,7 +45608,7 @@ snapshots:
     dependencies:
       get-func-name: 2.0.2
 
-  loupe@3.2.0: {}
+  loupe@3.2.1: {}
 
   lower-case@1.1.4: {}
 
@@ -40941,7 +45627,7 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
-  lru-cache@11.1.0: {}
+  lru-cache@11.2.2: {}
 
   lru-cache@4.1.5:
     dependencies:
@@ -40962,7 +45648,11 @@ snapshots:
     dependencies:
       es5-ext: 0.10.64
 
-  luxon@3.7.1: {}
+  lucide-react@0.523.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
+  luxon@3.7.2: {}
 
   lz-string@1.5.0: {}
 
@@ -40970,9 +45660,9 @@ snapshots:
     dependencies:
       sourcemap-codec: 1.4.8
 
-  magic-string@0.30.17:
+  magic-string@0.30.21:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.4
+      '@jridgewell/sourcemap-codec': 1.5.5
 
   make-cancellable-promise@1.3.2: {}
 
@@ -40991,7 +45681,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.3
 
   make-error@1.3.6: {}
 
@@ -41053,8 +45743,12 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
-  markdown-to-jsx@7.7.13(react@19.1.0):
-    dependencies:
+  markdown-to-jsx@7.7.17(react@18.2.0):
+    optionalDependencies:
+      react: 18.2.0
+
+  markdown-to-jsx@7.7.17(react@19.1.0):
+    optionalDependencies:
       react: 19.1.0
 
   matches-selector@0.0.1: {}
@@ -41079,12 +45773,26 @@ snapshots:
       '@types/unist': 2.0.11
       unist-util-visit: 4.1.2
 
+  mdast-util-directive@3.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-visit-parents: 6.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
       escape-string-regexp: 5.0.0
-      unist-util-is: 6.0.0
-      unist-util-visit-parents: 6.0.1
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
 
   mdast-util-from-markdown@1.3.1:
     dependencies:
@@ -41120,6 +45828,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-frontmatter@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      escape-string-regexp: 5.0.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-extension-frontmatter: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-gfm-autolink-literal@2.0.1:
     dependencies:
       '@types/mdast': 4.0.4
@@ -41205,6 +45924,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-mdx@3.0.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-mdxjs-esm@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
@@ -41224,7 +45953,7 @@ snapshots:
   mdast-util-phrasing@4.1.0:
     dependencies:
       '@types/mdast': 4.0.4
-      unist-util-is: 6.0.0
+      unist-util-is: 6.0.1
 
   mdast-util-to-hast@10.0.1:
     dependencies:
@@ -41308,11 +46037,13 @@ snapshots:
     dependencies:
       fs-monkey: 1.1.0
 
-  memfs@4.36.0:
+  memfs@4.50.0:
     dependencies:
-      '@jsonjoy.com/json-pack': 1.8.0(tslib@2.8.1)
+      '@jsonjoy.com/json-pack': 1.21.0(tslib@2.8.1)
       '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
-      tree-dump: 1.0.3(tslib@2.8.1)
+      glob-to-regex.js: 1.2.0(tslib@2.8.1)
+      thingies: 2.5.0(tslib@2.8.1)
+      tree-dump: 1.1.0(tslib@2.8.1)
       tslib: 2.8.1
 
   memoizee@0.4.17:
@@ -41379,7 +46110,7 @@ snapshots:
 
   merge@1.2.1: {}
 
-  meros@1.3.1(@types/node@22.15.35):
+  meros@1.3.2(@types/node@22.15.35):
     optionalDependencies:
       '@types/node': 22.15.35
 
@@ -41427,6 +46158,23 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-extension-directive@3.0.2:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      parse-entities: 4.0.2
+
+  micromark-extension-frontmatter@2.0.0:
+    dependencies:
+      fault: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-extension-gfm-autolink-literal@2.1.0:
     dependencies:
       micromark-util-character: 2.1.1
@@ -41485,6 +46233,57 @@ snapshots:
       micromark-util-combine-extensions: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-extension-mdx-expression@3.0.1:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdx-jsx@3.0.2:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.3
+
+  micromark-extension-mdx-md@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
+  micromark-extension-mdxjs@3.0.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      micromark-extension-mdx-expression: 3.0.1
+      micromark-extension-mdx-jsx: 3.0.2
+      micromark-extension-mdx-md: 2.0.0
+      micromark-extension-mdxjs-esm: 3.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-factory-destination@1.1.0:
     dependencies:
       micromark-util-character: 1.2.0
@@ -41511,6 +46310,18 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-factory-mdx-expression@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
   micromark-factory-space@1.1.0:
     dependencies:
       micromark-util-character: 1.2.0
@@ -41615,6 +46426,16 @@ snapshots:
 
   micromark-util-encode@2.0.1: {}
 
+  micromark-util-events-to-acorn@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.3
+
   micromark-util-html-tag-name@1.2.0: {}
 
   micromark-util-html-tag-name@2.0.1: {}
@@ -41672,7 +46493,7 @@ snapshots:
   micromark@3.2.0:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       decode-named-character-reference: 1.2.0
       micromark-core-commonmark: 1.1.0
       micromark-factory-space: 1.1.0
@@ -41694,7 +46515,7 @@ snapshots:
   micromark@4.0.2:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       decode-named-character-reference: 1.2.0
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.3
@@ -41718,10 +46539,16 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime-db@1.33.0: {}
+
   mime-db@1.52.0: {}
 
   mime-db@1.54.0: {}
 
+  mime-types@2.1.18:
+    dependencies:
+      mime-db: 1.33.0
+
   mime-types@2.1.35:
     dependencies:
       mime-db: 1.52.0
@@ -41754,11 +46581,11 @@ snapshots:
 
   min-indent@1.0.1: {}
 
-  mini-css-extract-plugin@2.9.3(webpack@5.101.0):
+  mini-css-extract-plugin@2.9.4(webpack@5.102.1):
     dependencies:
-      schema-utils: 4.3.2
-      tapable: 2.2.2
-      webpack: 5.101.0(webpack-cli@4.10.0)
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      webpack: 5.102.1(webpack-cli@4.10.0)
 
   minim@0.23.8:
     dependencies:
@@ -41766,7 +46593,7 @@ snapshots:
 
   minimalistic-assert@1.0.1: {}
 
-  minimatch@10.0.3:
+  minimatch@10.1.1:
     dependencies:
       '@isaacs/brace-expansion': 5.0.0
 
@@ -41862,7 +46689,7 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
-  mlly@1.7.4:
+  mlly@1.8.0:
     dependencies:
       acorn: 8.15.0
       pathe: 2.0.3
@@ -41874,7 +46701,7 @@ snapshots:
       ansi-colors: 4.1.3
       browser-stdout: 1.3.1
       chokidar: 3.6.0
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       diff: 5.2.0
       escape-string-regexp: 4.0.0
       find-up: 5.0.0
@@ -41892,16 +46719,17 @@ snapshots:
       yargs-parser: 20.2.9
       yargs-unparser: 2.0.0
 
-  mocha@11.7.1:
+  mocha@11.7.4:
     dependencies:
       browser-stdout: 1.3.1
       chokidar: 4.0.3
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       diff: 7.0.0
       escape-string-regexp: 4.0.0
       find-up: 5.0.0
       glob: 10.4.5
       he: 1.2.0
+      is-path-inside: 3.0.3
       js-yaml: 4.1.0
       log-symbols: 4.1.0
       minimatch: 9.0.5
@@ -41910,7 +46738,7 @@ snapshots:
       serialize-javascript: 6.0.2
       strip-json-comments: 3.1.1
       supports-color: 8.1.1
-      workerpool: 9.3.3
+      workerpool: 9.3.4
       yargs: 17.7.2
       yargs-parser: 21.1.1
       yargs-unparser: 2.0.0
@@ -41935,13 +46763,13 @@ snapshots:
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.1.0
 
-  monaco-page-objects@3.14.1(selenium-webdriver@4.34.0)(typescript@5.8.3):
+  monaco-page-objects@3.14.1(selenium-webdriver@4.38.0)(typescript@5.8.3):
     dependencies:
       clipboardy: 4.0.0
       clone-deep: 4.0.1
       compare-versions: 6.1.1
-      fs-extra: 11.3.1
-      selenium-webdriver: 4.34.0
+      fs-extra: 11.3.2
+      selenium-webdriver: 4.38.0
       type-fest: 4.41.0
       typescript: 5.8.3
 
@@ -41983,11 +46811,11 @@ snapshots:
 
   nan@2.23.0: {}
 
-  nano-spawn@1.0.2: {}
+  nano-spawn@2.0.0: {}
 
   nanoid@3.3.11: {}
 
-  nanoid@5.1.5: {}
+  nanoid@5.1.6: {}
 
   nanospinner@1.2.2:
     dependencies:
@@ -42028,9 +46856,9 @@ snapshots:
       lower-case: 2.0.2
       tslib: 2.8.1
 
-  node-abi@3.75.0:
+  node-abi@3.80.0:
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.3
 
   node-abort-controller@3.1.1: {}
 
@@ -42055,6 +46883,12 @@ snapshots:
 
   node-fetch-native@1.6.7: {}
 
+  node-fetch@2.6.13(encoding@0.1.13):
+    dependencies:
+      whatwg-url: 5.0.0
+    optionalDependencies:
+      encoding: 0.1.13
+
   node-fetch@2.7.0(encoding@0.1.13):
     dependencies:
       whatwg-url: 5.0.0
@@ -42090,14 +46924,14 @@ snapshots:
   node-gyp@9.4.1:
     dependencies:
       env-paths: 2.2.1
-      exponential-backoff: 3.1.2
+      exponential-backoff: 3.1.3
       glob: 7.2.3
       graceful-fs: 4.2.11
       make-fetch-happen: 10.2.1
       nopt: 6.0.0
       npmlog: 6.0.2
       rimraf: 3.0.2
-      semver: 7.7.2
+      semver: 7.7.3
       tar: 6.2.1
       which: 2.0.2
     transitivePeerDependencies:
@@ -42105,10 +46939,15 @@ snapshots:
 
   node-int64@0.4.0: {}
 
-  node-loader@2.1.0(webpack@5.101.0):
+  node-loader@2.0.0(webpack@5.102.1):
+    dependencies:
+      loader-utils: 2.0.4
+      webpack: 5.102.1(webpack-cli@5.1.4)
+
+  node-loader@2.1.0(webpack@5.102.1):
     dependencies:
       loader-utils: 2.0.4
-      webpack: 5.101.0(webpack-cli@4.10.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
 
   node-notifier@5.4.5:
     dependencies:
@@ -42127,7 +46966,7 @@ snapshots:
       which: 1.3.1
     optional: true
 
-  node-releases@2.0.19: {}
+  node-releases@2.0.27: {}
 
   node-sarif-builder@2.0.3:
     dependencies:
@@ -42156,7 +46995,7 @@ snapshots:
   normalize-package-data@2.5.0:
     dependencies:
       hosted-git-info: 2.8.9
-      resolve: 1.22.10
+      resolve: 1.22.11
       semver: 5.7.2
       validate-npm-package-license: 3.0.4
 
@@ -42164,13 +47003,13 @@ snapshots:
     dependencies:
       hosted-git-info: 4.1.0
       is-core-module: 2.16.1
-      semver: 7.7.2
+      semver: 7.7.3
       validate-npm-package-license: 3.0.4
 
   normalize-package-data@6.0.2:
     dependencies:
       hosted-git-info: 7.0.2
-      semver: 7.7.2
+      semver: 7.7.3
       validate-npm-package-license: 3.0.4
 
   normalize-path@2.1.1:
@@ -42190,7 +47029,7 @@ snapshots:
 
   normalize-url@6.1.0: {}
 
-  normalize-url@8.0.2: {}
+  normalize-url@8.1.0: {}
 
   npm-run-path@2.0.2:
     dependencies:
@@ -42204,6 +47043,11 @@ snapshots:
     dependencies:
       path-key: 4.0.0
 
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
   npmlog@4.1.2:
     dependencies:
       are-we-there-yet: 1.1.7
@@ -42237,7 +47081,7 @@ snapshots:
 
   nwmatcher@1.4.4: {}
 
-  nwsapi@2.2.21: {}
+  nwsapi@2.2.22: {}
 
   nypm@0.5.4:
     dependencies:
@@ -42418,7 +47262,7 @@ snapshots:
 
   ora@8.2.0:
     dependencies:
-      chalk: 5.5.0
+      chalk: 5.6.2
       cli-cursor: 5.0.0
       cli-spinners: 2.9.2
       is-interactive: 2.0.0
@@ -42426,7 +47270,7 @@ snapshots:
       log-symbols: 6.0.0
       stdin-discarder: 0.2.2
       string-width: 7.2.0
-      strip-ansi: 7.1.0
+      strip-ansi: 7.1.2
 
   original@1.0.2:
     dependencies:
@@ -42451,6 +47295,8 @@ snapshots:
       os-homedir: 1.0.2
       os-tmpdir: 1.0.2
 
+  outvariant@1.4.0: {}
+
   own-keys@1.0.1:
     dependencies:
       get-intrinsic: 1.3.0
@@ -42543,7 +47389,7 @@ snapshots:
   p-retry@6.2.1:
     dependencies:
       '@types/retry': 0.12.2
-      is-network-error: 1.1.0
+      is-network-error: 1.3.0
       retry: 0.13.1
 
   p-timeout@3.2.0:
@@ -42609,23 +47455,25 @@ snapshots:
 
   parse-json@2.2.0:
     dependencies:
-      error-ex: 1.3.2
+      error-ex: 1.3.4
 
   parse-json@5.2.0:
     dependencies:
       '@babel/code-frame': 7.27.1
-      error-ex: 1.3.2
+      error-ex: 1.3.4
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
   parse-json@7.1.1:
     dependencies:
       '@babel/code-frame': 7.27.1
-      error-ex: 1.3.2
+      error-ex: 1.3.4
       json-parse-even-better-errors: 3.0.2
       lines-and-columns: 2.0.4
       type-fest: 3.13.1
 
+  parse-ms@4.0.0: {}
+
   parse-passwd@1.0.0: {}
 
   parse-semver@1.1.1:
@@ -42698,7 +47546,7 @@ snapshots:
 
   path-scurry@2.0.0:
     dependencies:
-      lru-cache: 11.1.0
+      lru-cache: 11.2.2
       minipass: 7.1.2
 
   path-to-regexp@0.1.12: {}
@@ -42707,7 +47555,9 @@ snapshots:
     dependencies:
       isarray: 0.0.1
 
-  path-to-regexp@8.2.0: {}
+  path-to-regexp@3.3.0: {}
+
+  path-to-regexp@8.3.0: {}
 
   path-type@1.1.0:
     dependencies:
@@ -42745,9 +47595,10 @@ snapshots:
 
   pdfjs-dist@4.8.69:
     optionalDependencies:
-      canvas: 3.1.2
+      canvas: 3.2.0
       path2d: 0.2.2
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - react-native-b4a
 
@@ -42793,6 +47644,8 @@ snapshots:
     dependencies:
       crypto-js: 4.2.0
 
+  pkce-challenge@4.1.0: {}
+
   pkce-challenge@5.0.0: {}
 
   pkg-dir@2.0.0:
@@ -42818,7 +47671,7 @@ snapshots:
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
-      mlly: 1.7.4
+      mlly: 1.8.0
       pathe: 2.0.3
 
   playwright-core@1.55.1: {}
@@ -42856,7 +47709,7 @@ snapshots:
 
   polished@4.3.1:
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
 
   popmotion@11.0.3:
     dependencies:
@@ -42865,10 +47718,10 @@ snapshots:
       style-value-types: 5.0.0
       tslib: 2.8.1
 
-  portfinder@1.0.37:
+  portfinder@1.0.38:
     dependencies:
       async: 3.2.6
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -42894,7 +47747,7 @@ snapshots:
 
   postcss-colormin@5.3.1(postcss@8.5.6):
     dependencies:
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       caniuse-api: 3.0.0
       colord: 2.9.3
       postcss: 8.5.6
@@ -42907,7 +47760,7 @@ snapshots:
 
   postcss-convert-values@5.1.3(postcss@8.5.6):
     dependencies:
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
@@ -42965,9 +47818,9 @@ snapshots:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.10
+      resolve: 1.22.11
 
-  postcss-js@4.0.1(postcss@8.5.6):
+  postcss-js@4.1.0(postcss@8.5.6):
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.5.6
@@ -42979,19 +47832,21 @@ snapshots:
       postcss-load-options: 1.2.0
       postcss-load-plugins: 2.3.0
 
-  postcss-load-config@3.1.4(postcss@8.5.6):
+  postcss-load-config@3.1.4(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
       postcss: 8.5.6
+      ts-node: 10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)
 
-  postcss-load-config@4.0.2(postcss@8.5.6):
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.6)(yaml@2.8.1):
     dependencies:
       lilconfig: 3.1.3
-      yaml: 2.8.1
     optionalDependencies:
+      jiti: 1.21.7
       postcss: 8.5.6
+      yaml: 2.8.1
 
   postcss-load-options@1.2.0:
     dependencies:
@@ -43010,24 +47865,34 @@ snapshots:
       postcss-load-config: 1.2.0
       schema-utils: 0.3.0
 
-  postcss-loader@4.3.0(postcss@7.0.39)(webpack@5.101.0):
+  postcss-loader@4.3.0(postcss@7.0.39)(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
+    dependencies:
+      cosmiconfig: 7.1.0
+      klona: 2.0.6
+      loader-utils: 2.0.4
+      postcss: 7.0.39
+      schema-utils: 3.3.0
+      semver: 7.7.3
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+
+  postcss-loader@4.3.0(postcss@7.0.39)(webpack@5.102.1):
     dependencies:
       cosmiconfig: 7.1.0
       klona: 2.0.6
       loader-utils: 2.0.4
       postcss: 7.0.39
       schema-utils: 3.3.0
-      semver: 7.7.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      semver: 7.7.3
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
-  postcss-loader@8.1.1(postcss@8.5.6)(typescript@5.8.3)(webpack@5.101.0):
+  postcss-loader@8.2.0(postcss@8.5.6)(typescript@5.8.3)(webpack@5.102.1):
     dependencies:
       cosmiconfig: 9.0.0(typescript@5.8.3)
-      jiti: 1.21.7
+      jiti: 2.6.1
       postcss: 8.5.6
-      semver: 7.7.2
+      semver: 7.7.3
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@6.0.1)
     transitivePeerDependencies:
       - typescript
 
@@ -43057,7 +47922,7 @@ snapshots:
 
   postcss-merge-rules@5.1.4(postcss@8.5.6):
     dependencies:
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       caniuse-api: 3.0.0
       cssnano-utils: 3.1.0(postcss@8.5.6)
       postcss: 8.5.6
@@ -43097,7 +47962,7 @@ snapshots:
 
   postcss-minify-params@5.1.4(postcss@8.5.6):
     dependencies:
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       cssnano-utils: 3.1.0(postcss@8.5.6)
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
@@ -43227,7 +48092,7 @@ snapshots:
 
   postcss-normalize-unicode@5.1.1(postcss@8.5.6):
     dependencies:
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
@@ -43271,7 +48136,7 @@ snapshots:
 
   postcss-reduce-initial@5.1.2(postcss@8.5.6):
     dependencies:
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       caniuse-api: 3.0.0
       postcss: 8.5.6
 
@@ -43368,19 +48233,20 @@ snapshots:
 
   prebuild-install@7.1.3:
     dependencies:
-      detect-libc: 2.0.4
+      detect-libc: 2.1.2
       expand-template: 2.0.3
       github-from-package: 0.0.0
       minimist: 1.2.8
       mkdirp-classic: 0.5.3
       napi-build-utils: 2.0.0
-      node-abi: 3.75.0
+      node-abi: 3.80.0
       pump: 3.0.3
       rc: 1.2.8
       simple-get: 4.0.1
       tar-fs: 3.1.1
       tunnel-agent: 0.6.0
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - react-native-b4a
 
@@ -43390,6 +48256,8 @@ snapshots:
 
   prepend-http@1.0.4: {}
 
+  presentable-error@0.0.1: {}
+
   prettier-linter-helpers@1.0.0:
     dependencies:
       fast-diff: 1.3.0
@@ -43445,6 +48313,10 @@ snapshots:
 
   pretty-hrtime@1.0.3: {}
 
+  pretty-ms@9.3.0:
+    dependencies:
+      parse-ms: 4.0.0
+
   prism-react-renderer@2.4.1(react@18.2.0):
     dependencies:
       '@types/prismjs': 1.26.5
@@ -43465,7 +48337,7 @@ snapshots:
     dependencies:
       chalk: 2.4.2
       cli-spinners: 1.3.1
-      humanize-duration: 3.33.0
+      humanize-duration: 3.33.1
       log-update: 2.3.0
 
   progress@2.0.3: {}
@@ -43532,6 +48404,21 @@ snapshots:
 
   property-information@7.1.0: {}
 
+  protobufjs@7.5.4:
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/base64': 1.1.2
+      '@protobufjs/codegen': 2.0.4
+      '@protobufjs/eventemitter': 1.1.0
+      '@protobufjs/fetch': 1.1.0
+      '@protobufjs/float': 1.0.2
+      '@protobufjs/inquire': 1.1.0
+      '@protobufjs/path': 1.1.2
+      '@protobufjs/pool': 1.1.0
+      '@protobufjs/utf8': 1.1.0
+      '@types/node': 22.15.35
+      long: 5.3.2
+
   proxy-addr@2.0.7:
     dependencies:
       forwarded: 0.2.0
@@ -43574,7 +48461,7 @@ snapshots:
   puppeteer-core@2.1.1:
     dependencies:
       '@types/mime-types': 2.1.4
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       extract-zip: 1.7.0
       https-proxy-agent: 4.0.0
       mime: 2.6.0
@@ -43592,6 +48479,10 @@ snapshots:
 
   q@1.5.1: {}
 
+  qified@0.5.1:
+    dependencies:
+      hookified: 1.12.2
+
   qs@6.13.0:
     dependencies:
       side-channel: 1.1.0
@@ -43636,6 +48527,8 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  range-parser@1.2.0: {}
+
   range-parser@1.2.1: {}
 
   raw-body@2.5.2:
@@ -43645,22 +48538,28 @@ snapshots:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
-  raw-body@3.0.0:
+  raw-body@3.0.1:
     dependencies:
       bytes: 3.1.2
       http-errors: 2.0.0
-      iconv-lite: 0.6.3
+      iconv-lite: 0.7.0
       unpipe: 1.0.0
 
-  raw-loader@4.0.2(webpack@5.101.0):
+  raw-loader@4.0.2(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
+    dependencies:
+      loader-utils: 2.0.4
+      schema-utils: 3.3.0
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+
+  raw-loader@4.0.2(webpack@5.102.1):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
   rc-config-loader@4.1.3:
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       js-yaml: 4.1.0
       json5: 2.2.3
       require-from-string: 2.0.2
@@ -43685,6 +48584,11 @@ snapshots:
     dependencies:
       react: 18.2.0
 
+  react-colorful@5.6.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   react-colorful@5.6.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -43723,6 +48627,10 @@ snapshots:
       strip-ansi: 3.0.1
       text-table: 0.2.0
 
+  react-devtools-inline@4.4.0:
+    dependencies:
+      es6-symbol: 3.1.4
+
   react-dnd-html5-backend@16.0.1:
     dependencies:
       dnd-core: 16.0.1
@@ -43751,8 +48659,8 @@ snapshots:
   react-docgen@5.4.3:
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/generator': 7.28.0
-      '@babel/runtime': 7.28.2
+      '@babel/generator': 7.28.5
+      '@babel/runtime': 7.28.4
       ast-types: 0.14.2
       commander: 2.20.3
       doctrine: 3.0.0
@@ -43766,30 +48674,30 @@ snapshots:
   react-docgen@7.1.1:
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.28.0
       '@types/doctrine': 0.0.9
       '@types/resolve': 1.20.6
       doctrine: 3.0.0
-      resolve: 1.22.10
-      strip-indent: 4.0.0
+      resolve: 1.22.11
+      strip-indent: 4.1.1
     transitivePeerDependencies:
       - supports-color
 
-  react-docgen@8.0.0:
+  react-docgen@8.0.2:
     dependencies:
-      '@babel/core': 7.27.7
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
+      '@babel/core': 7.28.5
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.28.0
       '@types/doctrine': 0.0.9
       '@types/resolve': 1.20.6
       doctrine: 3.0.0
-      resolve: 1.22.10
-      strip-indent: 4.0.0
+      resolve: 1.22.11
+      strip-indent: 4.1.1
     transitivePeerDependencies:
       - supports-color
 
@@ -43799,6 +48707,12 @@ snapshots:
       react: 18.2.0
       scheduler: 0.23.2
 
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
   react-dom@19.1.0(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -43820,6 +48734,14 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       react-is: 17.0.2
 
+  react-element-to-jsx-string@15.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      '@base2/pretty-print-object': 1.0.1
+      is-plain-object: 5.0.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-is: 18.1.0
+
   react-element-to-jsx-string@15.0.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       '@base2/pretty-print-object': 1.0.1
@@ -43828,9 +48750,14 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       react-is: 18.1.0
 
+  react-error-boundary@3.1.4(react@18.2.0):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 18.2.0
+
   react-error-boundary@6.0.0(react@19.1.0):
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       react: 19.1.0
 
   react-error-overlay@4.0.1: {}
@@ -43879,7 +48806,7 @@ snapshots:
 
   react-inspector@5.1.1(react@18.2.0):
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       is-dom: 1.1.0
       prop-types: 15.8.1
       react: 18.2.0
@@ -43892,29 +48819,29 @@ snapshots:
     dependencies:
       react: 19.1.0
 
-  react-intl@7.1.11(react@18.2.0)(typescript@5.8.3):
+  react-intl@7.1.14(react@18.2.0)(typescript@5.8.3):
     dependencies:
-      '@formatjs/ecma402-abstract': 2.3.4
-      '@formatjs/icu-messageformat-parser': 2.11.2
-      '@formatjs/intl': 3.1.6(typescript@5.8.3)
+      '@formatjs/ecma402-abstract': 2.3.6
+      '@formatjs/icu-messageformat-parser': 2.11.4
+      '@formatjs/intl': 3.1.8(typescript@5.8.3)
       '@types/hoist-non-react-statics': 3.3.7(@types/react@18.2.0)
       '@types/react': 18.2.0
       hoist-non-react-statics: 3.3.2
-      intl-messageformat: 10.7.16
+      intl-messageformat: 10.7.18
       react: 18.2.0
       tslib: 2.8.1
     optionalDependencies:
       typescript: 5.8.3
 
-  react-intl@7.1.11(react@19.1.0)(typescript@4.9.5):
+  react-intl@7.1.14(react@19.1.0)(typescript@4.9.5):
     dependencies:
-      '@formatjs/ecma402-abstract': 2.3.4
-      '@formatjs/icu-messageformat-parser': 2.11.2
-      '@formatjs/intl': 3.1.6(typescript@4.9.5)
+      '@formatjs/ecma402-abstract': 2.3.6
+      '@formatjs/icu-messageformat-parser': 2.11.4
+      '@formatjs/intl': 3.1.8(typescript@4.9.5)
       '@types/hoist-non-react-statics': 3.3.7(@types/react@18.2.0)
       '@types/react': 18.2.0
       hoist-non-react-statics: 3.3.2
-      intl-messageformat: 10.7.16
+      intl-messageformat: 10.7.18
       react: 19.1.0
       tslib: 2.8.1
     optionalDependencies:
@@ -43928,9 +48855,9 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  react-is@19.1.1: {}
+  react-is@19.2.0: {}
 
-  react-json-view-lite@2.4.2(react@18.2.0):
+  react-json-view-lite@2.5.0(react@18.2.0):
     dependencies:
       react: 18.2.0
 
@@ -44001,6 +48928,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  react-markdown@9.0.3(@types/react@18.2.0)(react@18.2.0):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/react': 18.2.0
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.0
+      react: 18.2.0
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
   react-monaco-editor@0.58.0(monaco-editor@0.52.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       monaco-editor: 0.52.2
@@ -44022,6 +48966,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - react-native-b4a
 
@@ -44029,7 +48974,7 @@ snapshots:
     dependencies:
       '@types/use-sync-external-store': 0.0.6
       react: 18.2.0
-      use-sync-external-store: 1.5.0(react@18.2.0)
+      use-sync-external-store: 1.6.0(react@18.2.0)
     optionalDependencies:
       '@types/react': 18.2.0
       redux: 5.0.1
@@ -44044,6 +48989,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  react-remove-scroll-bar@2.3.8(@types/react@18.2.0)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/react@18.2.0)(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   react-remove-scroll-bar@2.3.8(@types/react@18.2.0)(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -44052,6 +49005,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  react-remove-scroll@2.5.5(@types/react@18.2.0)(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+      react-remove-scroll-bar: 2.3.8(@types/react@18.2.0)(react@18.2.0)
+      react-style-singleton: 2.2.3(@types/react@18.2.0)(react@18.2.0)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.2.0)(react@18.2.0)
+      use-sidecar: 1.1.3(@types/react@18.2.0)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   react-remove-scroll@2.5.5(@types/react@18.2.0)(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -44074,22 +49038,33 @@ 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):
+  react-remove-scroll@2.7.1(@types/react@18.2.0)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/react@18.2.0)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.2.0)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.2.0)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.2.0)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.0
+
+  react-scripts-ts@3.1.0(@swc/core@1.14.0(@swc/helpers@0.5.17))(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.27.7))(webpack@5.101.0)
+      babel-loader: 7.1.2(babel-core@7.0.0-bridge.0(@babel/core@7.27.7))(webpack@5.102.1)
       babel-preset-react-app: 3.1.2(babel-runtime@6.26.0)
       case-sensitive-paths-webpack-plugin: 2.1.1
       chalk: 1.1.3
       css-loader: 0.28.7
       dotenv: 4.0.0
       dotenv-expand: 4.2.0
-      extract-text-webpack-plugin: 3.0.2(webpack@5.101.0)
-      file-loader: 1.1.5(webpack@5.101.0)
-      fork-ts-checker-webpack-plugin: 0.2.10(typescript@5.8.3)(webpack@5.101.0)
+      extract-text-webpack-plugin: 3.0.2(webpack@5.102.1)
+      file-loader: 1.1.5(webpack@5.102.1)
+      fork-ts-checker-webpack-plugin: 0.2.10(typescript@5.8.3)(webpack@5.102.1)
       fs-extra: 3.0.1
-      html-webpack-plugin: 2.29.0(webpack@5.101.0)
+      html-webpack-plugin: 2.29.0(webpack@5.102.1)
       jest: 20.0.4
       object-assign: 4.1.1
       postcss-flexbugs-fixes: 3.2.0
@@ -44100,7 +49075,7 @@ snapshots:
       resolve: 1.6.0
       source-map-loader: 0.2.4
       style-loader: 0.19.0
-      sw-precache-webpack-plugin: 0.11.4(webpack@5.101.0)
+      sw-precache-webpack-plugin: 0.11.4(webpack@5.102.1)
       ts-jest: 22.0.1(jest@20.0.4)(typescript@5.8.3)
       ts-loader: 2.3.7
       tsconfig-paths-webpack-plugin: 2.0.0
@@ -44108,11 +49083,11 @@ snapshots:
       tslint-config-prettier: 1.18.0
       tslint-react: 3.6.0(tslint@5.20.1(typescript@5.8.3))(typescript@5.8.3)
       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-manifest-plugin: 1.3.2(webpack@5.101.0)
+      uglifyjs-webpack-plugin: 1.2.5(webpack@5.102.1)
+      url-loader: 0.6.2(file-loader@1.1.5(webpack@5.102.1))
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+      webpack-dev-server: 5.2.2(webpack-cli@6.0.1)(webpack@5.102.1)
+      webpack-manifest-plugin: 1.3.2(webpack@5.102.1)
       whatwg-fetch: 2.0.3
     optionalDependencies:
       fsevents: 1.2.13
@@ -44128,22 +49103,22 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  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.28.5))(babel-runtime@6.26.0)(typescript@5.8.3):
     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.27.7))(webpack@5.101.0)
+      babel-loader: 7.1.2(babel-core@7.0.0-bridge.0(@babel/core@7.28.5))(webpack@5.102.1)
       babel-preset-react-app: 3.1.2(babel-runtime@6.26.0)
       case-sensitive-paths-webpack-plugin: 2.1.1
       chalk: 1.1.3
       css-loader: 0.28.7
       dotenv: 4.0.0
       dotenv-expand: 4.2.0
-      extract-text-webpack-plugin: 3.0.2(webpack@5.101.0)
-      file-loader: 1.1.5(webpack@5.101.0)
-      fork-ts-checker-webpack-plugin: 0.2.10(typescript@5.8.3)(webpack@5.101.0)
+      extract-text-webpack-plugin: 3.0.2(webpack@5.102.1)
+      file-loader: 1.1.5(webpack@5.102.1)
+      fork-ts-checker-webpack-plugin: 0.2.10(typescript@5.8.3)(webpack@5.102.1)
       fs-extra: 3.0.1
-      html-webpack-plugin: 2.29.0(webpack@5.101.0)
+      html-webpack-plugin: 2.29.0(webpack@5.102.1)
       jest: 20.0.4
       object-assign: 4.1.1
       postcss-flexbugs-fixes: 3.2.0
@@ -44154,7 +49129,7 @@ snapshots:
       resolve: 1.6.0
       source-map-loader: 0.2.4
       style-loader: 0.19.0
-      sw-precache-webpack-plugin: 0.11.4(webpack@5.101.0)
+      sw-precache-webpack-plugin: 0.11.4(webpack@5.102.1)
       ts-jest: 22.0.1(jest@20.0.4)(typescript@5.8.3)
       ts-loader: 2.3.7
       tsconfig-paths-webpack-plugin: 2.0.0
@@ -44162,11 +49137,11 @@ snapshots:
       tslint-config-prettier: 1.18.0
       tslint-react: 3.6.0(tslint@5.20.1(typescript@5.8.3))(typescript@5.8.3)
       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-manifest-plugin: 1.3.2(webpack@5.101.0)
+      uglifyjs-webpack-plugin: 1.2.5(webpack@5.102.1)
+      url-loader: 0.6.2(file-loader@1.1.5(webpack@5.102.1))
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-dev-server: 5.2.2(webpack@5.102.1)
+      webpack-manifest-plugin: 1.3.2(webpack@5.102.1)
       whatwg-fetch: 2.0.3
     optionalDependencies:
       fsevents: 1.2.13
@@ -44182,6 +49157,11 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
+  react-simple-code-editor@0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-split-pane@0.1.92(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       prop-types: 15.8.1
@@ -44202,6 +49182,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  react-style-singleton@2.2.3(@types/react@18.2.0)(react@18.3.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   react-style-singleton@2.2.3(@types/react@18.2.0)(react@19.1.0):
     dependencies:
       get-nonce: 1.0.1
@@ -44210,9 +49198,9 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
-  react-syntax-highlighter@15.6.1(react@18.2.0):
+  react-syntax-highlighter@15.6.6(react@18.2.0):
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       highlight.js: 10.7.3
       highlightjs-vue: 1.0.0
       lowlight: 1.20.0
@@ -44223,12 +49211,12 @@ snapshots:
   react-test-renderer@19.1.1(react@18.2.0):
     dependencies:
       react: 18.2.0
-      react-is: 19.1.1
+      react-is: 19.2.0
       scheduler: 0.26.0
 
   react-textarea-autosize@8.5.9(@types/react@18.2.0)(react@18.2.0):
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
       react: 18.2.0
       use-composed-ref: 1.4.0(@types/react@18.2.0)(react@18.2.0)
       use-latest: 1.3.0(@types/react@18.2.0)(react@18.2.0)
@@ -44244,6 +49232,10 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
   react@19.1.0: {}
 
   read-cache@1.0.0:
@@ -44373,15 +49365,15 @@ snapshots:
 
   rechoir@0.6.2:
     dependencies:
-      resolve: 1.22.10
+      resolve: 1.22.11
 
   rechoir@0.7.1:
     dependencies:
-      resolve: 1.22.10
+      resolve: 1.22.11
 
   rechoir@0.8.0:
     dependencies:
-      resolve: 1.22.10
+      resolve: 1.22.11
 
   recursive-readdir@2.2.1:
     dependencies:
@@ -44400,7 +49392,7 @@ snapshots:
   redent@4.0.0:
     dependencies:
       indent-string: 5.0.0
-      strip-indent: 4.0.0
+      strip-indent: 4.1.1
 
   reduce-css-calc@1.3.0:
     dependencies:
@@ -44418,7 +49410,7 @@ snapshots:
 
   redux@4.2.1:
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.28.4
 
   redux@5.0.1: {}
 
@@ -44439,7 +49431,7 @@ snapshots:
       parse-entities: 2.0.0
       prismjs: 1.30.0
 
-  regenerate-unicode-properties@10.2.0:
+  regenerate-unicode-properties@10.2.2:
     dependencies:
       regenerate: 1.4.2
 
@@ -44474,14 +49466,14 @@ snapshots:
       regjsgen: 0.2.0
       regjsparser: 0.1.5
 
-  regexpu-core@6.2.0:
+  regexpu-core@6.4.0:
     dependencies:
       regenerate: 1.4.2
-      regenerate-unicode-properties: 10.2.0
+      regenerate-unicode-properties: 10.2.2
       regjsgen: 0.8.0
-      regjsparser: 0.12.0
+      regjsparser: 0.13.0
       unicode-match-property-ecmascript: 2.0.0
-      unicode-match-property-value-ecmascript: 2.2.0
+      unicode-match-property-value-ecmascript: 2.2.1
 
   registry-auth-token@3.4.0:
     dependencies:
@@ -44500,9 +49492,9 @@ snapshots:
     dependencies:
       jsesc: 0.5.0
 
-  regjsparser@0.12.0:
+  regjsparser@0.13.0:
     dependencies:
-      jsesc: 3.0.2
+      jsesc: 3.1.0
 
   rehype-raw@6.1.1:
     dependencies:
@@ -44736,7 +49728,7 @@ snapshots:
     dependencies:
       path-parse: 1.0.7
 
-  resolve@1.22.10:
+  resolve@1.22.11:
     dependencies:
       is-core-module: 2.16.1
       path-parse: 1.0.7
@@ -44797,21 +49789,25 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
+  rimraf@5.0.10:
+    dependencies:
+      glob: 10.4.5
+
   rimraf@6.0.1:
     dependencies:
       glob: 11.0.3
       package-json-from-dist: 1.0.1
 
-  rollup-plugin-import-css@3.5.8(rollup@4.46.2):
+  rollup-plugin-import-css@3.5.8(rollup@4.52.5):
     dependencies:
-      '@rollup/pluginutils': 5.2.0(rollup@4.46.2)
-      rollup: 4.46.2
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      rollup: 4.52.5
 
-  rollup-plugin-peer-deps-external@2.2.4(rollup@4.46.2):
+  rollup-plugin-peer-deps-external@2.2.4(rollup@4.52.5):
     dependencies:
-      rollup: 4.46.2
+      rollup: 4.52.5
 
-  rollup-plugin-postcss@4.0.2(postcss@8.5.6):
+  rollup-plugin-postcss@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)):
     dependencies:
       chalk: 4.1.2
       concat-with-sourcemaps: 1.1.0
@@ -44820,10 +49816,10 @@ snapshots:
       p-queue: 6.6.2
       pify: 5.0.0
       postcss: 8.5.6
-      postcss-load-config: 3.1.4(postcss@8.5.6)
+      postcss-load-config: 3.1.4(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       postcss-modules: 4.3.1(postcss@8.5.6)
       promise.series: 0.2.0
-      resolve: 1.22.10
+      resolve: 1.22.11
       rollup-pluginutils: 2.8.2
       safe-identifier: 0.4.2
       style-inject: 0.3.0
@@ -44865,13 +49861,13 @@ snapshots:
       tslib: 2.0.1
       typescript: 3.9.10
 
-  rollup-plugin-typescript2@0.36.0(rollup@4.46.2)(typescript@5.8.3):
+  rollup-plugin-typescript2@0.36.0(rollup@4.52.5)(typescript@5.8.3):
     dependencies:
       '@rollup/pluginutils': 4.2.1
       find-cache-dir: 3.3.2
       fs-extra: 10.1.0
-      rollup: 4.46.2
-      semver: 7.7.2
+      rollup: 4.52.5
+      semver: 7.7.3
       tslib: 2.8.1
       typescript: 5.8.3
 
@@ -44890,45 +49886,47 @@ snapshots:
       '@types/node': 22.15.35
       acorn: 7.4.1
 
-  rollup@4.46.2:
+  rollup@4.52.5:
     dependencies:
       '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.46.2
-      '@rollup/rollup-android-arm64': 4.46.2
-      '@rollup/rollup-darwin-arm64': 4.46.2
-      '@rollup/rollup-darwin-x64': 4.46.2
-      '@rollup/rollup-freebsd-arm64': 4.46.2
-      '@rollup/rollup-freebsd-x64': 4.46.2
-      '@rollup/rollup-linux-arm-gnueabihf': 4.46.2
-      '@rollup/rollup-linux-arm-musleabihf': 4.46.2
-      '@rollup/rollup-linux-arm64-gnu': 4.46.2
-      '@rollup/rollup-linux-arm64-musl': 4.46.2
-      '@rollup/rollup-linux-loongarch64-gnu': 4.46.2
-      '@rollup/rollup-linux-ppc64-gnu': 4.46.2
-      '@rollup/rollup-linux-riscv64-gnu': 4.46.2
-      '@rollup/rollup-linux-riscv64-musl': 4.46.2
-      '@rollup/rollup-linux-s390x-gnu': 4.46.2
-      '@rollup/rollup-linux-x64-gnu': 4.46.2
-      '@rollup/rollup-linux-x64-musl': 4.46.2
-      '@rollup/rollup-win32-arm64-msvc': 4.46.2
-      '@rollup/rollup-win32-ia32-msvc': 4.46.2
-      '@rollup/rollup-win32-x64-msvc': 4.46.2
+      '@rollup/rollup-android-arm-eabi': 4.52.5
+      '@rollup/rollup-android-arm64': 4.52.5
+      '@rollup/rollup-darwin-arm64': 4.52.5
+      '@rollup/rollup-darwin-x64': 4.52.5
+      '@rollup/rollup-freebsd-arm64': 4.52.5
+      '@rollup/rollup-freebsd-x64': 4.52.5
+      '@rollup/rollup-linux-arm-gnueabihf': 4.52.5
+      '@rollup/rollup-linux-arm-musleabihf': 4.52.5
+      '@rollup/rollup-linux-arm64-gnu': 4.52.5
+      '@rollup/rollup-linux-arm64-musl': 4.52.5
+      '@rollup/rollup-linux-loong64-gnu': 4.52.5
+      '@rollup/rollup-linux-ppc64-gnu': 4.52.5
+      '@rollup/rollup-linux-riscv64-gnu': 4.52.5
+      '@rollup/rollup-linux-riscv64-musl': 4.52.5
+      '@rollup/rollup-linux-s390x-gnu': 4.52.5
+      '@rollup/rollup-linux-x64-gnu': 4.52.5
+      '@rollup/rollup-linux-x64-musl': 4.52.5
+      '@rollup/rollup-openharmony-arm64': 4.52.5
+      '@rollup/rollup-win32-arm64-msvc': 4.52.5
+      '@rollup/rollup-win32-ia32-msvc': 4.52.5
+      '@rollup/rollup-win32-x64-gnu': 4.52.5
+      '@rollup/rollup-win32-x64-msvc': 4.52.5
       fsevents: 2.3.3
 
   router@2.2.0:
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       depd: 2.0.0
       is-promise: 4.0.0
       parseurl: 1.3.3
-      path-to-regexp: 8.2.0
+      path-to-regexp: 8.3.0
     transitivePeerDependencies:
       - supports-color
 
   rsvp@4.8.5: {}
 
-  run-applescript@7.0.0: {}
+  run-applescript@7.1.0: {}
 
   run-async@2.4.1: {}
 
@@ -44950,6 +49948,10 @@ snapshots:
     dependencies:
       tslib: 1.14.1
 
+  rxjs@7.8.2:
+    dependencies:
+      tslib: 2.8.1
+
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
@@ -45009,24 +50011,31 @@ snapshots:
     dependencies:
       truncate-utf8-bytes: 1.0.2
 
-  sass-loader@16.0.5(sass@1.90.0)(webpack@5.101.0):
+  sass-loader@13.3.3(sass@1.93.3)(webpack@5.102.1):
     dependencies:
       neo-async: 2.6.2
+      webpack: 5.102.1(webpack-cli@5.1.4)
     optionalDependencies:
-      sass: 1.90.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      sass: 1.93.3
 
-  sass@1.90.0:
+  sass-loader@16.0.6(sass@1.93.3)(webpack@5.102.1):
+    dependencies:
+      neo-async: 2.6.2
+    optionalDependencies:
+      sass: 1.93.3
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+
+  sass@1.93.3:
     dependencies:
       chokidar: 4.0.3
-      immutable: 5.1.3
+      immutable: 5.1.4
       source-map-js: 1.2.1
     optionalDependencies:
       '@parcel/watcher': 2.5.1
 
   sax@1.2.4: {}
 
-  sax@1.4.1: {}
+  sax@1.4.2: {}
 
   saxes@3.1.11:
     dependencies:
@@ -45069,7 +50078,7 @@ snapshots:
       ajv: 6.12.6
       ajv-keywords: 3.5.2(ajv@6.12.6)
 
-  schema-utils@4.3.2:
+  schema-utils@4.3.3:
     dependencies:
       '@types/json-schema': 7.0.15
       ajv: 8.17.1
@@ -45082,7 +50091,7 @@ snapshots:
       '@secretlint/formatter': 9.3.4
       '@secretlint/node': 9.3.4
       '@secretlint/profiler': 9.3.4
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       globby: 14.1.0
       read-pkg: 8.1.0
     transitivePeerDependencies:
@@ -45092,11 +50101,11 @@ snapshots:
 
   select-hose@2.0.0: {}
 
-  selenium-webdriver@4.34.0:
+  selenium-webdriver@4.38.0:
     dependencies:
-      '@bazel/runfiles': 6.3.1
+      '@bazel/runfiles': 6.5.0
       jszip: 3.10.1
-      tmp: 0.2.4
+      tmp: 0.2.5
       ws: 8.18.3
     transitivePeerDependencies:
       - bufferutil
@@ -45104,7 +50113,7 @@ snapshots:
 
   selfsigned@2.4.1:
     dependencies:
-      '@types/node-forge': 1.3.13
+      '@types/node-forge': 1.3.14
       node-forge: 1.3.1
 
   semver-diff@2.1.0:
@@ -45117,7 +50126,7 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.7.2: {}
+  semver@7.7.3: {}
 
   send@0.19.0:
     dependencies:
@@ -45137,7 +50146,7 @@ snapshots:
 
   send@1.2.0:
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       encodeurl: 2.0.0
       escape-html: 1.0.3
       etag: 1.8.1
@@ -45183,6 +50192,16 @@ snapshots:
       parseurl: 1.3.3
       safe-buffer: 5.2.1
 
+  serve-handler@6.1.6:
+    dependencies:
+      bytes: 3.0.0
+      content-disposition: 0.5.2
+      mime-types: 2.1.18
+      minimatch: 3.1.2
+      path-is-inside: 1.0.2
+      path-to-regexp: 3.3.0
+      range-parser: 1.2.0
+
   serve-index@1.9.1:
     dependencies:
       accepts: 1.3.8
@@ -45250,7 +50269,7 @@ snapshots:
     dependencies:
       inherits: 2.0.4
       safe-buffer: 5.2.1
-      to-buffer: 1.2.1
+      to-buffer: 1.2.2
 
   shallow-clone@3.0.1:
     dependencies:
@@ -45333,21 +50352,17 @@ snapshots:
       once: 1.4.0
       simple-concat: 1.0.1
 
-  simple-swizzle@0.2.2:
-    dependencies:
-      is-arrayish: 0.3.2
-
   sisteransi@1.0.5: {}
 
   size-limit@11.2.0:
     dependencies:
       bytes-iec: 3.1.1
       chokidar: 4.0.3
-      jiti: 2.5.1
+      jiti: 2.6.1
       lilconfig: 3.1.3
       nanospinner: 1.2.2
       picocolors: 1.1.1
-      tinyglobby: 0.2.14
+      tinyglobby: 0.2.15
 
   slash@1.0.0: {}
 
@@ -45371,15 +50386,10 @@ snapshots:
       astral-regex: 2.0.0
       is-fullwidth-code-point: 3.0.0
 
-  slice-ansi@5.0.0:
-    dependencies:
-      ansi-styles: 6.2.1
-      is-fullwidth-code-point: 4.0.0
-
-  slice-ansi@7.1.0:
+  slice-ansi@7.1.2:
     dependencies:
-      ansi-styles: 6.2.1
-      is-fullwidth-code-point: 5.0.0
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 5.1.0
 
   slugify@1.6.6: {}
 
@@ -45408,14 +50418,14 @@ snapshots:
   socks-proxy-agent@7.0.0:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.4.1(supports-color@8.1.1)
-      socks: 2.8.6
+      debug: 4.4.3(supports-color@8.1.1)
+      socks: 2.8.7
     transitivePeerDependencies:
       - supports-color
 
-  socks@2.8.6:
+  socks@2.8.7:
     dependencies:
-      ip-address: 9.0.5
+      ip-address: 10.0.1
       smart-buffer: 4.2.0
 
   sort-keys@1.1.2:
@@ -45433,11 +50443,17 @@ snapshots:
       async: 2.6.4
       loader-utils: 1.4.2
 
-  source-map-loader@5.0.0(webpack@5.101.0):
+  source-map-loader@4.0.2(webpack@5.102.1):
+    dependencies:
+      iconv-lite: 0.6.3
+      source-map-js: 1.2.1
+      webpack: 5.102.1(webpack-cli@5.1.4)
+
+  source-map-loader@5.0.0(webpack@5.102.1):
     dependencies:
       iconv-lite: 0.6.3
       source-map-js: 1.2.1
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@5.1.4)
 
   source-map-resolve@0.6.0:
     dependencies:
@@ -45477,6 +50493,13 @@ snapshots:
 
   space-separated-tokens@2.0.2: {}
 
+  spawn-rx@5.1.2:
+    dependencies:
+      debug: 4.4.3(supports-color@8.1.1)
+      rxjs: 7.8.2
+    transitivePeerDependencies:
+      - supports-color
+
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
@@ -45493,7 +50516,7 @@ snapshots:
 
   spdy-transport@3.0.0:
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       detect-node: 2.1.0
       hpack.js: 2.1.6
       obuf: 1.1.2
@@ -45504,7 +50527,7 @@ snapshots:
 
   spdy@4.0.2:
     dependencies:
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       handle-thing: 2.0.1
       http-deceiver: 1.2.7
       select-hose: 2.0.0
@@ -45514,8 +50537,6 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
-  sprintf-js@1.1.3: {}
-
   sshpk@1.18.0:
     dependencies:
       asn1: 0.2.6
@@ -45575,6 +50596,13 @@ snapshots:
 
   state-toggle@1.0.3: {}
 
+  static-browser-server@1.0.3:
+    dependencies:
+      '@open-draft/deferred-promise': 2.2.0
+      dotenv: 16.5.0
+      mime-db: 1.54.0
+      outvariant: 1.4.0
+
   statuses@1.5.0: {}
 
   statuses@2.0.1: {}
@@ -45602,7 +50630,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.5.3):
+  storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.5.3):
     dependencies:
       '@storybook/global': 5.0.0
       '@testing-library/jest-dom': 6.6.4
@@ -45611,10 +50639,10 @@ snapshots:
       '@vitest/mocker': 3.2.4
       '@vitest/spy': 3.2.4
       better-opn: 3.0.2
-      esbuild: 0.25.8
-      esbuild-register: 3.6.0(esbuild@0.25.8)
+      esbuild: 0.25.12
+      esbuild-register: 3.6.0(esbuild@0.25.12)
       recast: 0.23.11
-      semver: 7.7.2
+      semver: 7.7.3
       ws: 8.18.3
     optionalDependencies:
       prettier: 3.5.3
@@ -45636,7 +50664,7 @@ snapshots:
   streamroller@3.1.5:
     dependencies:
       date-format: 4.0.14
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       fs-extra: 8.1.0
     transitivePeerDependencies:
       - supports-color
@@ -45647,8 +50675,11 @@ snapshots:
       fast-fifo: 1.3.2
       text-decoder: 1.2.3
     transitivePeerDependencies:
+      - bare-abort-controller
       - react-native-b4a
 
+  strict-event-emitter@0.4.6: {}
+
   strict-uri-encode@1.1.0: {}
 
   string-argv@0.3.2: {}
@@ -45696,13 +50727,18 @@ snapshots:
     dependencies:
       eastasianwidth: 0.2.0
       emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
+      strip-ansi: 7.1.2
 
   string-width@7.2.0:
     dependencies:
-      emoji-regex: 10.4.0
-      get-east-asian-width: 1.3.0
-      strip-ansi: 7.1.0
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
+  string-width@8.1.0:
+    dependencies:
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
 
   string.fromcodepoint@0.2.1: {}
 
@@ -45804,9 +50840,9 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
-  strip-ansi@7.1.0:
+  strip-ansi@7.1.2:
     dependencies:
-      ansi-regex: 6.1.0
+      ansi-regex: 6.2.2
 
   strip-bom@2.0.0:
     dependencies:
@@ -45822,6 +50858,8 @@ snapshots:
 
   strip-final-newline@3.0.0: {}
 
+  strip-final-newline@4.0.0: {}
+
   strip-indent@1.0.1:
     dependencies:
       get-stdin: 4.0.1
@@ -45830,9 +50868,7 @@ snapshots:
     dependencies:
       min-indent: 1.0.1
 
-  strip-indent@4.0.0:
-    dependencies:
-      min-indent: 1.0.1
+  strip-indent@4.1.1: {}
 
   strip-json-comments@2.0.1: {}
 
@@ -45860,39 +50896,49 @@ snapshots:
       loader-utils: 1.4.2
       schema-utils: 0.3.0
 
-  style-loader@1.3.0(webpack@5.101.0):
+  style-loader@1.3.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
+    dependencies:
+      loader-utils: 2.0.4
+      schema-utils: 2.7.1
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+
+  style-loader@1.3.0(webpack@5.102.1):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 2.7.1
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@5.1.4)
 
-  style-loader@2.0.0(webpack@5.101.0):
+  style-loader@2.0.0(webpack@5.102.1):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
-  style-loader@3.3.4(webpack@5.101.0):
+  style-loader@3.3.4(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
     dependencies:
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
 
-  style-loader@4.0.0(webpack@5.101.0):
+  style-loader@3.3.4(webpack@5.102.1):
     dependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@5.1.4)
 
-  style-mod@4.1.2: {}
+  style-loader@4.0.0(webpack@5.102.1):
+    dependencies:
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+
+  style-mod@4.1.3: {}
 
-  style-to-js@1.1.17:
+  style-to-js@1.1.19:
     dependencies:
-      style-to-object: 1.0.9
+      style-to-object: 1.0.12
 
   style-to-object@0.3.0:
     dependencies:
       inline-style-parser: 0.1.1
 
-  style-to-object@1.0.9:
+  style-to-object@1.0.12:
     dependencies:
-      inline-style-parser: 0.2.4
+      inline-style-parser: 0.2.6
 
   style-value-types@5.0.0:
     dependencies:
@@ -45901,35 +50947,35 @@ snapshots:
 
   stylehacks@5.1.1(postcss@8.5.6):
     dependencies:
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       postcss: 8.5.6
       postcss-selector-parser: 6.1.2
 
-  stylelint-config-recommended@16.0.0(stylelint@16.23.0(typescript@5.8.3)):
+  stylelint-config-recommended@16.0.0(stylelint@16.25.0(typescript@5.8.3)):
     dependencies:
-      stylelint: 16.23.0(typescript@5.8.3)
+      stylelint: 16.25.0(typescript@5.8.3)
 
-  stylelint-config-standard@38.0.0(stylelint@16.23.0(typescript@5.8.3)):
+  stylelint-config-standard@38.0.0(stylelint@16.25.0(typescript@5.8.3)):
     dependencies:
-      stylelint: 16.23.0(typescript@5.8.3)
-      stylelint-config-recommended: 16.0.0(stylelint@16.23.0(typescript@5.8.3))
+      stylelint: 16.25.0(typescript@5.8.3)
+      stylelint-config-recommended: 16.0.0(stylelint@16.25.0(typescript@5.8.3))
 
-  stylelint@16.23.0(typescript@5.8.3):
+  stylelint@16.25.0(typescript@5.8.3):
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
       '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0)
-      '@dual-bundle/import-meta-resolve': 4.1.0
+      '@dual-bundle/import-meta-resolve': 4.2.1
       balanced-match: 2.0.0
       colord: 2.9.3
       cosmiconfig: 9.0.0(typescript@5.8.3)
       css-functions-list: 3.2.3
       css-tree: 3.1.0
-      debug: 4.4.1(supports-color@8.1.1)
+      debug: 4.4.3(supports-color@8.1.1)
       fast-glob: 3.3.3
       fastest-levenshtein: 1.0.16
-      file-entry-cache: 10.1.3
+      file-entry-cache: 10.1.4
       global-modules: 2.0.0
       globby: 11.1.0
       globjoin: 0.1.4
@@ -45966,7 +51012,7 @@ snapshots:
 
   sucrase@3.35.0:
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.12
+      '@jridgewell/gen-mapping': 0.3.13
       commander: 4.1.1
       glob: 10.4.5
       lines-and-columns: 1.2.4
@@ -46016,10 +51062,10 @@ snapshots:
 
   svg-tags@1.0.0: {}
 
-  svg-url-loader@8.0.0(webpack@5.101.0):
+  svg-url-loader@8.0.0(webpack@5.102.1):
     dependencies:
-      file-loader: 6.2.0(webpack@5.101.0)
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      file-loader: 6.2.0(webpack@5.102.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
   svg2ttf@4.3.0:
     dependencies:
@@ -46028,7 +51074,7 @@ snapshots:
       lodash: 4.17.21
       microbuffer: 1.0.0
       svgpath: 2.6.0
-      xmldom: '@xmldom/xmldom@0.8.10'
+      xmldom: '@xmldom/xmldom@0.8.11'
 
   svg2ttf@6.0.3:
     dependencies:
@@ -46046,7 +51092,7 @@ snapshots:
       glob: 7.2.3
       neatequal: 1.0.0
       readable-stream: 3.6.2
-      sax: 1.4.1
+      sax: 1.4.2
       svg-pathdata: 6.0.3
 
   svgicons2svgfont@5.0.2:
@@ -46054,7 +51100,7 @@ snapshots:
       commander: 2.20.3
       neatequal: 1.0.0
       readable-stream: 2.3.8
-      sax: 1.4.1
+      sax: 1.4.2
       string.fromcodepoint: 0.2.1
       string.prototype.codepointat: 0.2.1
       svg-pathdata: 1.0.4
@@ -46081,12 +51127,12 @@ snapshots:
 
   svgpath@2.6.0: {}
 
-  sw-precache-webpack-plugin@0.11.4(webpack@5.101.0):
+  sw-precache-webpack-plugin@0.11.4(webpack@5.102.1):
     dependencies:
       del: 2.2.2
       sw-precache: 5.2.1
       uglify-js: 3.19.3
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
   sw-precache@5.2.1:
     dependencies:
@@ -46106,15 +51152,15 @@ snapshots:
       path-to-regexp: 1.9.0
       serviceworker-cache-polyfill: 4.0.0
 
-  swagger-client@3.35.6:
+  swagger-client@3.36.0:
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
+      '@babel/runtime-corejs3': 7.28.4
       '@scarf/scarf': 1.4.0
-      '@swagger-api/apidom-core': 1.0.0-beta.45
-      '@swagger-api/apidom-error': 1.0.0-beta.45
-      '@swagger-api/apidom-json-pointer': 1.0.0-beta.45
-      '@swagger-api/apidom-ns-openapi-3-1': 1.0.0-beta.45
-      '@swagger-api/apidom-reference': 1.0.0-beta.45
+      '@swagger-api/apidom-core': 1.0.0-rc.1
+      '@swagger-api/apidom-error': 1.0.0-rc.1
+      '@swagger-api/apidom-json-pointer': 1.0.0-rc.1
+      '@swagger-api/apidom-ns-openapi-3-1': 1.0.0-rc.1
+      '@swagger-api/apidom-reference': 1.0.0-rc.1
       '@swaggerexpert/cookie': 2.0.2
       deepmerge: 4.3.1
       fast-json-patch: 3.1.1
@@ -46131,7 +51177,7 @@ snapshots:
 
   swagger-ui-react@5.21.0(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
+      '@babel/runtime-corejs3': 7.28.4
       '@scarf/scarf': 1.4.0
       base64-js: 1.5.1
       classnames: 2.5.1
@@ -46154,14 +51200,14 @@ snapshots:
       react-immutable-pure-component: 2.2.2(immutable@3.8.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-inspector: 6.0.2(react@18.2.0)
       react-redux: 9.2.0(@types/react@18.2.0)(react@18.2.0)(redux@5.0.1)
-      react-syntax-highlighter: 15.6.1(react@18.2.0)
+      react-syntax-highlighter: 15.6.6(react@18.2.0)
       redux: 5.0.1
       redux-immutable: 4.0.0(immutable@3.8.2)
       remarkable: 2.0.1
       reselect: 5.1.1
       serialize-error: 8.1.0
       sha.js: 2.4.12
-      swagger-client: 3.35.6
+      swagger-client: 3.36.0
       url-parse: 1.5.10
       xml: 1.0.1
       xml-but-prettier: 1.0.1
@@ -46170,15 +51216,16 @@ snapshots:
       - '@types/react'
       - debug
 
-  swagger-ui-react@5.27.1(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  swagger-ui-react@5.30.1(@types/react@18.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@babel/runtime-corejs3': 7.28.2
+      '@babel/runtime-corejs3': 7.28.4
       '@scarf/scarf': 1.4.0
       base64-js: 1.5.1
+      buffer: 6.0.3
       classnames: 2.5.1
       css.escape: 1.5.1
       deep-extend: 0.6.0
-      dompurify: 3.2.4
+      dompurify: 3.2.6
       ieee754: 1.2.1
       immutable: 3.8.2
       js-file-download: 0.4.12
@@ -46195,14 +51242,14 @@ snapshots:
       react-immutable-pure-component: 2.2.2(immutable@3.8.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-inspector: 6.0.2(react@18.2.0)
       react-redux: 9.2.0(@types/react@18.2.0)(react@18.2.0)(redux@5.0.1)
-      react-syntax-highlighter: 15.6.1(react@18.2.0)
+      react-syntax-highlighter: 15.6.6(react@18.2.0)
       redux: 5.0.1
       redux-immutable: 4.0.0(immutable@3.8.2)
       remarkable: 2.0.1
       reselect: 5.1.1
       serialize-error: 8.1.0
       sha.js: 2.4.12
-      swagger-client: 3.35.6
+      swagger-client: 3.36.0
       url-parse: 1.5.10
       xml: 1.0.1
       xml-but-prettier: 1.0.1
@@ -46211,11 +51258,17 @@ snapshots:
       - '@types/react'
       - debug
 
-  swc-loader@0.2.6(@swc/core@1.13.3(@swc/helpers@0.5.17))(webpack@5.101.0):
+  swc-loader@0.2.6(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
     dependencies:
-      '@swc/core': 1.13.3(@swc/helpers@0.5.17)
+      '@swc/core': 1.14.0(@swc/helpers@0.5.17)
       '@swc/counter': 0.1.3
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+
+  swc-loader@0.2.6(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1):
+    dependencies:
+      '@swc/core': 1.14.0(@swc/helpers@0.5.17)
+      '@swc/counter': 0.1.3
+      webpack: 5.102.1(webpack-cli@5.1.4)
 
   symbol-tree@3.2.4: {}
 
@@ -46235,7 +51288,7 @@ snapshots:
 
   tabbable@5.3.3: {}
 
-  tabbable@6.2.0: {}
+  tabbable@6.3.0: {}
 
   table@5.4.6:
     dependencies:
@@ -46252,7 +51305,9 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  tailwindcss@3.4.17:
+  tailwind-merge@2.6.0: {}
+
+  tailwindcss@3.4.18(yaml@2.8.1):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -46270,31 +51325,33 @@ snapshots:
       picocolors: 1.1.1
       postcss: 8.5.6
       postcss-import: 15.1.0(postcss@8.5.6)
-      postcss-js: 4.0.1(postcss@8.5.6)
-      postcss-load-config: 4.0.2(postcss@8.5.6)
+      postcss-js: 4.1.0(postcss@8.5.6)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.6)(yaml@2.8.1)
       postcss-nested: 6.2.0(postcss@8.5.6)
       postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
+      resolve: 1.22.11
       sucrase: 3.35.0
     transitivePeerDependencies:
-      - ts-node
+      - tsx
+      - yaml
 
-  tailwindcss@4.1.11: {}
+  tailwindcss@4.1.16: {}
 
   tapable@0.2.9: {}
 
   tapable@1.1.3: {}
 
-  tapable@2.2.2: {}
+  tapable@2.3.0: {}
 
   tar-fs@3.1.1:
     dependencies:
       pump: 3.0.3
       tar-stream: 3.1.7
     optionalDependencies:
-      bare-fs: 4.4.4
+      bare-fs: 4.5.0
       bare-path: 3.0.0
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - react-native-b4a
 
@@ -46304,6 +51361,7 @@ snapshots:
       fast-fifo: 1.3.2
       streamx: 2.23.0
     transitivePeerDependencies:
+      - bare-abort-controller
       - react-native-b4a
 
   tar@2.2.2:
@@ -46325,6 +51383,7 @@ snapshots:
     dependencies:
       tar-fs: 3.1.1
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - react-native-b4a
 
@@ -46373,7 +51432,20 @@ snapshots:
       ansi-escapes: 4.3.2
       supports-hyperlinks: 2.3.0
 
-  terser-webpack-plugin@4.2.3(webpack@5.101.0):
+  terser-webpack-plugin@4.2.3(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
+    dependencies:
+      cacache: 15.3.0
+      find-cache-dir: 3.3.2
+      jest-worker: 26.6.2
+      p-limit: 3.1.0
+      schema-utils: 3.3.0
+      serialize-javascript: 5.0.1
+      source-map: 0.6.1
+      terser: 5.44.0
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+      webpack-sources: 1.4.3
+
+  terser-webpack-plugin@4.2.3(webpack@5.102.1):
     dependencies:
       cacache: 15.3.0
       find-cache-dir: 3.3.2
@@ -46382,29 +51454,31 @@ snapshots:
       schema-utils: 3.3.0
       serialize-javascript: 5.0.1
       source-map: 0.6.1
-      terser: 5.43.1
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      terser: 5.44.0
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
       webpack-sources: 1.4.3
 
-  terser-webpack-plugin@5.3.14(@swc/core@1.13.3(@swc/helpers@0.5.17))(webpack@5.101.0):
+  terser-webpack-plugin@5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       serialize-javascript: 6.0.2
-      terser: 5.43.1
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      terser: 5.44.0
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
     optionalDependencies:
-      '@swc/core': 1.13.3(@swc/helpers@0.5.17)
+      '@swc/core': 1.14.0(@swc/helpers@0.5.17)
 
-  terser-webpack-plugin@5.3.14(webpack@5.101.0):
+  terser-webpack-plugin@5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1):
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       serialize-javascript: 6.0.2
-      terser: 5.43.1
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      terser: 5.44.0
+      webpack: 5.102.1(webpack-cli@5.1.4)
+    optionalDependencies:
+      '@swc/core': 1.14.0(@swc/helpers@0.5.17)
 
   terser@4.8.1:
     dependencies:
@@ -46412,9 +51486,9 @@ snapshots:
       source-map: 0.6.1
       source-map-support: 0.5.21
 
-  terser@5.43.1:
+  terser@5.44.0:
     dependencies:
-      '@jridgewell/source-map': 0.3.10
+      '@jridgewell/source-map': 0.3.11
       acorn: 8.15.0
       commander: 2.20.3
       source-map-support: 0.5.21
@@ -46451,7 +51525,7 @@ snapshots:
 
   textextensions@6.11.0:
     dependencies:
-      editions: 6.21.0
+      editions: 6.22.0
 
   thenify-all@1.6.0:
     dependencies:
@@ -46461,7 +51535,7 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
-  thingies@1.21.0(tslib@2.8.1):
+  thingies@2.5.0(tslib@2.8.1):
     dependencies:
       tslib: 2.8.1
 
@@ -46505,9 +51579,9 @@ snapshots:
 
   tinyexec@0.3.2: {}
 
-  tinyglobby@0.2.14:
+  tinyglobby@0.2.15:
     dependencies:
-      fdir: 6.4.6(picomatch@4.0.3)
+      fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
   tinyrainbow@1.2.0: {}
@@ -46516,17 +51590,17 @@ snapshots:
 
   tinyspy@3.0.2: {}
 
-  tinyspy@4.0.3: {}
+  tinyspy@4.0.4: {}
 
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
 
-  tmp@0.2.4: {}
+  tmp@0.2.5: {}
 
   tmpl@1.0.5: {}
 
-  to-buffer@1.2.1:
+  to-buffer@1.2.2:
     dependencies:
       isarray: 2.0.5
       safe-buffer: 5.2.1
@@ -46594,7 +51668,7 @@ snapshots:
 
   traverse@0.3.9: {}
 
-  tree-dump@1.0.3(tslib@2.8.1):
+  tree-dump@1.1.0(tslib@2.8.1):
     dependencies:
       tslib: 2.8.1
 
@@ -46690,17 +51764,17 @@ snapshots:
       typescript: 3.9.10
       yargs-parser: 18.1.3
 
-  ts-jest@29.3.4(@babel/core@7.27.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.7))(jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0))(typescript@5.8.3):
+  ts-jest@29.3.4(@babel/core@7.27.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.7))(jest@29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3)))(typescript@5.8.3):
     dependencies:
       bs-logger: 0.2.6
       ejs: 3.1.10
       fast-json-stable-stringify: 2.1.0
-      jest: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)
+      jest: 29.7.0(@types/node@22.15.35)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3))
       jest-util: 29.7.0
       json5: 2.2.3
       lodash.memoize: 4.1.2
       make-error: 1.3.6
-      semver: 7.7.2
+      semver: 7.7.3
       type-fest: 4.41.0
       typescript: 5.8.3
       yargs-parser: 21.1.1
@@ -46717,15 +51791,15 @@ snapshots:
       loader-utils: 1.4.2
       semver: 5.7.2
 
-  ts-loader@9.5.2(typescript@5.8.3)(webpack@5.101.0):
+  ts-loader@9.5.4(typescript@5.8.3)(webpack@5.102.1):
     dependencies:
       chalk: 4.1.2
       enhanced-resolve: 5.18.3
       micromatch: 4.0.8
-      semver: 7.7.2
+      semver: 7.7.3
       source-map: 0.7.6
       typescript: 5.8.3
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@5.1.4)
 
   ts-mixer@6.0.4: {}
 
@@ -46739,6 +51813,47 @@ snapshots:
       '@ts-morph/common': 0.27.0
       code-block-writer: 13.0.3
 
+  ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.18)(typescript@5.8.3):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 22.15.18
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.8.3
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.14.0(@swc/helpers@0.5.17)
+
+  ts-node@10.9.2(@swc/core@1.14.0(@swc/helpers@0.5.17))(@types/node@22.15.35)(typescript@5.8.3):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 22.15.35
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.8.3
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.14.0(@swc/helpers@0.5.17)
+    optional: true
+
   ts-pnp@1.2.0(typescript@4.9.5):
     optionalDependencies:
       typescript: 4.9.5
@@ -46771,10 +51886,10 @@ snapshots:
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-module-imports': 7.27.1
-      '@babel/parser': 7.28.0
+      '@babel/parser': 7.28.5
       '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.27.7)
       '@babel/preset-env': 7.27.2(@babel/core@7.27.7)
-      '@babel/traverse': 7.28.0
+      '@babel/traverse': 7.28.5
       '@rollup/plugin-babel': 5.3.1(@babel/core@7.27.7)(@types/babel__core@7.20.5)(rollup@1.32.1)
       '@rollup/plugin-commonjs': 11.1.0(rollup@1.32.1)
       '@rollup/plugin-json': 4.1.0(rollup@1.32.1)
@@ -46819,7 +51934,7 @@ snapshots:
       rollup-plugin-terser: 5.3.1(rollup@1.32.1)
       rollup-plugin-typescript2: 0.27.3(rollup@1.32.1)(typescript@3.9.10)
       sade: 1.8.1
-      semver: 7.7.2
+      semver: 7.7.3
       shelljs: 0.8.5
       tiny-glob: 0.2.9
       ts-jest: 25.5.1(jest@25.5.4)(typescript@3.9.10)
@@ -46903,7 +52018,7 @@ snapshots:
       js-yaml: 3.14.1
       minimatch: 3.1.2
       mkdirp: 0.5.6
-      resolve: 1.22.10
+      resolve: 1.22.11
       semver: 5.7.2
       tslib: 1.14.1
       tsutils: 2.29.0(typescript@4.9.5)
@@ -46920,7 +52035,7 @@ snapshots:
       js-yaml: 3.14.1
       minimatch: 3.1.2
       mkdirp: 0.5.6
-      resolve: 1.22.10
+      resolve: 1.22.11
       semver: 5.7.2
       tslib: 1.14.1
       tsutils: 2.29.0(typescript@5.8.3)
@@ -47089,7 +52204,7 @@ snapshots:
 
   typescript@5.8.3: {}
 
-  ua-parser-js@1.0.40: {}
+  ua-parser-js@1.0.41: {}
 
   uc.micro@1.0.6: {}
 
@@ -47109,7 +52224,7 @@ snapshots:
       commander: 2.19.0
       source-map: 0.6.1
 
-  uglifyjs-webpack-plugin@1.2.5(webpack@5.101.0):
+  uglifyjs-webpack-plugin@1.2.5(webpack@5.102.1):
     dependencies:
       cacache: 10.0.4
       find-cache-dir: 1.0.0
@@ -47117,7 +52232,7 @@ snapshots:
       serialize-javascript: 1.9.1
       source-map: 0.6.1
       uglify-es: 3.3.9
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
       webpack-sources: 1.4.3
       worker-farm: 1.7.0
 
@@ -47134,7 +52249,7 @@ snapshots:
 
   undici-types@6.21.0: {}
 
-  undici@7.13.0: {}
+  undici@7.16.0: {}
 
   unfetch@4.2.0: {}
 
@@ -47148,16 +52263,20 @@ snapshots:
   unicode-match-property-ecmascript@2.0.0:
     dependencies:
       unicode-canonical-property-names-ecmascript: 2.0.1
-      unicode-property-aliases-ecmascript: 2.1.0
+      unicode-property-aliases-ecmascript: 2.2.0
 
-  unicode-match-property-value-ecmascript@2.2.0: {}
+  unicode-match-property-value-ecmascript@2.2.1: {}
 
-  unicode-property-aliases-ecmascript@2.1.0: {}
+  unicode-property-aliases-ecmascript@2.2.0: {}
 
   unicorn-magic@0.1.0: {}
 
   unicorn-magic@0.3.0: {}
 
+  unidiff@1.0.4:
+    dependencies:
+      diff: 5.2.0
+
   unified@10.1.2:
     dependencies:
       '@types/unist': 2.0.11
@@ -47235,7 +52354,11 @@ snapshots:
     dependencies:
       '@types/unist': 2.0.11
 
-  unist-util-is@6.0.0:
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position-from-estree@2.0.0:
     dependencies:
       '@types/unist': 3.0.3
 
@@ -47275,10 +52398,10 @@ snapshots:
       '@types/unist': 2.0.11
       unist-util-is: 5.2.1
 
-  unist-util-visit-parents@6.0.1:
+  unist-util-visit-parents@6.0.2:
     dependencies:
       '@types/unist': 3.0.3
-      unist-util-is: 6.0.0
+      unist-util-is: 6.0.1
 
   unist-util-visit@2.0.3:
     dependencies:
@@ -47295,8 +52418,8 @@ snapshots:
   unist-util-visit@5.0.0:
     dependencies:
       '@types/unist': 3.0.3
-      unist-util-is: 6.0.0
-      unist-util-visit-parents: 6.0.1
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
 
   unit-compare@1.0.1:
     dependencies:
@@ -47343,15 +52466,15 @@ snapshots:
     dependencies:
       bluebird: 3.7.2
       duplexer2: 0.1.4
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       graceful-fs: 4.2.11
       node-int64: 0.4.0
 
   upath@2.0.1: {}
 
-  update-browserslist-db@1.1.3(browserslist@4.25.1):
+  update-browserslist-db@1.1.4(browserslist@4.27.0):
     dependencies:
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -47388,21 +52511,30 @@ snapshots:
 
   url-join@4.0.1: {}
 
-  url-loader@0.6.2(file-loader@1.1.5(webpack@5.101.0)):
+  url-loader@0.6.2(file-loader@1.1.5(webpack@5.102.1)):
     dependencies:
-      file-loader: 1.1.5(webpack@5.101.0)
+      file-loader: 1.1.5(webpack@5.102.1)
       loader-utils: 1.4.2
       mime: 1.6.0
       schema-utils: 0.3.0
 
-  url-loader@4.1.1(file-loader@6.2.0(webpack@5.101.0))(webpack@5.101.0):
+  url-loader@4.1.1(file-loader@6.2.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))))(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
     dependencies:
       loader-utils: 2.0.4
       mime-types: 2.1.35
       schema-utils: 3.3.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
     optionalDependencies:
-      file-loader: 6.2.0(webpack@5.101.0)
+      file-loader: 6.2.0(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+
+  url-loader@4.1.1(file-loader@6.2.0(webpack@5.102.1))(webpack@5.102.1):
+    dependencies:
+      loader-utils: 2.0.4
+      mime-types: 2.1.35
+      schema-utils: 3.3.0
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+    optionalDependencies:
+      file-loader: 6.2.0(webpack@5.102.1)
 
   url-parse-lax@1.0.0:
     dependencies:
@@ -47425,6 +52557,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  use-callback-ref@1.3.3(@types/react@18.2.0)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   use-callback-ref@1.3.3(@types/react@18.2.0)(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -47451,6 +52590,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  use-resize-observer@9.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      '@juggle/resize-observer': 3.4.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   use-resize-observer@9.1.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       '@juggle/resize-observer': 3.4.0
@@ -47465,6 +52610,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
+  use-sidecar@1.1.3(@types/react@18.2.0)(react@18.3.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.0
+
   use-sidecar@1.1.3(@types/react@18.2.0)(react@19.1.0):
     dependencies:
       detect-node-es: 1.1.0
@@ -47473,11 +52626,11 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
-  use-sync-external-store@1.5.0(react@18.2.0):
+  use-sync-external-store@1.6.0(react@18.2.0):
     dependencies:
       react: 18.2.0
 
-  use-sync-external-store@1.5.0(react@19.1.0):
+  use-sync-external-store@1.6.0(react@19.1.0):
     dependencies:
       react: 19.1.0
 
@@ -47498,7 +52651,7 @@ snapshots:
     dependencies:
       inherits: 2.0.4
       is-arguments: 1.2.0
-      is-generator-function: 1.1.0
+      is-generator-function: 1.1.2
       is-typed-array: 1.1.15
       which-typed-array: 1.1.19
 
@@ -47523,6 +52676,8 @@ snapshots:
       kleur: 4.1.5
       sade: 1.8.1
 
+  v8-compile-cache-lib@3.0.1: {}
+
   v8-compile-cache@2.4.0: {}
 
   v8-to-istanbul@4.1.4:
@@ -47533,7 +52688,7 @@ snapshots:
 
   v8-to-istanbul@9.3.0:
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/trace-mapping': 0.3.31
       '@types/istanbul-lib-coverage': 2.0.6
       convert-source-map: 2.0.0
 
@@ -47556,7 +52711,7 @@ snapshots:
       core-util-is: 1.0.2
       extsprintf: 1.3.0
 
-  version-range@4.14.0: {}
+  version-range@4.15.0: {}
 
   vfile-location@3.2.0: {}
 
@@ -47596,13 +52751,14 @@ snapshots:
       parse-semver: 1.1.1
       read: 1.0.7
       semver: 5.7.2
-      tmp: 0.2.4
+      tmp: 0.2.5
       typed-rest-client: 1.8.11
       url-join: 4.0.1
       xml2js: 0.4.23
       yauzl: 2.10.0
       yazl: 2.5.1
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - react-native-b4a
 
@@ -47621,59 +52777,61 @@ snapshots:
     dependencies:
       applicationinsights: 1.7.4
 
-  vscode-extension-tester-locators@3.12.2(monaco-page-objects@3.14.1(selenium-webdriver@4.34.0)(typescript@5.8.3))(selenium-webdriver@4.34.0):
+  vscode-extension-tester-locators@3.12.2(monaco-page-objects@3.14.1(selenium-webdriver@4.38.0)(typescript@5.8.3))(selenium-webdriver@4.38.0):
     dependencies:
-      monaco-page-objects: 3.14.1(selenium-webdriver@4.34.0)(typescript@5.8.3)
-      selenium-webdriver: 4.34.0
+      monaco-page-objects: 3.14.1(selenium-webdriver@4.38.0)(typescript@5.8.3)
+      selenium-webdriver: 4.38.0
 
   vscode-extension-tester@5.10.0(mocha@10.8.2)(typescript@5.8.3):
     dependencies:
-      '@types/selenium-webdriver': 4.1.28
+      '@types/selenium-webdriver': 4.35.3
       '@vscode/vsce': 2.32.0
       commander: 11.1.0
       compare-versions: 6.1.1
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       glob: 10.4.5
       got: 13.0.0
       hpagent: 1.2.0
       js-yaml: 4.1.0
       mocha: 10.8.2
-      monaco-page-objects: 3.14.1(selenium-webdriver@4.34.0)(typescript@5.8.3)
+      monaco-page-objects: 3.14.1(selenium-webdriver@4.38.0)(typescript@5.8.3)
       sanitize-filename: 1.6.3
-      selenium-webdriver: 4.34.0
+      selenium-webdriver: 4.38.0
       targz: 1.0.1
       typescript: 5.8.3
       unzipper: 0.10.14
-      vscode-extension-tester-locators: 3.12.2(monaco-page-objects@3.14.1(selenium-webdriver@4.34.0)(typescript@5.8.3))(selenium-webdriver@4.34.0)
+      vscode-extension-tester-locators: 3.12.2(monaco-page-objects@3.14.1(selenium-webdriver@4.38.0)(typescript@5.8.3))(selenium-webdriver@4.38.0)
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - bufferutil
       - react-native-b4a
       - supports-color
       - utf-8-validate
 
-  vscode-extension-tester@8.14.1(mocha@11.7.1)(typescript@5.8.3):
+  vscode-extension-tester@8.14.1(mocha@11.7.4)(typescript@5.8.3):
     dependencies:
-      '@redhat-developer/locators': 1.15.0(@redhat-developer/page-objects@1.15.0(selenium-webdriver@4.34.0)(typescript@5.8.3))(selenium-webdriver@4.34.0)
-      '@redhat-developer/page-objects': 1.15.0(selenium-webdriver@4.34.0)(typescript@5.8.3)
-      '@types/selenium-webdriver': 4.1.28
+      '@redhat-developer/locators': 1.17.0(@redhat-developer/page-objects@1.17.0(selenium-webdriver@4.38.0)(typescript@5.8.3))(selenium-webdriver@4.38.0)
+      '@redhat-developer/page-objects': 1.17.0(selenium-webdriver@4.38.0)(typescript@5.8.3)
+      '@types/selenium-webdriver': 4.35.3
       '@vscode/vsce': 3.4.2
       c8: 10.1.3
       commander: 13.1.0
       compare-versions: 6.1.1
       find-up: 7.0.0
-      fs-extra: 11.3.1
+      fs-extra: 11.3.2
       glob: 11.0.3
       got: 14.4.7
       hpagent: 1.2.0
       js-yaml: 4.1.0
-      mocha: 11.7.1
+      mocha: 11.7.4
       sanitize-filename: 1.6.3
-      selenium-webdriver: 4.34.0
+      selenium-webdriver: 4.38.0
       targz: 1.0.1
       typescript: 5.8.3
       unzipper: 0.12.3
     transitivePeerDependencies:
+      - bare-abort-controller
       - bare-buffer
       - bufferutil
       - monocart-coverage-reports
@@ -47692,19 +52850,19 @@ snapshots:
   vscode-languageclient@7.0.0:
     dependencies:
       minimatch: 3.1.2
-      semver: 7.7.2
+      semver: 7.7.3
       vscode-languageserver-protocol: 3.16.0
 
   vscode-languageclient@8.1.0:
     dependencies:
       minimatch: 5.1.6
-      semver: 7.7.2
+      semver: 7.7.3
       vscode-languageserver-protocol: 3.17.3
 
   vscode-languageclient@9.0.1:
     dependencies:
       minimatch: 5.1.6
-      semver: 7.7.2
+      semver: 7.7.3
       vscode-languageserver-protocol: 3.17.5
 
   vscode-languageserver-protocol@3.16.0:
@@ -47734,6 +52892,10 @@ snapshots:
 
   vscode-messenger-common@0.5.1: {}
 
+  vscode-messenger-webview@0.4.5:
+    dependencies:
+      vscode-messenger-common: 0.4.5
+
   vscode-messenger-webview@0.5.1:
     dependencies:
       vscode-messenger-common: 0.5.1
@@ -47757,7 +52919,7 @@ snapshots:
 
   vscode-uri@3.1.0: {}
 
-  vscode-ws-jsonrpc@3.4.0:
+  vscode-ws-jsonrpc@3.5.0:
     dependencies:
       vscode-jsonrpc: 8.2.1
 
@@ -47828,10 +52990,10 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
-  webpack-cli@4.10.0(webpack-dev-server@5.2.2)(webpack@5.101.0):
+  webpack-cli@4.10.0(webpack-dev-server@5.2.2)(webpack@5.102.1):
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0)(webpack@5.101.0)
+      '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0)(webpack@5.102.1)
       '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0)
       '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0)(webpack-dev-server@5.2.2)
       colorette: 2.0.20
@@ -47841,15 +53003,15 @@ snapshots:
       import-local: 3.2.0
       interpret: 2.2.0
       rechoir: 0.7.1
-      webpack: 5.101.0(webpack-cli@4.10.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
       webpack-merge: 5.10.0
     optionalDependencies:
-      webpack-dev-server: 5.2.2(webpack-cli@4.10.0)(webpack@5.101.0)
+      webpack-dev-server: 5.2.2(webpack-cli@4.10.0)(webpack@5.102.1)
 
-  webpack-cli@4.10.0(webpack@5.101.0):
+  webpack-cli@4.10.0(webpack@5.102.1):
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0)(webpack@5.101.0)
+      '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0)(webpack@5.102.1)
       '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0)
       '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0)
       colorette: 2.0.20
@@ -47859,74 +53021,100 @@ snapshots:
       import-local: 3.2.0
       interpret: 2.2.0
       rechoir: 0.7.1
-      webpack: 5.101.0(webpack-cli@4.10.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
       webpack-merge: 5.10.0
 
-  webpack-cli@5.1.4(webpack-dev-server@5.2.2)(webpack@5.101.0):
+  webpack-cli@5.1.4(webpack-dev-server@5.2.2)(webpack@5.102.1):
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4)(webpack@5.101.0)
-      '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4)(webpack@5.101.0)
-      '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4)(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4)(webpack@5.102.1)
+      '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4)(webpack@5.102.1)
+      '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4)(webpack-dev-server@5.2.2)(webpack@5.102.1)
       colorette: 2.0.20
       commander: 10.0.1
       cross-spawn: 7.0.6
-      envinfo: 7.14.0
+      envinfo: 7.20.0
       fastest-levenshtein: 1.0.16
       import-local: 3.2.0
       interpret: 3.1.1
       rechoir: 0.8.0
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(webpack-cli@5.1.4)
       webpack-merge: 5.10.0
     optionalDependencies:
-      webpack-dev-server: 5.2.2(webpack-cli@5.1.4)(webpack@5.101.0)
+      webpack-dev-server: 5.2.2(webpack-cli@5.1.4)(webpack@5.102.1)
+
+  webpack-cli@5.1.4(webpack@5.102.1):
+    dependencies:
+      '@discoveryjs/json-ext': 0.5.7
+      '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4)(webpack@5.102.1)
+      '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4)(webpack@5.102.1)
+      '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4)(webpack@5.102.1)
+      colorette: 2.0.20
+      commander: 10.0.1
+      cross-spawn: 7.0.6
+      envinfo: 7.20.0
+      fastest-levenshtein: 1.0.16
+      import-local: 3.2.0
+      interpret: 3.1.1
+      rechoir: 0.8.0
+      webpack: 5.102.1(webpack-cli@5.1.4)
+      webpack-merge: 5.10.0
 
-  webpack-cli@6.0.1(webpack-dev-server@5.2.2)(webpack@5.101.0):
+  webpack-cli@6.0.1(webpack-dev-server@5.2.2)(webpack@5.102.1):
     dependencies:
       '@discoveryjs/json-ext': 0.6.3
-      '@webpack-cli/configtest': 3.0.1(webpack-cli@6.0.1)(webpack@5.101.0)
-      '@webpack-cli/info': 3.0.1(webpack-cli@6.0.1)(webpack@5.101.0)
-      '@webpack-cli/serve': 3.0.1(webpack-cli@6.0.1)(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      '@webpack-cli/configtest': 3.0.1(webpack-cli@6.0.1)(webpack@5.102.1)
+      '@webpack-cli/info': 3.0.1(webpack-cli@6.0.1)(webpack@5.102.1)
+      '@webpack-cli/serve': 3.0.1(webpack-cli@6.0.1)(webpack-dev-server@5.2.2)(webpack@5.102.1)
       colorette: 2.0.20
       commander: 12.1.0
       cross-spawn: 7.0.6
-      envinfo: 7.14.0
+      envinfo: 7.20.0
       fastest-levenshtein: 1.0.16
       import-local: 3.2.0
       interpret: 3.1.1
       rechoir: 0.8.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
       webpack-merge: 6.0.1
     optionalDependencies:
-      webpack-dev-server: 5.2.2(webpack-cli@6.0.1)(webpack@5.101.0)
+      webpack-dev-server: 5.2.2(webpack-cli@6.0.1)(webpack@5.102.1)
 
-  webpack-cli@6.0.1(webpack@5.101.0):
+  webpack-cli@6.0.1(webpack@5.102.1):
     dependencies:
       '@discoveryjs/json-ext': 0.6.3
-      '@webpack-cli/configtest': 3.0.1(webpack-cli@6.0.1)(webpack@5.101.0)
-      '@webpack-cli/info': 3.0.1(webpack-cli@6.0.1)(webpack@5.101.0)
-      '@webpack-cli/serve': 3.0.1(webpack-cli@6.0.1)(webpack@5.101.0)
+      '@webpack-cli/configtest': 3.0.1(webpack-cli@6.0.1)(webpack@5.102.1)
+      '@webpack-cli/info': 3.0.1(webpack-cli@6.0.1)(webpack@5.102.1)
+      '@webpack-cli/serve': 3.0.1(webpack-cli@6.0.1)(webpack@5.102.1)
       colorette: 2.0.20
       commander: 12.1.0
       cross-spawn: 7.0.6
-      envinfo: 7.14.0
+      envinfo: 7.20.0
       fastest-levenshtein: 1.0.16
       import-local: 3.2.0
       interpret: 3.1.1
       rechoir: 0.8.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@6.0.1)
       webpack-merge: 6.0.1
 
-  webpack-dev-middleware@3.7.3(webpack@5.101.0):
+  webpack-dev-middleware@3.7.3(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
+    dependencies:
+      memory-fs: 0.4.1
+      mime: 2.6.0
+      mkdirp: 0.5.6
+      range-parser: 1.2.1
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+      webpack-log: 2.0.0
+
+  webpack-dev-middleware@3.7.3(webpack@5.102.1):
     dependencies:
       memory-fs: 0.4.1
       mime: 2.6.0
       mkdirp: 0.5.6
       range-parser: 1.2.1
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
       webpack-log: 2.0.0
 
-  webpack-dev-middleware@4.3.0(webpack@5.101.0):
+  webpack-dev-middleware@4.3.0(webpack@5.102.1):
     dependencies:
       colorette: 1.4.0
       mem: 8.1.1
@@ -47934,37 +53122,59 @@ snapshots:
       mime-types: 2.1.35
       range-parser: 1.2.1
       schema-utils: 3.3.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
-  webpack-dev-middleware@6.1.3(webpack@5.101.0):
+  webpack-dev-middleware@6.1.3(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
     dependencies:
       colorette: 2.0.20
       memfs: 3.5.3
       mime-types: 2.1.35
       range-parser: 1.2.1
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
 
-  webpack-dev-middleware@7.4.2(webpack@5.101.0):
+  webpack-dev-middleware@6.1.3(webpack@5.102.1):
     dependencies:
       colorette: 2.0.20
-      memfs: 4.36.0
+      memfs: 3.5.3
       mime-types: 2.1.35
+      range-parser: 1.2.1
+      schema-utils: 4.3.3
+    optionalDependencies:
+      webpack: 5.102.1(webpack-cli@5.1.4)
+
+  webpack-dev-middleware@7.4.5(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
+    dependencies:
+      colorette: 2.0.20
+      memfs: 4.50.0
+      mime-types: 3.0.1
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      schema-utils: 4.3.3
+    optionalDependencies:
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+    optional: true
+
+  webpack-dev-middleware@7.4.5(webpack@5.102.1):
+    dependencies:
+      colorette: 2.0.20
+      memfs: 4.50.0
+      mime-types: 3.0.1
       on-finished: 2.4.1
       range-parser: 1.2.1
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@5.1.4)
 
-  webpack-dev-server@5.2.2(webpack-cli@4.10.0)(webpack@5.101.0):
+  webpack-dev-server@5.2.2(webpack-cli@4.10.0)(webpack@5.102.1):
     dependencies:
       '@types/bonjour': 3.5.13
       '@types/connect-history-api-fallback': 1.5.4
-      '@types/express': 4.17.23
-      '@types/express-serve-static-core': 4.19.6
+      '@types/express': 4.17.25
+      '@types/express-serve-static-core': 4.19.7
       '@types/serve-index': 1.9.4
-      '@types/serve-static': 1.15.8
+      '@types/serve-static': 1.15.10
       '@types/sockjs': 0.3.36
       '@types/ws': 8.18.1
       ansi-html-community: 0.0.8
@@ -47975,21 +53185,21 @@ snapshots:
       connect-history-api-fallback: 2.0.0
       express: 4.21.2
       graceful-fs: 4.2.11
-      http-proxy-middleware: 2.0.9(@types/express@4.17.23)
+      http-proxy-middleware: 2.0.9(@types/express@4.17.25)
       ipaddr.js: 2.2.0
-      launch-editor: 2.11.0
+      launch-editor: 2.12.0
       open: 10.2.0
       p-retry: 6.2.1
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       selfsigned: 2.4.1
       serve-index: 1.9.1
       sockjs: 0.3.24
       spdy: 4.0.2
-      webpack-dev-middleware: 7.4.2(webpack@5.101.0)
+      webpack-dev-middleware: 7.4.5(webpack@5.102.1)
       ws: 8.18.3
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@4.10.0)
-      webpack-cli: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@4.10.0)
+      webpack-cli: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.102.1)
     transitivePeerDependencies:
       - bufferutil
       - debug
@@ -47997,14 +53207,14 @@ snapshots:
       - utf-8-validate
     optional: true
 
-  webpack-dev-server@5.2.2(webpack-cli@5.1.4)(webpack@5.101.0):
+  webpack-dev-server@5.2.2(webpack-cli@5.1.4)(webpack@5.102.1):
     dependencies:
       '@types/bonjour': 3.5.13
       '@types/connect-history-api-fallback': 1.5.4
-      '@types/express': 4.17.23
-      '@types/express-serve-static-core': 4.19.6
+      '@types/express': 4.17.25
+      '@types/express-serve-static-core': 4.19.7
       '@types/serve-index': 1.9.4
-      '@types/serve-static': 1.15.8
+      '@types/serve-static': 1.15.10
       '@types/sockjs': 0.3.36
       '@types/ws': 8.18.1
       ansi-html-community: 0.0.8
@@ -48015,35 +53225,35 @@ snapshots:
       connect-history-api-fallback: 2.0.0
       express: 4.21.2
       graceful-fs: 4.2.11
-      http-proxy-middleware: 2.0.9(@types/express@4.17.23)
+      http-proxy-middleware: 2.0.9(@types/express@4.17.25)
       ipaddr.js: 2.2.0
-      launch-editor: 2.11.0
+      launch-editor: 2.12.0
       open: 10.2.0
       p-retry: 6.2.1
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       selfsigned: 2.4.1
       serve-index: 1.9.1
       sockjs: 0.3.24
       spdy: 4.0.2
-      webpack-dev-middleware: 7.4.2(webpack@5.101.0)
+      webpack-dev-middleware: 7.4.5(webpack@5.102.1)
       ws: 8.18.3
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-cli: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      webpack: 5.102.1(webpack-cli@5.1.4)
+      webpack-cli: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.102.1)
     transitivePeerDependencies:
       - bufferutil
       - debug
       - supports-color
       - utf-8-validate
 
-  webpack-dev-server@5.2.2(webpack-cli@6.0.1)(webpack@5.101.0):
+  webpack-dev-server@5.2.2(webpack-cli@6.0.1)(webpack@5.102.1):
     dependencies:
       '@types/bonjour': 3.5.13
       '@types/connect-history-api-fallback': 1.5.4
-      '@types/express': 4.17.23
-      '@types/express-serve-static-core': 4.19.6
+      '@types/express': 4.17.25
+      '@types/express-serve-static-core': 4.19.7
       '@types/serve-index': 1.9.4
-      '@types/serve-static': 1.15.8
+      '@types/serve-static': 1.15.10
       '@types/sockjs': 0.3.36
       '@types/ws': 8.18.1
       ansi-html-community: 0.0.8
@@ -48054,35 +53264,35 @@ snapshots:
       connect-history-api-fallback: 2.0.0
       express: 4.21.2
       graceful-fs: 4.2.11
-      http-proxy-middleware: 2.0.9(@types/express@4.17.23)
+      http-proxy-middleware: 2.0.9(@types/express@4.17.25)
       ipaddr.js: 2.2.0
-      launch-editor: 2.11.0
+      launch-editor: 2.12.0
       open: 10.2.0
       p-retry: 6.2.1
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       selfsigned: 2.4.1
       serve-index: 1.9.1
       sockjs: 0.3.24
       spdy: 4.0.2
-      webpack-dev-middleware: 7.4.2(webpack@5.101.0)
+      webpack-dev-middleware: 7.4.5(webpack@5.102.1)
       ws: 8.18.3
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-cli: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
+      webpack-cli: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.102.1)
     transitivePeerDependencies:
       - bufferutil
       - debug
       - supports-color
       - utf-8-validate
 
-  webpack-dev-server@5.2.2(webpack@5.101.0):
+  webpack-dev-server@5.2.2(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
     dependencies:
       '@types/bonjour': 3.5.13
       '@types/connect-history-api-fallback': 1.5.4
-      '@types/express': 4.17.23
-      '@types/express-serve-static-core': 4.19.6
+      '@types/express': 4.17.25
+      '@types/express-serve-static-core': 4.19.7
       '@types/serve-index': 1.9.4
-      '@types/serve-static': 1.15.8
+      '@types/serve-static': 1.15.10
       '@types/sockjs': 0.3.36
       '@types/ws': 8.18.1
       ansi-html-community: 0.0.8
@@ -48093,29 +53303,72 @@ snapshots:
       connect-history-api-fallback: 2.0.0
       express: 4.21.2
       graceful-fs: 4.2.11
-      http-proxy-middleware: 2.0.9(@types/express@4.17.23)
+      http-proxy-middleware: 2.0.9(@types/express@4.17.25)
       ipaddr.js: 2.2.0
-      launch-editor: 2.11.0
+      launch-editor: 2.12.0
       open: 10.2.0
       p-retry: 6.2.1
-      schema-utils: 4.3.2
+      schema-utils: 4.3.3
       selfsigned: 2.4.1
       serve-index: 1.9.1
       sockjs: 0.3.24
       spdy: 4.0.2
-      webpack-dev-middleware: 7.4.2(webpack@5.101.0)
+      webpack-dev-middleware: 7.4.5(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
       ws: 8.18.3
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
     transitivePeerDependencies:
       - bufferutil
       - debug
       - supports-color
       - utf-8-validate
+    optional: true
 
-  webpack-filter-warnings-plugin@1.2.1(webpack@5.101.0):
+  webpack-dev-server@5.2.2(webpack@5.102.1):
     dependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      '@types/bonjour': 3.5.13
+      '@types/connect-history-api-fallback': 1.5.4
+      '@types/express': 4.17.25
+      '@types/express-serve-static-core': 4.19.7
+      '@types/serve-index': 1.9.4
+      '@types/serve-static': 1.15.10
+      '@types/sockjs': 0.3.36
+      '@types/ws': 8.18.1
+      ansi-html-community: 0.0.8
+      bonjour-service: 1.3.0
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      compression: 1.8.1
+      connect-history-api-fallback: 2.0.0
+      express: 4.21.2
+      graceful-fs: 4.2.11
+      http-proxy-middleware: 2.0.9(@types/express@4.17.25)
+      ipaddr.js: 2.2.0
+      launch-editor: 2.12.0
+      open: 10.2.0
+      p-retry: 6.2.1
+      schema-utils: 4.3.3
+      selfsigned: 2.4.1
+      serve-index: 1.9.1
+      sockjs: 0.3.24
+      spdy: 4.0.2
+      webpack-dev-middleware: 7.4.5(webpack@5.102.1)
+      ws: 8.18.3
+    optionalDependencies:
+      webpack: 5.102.1(webpack-cli@4.10.0)
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - utf-8-validate
+
+  webpack-filter-warnings-plugin@1.2.1(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))):
+    dependencies:
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))
+
+  webpack-filter-warnings-plugin@1.2.1(webpack@5.102.1):
+    dependencies:
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
   webpack-hot-middleware@2.26.1:
     dependencies:
@@ -48128,18 +53381,18 @@ snapshots:
       ansi-colors: 3.2.4
       uuid: 3.4.0
 
-  webpack-manifest-plugin@1.3.2(webpack@5.101.0):
+  webpack-manifest-plugin@1.3.2(webpack@5.102.1):
     dependencies:
       fs-extra: 0.30.0
       lodash: 4.17.21
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1)
 
-  webpack-merge-and-include-globally@2.3.4(webpack@5.101.0):
+  webpack-merge-and-include-globally@2.3.4(webpack@5.102.1):
     dependencies:
       es6-promisify: 6.1.1
       glob: 7.2.3
       rev-hash: 3.0.0
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.102.1(webpack-cli@6.0.1)
 
   webpack-merge@5.10.0:
     dependencies:
@@ -48174,7 +53427,39 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
-  webpack@5.101.0(@swc/core@1.13.3(@swc/helpers@0.5.17)):
+  webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)):
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.15.0
+      acorn-import-phases: 1.0.4(acorn@8.15.0)
+      browserslist: 4.27.0
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.18.3
+      es-module-lexer: 1.7.0
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.1
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17)))
+      watchpack: 2.4.4
+      webpack-sources: 3.3.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+
+  webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@5.1.4):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.8
@@ -48184,7 +53469,7 @@ snapshots:
       '@webassemblyjs/wasm-parser': 1.14.1
       acorn: 8.15.0
       acorn-import-phases: 1.0.4(acorn@8.15.0)
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       chrome-trace-event: 1.0.4
       enhanced-resolve: 5.18.3
       es-module-lexer: 1.7.0
@@ -48193,20 +53478,22 @@ snapshots:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
       json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.0
+      loader-runner: 4.3.1
       mime-types: 2.1.35
       neo-async: 2.6.2
-      schema-utils: 4.3.2
-      tapable: 2.2.2
-      terser-webpack-plugin: 5.3.14(@swc/core@1.13.3(@swc/helpers@0.5.17))(webpack@5.101.0)
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       watchpack: 2.4.4
       webpack-sources: 3.3.3
+    optionalDependencies:
+      webpack-cli: 5.1.4(webpack@5.102.1)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
       - uglify-js
 
-  webpack@5.101.0(webpack-cli@4.10.0):
+  webpack@5.102.1(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack-cli@6.0.1):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.8
@@ -48216,7 +53503,7 @@ snapshots:
       '@webassemblyjs/wasm-parser': 1.14.1
       acorn: 8.15.0
       acorn-import-phases: 1.0.4(acorn@8.15.0)
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       chrome-trace-event: 1.0.4
       enhanced-resolve: 5.18.3
       es-module-lexer: 1.7.0
@@ -48225,22 +53512,22 @@ snapshots:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
       json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.0
+      loader-runner: 4.3.1
       mime-types: 2.1.35
       neo-async: 2.6.2
-      schema-utils: 4.3.2
-      tapable: 2.2.2
-      terser-webpack-plugin: 5.3.14(webpack@5.101.0)
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       watchpack: 2.4.4
       webpack-sources: 3.3.3
     optionalDependencies:
-      webpack-cli: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      webpack-cli: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.102.1)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
       - uglify-js
 
-  webpack@5.101.0(webpack-cli@5.1.4):
+  webpack@5.102.1(webpack-cli@4.10.0):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.8
@@ -48250,7 +53537,7 @@ snapshots:
       '@webassemblyjs/wasm-parser': 1.14.1
       acorn: 8.15.0
       acorn-import-phases: 1.0.4(acorn@8.15.0)
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       chrome-trace-event: 1.0.4
       enhanced-resolve: 5.18.3
       es-module-lexer: 1.7.0
@@ -48259,22 +53546,22 @@ snapshots:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
       json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.0
+      loader-runner: 4.3.1
       mime-types: 2.1.35
       neo-async: 2.6.2
-      schema-utils: 4.3.2
-      tapable: 2.2.2
-      terser-webpack-plugin: 5.3.14(webpack@5.101.0)
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       watchpack: 2.4.4
       webpack-sources: 3.3.3
     optionalDependencies:
-      webpack-cli: 5.1.4(webpack-dev-server@5.2.2)(webpack@5.101.0)
+      webpack-cli: 4.10.0(webpack-dev-server@5.2.2)(webpack@5.102.1)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
       - uglify-js
 
-  webpack@5.101.0(webpack-cli@6.0.1):
+  webpack@5.102.1(webpack-cli@5.1.4):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.8
@@ -48284,7 +53571,7 @@ snapshots:
       '@webassemblyjs/wasm-parser': 1.14.1
       acorn: 8.15.0
       acorn-import-phases: 1.0.4(acorn@8.15.0)
-      browserslist: 4.25.1
+      browserslist: 4.27.0
       chrome-trace-event: 1.0.4
       enhanced-resolve: 5.18.3
       es-module-lexer: 1.7.0
@@ -48293,16 +53580,50 @@ snapshots:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
       json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.0
+      loader-runner: 4.3.1
       mime-types: 2.1.35
       neo-async: 2.6.2
-      schema-utils: 4.3.2
-      tapable: 2.2.2
-      terser-webpack-plugin: 5.3.14(webpack@5.101.0)
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       watchpack: 2.4.4
       webpack-sources: 3.3.3
     optionalDependencies:
-      webpack-cli: 6.0.1(webpack@5.101.0)
+      webpack-cli: 5.1.4(webpack@5.102.1)
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+
+  webpack@5.102.1(webpack-cli@6.0.1):
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.15.0
+      acorn-import-phases: 1.0.4(acorn@8.15.0)
+      browserslist: 4.27.0
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.18.3
+      es-module-lexer: 1.7.0
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.1
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      terser-webpack-plugin: 5.3.14(@swc/core@1.14.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      watchpack: 2.4.4
+      webpack-sources: 3.3.3
+    optionalDependencies:
+      webpack-cli: 6.0.1(webpack@5.102.1)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -48381,7 +53702,7 @@ snapshots:
       is-async-function: 2.1.1
       is-date-object: 1.1.0
       is-finalizationregistry: 1.1.1
-      is-generator-function: 1.1.0
+      is-generator-function: 1.1.2
       is-regex: 1.2.1
       is-weakref: 1.1.1
       isarray: 2.0.5
@@ -48445,7 +53766,7 @@ snapshots:
   winston@3.11.0:
     dependencies:
       '@colors/colors': 1.6.0
-      '@dabh/diagnostics': 2.0.3
+      '@dabh/diagnostics': 2.0.8
       async: 3.2.6
       is-stream: 2.0.1
       logform: 2.7.0
@@ -48470,7 +53791,7 @@ snapshots:
 
   workerpool@6.5.1: {}
 
-  workerpool@9.3.3: {}
+  workerpool@9.3.4: {}
 
   wrap-ansi@2.1.0:
     dependencies:
@@ -48496,15 +53817,15 @@ snapshots:
 
   wrap-ansi@8.1.0:
     dependencies:
-      ansi-styles: 6.2.1
+      ansi-styles: 6.2.3
       string-width: 5.1.2
-      strip-ansi: 7.1.0
+      strip-ansi: 7.1.2
 
-  wrap-ansi@9.0.0:
+  wrap-ansi@9.0.2:
     dependencies:
-      ansi-styles: 6.2.1
+      ansi-styles: 6.2.3
       string-width: 7.2.0
-      strip-ansi: 7.1.0
+      strip-ansi: 7.1.2
 
   wrappy@1.0.2: {}
 
@@ -48563,7 +53884,7 @@ snapshots:
 
   xml-js@1.6.11:
     dependencies:
-      sax: 1.4.1
+      sax: 1.4.2
 
   xml-name-validator@2.0.1: {}
 
@@ -48573,17 +53894,17 @@ snapshots:
 
   xml2js@0.4.23:
     dependencies:
-      sax: 1.4.1
+      sax: 1.4.2
       xmlbuilder: 11.0.1
 
   xml2js@0.5.0:
     dependencies:
-      sax: 1.4.1
+      sax: 1.4.2
       xmlbuilder: 11.0.1
 
   xml2js@0.6.2:
     dependencies:
-      sax: 1.4.1
+      sax: 1.4.2
       xmlbuilder: 11.0.1
 
   xml@1.0.1: {}
@@ -48722,10 +54043,21 @@ snapshots:
     dependencies:
       buffer-crc32: 0.2.13
 
+  yn@3.1.1: {}
+
   yocto-queue@0.1.0: {}
 
   yocto-queue@1.2.1: {}
 
+  yoctocolors@2.1.2: {}
+
+  yup@1.4.0:
+    dependencies:
+      property-expr: 2.0.6
+      tiny-case: 1.0.3
+      toposort: 2.0.2
+      type-fest: 2.19.0
+
   yup@1.6.1:
     dependencies:
       property-expr: 2.0.6
@@ -48743,17 +54075,17 @@ snapshots:
 
   zod@4.1.11: {}
 
-  zustand@5.0.7(@types/react@18.2.0)(react@18.2.0)(use-sync-external-store@1.5.0(react@18.2.0)):
+  zustand@5.0.8(@types/react@18.2.0)(react@18.2.0)(use-sync-external-store@1.6.0(react@18.2.0)):
     optionalDependencies:
       '@types/react': 18.2.0
       react: 18.2.0
-      use-sync-external-store: 1.5.0(react@18.2.0)
+      use-sync-external-store: 1.6.0(react@18.2.0)
 
-  zustand@5.0.7(@types/react@18.2.0)(react@19.1.0)(use-sync-external-store@1.5.0(react@19.1.0)):
+  zustand@5.0.8(@types/react@18.2.0)(react@19.1.0)(use-sync-external-store@1.6.0(react@19.1.0)):
     optionalDependencies:
       '@types/react': 18.2.0
       react: 19.1.0
-      use-sync-external-store: 1.5.0(react@19.1.0)
+      use-sync-external-store: 1.6.0(react@19.1.0)
 
   zwitch@1.0.5: {}
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 192a8c6e325..da58d9b975c 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -6,3 +6,4 @@ packages:
   - "workspaces/bi/*"
   - 'workspaces/common-libs/*'
   - 'workspaces/mi/*'
+  - 'workspaces/mcp-inspector/*'
diff --git a/rush.json b/rush.json
index e66b7a74a49..52bbf9ff1b5 100644
--- a/rush.json
+++ b/rush.json
@@ -245,13 +245,14 @@
     * The list of shell commands to run after the Rush build command finishes
     */
     "postRushBuild": [
-      "cd workspaces/ballerina/ballerina-extension && pnpm run copyVSIXToRoot", 
-      "cd workspaces/wso2-platform/wso2-platform-extension && pnpm run copyVSIXToRoot", 
-      "cd workspaces/choreo/choreo-extension && pnpm run copyVSIXToRoot", 
+      "cd workspaces/ballerina/ballerina-extension && pnpm run copyVSIXToRoot",
+      "cd workspaces/wso2-platform/wso2-platform-extension && pnpm run copyVSIXToRoot",
+      "cd workspaces/choreo/choreo-extension && pnpm run copyVSIXToRoot",
       "cd workspaces/mi/mi-extension && pnpm run copyVSIXToRoot",
       "cd workspaces/bi/bi-extension && pnpm run copyVSIXToRoot",
       "cd workspaces/apk/apk-extension && pnpm run copyVSIXToRoot",
-      // "cd workspaces/api-designer/api-designer-extension && pnpm run copyVSIXToRoot"
+      "cd workspaces/api-designer/api-designer-extension && pnpm run copyVSIXToRoot",
+      "cd workspaces/mcp-inspector/mcp-inspector-extension && pnpm run copyVSIXToRoot"
     ]
   },
   /**
@@ -485,6 +486,11 @@
       "projectFolder": "workspaces/ballerina/ballerina-visualizer",
       "versionPolicyName": "ballerina-extension"
     },
+    {
+      "packageName": "@wso2/trace-visualizer",
+      "projectFolder": "workspaces/ballerina/trace-visualizer",
+      "versionPolicyName": "ballerina-extension"
+    },
     {
       "packageName": "@wso2/overview-view",
       "projectFolder": "workspaces/ballerina/overview-view",
@@ -590,18 +596,27 @@
       "packageName": "@wso2/type-editor",
       "projectFolder": "workspaces/ballerina/type-editor",
       "versionPolicyName": "ballerina-extension"
+    },
+    {
+      "packageName": "@wso2/api-designer-core",
+      "projectFolder": "workspaces/api-designer/api-designer-core"
+    },
+    {
+      "packageName": "@wso2/api-designer-visualizer",
+      "projectFolder": "workspaces/api-designer/api-designer-visualizer"
+    },
+    {
+      "packageName": "@wso2/api-designer-rpc-client",
+      "projectFolder": "workspaces/api-designer/api-designer-rpc-client"
+    },
+    {
+      "packageName": "api-designer",
+      "projectFolder": "workspaces/api-designer/api-designer-extension",
+      "versionPolicyName": "api-designer-extension"
+    },
+    {
+      "packageName": "mcp-server-inspector",
+      "projectFolder": "workspaces/mcp-inspector/mcp-inspector-extension"
     }
-    // {
-    //   "packageName": "@wso2/api-designer-core",
-    //   "projectFolder": "workspaces/api-designer/api-designer-core"
-    // },
-    // {
-    //   "packageName": "@wso2/api-designer-visualizer",
-    //   "projectFolder": "workspaces/api-designer/api-designer-visualizer"
-    // },
-    // {
-    //   "packageName": "@wso2/api-designer-rpc-client",
-    //   "projectFolder": "workspaces/api-designer/api-designer-rpc-client"
-    // }
   ]
 }
diff --git a/workspaces/api-designer/api-designer-extension/src/project-explorer/project-explorer-provider.ts b/workspaces/api-designer/api-designer-extension/src/project-explorer/project-explorer-provider.ts
index b2d5941f161..cb710ccb1cc 100644
--- a/workspaces/api-designer/api-designer-extension/src/project-explorer/project-explorer-provider.ts
+++ b/workspaces/api-designer/api-designer-extension/src/project-explorer/project-explorer-provider.ts
@@ -37,8 +37,8 @@ export class ProjectExplorerEntry extends vscode.TreeItem {
 			this.iconPath = new vscode.ThemeIcon(icon);
 		} else if (icon) {
 			this.iconPath = {
-				light: path.join(extensionContext.extensionPath, 'assets', `light-${icon}.svg`),
-				dark: path.join(extensionContext.extensionPath, 'assets', `dark-${icon}.svg`)
+				light: vscode.Uri.file(path.join(extensionContext.extensionPath, 'assets', `light-${icon}.svg`)),
+				dark: vscode.Uri.file(path.join(extensionContext.extensionPath, 'assets', `dark-${icon}.svg`))
 			};
 		}
 	}
diff --git a/workspaces/api-designer/api-designer-visualizer/src/components/OpenAPIComponents/OpenAPI/OpenAPI.tsx b/workspaces/api-designer/api-designer-visualizer/src/components/OpenAPIComponents/OpenAPI/OpenAPI.tsx
index 0ba4b62c835..e56602b51fd 100644
--- a/workspaces/api-designer/api-designer-visualizer/src/components/OpenAPIComponents/OpenAPI/OpenAPI.tsx
+++ b/workspaces/api-designer/api-designer-visualizer/src/components/OpenAPIComponents/OpenAPI/OpenAPI.tsx
@@ -98,7 +98,7 @@ export function OpenAPI(props: OverviewProps) {
             {componetName === PathID.OVERVIEW && (
                 <Overview openAPIDefinition={openAPI} onOpenApiDefinitionChange={handleOpenAPIChange} />
             )}
-            {componetName === PathID.PARAMETERS && (
+            {componetName === PathID.PATHS && (
                 <Paths 
                     paths={openAPI.paths}
                     onPathsChange={(paths) => handleOpenAPIChange({ ...openAPI, paths })}
diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/bi.ts b/workspaces/ballerina/ballerina-core/src/interfaces/bi.ts
index cd33eece8cc..2321edd939f 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/bi.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/bi.ts
@@ -97,6 +97,7 @@ export type ParentMetadata = {
     accessor?: string;
     parameters?: string[];
     return?: string;
+    isServiceFunction?: boolean;
 };
 
 export type ToolData = {
@@ -112,8 +113,8 @@ export type AgentData = {
 };
 
 export type MemoryData = {
-    name: string;
     type: string;
+    size: string
 };
 
 export type Imports = {
@@ -185,6 +186,7 @@ export type CodeData = {
     kind?: string;
     originalName?: string;
     dependentProperty?: string[];
+    data?: { [key: string]: CodeData | string };
 };
 
 export type Branch = {
@@ -321,6 +323,7 @@ export type NodePropertyKey =
     | "expression"
     | "functionName"
     | "functionNameDescription"
+    | "instructions"
     | "isIsolated"
     | "maxIter"
     | "memory"
@@ -328,15 +331,20 @@ export type NodePropertyKey =
     | "model"
     | "modelProvider"
     | "msg"
+    | "name"
     | "parameters"
     | "path"
     | "patterns"
+    | "permittedTools"
     | "prompt"
     | "query"
+    | "role"
     | "scope"
+    | "serverUrl"
     | "sessionId"
     | "size"
     | "statement"
+    | "store"
     | "systemPrompt"
     | "targetType"
     | "tools"
@@ -389,20 +397,23 @@ export type NodeKind =
     | "LV_EXPRESSION"
     | "MATCH"
     | "METHOD_CALL"
+    | "MEMORY"
+    | "MEMORY_STORE"
     | "MODEL_PROVIDER"
     | "MODEL_PROVIDERS"
     | "VARIABLE"
     | "VECTOR_STORE"
     | "VECTOR_STORES"
-    | "VECTOR_KNOWLEDGE_BASE"
-    | "VECTOR_KNOWLEDGE_BASE_CALL"
-    | "VECTOR_KNOWLEDGE_BASES"
+    | "KNOWLEDGE_BASE"
+    | "KNOWLEDGE_BASE_CALL"
+    | "KNOWLEDGE_BASES"
     | "EMBEDDING_PROVIDER"
     | "EMBEDDING_PROVIDERS"
     | "DATA_LOADER"
     | "DATA_LOADERS"
     | "CHUNKER"
     | "CHUNKERS"
+    | "MCP_TOOL_KIT"
     | "NEW_CONNECTION"
     | "NEW_DATA"
     | "NP_FUNCTION"
diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/component-diagram.ts b/workspaces/ballerina/ballerina-core/src/interfaces/component-diagram.ts
index f29120c45bd..fdf6258c392 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/component-diagram.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/component-diagram.ts
@@ -46,6 +46,7 @@ export type CDConnection = {
     enableFlowModel: boolean;
     sortText: string;
     icon?: string;
+    kind?: string;
 };
 
 export type CDListener = {
diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/data-mapper.ts b/workspaces/ballerina/ballerina-core/src/interfaces/data-mapper.ts
index bc6569f90a7..f8c7aca78c5 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/data-mapper.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/data-mapper.ts
@@ -111,12 +111,14 @@ export interface Mapping {
     isQueryExpression?: boolean;
     isFunctionCall?: boolean;
     functionRange?: LineRange;
+    functionContent?: string;
+    elementAccessIndex?: string[];
 }
 
 export interface ExpandedDMModel {
     inputs: IOType[];
     output: IOType;
-    subMappings?: IOType[];
+    subMappings?: IOType[] | Mapping[];
     mappings: Mapping[];
     source: string;
     rootViewId: string;
@@ -128,7 +130,7 @@ export interface ExpandedDMModel {
 export interface DMModel {
     inputs: IORoot[];
     output: IORoot;
-    subMappings?: IORoot[];
+    subMappings?: IORoot[] | Mapping[];
     refs: Record<string, RecordType | EnumType>;
     mappings: Mapping[];
     view: string;
@@ -165,6 +167,7 @@ export interface IOTypeField {
     displayName?: string;
     member?: IOTypeField;
     members?: IOTypeField[];
+    fields?: IOTypeField[];
     defaultValue?: unknown;
     optional?: boolean;
     ref?: string;
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 38500687843..79eec4e0eeb 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/extended-lang-client.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/extended-lang-client.ts
@@ -23,14 +23,13 @@ import { DocumentIdentifier, LinePosition, LineRange, NOT_SUPPORTED_TYPE, Positi
 import { BallerinaConnectorInfo, BallerinaExampleCategory, BallerinaModuleResponse, BallerinaModulesRequest, BallerinaTrigger, BallerinaTriggerInfo, BallerinaConnector, ExecutorPosition, ExpressionRange, JsonToRecordMapperDiagnostic, MainTriggerModifyRequest, NoteBookCellOutputValue, NotebookCellMetaInfo, OASpec, PackageSummary, PartialSTModification, ResolvedTypeForExpression, ResolvedTypeForSymbol, STModification, SequenceModel, SequenceModelDiagnostic, ServiceTriggerModifyRequest, SymbolDocumentation, XMLToRecordConverterDiagnostic, TypeField, ComponentInfo } from "./ballerina";
 import { ModulePart, STNode } from "@wso2/syntax-tree";
 import { CodeActionParams, DefinitionParams, DocumentSymbolParams, ExecuteCommandParams, InitializeParams, InitializeResult, LocationLink, RenameParams } from "vscode-languageserver-protocol";
-import { Category, Flow, FlowNode, CodeData, ConfigVariable, FunctionNode, Property, PropertyTypeMemberInfo, DIRECTORY_MAP, Imports } from "./bi";
+import { Category, Flow, FlowNode, CodeData, ConfigVariable, FunctionNode, Property, PropertyTypeMemberInfo, DIRECTORY_MAP, Imports, NodeKind } from "./bi";
 import { ConnectorRequest, ConnectorResponse } from "../rpc-types/connector-wizard/interfaces";
 import { SqFlow } from "../rpc-types/sequence-diagram/interfaces";
-import { FieldType, FunctionModel, ListenerModel, ServiceClassModel, ServiceModel } from "./service";
+import { FieldType, FunctionModel, ListenerModel, ServiceClassModel, ServiceInitModel, ServiceModel } from "./service";
 import { CDModel } from "./component-diagram";
 import { DMModel, ExpandedDMModel, IntermediateClause, Mapping, VisualizableField, FnMetadata, ResultClauseType, IOType } from "./data-mapper";
 import { DataMapperMetadata, SCOPE } from "../state-machine-types";
-import { Attachment, DataMappingRecord, ImportInfo } from "../rpc-types/ai-panel/interfaces";
 import { ToolParameters } from "../rpc-types/ai-agent/interfaces";
 
 export interface DidOpenParams {
@@ -306,6 +305,7 @@ export interface DataMapperBase {
     varName?: string;
     targetField?: string;
     position?: LinePosition;
+    customFunctionsFilePath?: string;
 }
 
 export interface DataMapperSourceRequest extends DataMapperBase {
@@ -318,13 +318,7 @@ export interface AllDataMapperSourceRequest extends DataMapperBase {
 }
 
 export interface ExtendedDataMapperMetadata extends DataMapperMetadata {
-    mappingsModel: ExpandedDMModel;
-}
-
-export interface MetadataWithAttachments {
-    metadata: ExtendedDataMapperMetadata;
-    attachments?: Attachment[];
-    useTemporaryFile?: boolean;
+    mappingsModel: DMModel;
 }
 
 export interface VisualizableFieldsRequest {
@@ -344,20 +338,6 @@ export interface DataMapperSourceResponse {
     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;
@@ -376,6 +356,7 @@ export interface ExpandedDMModelResponse {
     success: boolean;
     error?: string;
 }
+
 export interface ProcessTypeReferenceRequest {
     ref: string;
     fieldId: string;
@@ -924,11 +905,12 @@ export type SearchKind =
     | "MODEL_PROVIDER"
     | "VECTOR_STORE"
     | "EMBEDDING_PROVIDER"
-    | "VECTOR_KNOWLEDGE_BASE"
+    | "KNOWLEDGE_BASE"
     | "DATA_LOADER"
     | "CHUNKER"
     | "AGENT"
-    | "MEMORY_MANAGER"
+    | "MEMORY"
+    | "MEMORY_STORE"
     | "AGENT_TOOL"
     | "CLASS_INIT";
 
@@ -943,6 +925,22 @@ export type BISearchResponse = {
     categories: Category[];
 }
 
+export type BISearchNodesRequest = {
+    filePath: string;
+    position?: LinePosition;
+    queryMap?: SearchNodesQueryParams;
+}
+
+export type BISearchNodesResponse = {
+    output: FlowNode[];
+    error: string;
+}
+
+export type SearchNodesQueryParams = {
+    kind?: NodeKind;
+    exactMatch?: string;
+}
+
 export type BIGetEnclosedFunctionRequest = {
     filePath: string;
     position: LinePosition;
@@ -1105,6 +1103,10 @@ export interface ExpressionCompletionItem {
     insertText: string;
     insertTextFormat: number;
     additionalTextEdits?: TextEdit[];
+    labelDetails?: {
+        description?: string;
+        detail: string;
+    };
 }
 
 export type ExpressionCompletionsResponse = ExpressionCompletionItem[];
@@ -1154,6 +1156,7 @@ export interface VisibleTypeItem {
         description: string;
         detail: string;
     }
+    detail?: string;
 }
 
 export type VisibleTypesResponse = VisibleTypeItem[];
@@ -1175,6 +1178,18 @@ export interface Reference {
     range: Range;
 }
 
+export interface FormDiagnosticsRequest {
+    filePath: string;
+    flowNode: FlowNode | FunctionNode;
+    isConnector?: boolean;
+    isFunctionNodeUpdate?: boolean;
+}
+
+export interface FormDiagnosticsResponse {
+    flowNode?: FlowNode | FunctionNode;
+    diagnostics?: Diagnostic[];
+}
+
 export interface ExpressionDiagnosticsRequest {
     filePath: string;
     context: ExpressionEditorContext;
@@ -1317,6 +1332,16 @@ export interface AddFieldRequest {
     };
 }
 
+export interface ExpressionTokensRequest {
+    expression: string;
+    filePath: string;
+    position?: LinePosition;
+}
+
+export interface ExpressionTokensResponse {
+    data: number[];
+}
+
 export interface SourceEditResponse {
     textEdits?: {
         [key: string]: TextEdit[];
@@ -1368,6 +1393,17 @@ export interface ServiceClassModelResponse {
     stacktrace?: string;
 }
 
+export interface ServiceModelInitResponse {
+    serviceInitModel?: ServiceInitModel;
+    errorMsg?: string;
+    stacktrace?: string;
+}
+
+export interface ServiceInitSourceRequest {
+    filePath: string;
+    serviceInitModel: ServiceInitModel;
+}
+
 // <-------- Type Related ------->
 
 export interface Type {
@@ -1396,6 +1432,8 @@ export interface TypeFunctionModel {
     returnType?: Type | string;
     refs: string[];
     imports?: Imports;
+    isGraphqlId?: boolean;
+    properties?: { [key: string]: any };
 }
 
 export interface TypeMetadata {
@@ -1430,6 +1468,7 @@ export interface Member {
     optional?: boolean;
     imports?: Imports;
     readonly?: boolean;
+    isGraphqlId?: boolean;
 }
 
 export interface GetGraphqlTypeRequest {
@@ -1618,6 +1657,7 @@ export interface FunctionSourceCodeRequest {
         lineRange: LineRange; // For the entire service
     };
     service?: ServiceModel;
+    artifactType?: DIRECTORY_MAP;
 }
 export interface ResourceSourceCodeResponse {
     textEdits: {
@@ -1637,11 +1677,7 @@ export interface ResponseCode {
     statusCode: string;
     hasBody?: boolean;
 }
-export interface ResourceReturnTypesResponse {
-    completions: ResponseCode[];
-}
-
-
+export type ResourceReturnTypesResponse = VisibleTypeItem[];
 // <-------- Service Designer Related ------->
 
 export interface FunctionFromSourceRequest {
@@ -1730,8 +1766,7 @@ export interface AIToolResponse {
 
 export interface McpToolsRequest {
     serviceUrl?: string;
-    configs?: Record<string, string>;
-    filePath?: string;
+    accessToken?: string;
 }
 
 export interface McpToolsResponse {
@@ -1739,7 +1774,7 @@ export interface McpToolsResponse {
         name: string;
         description?: string;
     }>;
-    error?: string;
+    errorMsg?: string;
 }
 
 export interface AIGentToolsRequest {
@@ -1899,6 +1934,7 @@ export interface BIInterface extends BaseLangClientInterface {
     getComponentsFromContent: (params: ComponentsFromContent) => Promise<BallerinaProjectComponents>;
     getSignatureHelp: (params: SignatureHelpRequest) => Promise<SignatureHelpResponse>;
     getVisibleTypes: (params: VisibleTypesRequest) => Promise<VisibleTypesResponse>;
+    getFormDiagnostics: (params: FormDiagnosticsRequest) => Promise<FormDiagnosticsResponse>;
     getExpressionDiagnostics: (params: ExpressionDiagnosticsRequest) => Promise<ExpressionDiagnosticsResponse>;
     getOpenApiGeneratedModules: (params: OpenAPIGeneratedModulesRequest) => Promise<OpenAPIGeneratedModulesResponse>
 
@@ -1914,7 +1950,9 @@ export interface BIInterface extends BaseLangClientInterface {
     getHttpResourceModel: (params: HttpResourceModelRequest) => Promise<HttpResourceModelResponse>;
     addResourceSourceCode: (params: FunctionSourceCodeRequest) => Promise<ResourceSourceCodeResponse>;
     addFunctionSourceCode: (params: FunctionSourceCodeRequest) => Promise<ResourceSourceCodeResponse>;
-    getResourceReturnTypes: (params: ResourceReturnTypesRequest) => Promise<ResourceReturnTypesResponse>;
+    getResourceReturnTypes: (params: ResourceReturnTypesRequest) => Promise<VisibleTypesResponse>;
+    getServiceInitModel: (params: ServiceModelRequest) => Promise<ServiceModelInitResponse>;
+    createServiceAndListener: (params: ServiceInitSourceRequest) => Promise<SourceEditResponse>;
 
     // Function APIs
     getFunctionNode: (params: FunctionNodeRequest) => Promise<FunctionNodeResponse>;
diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/service.ts b/workspaces/ballerina/ballerina-core/src/interfaces/service.ts
index 25dcfab394e..f631f2f1411 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/service.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/service.ts
@@ -104,6 +104,32 @@ export interface StatusCodeResponse extends PropertyModel {
     name: PropertyModel;
     type: PropertyModel;
     headers: PropertyModel;
+    mediaType: PropertyModel;
+}
+
+export interface HttpPayloadContext {
+    protocol: "HTTP";
+    serviceName: string;
+    serviceBasePath: string;
+    resourceBasePath?: string;
+    resourceMethod?: string;
+    resourceDocumentation?: string;
+    paramDetails?: ParamDetails[];
+}
+
+export interface MessageQueuePayloadContext {
+    protocol: "MESSAGE_BROKER";
+    serviceName: string;
+    queueOrTopic?: string;
+    messageDocumentation?: string;
+}
+
+export type PayloadContext = HttpPayloadContext | MessageQueuePayloadContext;
+
+export interface ParamDetails {
+    name: string;
+    type: string;
+    defaulValue?: string;
 }
 
 interface MetaData {
@@ -144,16 +170,18 @@ export interface PropertyModel {
     properties?: ConfigProperties;
     addNewButton?: boolean;
     typeMembers?: PropertyTypeMemberInfo[];
-    httpParamType?: "QUERY" | "Header" | "PAYLOAD";
+    httpParamType?: "QUERY" | "HEADER" | "PAYLOAD";
     diagnostics?: DiagnosticMessage[];
     imports?: Imports;
     hidden?: boolean;
+    isGraphqlId?: boolean;
 }
 
 export interface ParameterModel extends PropertyModel {
-    kind?: "REQUIRED" | "OPTIONAL",
+    kind?: "REQUIRED" | "OPTIONAL" | "DATA_BINDING";
     type?: PropertyModel;
     name?: PropertyModel;
+    headerName?: PropertyModel;
     documentation?: PropertyModel;
 }
 
@@ -161,3 +189,17 @@ export interface ParameterModel extends PropertyModel {
 export interface ConfigProperties {
     [key: string]: PropertyModel | ParameterModel;
 }
+
+export interface ServiceInitModel {
+    id: string;
+    displayName: string;
+    description: string;
+    orgName: string;
+    packageName: string;
+    moduleName: string;
+    version: string;
+    type: string;
+    icon: string;
+    properties: { [key: string]: PropertyModel };
+}
+
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/index.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/index.ts
index 1c1232467a0..4a2951937ec 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/index.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/index.ts
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import { ChatReqMessage, ChatRespMessage } from "./interfaces";
+import { ChatReqMessage, ChatRespMessage, TraceInput, TraceStatus } from "./interfaces";
 
 export interface AgentChatAPI {
     getChatMessage: (params: ChatReqMessage) => Promise<ChatRespMessage>;
     abortChatRequest: () => void;
+    getTracingStatus: () => Promise<TraceStatus>;
+    showTraceView: (params: TraceInput) => Promise<void>;
 }
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/interfaces.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/interfaces.ts
index 24404bb6748..4e6c828156e 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/interfaces.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/interfaces.ts
@@ -23,3 +23,11 @@ export interface ChatReqMessage {
 export interface ChatRespMessage {
     message: string;
 }
+
+export interface TraceStatus {
+    enabled: boolean;
+}
+
+export interface TraceInput {
+    message: string;
+}
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/rpc-type.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/rpc-type.ts
index 4758f7610be..13cd72be4a5 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/rpc-type.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/agent-chat/rpc-type.ts
@@ -14,11 +14,14 @@
  * 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 { ChatReqMessage, ChatRespMessage } from "./interfaces";
+import { ChatReqMessage, ChatRespMessage, TraceInput, TraceStatus } from "./interfaces";
 import { RequestType, NotificationType } from "vscode-messenger-common";
 
 const _preFix = "agent-chat";
 export const getChatMessage: RequestType<ChatReqMessage, ChatRespMessage> = { method: `${_preFix}/getChatMessage` };
 export const abortChatRequest: NotificationType<void> = { method: `${_preFix}/abortChatRequest` };
+export const getTracingStatus: RequestType<void, TraceStatus> = { method: `${_preFix}/getTracingStatus` };
+export const showTraceView: NotificationType<TraceInput> = { method: `${_preFix}/showTraceView` };
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/ai-agent/interfaces.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/ai-agent/interfaces.ts
index e2194c847a1..add05a31504 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/ai-agent/interfaces.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/ai-agent/interfaces.ts
@@ -79,13 +79,8 @@ export interface AIAgentResponse {
 
 export interface McpToolUpdateRequest {
     agentFlowNode: FlowNode;
-    serviceUrl: string;
-    serverName: string;
     selectedTools: string[];
-    formValues?: FlowNode; // Optional: form values from AddMcpServer
-    updatedNode?: FlowNode; // Optional: updated node for toolkit edits
-    mcpTools?: any[]; // Optional: list of MCP tools
-    codedata?: CodeData; // Optional: code data for MCP toolkit
+    updatedNode?: FlowNode;
 }
 
 export interface ToolParameters {
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 f0e1ad75686..1c56541b121 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
@@ -15,9 +15,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { AllDataMapperSourceRequest, CreateTempFileRequest, DatamapperModelContext, DataMapperModelResponse, ExtendedDataMapperMetadata, MetadataWithAttachments } from "../../interfaces/extended-lang-client";
+import { DataMapperModelResponse } from "../../interfaces/extended-lang-client";
 import { LoginMethod } from "../../state-machine-types";
-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 { AddToProjectRequest, GetFromFileRequest, DeleteFromProjectRequest, ProjectSource, ProjectDiagnostics, PostProcessRequest, PostProcessResponse, FetchDataRequest, FetchDataResponse, TestGenerationRequest, TestGenerationResponse, TestGenerationMentions, AIChatSummary, DeveloperDocument, RequirementSpecification, LLMDiagnostics, GetModuleDirParams, AIPanelPrompt, AIMachineSnapshot, SubmitFeedbackRequest, RelevantLibrariesAndFunctionsRequest, GenerateOpenAPIRequest, GenerateCodeRequest, TestPlanGenerationRequest, TestGeneratorIntermediaryState, RepairParams, RelevantLibrariesAndFunctionsResponse, DocGenerationRequest, AddFilesToProjectRequest, MetadataWithAttachments, DatamapperModelContext, ProcessContextTypeCreationRequest, ProcessMappingParametersRequest } from "./interfaces";
 
 export interface AIPanelAPI {
     // ==================================
@@ -35,18 +35,14 @@ export interface AIPanelAPI {
     getFromFile: (params: GetFromFileRequest) => Promise<string>;
     getFileExists: (params: GetFromFileRequest) => Promise<boolean>;
     deleteFromProject: (params: DeleteFromProjectRequest) => void;
-    notifyAIMappings: (params: NotifyAIMappingsRequest) => Promise<boolean>;
-    stopAIMappings: () => Promise<GenerateMappingsResponse>;
     getShadowDiagnostics: (params: ProjectSource) => Promise<ProjectDiagnostics>;
     checkSyntaxError: (params: ProjectSource) => Promise<boolean>;
     clearInitialPrompt: () => void;
-    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;
+    // Data-mapper related functions
+    openChatWindowWithCommand: () => void;
+    generateContextTypes: (params: ProcessContextTypeCreationRequest) => void;
+    generateMappingCode: (params: ProcessMappingParametersRequest) => void;
+    generateInlineMappingCode: (params: MetadataWithAttachments) => void;
     // Test-generator related functions
     getGeneratedTests: (params: TestGenerationRequest) => Promise<TestGenerationResponse>;
     getTestDiagnostics: (params: TestGenerationResponse) => Promise<ProjectDiagnostics>;
@@ -57,7 +53,6 @@ export interface AIPanelAPI {
     abortTestGeneration: () => void;
     applyDoOnFailBlocks: () => void;
     postProcess: (params: PostProcessRequest) => Promise<PostProcessResponse>;
-    getActiveFile:() => Promise<string>;
     promptGithubAuthorize: () => Promise<boolean>;
     promptWSO2AILogout: () => Promise<boolean>;
     isCopilotSignedIn: () => Promise<boolean>;
@@ -73,8 +68,6 @@ export interface AIPanelAPI {
     updateDevelopmentDocument:(params: DeveloperDocument) => void;
     updateRequirementSpecification:(params: RequirementSpecification) => void;
     createTestDirecoryIfNotExists:(params: string) => void;
-    getModuleDirectory:(params: GetModuleDirParams) => Promise<string>;
-    getContentFromFile: (params: GetFromFileRequest) => Promise<string>;
     submitFeedback: (params: SubmitFeedbackRequest) => Promise<boolean>;
     getRelevantLibrariesAndFunctions: (params: RelevantLibrariesAndFunctionsRequest) => Promise<RelevantLibrariesAndFunctionsResponse>;
     generateOpenAPI: (params: GenerateOpenAPIRequest) => void;
@@ -89,4 +82,5 @@ export interface AIPanelAPI {
     // ==================================
     getGeneratedDocumentation: (params: DocGenerationRequest) => Promise<void>;
     addFilesToProject: (params: AddFilesToProjectRequest) => Promise<boolean>;
+    isUserAuthenticated: () => 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 798f500b68a..8742990e418 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
@@ -17,10 +17,11 @@
  * under the License.
  */
 
-import { NodePosition } from "@wso2/syntax-tree";
+import { FunctionDefinition } from "@wso2/syntax-tree";
 import { AIMachineContext, AIMachineStateValue } from "../../state-machine-types";
 import { Command, TemplateId } from "../../interfaces/ai-panel";
-import { DataMapperSourceResponse, ExtendedDataMapperMetadata } from "../../interfaces/extended-lang-client";
+import { AllDataMapperSourceRequest, DataMapperSourceResponse, ExtendedDataMapperMetadata } from "../../interfaces/extended-lang-client";
+import { ComponentInfo, DataMapperMetadata, Diagnostics, ImportStatements, Project } from "../..";
 
 // ==================================
 // General Interfaces
@@ -76,6 +77,11 @@ export interface ProjectDiagnostics {
     diagnostics: DiagnosticEntry[];
 }
 
+export interface MappingDiagnostics {
+    uri: string;
+    diagnostics: DiagnosticEntry[];
+}
+
 export interface DiagnosticEntry {
     line?: number;
     message: string;
@@ -105,30 +111,54 @@ export interface DeleteFromProjectRequest {
     filePath: string;
 }
 
+export interface ProjectImports {
+    projectPath: string;
+    imports: ImportStatements[];
+}
+
 // Data-mapper related interfaces
-export interface GenerateMappingsRequest {
-    position: NodePosition;
-    filePath: string;
-    file?: Attachment;
+export interface MetadataWithAttachments {
+    metadata: ExtendedDataMapperMetadata;
+    attachments?: Attachment[];
 }
 
-export interface GenerateMappingsResponse {
-    newFnPosition?: NodePosition;
-    error?: ErrorCode;
-    userAborted?: boolean;
+export interface InlineMappingsSourceResult {
+    sourceResponse: DataMapperSourceResponse;
+    allMappingsRequest: AllDataMapperSourceRequest;
+    tempFileMetadata: ExtendedDataMapperMetadata;
+    tempDir: string;
 }
 
-export interface NotifyAIMappingsRequest {
-    newFnPosition: NodePosition;
-    prevFnSource: string;
-    filePath: string;
+export interface ProcessContextTypeCreationRequest {
+    attachments: Attachment[];
 }
 
-export interface CodeSegment {
-    segmentText: string;
-    filePath: string;
+export interface ProcessMappingParametersRequest {
+    parameters: MappingParameters;
     metadata?: ExtendedDataMapperMetadata;
-    textEdit?: DataMapperSourceResponse;
+    attachments?: Attachment[];
+}
+
+export interface CreateTempFileRequest {
+    tempDir: string;
+    filePath: string;
+    metadata: ExtendedDataMapperMetadata;
+    inputs?: DataMappingRecord[];
+    output?: DataMappingRecord;
+    functionName?: string;
+    inputNames?: string[];
+    imports?: ImportInfo[];
+    hasMatchingFunction?: boolean;
+}
+
+export interface DatamapperModelContext {
+    documentUri?: string;
+    identifier?: string;
+    dataMapperMetadata?: DataMapperMetadata;
+}
+
+export interface DiagnosticList {
+    diagnosticsList: Diagnostics[];
 }
 
 export interface DataMappingRecord {
@@ -157,6 +187,48 @@ export interface ImportInfo {
     recordName?: string;
 }
 
+export interface TempDirectoryPath {
+    filePaths: string[];
+    tempDir?: string;
+}
+
+export interface ExtractMappingDetailsRequest {
+    parameters: MappingParameters;                
+    recordMap: Record<string, DataMappingRecord>;  
+    allImports: ImportInfo[];  
+    existingFunctions: ComponentInfo[];    
+    functionContents: Record<string, string>;        
+}
+
+export interface ExistingFunctionMatchResult {
+    match: boolean;
+    matchingFunctionFile: string | null;
+    functionDefNode: FunctionDefinition | null;
+}
+
+export interface ExtractMappingDetailsResponse {
+    inputs: DataMappingRecord[];    
+    output: DataMappingRecord; 
+    inputParams: string[];
+    outputParam: string;   
+    imports: ImportInfo[];
+    inputNames: string[];
+    existingFunctionMatch: ExistingFunctionMatchResult;       
+}
+
+export interface RepairCodeParams {
+    tempFileMetadata: ExtendedDataMapperMetadata;
+    customFunctionsFilePath?: string;
+    imports?: ImportInfo[];
+    tempDir?: string;
+}
+
+export interface repairCodeRequest {
+    sourceFiles: SourceFile[];
+    diagnostics: DiagnosticList;
+    imports: ImportInfo[];
+}
+
 // Test-generator related interfaces
 export enum TestGenerationTarget {
     Service = "service",
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 6b6140ce5fe..ee93b828631 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 { AllDataMapperSourceRequest, CreateTempFileRequest, DatamapperModelContext, DataMapperModelResponse, ExtendedDataMapperMetadata, MetadataWithAttachments } from "../../interfaces/extended-lang-client";
+import { DataMapperModelResponse } from "../../interfaces/extended-lang-client";
 import { LoginMethod } from "../../state-machine-types";
-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 { AddToProjectRequest, GetFromFileRequest, DeleteFromProjectRequest, ProjectSource, ProjectDiagnostics, PostProcessRequest, PostProcessResponse, FetchDataRequest, FetchDataResponse, TestGenerationRequest, TestGenerationResponse, TestGenerationMentions, AIChatSummary, DeveloperDocument, RequirementSpecification, LLMDiagnostics, GetModuleDirParams, AIPanelPrompt, AIMachineSnapshot, SubmitFeedbackRequest, RelevantLibrariesAndFunctionsRequest, GenerateOpenAPIRequest, GenerateCodeRequest, TestPlanGenerationRequest, TestGeneratorIntermediaryState, RepairParams, RelevantLibrariesAndFunctionsResponse, DocGenerationRequest, AddFilesToProjectRequest, MetadataWithAttachments, DatamapperModelContext, ProcessContextTypeCreationRequest, ProcessMappingParametersRequest } from "./interfaces";
 import { RequestType, NotificationType } from "vscode-messenger-common";
 
 const _preFix = "ai-panel";
@@ -35,18 +35,13 @@ export const addToProject: RequestType<AddToProjectRequest, boolean> = { method:
 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 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 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 openChatWindowWithCommand: NotificationType<void> = { method: `${_preFix}/openChatWindowWithCommand` };
+export const generateContextTypes: RequestType<ProcessContextTypeCreationRequest, void> = { method: `${_preFix}/generateContextTypes` };
+export const generateMappingCode: RequestType<ProcessMappingParametersRequest, void> = { method: `${_preFix}/generateMappingCode` };
+export const generateInlineMappingCode: RequestType<MetadataWithAttachments, void> = { method: `${_preFix}/generateInlineMappingCode` };
 export const getGeneratedTests: RequestType<TestGenerationRequest, TestGenerationResponse> = { method: `${_preFix}/getGeneratedTests` };
 export const getTestDiagnostics: RequestType<TestGenerationResponse, ProjectDiagnostics> = { method: `${_preFix}/getTestDiagnostics` };
 export const getServiceSourceForName: RequestType<string, string> = { method: `${_preFix}/getServiceSourceForName` };
@@ -56,7 +51,6 @@ export const getResourceMethodAndPaths: RequestType<void, TestGenerationMentions
 export const abortTestGeneration: NotificationType<void> = { method: `${_preFix}/abortTestGeneration` };
 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` };
 export const promptGithubAuthorize: RequestType<void, boolean> = { method: `${_preFix}/promptGithubAuthorize` };
 export const promptWSO2AILogout: RequestType<void, boolean> = { method: `${_preFix}/promptWSO2AILogout` };
 export const isCopilotSignedIn: RequestType<void, boolean> = { method: `${_preFix}/isCopilotSignedIn` };
@@ -72,8 +66,6 @@ export const readDeveloperMdFile: RequestType<string, string> = { method: `${_pr
 export const updateDevelopmentDocument: NotificationType<DeveloperDocument> = { method: `${_preFix}/updateDevelopmentDocument` };
 export const updateRequirementSpecification: NotificationType<RequirementSpecification> = { method: `${_preFix}/updateRequirementSpecification` };
 export const createTestDirecoryIfNotExists: NotificationType<string> = { method: `${_preFix}/createTestDirecoryIfNotExists` };
-export const getModuleDirectory: RequestType<GetModuleDirParams, string> = { method: `${_preFix}/getModuleDirectory` };
-export const getContentFromFile: RequestType<GetFromFileRequest, string> = { method: `${_preFix}/getContentFromFile` };
 export const submitFeedback: RequestType<SubmitFeedbackRequest, boolean> = { method: `${_preFix}/submitFeedback` };
 export const getRelevantLibrariesAndFunctions: RequestType<RelevantLibrariesAndFunctionsRequest, RelevantLibrariesAndFunctionsResponse> = { method: `${_preFix}/getRelevantLibrariesAndFunctions` };
 export const generateOpenAPI: NotificationType<GenerateOpenAPIRequest> = { method: `${_preFix}/generateOpenAPI` };
@@ -85,3 +77,4 @@ export const generateHealthcareCode: NotificationType<GenerateCodeRequest> = { m
 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` };
+export const isUserAuthenticated: RequestType<void, boolean> = { method: `${_preFix}/isUserAuthenticated` };
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 3b4eff402c3..38a70d19043 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
@@ -93,7 +93,11 @@ import {
     DeleteTypeRequest,
     DeleteTypeResponse,
     VerifyTypeDeleteRequest,
-    VerifyTypeDeleteResponse
+    VerifyTypeDeleteResponse,
+    FormDiagnosticsRequest,
+    FormDiagnosticsResponse,
+    BISearchNodesRequest,
+    BISearchNodesResponse
 } from "../../interfaces/extended-lang-client";
 import {
     ProjectRequest,
@@ -106,7 +110,6 @@ import {
     BIAiSuggestionsRequest,
     BIAiSuggestionsResponse,
     AIChatRequest,
-    ProjectImports,
     BreakpointRequest,
     CurrentBreakpointsResponse,
     FormDidOpenParams,
@@ -160,8 +163,8 @@ export interface BIDiagramAPI {
     addBreakpointToSource: (params: BreakpointRequest) => void;
     removeBreakpointFromSource: (params: BreakpointRequest) => void;
     getBreakpointInfo: () => Promise<CurrentBreakpointsResponse>;
+    getFormDiagnostics: (params: FormDiagnosticsRequest) => Promise<FormDiagnosticsResponse>;
     getExpressionDiagnostics: (params: ExpressionDiagnosticsRequest) => Promise<ExpressionDiagnosticsResponse>;
-    getAllImports: () => Promise<ProjectImports>;
     formDidOpen: (params: FormDidOpenParams) => Promise<void>;
     formDidClose: (params: FormDidCloseParams) => Promise<void>;
     getDesignModel: () => Promise<BIDesignModelResponse>;
@@ -186,6 +189,7 @@ export interface BIDiagramAPI {
     getFunctionNode: (params: FunctionNodeRequest) => Promise<FunctionNodeResponse>;
     getEndOfFile: (params: EndOfFileRequest) => Promise<LinePosition>;
     search: (params: BISearchRequest) => Promise<BISearchResponse>;
+    searchNodes: (params: BISearchNodesRequest) => Promise<BISearchNodesResponse>;
     getRecordNames: () => Promise<RecordsInWorkspaceMentions>;
     getFunctionNames: () => Promise<RecordsInWorkspaceMentions>;
     getDevantMetadata: () => Promise<DevantMetadata | undefined>;
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 1e756452a72..9a50b133d63 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
@@ -20,6 +20,7 @@ import { LineRange } from "../../interfaces/common";
 import { DIRECTORY_MAP, Flow, OverviewFlow } from "../../interfaces/bi";
 import { BallerinaProjectComponents } from "../../interfaces/extended-lang-client";
 import { RemoteFunction, ServiceType } from "../../interfaces/ballerina";
+import { ImportInfo } from "../ai-panel/interfaces";
 
 export interface ProjectRequest {
     projectName: string;
@@ -143,17 +144,10 @@ export interface AIChatRequest {
     scafold: boolean;
     readme: boolean;
 }
-export interface ImportStatement {
-    moduleName: string;
-    alias?: string;
-}
+
 export interface ImportStatements {
     filePath: string;
-    statements: ImportStatement[];
-}
-export interface ProjectImports {
-    projectPath: string;
-    imports: ImportStatements[];
+    statements: ImportInfo[];
 }
 
 export interface FormDidOpenParams {
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 c3c6a948a00..0b3632859f0 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
@@ -86,15 +86,20 @@ import {
     UpdateConfigVariableRequestV2,
     GetConfigVariableNodeTemplateRequest,
     UpdateConfigVariableResponseV2,
-    DeleteConfigVariableRequestV2,
     DeleteConfigVariableResponseV2,
+    DeleteConfigVariableRequestV2,
     JsonToTypeRequest,
     JsonToTypeResponse,
     ConfigVariableRequest,
     DeleteTypeRequest,
     DeleteTypeResponse,
     VerifyTypeDeleteRequest,
-    VerifyTypeDeleteResponse
+    VerifyTypeDeleteResponse,
+    FormDiagnosticsRequest,
+    FormDiagnosticsResponse,
+    ExpressionTokensRequest,
+    BISearchNodesRequest,
+    BISearchNodesResponse
 } from "../../interfaces/extended-lang-client";
 import {
     ProjectRequest,
@@ -107,7 +112,6 @@ import {
     BIAiSuggestionsRequest,
     BIAiSuggestionsResponse,
     AIChatRequest,
-    ProjectImports,
     BreakpointRequest,
     CurrentBreakpointsResponse,
     FormDidOpenParams,
@@ -152,7 +156,7 @@ export const getConfigVariableNodeTemplate: RequestType<GetConfigVariableNodeTem
 export const getModuleNodes: RequestType<void, BIModuleNodesResponse> = { method: `${_preFix}/getModuleNodes` };
 export const getReadmeContent: RequestType<void, ReadmeContentResponse> = { method: `${_preFix}/getReadmeContent` };
 export const openReadme: NotificationType<void> = { method: `${_preFix}/openReadme` };
-export const renameIdentifier: RequestType<RenameIdentifierRequest, void> = { method: `${_preFix}/renameIdentifier` };
+export const renameIdentifier: NotificationType<RenameIdentifierRequest> = { method: `${_preFix}/renameIdentifier` };
 export const deployProject: RequestType<DeploymentRequest, DeploymentResponse> = { method: `${_preFix}/deployProject` };
 export const openAIChat: NotificationType<AIChatRequest> = { method: `${_preFix}/openAIChat` };
 export const getSignatureHelp: RequestType<SignatureHelpRequest, SignatureHelpResponse> = { method: `${_preFix}/getSignatureHelp` };
@@ -162,8 +166,8 @@ export const getVisibleTypes: RequestType<VisibleTypesRequest, VisibleTypesRespo
 export const addBreakpointToSource: NotificationType<BreakpointRequest> = { method: `${_preFix}/addBreakpointToSource` };
 export const removeBreakpointFromSource: NotificationType<BreakpointRequest> = { method: `${_preFix}/removeBreakpointFromSource` };
 export const getBreakpointInfo: RequestType<void, CurrentBreakpointsResponse> = { method: `${_preFix}/getBreakpointInfo` };
+export const getFormDiagnostics: RequestType<FormDiagnosticsRequest, FormDiagnosticsResponse> = { method: `${_preFix}/getFormDiagnostics` };
 export const getExpressionDiagnostics: RequestType<ExpressionDiagnosticsRequest, ExpressionDiagnosticsResponse> = { method: `${_preFix}/getExpressionDiagnostics` };
-export const getAllImports: RequestType<void, ProjectImports> = { method: `${_preFix}/getAllImports` };
 export const formDidOpen: RequestType<FormDidOpenParams, void> = { method: `${_preFix}/formDidOpen` };
 export const formDidClose: RequestType<FormDidCloseParams, void> = { method: `${_preFix}/formDidClose` };
 export const getDesignModel: RequestType<void, BIDesignModelResponse> = { method: `${_preFix}/getDesignModel` };
@@ -188,6 +192,7 @@ export const addFunction: RequestType<AddFunctionRequest, AddImportItemResponse>
 export const getFunctionNode: RequestType<FunctionNodeRequest, FunctionNodeResponse> = { method: `${_preFix}/getFunctionNode` };
 export const getEndOfFile: RequestType<EndOfFileRequest, LinePosition> = { method: `${_preFix}/getEndOfFile` };
 export const search: RequestType<BISearchRequest, BISearchResponse> = { method: `${_preFix}/search` };
+export const searchNodes: RequestType<BISearchNodesRequest, BISearchNodesResponse> = { method: `${_preFix}/searchNodes` };
 export const getRecordNames: RequestType<void, RecordsInWorkspaceMentions> = { method: `${_preFix}/getRecordNames` };
 export const getFunctionNames: RequestType<void, RecordsInWorkspaceMentions> = { method: `${_preFix}/getFunctionNames` };
 export const getDevantMetadata: RequestType<void, DevantMetadata> = { method: `${_preFix}/getDevantMetadata` };
@@ -195,3 +200,4 @@ export const generateOpenApiClient: RequestType<OpenAPIClientGenerationRequest,
 export const getOpenApiGeneratedModules: RequestType<OpenAPIGeneratedModulesRequest, OpenAPIGeneratedModulesResponse> = { method: `${_preFix}/getOpenApiGeneratedModules` };
 export const deleteOpenApiGeneratedModules: RequestType<OpenAPIClientDeleteRequest, OpenAPIClientDeleteResponse> = { method: `${_preFix}/deleteOpenApiGeneratedModules` };
 export const openConfigToml: RequestType<OpenConfigTomlRequest, void> = { method: `${_preFix}/openConfigToml` };
+export const getExpressionTokens: RequestType<ExpressionTokensRequest, number[]> = { method: `${_preFix}/getExpressionTokens` };
\ No newline at end of file
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 964b6cea6d6..00a73090246 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/common/index.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/common/index.ts
@@ -31,7 +31,8 @@ import {
     WorkspacesFileResponse,
     FileOrDirRequest,
     WorkspaceRootResponse,
-    ShowErrorMessageRequest
+    ShowErrorMessageRequest,
+    WorkspaceTypeResponse
 } from "./interfaces";
 
 export interface CommonRPCAPI {
@@ -49,5 +50,5 @@ export interface CommonRPCAPI {
     getWorkspaceRoot: () => Promise<WorkspaceRootResponse>;
     showErrorMessage: (params: ShowErrorMessageRequest) => void;
     getCurrentProjectTomlValues: () => Promise<Record<string, any>>;
-
+    getWorkspaceType: () => Promise<WorkspaceTypeResponse>;
 }
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 6ccd232ffcc..1679814a771 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/common/interfaces.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/common/interfaces.ts
@@ -91,6 +91,10 @@ export interface ShowErrorMessageRequest {
     message: string;
 }
 
+export interface TomlWorkspace {
+    packages: string[];
+}
+
 export interface TomlPackage {
     org: string;
     name: string;
@@ -98,6 +102,14 @@ export interface TomlPackage {
     title: string;
 }
 
-export interface TomlValues {
+export interface WorkspaceTomlValues {
+    workspace: TomlWorkspace;
+}
+
+export interface PackageTomlValues {
     package: TomlPackage;
 }
+
+export interface WorkspaceTypeResponse {
+    type: "SINGLE_PROJECT" | "MULTIPLE_PROJECTS" | "BALLERINA_WORKSPACE" | "VSCODE_WORKSPACE" | "UNKNOWN"
+}
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 c1816ec958b..581db37332b 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
@@ -32,7 +32,8 @@ import {
     WorkspacesFileResponse,
     FileOrDirRequest,
     WorkspaceRootResponse,
-    ShowErrorMessageRequest
+    ShowErrorMessageRequest,
+    WorkspaceTypeResponse
 } from "./interfaces";
 import { RequestType, NotificationType } from "vscode-messenger-common";
 
@@ -51,3 +52,4 @@ export const isNPSupported: RequestType<void, boolean> = { method: `${_preFix}/i
 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` };
+export const getWorkspaceType: RequestType<void, WorkspaceTypeResponse> = { method: `${_preFix}/getWorkspaceType` };
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
index 0508511647d..8c4a13dd0d8 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/index.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/index.ts
@@ -61,7 +61,6 @@ export interface DataMapperAPI {
     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
index 875a6920739..cb1a0b2eaad 100644
--- 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
@@ -64,7 +64,6 @@ export const mapWithCustomFn: RequestType<MapWithFnRequest, DataMapperSourceResp
 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/service-designer/index.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/service-designer/index.ts
index 1b0d5d6a99f..9c78ff7f262 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/service-designer/index.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/service-designer/index.ts
@@ -17,7 +17,8 @@
  */
 
 import { UpdatedArtifactsResponse } from "../../interfaces/bi";
-import { ListenerModelRequest, ListenerModelResponse, ServiceModelRequest, ServiceModelResponse, ServiceModelFromCodeRequest, ServiceModelFromCodeResponse, HttpResourceModelRequest, HttpResourceModelResponse, FunctionSourceCodeRequest, ListenerSourceCodeRequest, ListenersRequest, ListenersResponse, ServiceSourceCodeRequest, ListenerModelFromCodeRequest, ListenerModelFromCodeResponse, TriggerModelsRequest, TriggerModelsResponse, FunctionModelRequest, FunctionModelResponse, ResourceReturnTypesRequest, ResourceReturnTypesResponse, FunctionFromSourceRequest, FunctionFromSourceResponse } from "../../interfaces/extended-lang-client";
+import { ListenerModelRequest, ListenerModelResponse, ServiceModelRequest, ServiceModelResponse, ServiceModelFromCodeRequest, ServiceModelFromCodeResponse, HttpResourceModelRequest, HttpResourceModelResponse, FunctionSourceCodeRequest, ListenerSourceCodeRequest, ListenersRequest, ListenersResponse, ServiceSourceCodeRequest, ListenerModelFromCodeRequest, ListenerModelFromCodeResponse, TriggerModelsRequest, TriggerModelsResponse, FunctionModelRequest, FunctionModelResponse, ResourceReturnTypesRequest, FunctionFromSourceRequest, FunctionFromSourceResponse, ServiceModelInitResponse, ServiceInitSourceRequest, VisibleTypesResponse } from "../../interfaces/extended-lang-client";
+import { PayloadContext } from "../../interfaces/service";
 import {
     ExportOASRequest,
     ExportOASResponse,
@@ -38,8 +39,11 @@ export interface ServiceDesignerAPI {
     updateServiceSourceCode: (params: ServiceSourceCodeRequest) => Promise<UpdatedArtifactsResponse>;
     getServiceModelFromCode: (params: ServiceModelFromCodeRequest) => Promise<ServiceModelFromCodeResponse>;
     getHttpResourceModel: (params: HttpResourceModelRequest) => Promise<HttpResourceModelResponse>;
-    getResourceReturnTypes: (params: ResourceReturnTypesRequest) => Promise<ResourceReturnTypesResponse>;
+    getResourceReturnTypes: (params: ResourceReturnTypesRequest) => Promise<VisibleTypesResponse>;
     addResourceSourceCode: (params: FunctionSourceCodeRequest) => Promise<UpdatedArtifactsResponse>;
     addFunctionSourceCode: (params: FunctionSourceCodeRequest) => Promise<UpdatedArtifactsResponse>;
     updateResourceSourceCode: (params: FunctionSourceCodeRequest) => Promise<UpdatedArtifactsResponse>;
+    getServiceInitModel: (params: ServiceModelRequest) => Promise<ServiceModelInitResponse>;
+    createServiceAndListener: (params: ServiceInitSourceRequest) => Promise<UpdatedArtifactsResponse>;
+    generateExamplePayloadJson: (params: PayloadContext) => Promise<object>;
 }
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/service-designer/rpc-type.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/service-designer/rpc-type.ts
index dc1b7c7ebbc..eea60b74f2a 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/service-designer/rpc-type.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/service-designer/rpc-type.ts
@@ -18,7 +18,8 @@
  * THIS FILE INCLUDES AUTO GENERATED CODE
  */
 import { UpdatedArtifactsResponse } from "../../interfaces/bi";
-import { ListenerModelRequest, ListenerModelResponse, ServiceModelRequest, ServiceModelResponse, ServiceModelFromCodeRequest, ServiceModelFromCodeResponse, HttpResourceModelRequest, HttpResourceModelResponse, FunctionSourceCodeRequest, ListenerSourceCodeRequest, ListenersRequest, ListenersResponse, ServiceSourceCodeRequest, ListenerModelFromCodeRequest, ListenerModelFromCodeResponse, TriggerModelsRequest, TriggerModelsResponse, FunctionModelRequest, FunctionModelResponse, ResourceReturnTypesRequest, ResourceReturnTypesResponse, FunctionFromSourceRequest, FunctionFromSourceResponse } from "../../interfaces/extended-lang-client";
+import { ListenerModelRequest, ListenerModelResponse, ServiceModelRequest, ServiceModelResponse, ServiceModelFromCodeRequest, ServiceModelFromCodeResponse, HttpResourceModelRequest, HttpResourceModelResponse, FunctionSourceCodeRequest, ListenerSourceCodeRequest, ListenersRequest, ListenersResponse, ServiceSourceCodeRequest, ListenerModelFromCodeRequest, ListenerModelFromCodeResponse, TriggerModelsRequest, TriggerModelsResponse, FunctionModelRequest, FunctionModelResponse, ResourceReturnTypesRequest, FunctionFromSourceRequest, FunctionFromSourceResponse, ServiceModelInitResponse, ServiceInitSourceRequest, VisibleTypesResponse } from "../../interfaces/extended-lang-client";
+import { PayloadContext } from "../../interfaces/service";
 import {
     ExportOASRequest,
     ExportOASResponse,
@@ -40,7 +41,10 @@ export const addServiceSourceCode: RequestType<ServiceSourceCodeRequest, Updated
 export const updateServiceSourceCode: RequestType<ServiceSourceCodeRequest, UpdatedArtifactsResponse> = { method: `${_preFix}/updateServiceSourceCode` };
 export const getServiceModelFromCode: RequestType<ServiceModelFromCodeRequest, ServiceModelFromCodeResponse> = { method: `${_preFix}/getServiceModelFromCode` };
 export const getHttpResourceModel: RequestType<HttpResourceModelRequest, HttpResourceModelResponse> = { method: `${_preFix}/getHttpResourceModel` };
-export const getResourceReturnTypes: RequestType<ResourceReturnTypesRequest, ResourceReturnTypesResponse> = { method: `${_preFix}/getResourceReturnTypes` };
+export const getResourceReturnTypes: RequestType<ResourceReturnTypesRequest, VisibleTypesResponse> = { method: `${_preFix}/getResourceReturnTypes` };
 export const addResourceSourceCode: RequestType<FunctionSourceCodeRequest, UpdatedArtifactsResponse> = { method: `${_preFix}/addResourceSourceCode` };
 export const addFunctionSourceCode: RequestType<FunctionSourceCodeRequest, UpdatedArtifactsResponse> = { method: `${_preFix}/addFunctionSourceCode` };
 export const updateResourceSourceCode: RequestType<FunctionSourceCodeRequest, UpdatedArtifactsResponse> = { method: `${_preFix}/updateResourceSourceCode` };
+export const getServiceInitModel: RequestType<ServiceModelRequest, ServiceModelInitResponse> = { method: `${_preFix}/getServiceInitModel` };
+export const createServiceAndListener: RequestType<ServiceInitSourceRequest, UpdatedArtifactsResponse> = { method: `${_preFix}/createServiceAndListener` };
+export const generateExamplePayloadJson: RequestType<PayloadContext, object> = { method: `${_preFix}/generateExamplePayloadJson` };
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/visualizer/index.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/visualizer/index.ts
index 9b74657224a..8bd924bbbc6 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/visualizer/index.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/visualizer/index.ts
@@ -17,6 +17,7 @@
  */
 
 import { HistoryEntry } from "../../history";
+import { ProjectStructureArtifactResponse, UpdatedArtifactsResponse } from "../../interfaces/bi";
 import { ColorThemeKind } from "../../state-machine-types";
 import { AddToUndoStackRequest, OpenViewRequest, UndoRedoStateResponse } from "./interfaces";
 
@@ -33,4 +34,5 @@ export interface VisualizerAPI {
     undoRedoState: () => Promise<UndoRedoStateResponse>;
     joinProjectPath: (segments: string | string[]) => Promise<string>;
     getThemeKind: () => Promise<ColorThemeKind>;
+    updateCurrentArtifactLocation: (params: UpdatedArtifactsResponse) => Promise<ProjectStructureArtifactResponse>;
 }
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/visualizer/rpc-type.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/visualizer/rpc-type.ts
index f33a9bcf362..3347c1363d6 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/visualizer/rpc-type.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/visualizer/rpc-type.ts
@@ -18,6 +18,7 @@
  * THIS FILE INCLUDES AUTO GENERATED CODE
  */
 import { HistoryEntry } from "../../history";
+import { ProjectStructureArtifactResponse, UpdatedArtifactsResponse } from "../../interfaces/bi";
 import { ColorThemeKind } from "../../state-machine-types";
 import { AddToUndoStackRequest, OpenViewRequest, UndoRedoStateResponse } from "./interfaces";
 import { NotificationType, RequestType } from "vscode-messenger-common";
@@ -35,3 +36,4 @@ export const addToUndoStack: NotificationType<AddToUndoStackRequest> = { method:
 export const undoRedoState: RequestType<void, UndoRedoStateResponse> = { method: `${_preFix}/undoRedoState` };
 export const joinProjectPath: RequestType<string | string[], string> = { method: `${_preFix}/joinProjectPath` };
 export const getThemeKind: RequestType<void, ColorThemeKind> = { method: `${_preFix}/getThemeKind` };
+export const updateCurrentArtifactLocation: RequestType<UpdatedArtifactsResponse, ProjectStructureArtifactResponse> = { method: `${_preFix}/updateCurrentArtifactLocation` };
diff --git a/workspaces/ballerina/ballerina-core/src/state-machine-types.ts b/workspaces/ballerina/ballerina-core/src/state-machine-types.ts
index f29c0387b09..b1545666b76 100644
--- a/workspaces/ballerina/ballerina-core/src/state-machine-types.ts
+++ b/workspaces/ballerina/ballerina-core/src/state-machine-types.ts
@@ -22,7 +22,7 @@ import { Command } from "./interfaces/ai-panel";
 import { LinePosition } from "./interfaces/common";
 import { Type } from "./interfaces/extended-lang-client";
 import { CodeData, DIRECTORY_MAP, ProjectStructureArtifactResponse, ProjectStructureResponse } from "./interfaces/bi";
-import { DiagnosticEntry, TestGeneratorIntermediaryState, DocumentationGeneratorIntermediaryState } from "./rpc-types/ai-panel/interfaces";
+import { DiagnosticEntry, TestGeneratorIntermediaryState, DocumentationGeneratorIntermediaryState, SourceFile } from "./rpc-types/ai-panel/interfaces";
 
 export type MachineStateValue =
     | 'initialize'
@@ -96,7 +96,8 @@ export enum MACHINE_VIEW {
     BIDataMapperForm = "Add Data Mapper SKIP",
     AIAgentDesigner = "AI Agent Designer",
     AIChatAgentWizard = "AI Chat Agent Wizard",
-    ResolveMissingDependencies = "Resolve Missing Dependencies"
+    ResolveMissingDependencies = "Resolve Missing Dependencies",
+    ServiceFunctionForm = "Service Function Form"
 }
 
 export interface MachineEvent {
@@ -137,7 +138,17 @@ export interface VisualizerLocation {
     projectStructure?: ProjectStructureResponse;
     org?: string;
     package?: string;
+    moduleName?: string;
+    version?: string;
     dataMapperMetadata?: DataMapperMetadata;
+    artifactInfo?: ArtifactInfo;
+}
+
+export interface ArtifactInfo {
+    org?: string;
+    packageName?: string;
+    moduleName?: string;
+    version?: string;
 }
 
 export interface ArtifactData {
@@ -189,7 +200,8 @@ export type ChatNotify =
     | ToolCall
     | ToolResult
     | EvalsToolResult
-    | UsageMetricsEvent;
+    | UsageMetricsEvent
+    | GeneratedSourcesEvent;
 
 export interface ChatStart {
     type: "start";
@@ -255,6 +267,11 @@ export interface UsageMetricsEvent {
     };
 }
 
+export interface GeneratedSourcesEvent {
+    type: "generated_sources";
+    fileArray: SourceFile[];
+}
+
 export const stateChanged: NotificationType<MachineStateValue> = { method: 'stateChanged' };
 export const onDownloadProgress: NotificationType<DownloadProgress> = { method: 'onDownloadProgress' };
 export const onChatNotify: NotificationType<ChatNotify> = { method: 'onChatNotify' };
diff --git a/workspaces/ballerina/ballerina-extension/.vscode/launch.json b/workspaces/ballerina/ballerina-extension/.vscode/launch.json
index 4b3bbb0e2f1..5c675330d61 100644
--- a/workspaces/ballerina/ballerina-extension/.vscode/launch.json
+++ b/workspaces/ballerina/ballerina-extension/.vscode/launch.json
@@ -17,7 +17,8 @@
                 "LSDEBUG": "false",
                 "WEB_VIEW_WATCH_MODE": "true",
                 "WEB_VIEW_DEV_HOST": "http://localhost:9000",
-                "BALLERINA_STAGE_CENTRAL": "false"
+                "BALLERINA_STAGE_CENTRAL": "false",
+                "TRACE_WEB_VIEW_DEV_HOST": "http://localhost:9001"
             },
             "outFiles": [
                 "${workspaceFolder}/dist/**/*.js"
@@ -71,6 +72,6 @@
             "outFiles": [
                 "${workspaceFolder}/out/src/debugger/**/*.js"
             ],
-        },
+        }
     ]
 }
diff --git a/workspaces/ballerina/ballerina-extension/CHANGELOG.md b/workspaces/ballerina/ballerina-extension/CHANGELOG.md
index da676fc7531..56be18b1e93 100644
--- a/workspaces/ballerina/ballerina-extension/CHANGELOG.md
+++ b/workspaces/ballerina/ballerina-extension/CHANGELOG.md
@@ -4,9 +4,48 @@ All notable changes to the **Ballerina** extension will be documented in this fi
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and this project adheres to [Semantic Versioning](https://semver.org/).
 
-
 ## [Unreleased]
 
+### Added
+
+- **Editor** — Added visual editing for mono-repositories with multiple Ballerina projects, along with support for "Natural expressions" in Ballerina 2201.13.0.
+
+## [5.5.0](https://github.com/wso2/vscode-extensions/compare/ballerina-integrator-1.3.2...ballerina-integrator-1.4.0) - 2025-11-05
+
+### Added
+
+- **Service & Data Handling** — Introduced MCP AI and Solace Event integrations, redesigned Service and Event Integration flows with AI-powered payload generation, and introduced an LLM-based Data Mapper.
+- **GraphQL Designer** — Added schema-based service generation, GraphQL-based type suggestions, `graphql:ID` annotation support, and documentation on GraphQL fields.
+- **Expression Editor** — Enhanced the expression editor with improved syntax highlighting. The expression helper now offers distinct modes for both text and expression inputs.
+
+### Changed
+
+- **AI & Copilot** — Improved AI code generation formatting, step handling, and system prompts for better response structure.
+- **Service Designer** — Revamped the view with more organized listener and service properties, enhanced with readable listener names, and refactored metadata display.
+- **Data Mapper** — Improved breadcrumb labels and refactored preview behavior for output-side arrays.
+- **UI & UX** — Enhanced the Helper Pane UI and navigation, and refactored the Resource form styles. Improved the Type Editor with type import capability and automatic generation of sample JSON for payload types.
+
+### Fixed
+
+- **Data Mapper** — Corrected issues with mappings generated for output header ports.
+- **Service Designer** — Resolved an infinite re-render issue and fixed bugs in the API designer and MCP tool editing.
+- **Expression Editor** — Fixed issues with constrained language in Windows PowerShell, delete key behavior, and text selection.
+- **UI & UX** — Addressed UI glitches, including a popup movement issue when dragging the terminal, and fixed `undo/redo` stack reset conditions.
+- **GraphQL** — Removed Union Types from GraphQL Input Types.
+- **AI & Copilot** — Fixed invalid markdown characters in the chat window, file creation issues, and state management in the chat window. Resolved a bug where the reusable model provider form was not displaying correctly.
+
+## [5.4.2](https://github.com/wso2/vscode-extensions/compare/ballerina-integrator-1.3.1...ballerina-integrator-1.3.2) - 2025-10-26
+
+### Changed
+
+- **Data Mapper** — Enabled reset and refresh options.
+
+### Fixed
+
+- **Editor** — Allowed artifact creation even when corresponding source files are missing.
+- **Data Mapper** — Added support for mappings with built-in Ballerina sub-types (e.g., `int:Signed32`), fixed creation using types from sub-modules, enabled expression-bar completions for reusable mappers, and corrected link rendering for optional field access.
+- **Type Browser** — Improved type filtering based on user queries.
+- **Service Class Designer** — Enabled connection generation for clients created from WSDL files.
 
 ## [5.4.1](https://github.com/wso2/vscode-extensions/compare/ballerina-integrator-1.3.0...ballerina-integrator-1.3.1) - 2025-10-15
 
diff --git a/workspaces/ballerina/ballerina-extension/package.json b/workspaces/ballerina/ballerina-extension/package.json
index 15c4e053aed..f36cfccdd8a 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.4.2",
+    "version": "5.5.0",
     "publisher": "wso2",
     "icon": "resources/images/ballerina.png",
     "homepage": "https://wso2.com/ballerina/vscode/docs",
@@ -24,6 +24,7 @@
         "Snippets"
     ],
     "activationEvents": [
+        "onStartupFinished",
         "onLanguage:ballerina",
         "onCommand:ballerina.showExamples",
         "workspaceContains:**/Ballerina.toml",
@@ -718,9 +719,42 @@
                 "command": "BI.toggle.trace.logs",
                 "title": "Toggle Trace Logs",
                 "category": "BI"
+            },
+            {
+                "command": "ballerina.showTraceWindow",
+                "title": "Show Traces",
+                "icon": "$(list-tree)",
+                "category": "Ballerina"
+            },
+            {
+                "command": "ballerina.enableTracing",
+                "title": "Enable Tracing (Experimental)",
+                "category": "Ballerina"
+            },
+            {
+                "command": "ballerina.disableTracing",
+                "title": "Disable Tracing (Experimental)",
+                "category": "Ballerina",
+                "icon": "$(circle-slash)"
+            },
+            {
+                "command": "ballerina.clearTraces",
+                "title": "Clear Traces (Experimental)",
+                "category": "Ballerina",
+                "icon": "$(clear-all)",
+                "hidden": true
             }
         ],
         "views": {
+            "ballerina-traceView": [
+                {
+                    "id": "ballerina-traceView",
+                    "title": "Tracing",
+                    "name": "Tracing",
+                    "icon": "$(list-tree)",
+                    "when": "ballerina.tracingEnabled"
+                }
+            ],
             "notebook-variables": [
                 {
                     "type": "webview",
@@ -731,6 +765,16 @@
             ]
         },
         "viewsWelcome": [
+            {
+                "view": "ballerina-traceView",
+                "contents": "Tracing is disabled. Enable tracing to view traces from your Ballerina program.\n[Enable Tracing](command:ballerina.enableTracing)",
+                "when": "!ballerina.tracingEnabled"
+            },
+            {
+                "view": "ballerina-traceView",
+                "contents": "No traces collected yet. Run your Ballerina program to see traces here.",
+                "when": "ballerina.tracingEnabled && ballerina.tracesEmpty"
+            },
             {
                 "view": "testing",
                 "contents": "[Add Unit Test](command:BI.test.add.function)"
@@ -738,6 +782,12 @@
         ],
         "viewsContainers": {
             "panel": [
+                {
+                    "id": "ballerina-traceView",
+                    "title": "Traces",
+                    "icon": "$(list-tree)",
+                    "when": "ballerina.tracingEnabled"
+                },
                 {
                     "id": "notebook-variables",
                     "title": "Ballerina Notebook",
@@ -773,6 +823,18 @@
                     "command": "BI.test.add.function",
                     "when": "view == workbench.view.testing",
                     "group": "navigation"
+                },
+                {
+                    "command": "ballerina.disableTracing",
+                    "when": "view == ballerina-traceView && ballerina.tracingEnabled",
+                    "group": "navigation",
+                    "title": "Disable Tracing"
+                },
+                {
+                    "command": "ballerina.clearTraces",
+                    "when": "view == ballerina-traceView && ballerina.tracingEnabled && !ballerina.tracesEmpty",
+                    "group": "navigation",
+                    "title": "Clear Traces"
                 }
             ],
             "editor/title": [
@@ -965,21 +1027,21 @@
                 "description": "design-view",
                 "default": {
                     "fontPath": "./resources/font-wso2-vscode/dist/wso2-vscode.woff",
-                    "fontCharacter": "\\f182"
+                    "fontCharacter": "\\f19a"
                 }
             },
             "distro-start": {
                 "description": "start",
                 "default": {
                     "fontPath": "./resources/font-wso2-vscode/dist/wso2-vscode.woff",
-                    "fontCharacter": "\\f1f7"
+                    "fontCharacter": "\\f210"
                 }
             },
             "distro-debug": {
                 "description": "debug",
                 "default": {
                     "fontPath": "./resources/font-wso2-vscode/dist/wso2-vscode.woff",
-                    "fontCharacter": "\\f17d"
+                    "fontCharacter": "\\f195"
                 }
             },
             "distro-source-view": {
@@ -993,7 +1055,7 @@
                 "description": "persist-diagram",
                 "default": {
                     "fontPath": "./resources/font-wso2-vscode/dist/wso2-vscode.woff",
-                    "fontCharacter": "\\f1d2"
+                    "fontCharacter": "\\f1eb"
                 }
             },
             "distro-cached-rounded": {
@@ -1117,6 +1179,8 @@
         "watch-ballerina": "webpack --mode none --watch",
         "test-compile": "tsc -p ./",
         "test": "pnpm run test-compile && node ./out/test/runTest.js",
+        "test:ai": "pnpm run test-compile && node ./out/test/runAiTest.js",
+        "test:libs-integration": "pnpm run test-compile && node ./out/test/runLibsIntegrationTest.js",
         "e2e-test-setup": "npx extest get-vscode -c 1.83.1 && npx extest get-chromedriver -c 1.83.1 && npx extest install-vsix -f $(ls vsix/*.vsix)",
         "preui-test": "node -e \"const fs = require('fs'); if (fs.existsSync('test-resou')) { fs.unlinkSync('test-resou'); }\"",
         "e2e-test": "pnpm run test-compile && npx extest run-tests 'out/ui-test/*.test.js' --mocha_config ui-test/.mocharc.js -o ui-test/settings.json",
@@ -1131,7 +1195,7 @@
         "build": "pnpm run compile && pnpm run lint && pnpm run postbuild",
         "rebuild": "pnpm run clean && pnpm run compile && pnpm run postbuild",
         "postbuild": "if [ \"$isPreRelease\" = \"true\" ]; then pnpm run download-ls --prerelease; else pnpm run download-ls; fi && pnpm run copyFonts && pnpm run copyJSLibs && pnpm run package && pnpm run copyVSIX",
-        "copyJSLibs": "copyfiles -f ../ballerina-visualizer/build/*.js resources/jslibs"
+        "copyJSLibs": "copyfiles -f ../ballerina-visualizer/build/*.js resources/jslibs && copyfiles -f ../trace-visualizer/build/*.js resources/jslibs"
     },
     "dependencies": {
         "@ai-sdk/amazon-bedrock": "^3.0.25",
@@ -1141,6 +1205,7 @@
         "@vscode/vsce": "^2.22.0",
         "@wso2/ballerina-core": "workspace:*",
         "@wso2/ballerina-visualizer": "workspace:*",
+        "@wso2/trace-visualizer": "workspace:*",
         "@wso2/font-wso2-vscode": "workspace:*",
         "@wso2/syntax-tree": "workspace:*",
         "@wso2/wso2-platform-core": "workspace:*",
@@ -1172,7 +1237,8 @@
         "vscode-uri": "^3.0.8",
         "xml-js": "^1.6.11",
         "xstate": "^4.38.3",
-        "zod": "^4.1.8"
+        "zod": "^4.1.8",
+        "protobufjs": "^7.2.5"
     },
     "devDependencies": {
         "@sentry/webpack-plugin": "^1.20.1",
diff --git a/workspaces/ballerina/ballerina-extension/src/RPCLayer.ts b/workspaces/ballerina/ballerina-extension/src/RPCLayer.ts
index 42dea359982..9b3407c6091 100644
--- a/workspaces/ballerina/ballerina-extension/src/RPCLayer.ts
+++ b/workspaces/ballerina/ballerina-extension/src/RPCLayer.ts
@@ -147,7 +147,8 @@ async function getContext(): Promise<VisualizerLocation> {
             scope: context.scope,
             org: context.org,
             package: context.package,
-            dataMapperMetadata: context.dataMapperMetadata
+            dataMapperMetadata: context.dataMapperMetadata,
+            artifactInfo: context.artifactInfo
         });
     });
 }
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 1094af3ecbd..69bfad802fa 100644
--- a/workspaces/ballerina/ballerina-extension/src/core/extended-language-client.ts
+++ b/workspaces/ballerina/ballerina-extension/src/core/extended-language-client.ts
@@ -258,9 +258,17 @@ import {
     onMigrationToolStateChanged,
     onMigrationToolLogs,
     GetMigrationToolsResponse,
+    ServiceModelInitResponse,
+    ServiceInitSourceRequest,
     DeleteSubMappingRequest,
     DeleteClauseRequest,
-    ClearTypeCacheResponse
+    ClearTypeCacheResponse,
+    FormDiagnosticsRequest,
+    FormDiagnosticsResponse,
+    BISearchNodesRequest,
+    BISearchNodesResponse,
+    ExpressionTokensRequest,
+    ExpressionTokensResponse
 } from "@wso2/ballerina-core";
 import { BallerinaExtension } from "./index";
 import { debug, handlePullModuleProgress } from "../utils";
@@ -333,7 +341,7 @@ enum EXTENDED_APIS {
     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_KNOWLEDGE_BASES = 'flowDesignService/getAvailableVectorKnowledgeBases',
     BI_AVAILABLE_DATA_LOADERS = 'flowDesignService/getAvailableDataLoaders',
     BI_AVAILABLE_CHUNKS = 'flowDesignService/getAvailableChunkers',
     BI_NODE_TEMPLATE = 'flowDesignService/getNodeTemplate',
@@ -372,6 +380,7 @@ enum EXTENDED_APIS {
     BI_SIGNATURE_HELP = 'expressionEditor/signatureHelp',
     BI_VISIBLE_TYPES = 'expressionEditor/types',
     REFERENCES = 'textDocument/references',
+    BI_FORM_DIAGNOSTICS = 'flowDesignService/diagnostics',
     BI_EXPRESSION_DIAGNOSTICS = 'expressionEditor/diagnostics',
     BI_TRIGGER_MODELS = 'triggerDesignService/getTriggerModels',
     BI_TRIGGER_MODEL = 'triggerDesignService/getTriggerModel',
@@ -397,6 +406,8 @@ enum EXTENDED_APIS {
     BI_SERVICE_UPDATE_LISTENER = 'serviceDesign/updateListener',
     BI_SERVICE_GET_LISTENER_SOURCE = 'serviceDesign/getListenerFromSource',
     BI_SERVICE_GET_SERVICE = 'serviceDesign/getServiceModel',
+    BI_SERVICE_GET_SERVICE_INIT = 'serviceDesign/getServiceInitModel',
+    BI_SERVICE_CREATE_SERVICE_AND_LISTENER = 'serviceDesign/addServiceAndListener',
     BI_SERVICE_GET_FUNCTION = 'serviceDesign/getFunctionModel',
     BI_SERVICE_ADD_SERVICE = 'serviceDesign/addService',
     BI_SERVICE_UPDATE_SERVICE = 'serviceDesign/updateService',
@@ -420,6 +431,7 @@ enum EXTENDED_APIS {
     BI_ADD_TEST_FUNCTION = 'testManagerService/addTestFunction',
     BI_UPDATE_TEST_FUNCTION = 'testManagerService/updateTestFunction',
     BI_EDIT_FUNCTION_NODE = 'flowDesignService/functionDefinition',
+    BI_GET_EXPRESSION_TOKENS = 'expressionEditor/semanticTokens',
     BI_AI_AGENT_ORG = 'agentManager/getAiModuleOrg',
     BI_AI_ALL_AGENTS = 'agentManager/getAllAgents',
     BI_AI_ALL_MODELS = 'agentManager/getAllModels',
@@ -433,6 +445,7 @@ enum EXTENDED_APIS {
     BI_ADD_ICP = 'icpService/addICP',
     BI_DISABLE_ICP = 'icpService/disableICP',
     BI_SEARCH = 'flowDesignService/search',
+    BI_SEARCH_NODES = 'flowDesignService/searchNodes',
     OPEN_API_GENERATE_CLIENT = 'openAPIService/genClient',
     OPEN_API_GENERATED_MODULES = 'openAPIService/getModules',
     OPEN_API_CLIENT_DELETE = 'openAPIService/deleteModule',
@@ -1026,7 +1039,7 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
     }
 
     async getAvailableVectorKnowledgeBases(params: BIAvailableNodesRequest): Promise<BIAvailableNodesResponse> {
-        return this.sendRequest<BIAvailableNodesResponse>(EXTENDED_APIS.BI_AVAILABLE_VECTOR_KNOWLEDGE_BASES, params);
+        return this.sendRequest<BIAvailableNodesResponse>(EXTENDED_APIS.BI_AVAILABLE_KNOWLEDGE_BASES, params);
     }
 
     async getAvailableDataLoaders(params: BIAvailableNodesRequest): Promise<BIAvailableNodesResponse> {
@@ -1134,6 +1147,10 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
         return this.sendRequest(EXTENDED_APIS.BI_GEN_ERROR_HANDLER, params);
     }
 
+    async getFormDiagnostics(params: FormDiagnosticsRequest): Promise<FormDiagnosticsResponse> {
+        return this.sendRequest<FormDiagnosticsResponse>(EXTENDED_APIS.BI_FORM_DIAGNOSTICS, params);
+    }
+
     async getExpressionDiagnostics(params: ExpressionDiagnosticsRequest): Promise<ExpressionDiagnosticsResponse> {
         return this.sendRequest<ExpressionDiagnosticsResponse>(EXTENDED_APIS.BI_EXPRESSION_DIAGNOSTICS, params);
     }
@@ -1150,6 +1167,10 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
         return this.sendRequest<FunctionNodeResponse>(EXTENDED_APIS.BI_EDIT_FUNCTION_NODE, params);
     }
 
+    async getExpressionTokens(params: ExpressionTokensRequest): Promise<ExpressionTokensResponse> {
+        return this.sendRequest<ExpressionTokensResponse>(EXTENDED_APIS.BI_GET_EXPRESSION_TOKENS, params);
+    }
+
     async getListenerModel(params: ListenerModelRequest): Promise<ListenerModelResponse> {
         return this.sendRequest<ListenerModelResponse>(EXTENDED_APIS.BI_SERVICE_GET_LISTENER, params);
     }
@@ -1170,6 +1191,14 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
         return this.sendRequest<ServiceModelResponse>(EXTENDED_APIS.BI_SERVICE_GET_SERVICE, params);
     }
 
+    async getServiceInitModel(params: ServiceModelRequest): Promise<ServiceModelInitResponse> {
+        return this.sendRequest<ServiceModelInitResponse>(EXTENDED_APIS.BI_SERVICE_GET_SERVICE_INIT, params);
+    }
+
+    async createServiceAndListener(params: ServiceInitSourceRequest): Promise<SourceEditResponse> {
+        return this.sendRequest<SourceEditResponse>(EXTENDED_APIS.BI_SERVICE_CREATE_SERVICE_AND_LISTENER, params);
+    }
+
     async getFunctionModel(params: FunctionModelRequest): Promise<FunctionModelResponse> {
         return this.sendRequest<FunctionModelResponse>(EXTENDED_APIS.BI_SERVICE_GET_FUNCTION, params);
     }
@@ -1210,8 +1239,8 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
         return this.sendRequest<HttpResourceModelResponse>(EXTENDED_APIS.BI_SERVICE_GET_RESOURCE, params);
     }
 
-    async getResourceReturnTypes(params: ResourceReturnTypesRequest): Promise<ResourceReturnTypesResponse> {
-        return this.sendRequest<ResourceReturnTypesResponse>(EXTENDED_APIS.BI_SERVICE_GET_RESOURCE_RETURN_TYPES, params);
+    async getResourceReturnTypes(params: ResourceReturnTypesRequest): Promise<VisibleTypesResponse> {
+        return this.sendRequest<VisibleTypesResponse>(EXTENDED_APIS.BI_SERVICE_GET_RESOURCE_RETURN_TYPES, params);
     }
 
     async addResourceSourceCode(params: FunctionSourceCodeRequest): Promise<ResourceSourceCodeResponse> {
@@ -1318,6 +1347,10 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
         return this.sendRequest<BISearchResponse>(EXTENDED_APIS.BI_SEARCH, params);
     }
 
+    async searchNodes(params: BISearchNodesRequest): Promise<BISearchNodesResponse> {
+        return this.sendRequest<BISearchNodesResponse>(EXTENDED_APIS.BI_SEARCH_NODES, params);
+    }
+
     async openApiGenerateClient(params: OpenAPIClientGenerationRequest): Promise<OpenAPIClientGenerationResponse> {
         return this.sendRequest<OpenAPIClientGenerationResponse>(EXTENDED_APIS.OPEN_API_GENERATE_CLIENT, params);
     }
diff --git a/workspaces/ballerina/ballerina-extension/src/extension.ts b/workspaces/ballerina/ballerina-extension/src/extension.ts
index d86b93b39d8..ed3451a87a4 100644
--- a/workspaces/ballerina/ballerina-extension/src/extension.ts
+++ b/workspaces/ballerina/ballerina-extension/src/extension.ts
@@ -46,6 +46,7 @@ import { activateAIFeatures } from './features/ai/activator';
 import { activateTryItCommand } from './features/tryit/activator';
 import { activate as activateNPFeatures } from './features/natural-programming/activator';
 import { activateAgentChatPanel } from './views/agent-chat/activate';
+import { activateTracing } from './features/tracing';
 
 let langClient: ExtendedLangClient;
 export let isPluginStartup = true;
@@ -109,8 +110,10 @@ export async function activate(context: ExtensionContext) {
     extension.context = context;
     // Init RPC Layer methods
     RPCLayer.init();
+    
     // Wait for the ballerina extension to be ready
     await StateMachine.initialize();
+    
     // Then return the ballerina extension context
     return { ballerinaExtInstance: extension.ballerinaExtInstance, projectPath: StateMachine.context().projectUri };
 }
@@ -189,6 +192,9 @@ export async function activateBallerina(): Promise<BallerinaExtension> {
         // Activate Agent Chat Panel
         activateAgentChatPanel(ballerinaExtInstance);
 
+        // Activate Tracing Feature
+        activateTracing(ballerinaExtInstance);
+
         langClient = <ExtendedLangClient>ballerinaExtInstance.langClient;
         // Register showTextDocument listener
         langClient.onNotification('window/showTextDocument', (location: Location) => {
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/activator.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/activator.ts
index 9dc3de8d507..4a52e74099f 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/activator.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/activator.ts
@@ -20,7 +20,7 @@ import { commands, window } from 'vscode';
 import { BallerinaExtension, ExtendedLangClient } from '../../core';
 import { activateCopilotLoginCommand, resetBIAuth } from './completions';
 import { generateCodeCore } from './service/code/code';
-import { GenerateCodeRequest } from '@wso2/ballerina-core';
+import { GenerateCodeRequest, ProcessMappingParametersRequest } from '@wso2/ballerina-core';
 import { CopilotEventHandler } from './service/event';
 import { addConfigFile, getConfigFilePath } from './utils';
 import { StateMachine } from "../../stateMachine";
@@ -28,21 +28,26 @@ import { CONFIGURE_DEFAULT_MODEL_COMMAND, DEFAULT_PROVIDER_ADDED, LOGIN_REQUIRED
 import { REFRESH_TOKEN_NOT_AVAILABLE_ERROR_MESSAGE, TOKEN_REFRESH_ONLY_SUPPORTED_FOR_BI_INTEL } from '../..//utils/ai/auth';
 import { AIStateMachine } from '../../views/ai-panel/aiMachine';
 import { AIMachineEventType } from '@wso2/ballerina-core';
+import { generateMappingCodeCore } from './service/datamapper/datamapper';
 
 export let langClient: ExtendedLangClient;
 
 export function activateAIFeatures(ballerinaExternalInstance: BallerinaExtension) {
-    
+
     langClient = <ExtendedLangClient>ballerinaExternalInstance.langClient;
     activateCopilotLoginCommand();
     resetBIAuth();
-    
+
     // Register commands in test environment to test the AI features
     if (process.env.AI_TEST_ENV) {
         commands.registerCommand('ballerina.test.ai.generateCodeCore', async (params: GenerateCodeRequest, testEventHandler: CopilotEventHandler) => {
             await generateCodeCore(params, testEventHandler);
         });
 
+        commands.registerCommand('ballerina.test.ai.generatemappingCodecore', async (params: ProcessMappingParametersRequest, testEventHandler: CopilotEventHandler) => {
+            await generateMappingCodeCore(params, testEventHandler);
+        });
+
         // Library integration test commands
         const {
             getAllLibraries,
@@ -103,5 +108,5 @@ export function activateAIFeatures(ballerinaExternalInstance: BallerinaExtension
                 }
             }
         }
-    });   
+    });
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/constants.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/constants.ts
index 34ec76a8c78..b6b2d3b27b5 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/constants.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/constants.ts
@@ -26,3 +26,49 @@ export const ERROR_NO_BALLERINA_SOURCES = "No Ballerina sources";
 export const LOGIN_REQUIRED_WARNING = "Please sign in to BI Copilot to use this feature.";
 export const LOGIN_REQUIRED_WARNING_FOR_DEFAULT_MODEL = "Please sign in to BI Copilot to configure the WSO2 default model provider.";
 export const DEFAULT_PROVIDER_ADDED = "WSO2 default model provider configuration values were added to the Config.toml file.";
+
+// Datamapper Constants
+// Primitive data types supported by the datamapper
+export enum PrimitiveType {
+  STRING = "string",
+  INT = "int",
+  FLOAT = "float",
+  DECIMAL = "decimal",
+  BOOLEAN = "boolean"
+}
+
+// Nullable primitive data types
+export enum NullablePrimitiveType {
+  STRING = "string?",
+  INT = "int?",
+  FLOAT = "float?",
+  DECIMAL = "decimal?",
+  BOOLEAN = "boolean?"
+}
+
+// Array types for primitive data types
+export enum PrimitiveArrayType {
+  // Basic array types
+  STRING_ARRAY = "string[]",
+  STRING_ARRAY_NULLABLE = "string[]?",
+  INT_ARRAY = "int[]",
+  INT_ARRAY_NULLABLE = "int[]?",
+  FLOAT_ARRAY = "float[]",
+  FLOAT_ARRAY_NULLABLE = "float[]?",
+  DECIMAL_ARRAY = "decimal[]",
+  DECIMAL_ARRAY_NULLABLE = "decimal[]?",
+  BOOLEAN_ARRAY = "boolean[]",
+  BOOLEAN_ARRAY_NULLABLE = "boolean[]?",
+  
+  // Arrays with nullable elements
+  STRING_OR_NULL_ARRAY = "string?[]",
+  STRING_OR_NULL_ARRAY_NULLABLE = "string?[]?",
+  INT_OR_NULL_ARRAY = "int?[]",
+  INT_OR_NULL_ARRAY_NULLABLE = "int?[]?",
+  FLOAT_OR_NULL_ARRAY = "float?[]",
+  FLOAT_OR_NULL_ARRAY_NULLABLE = "float?[]?",
+  DECIMAL_OR_NULL_ARRAY = "decimal?[]",
+  DECIMAL_OR_NULL_ARRAY_NULLABLE = "decimal?[]?",
+  BOOLEAN_OR_NULL_ARRAY = "boolean?[]",
+  BOOLEAN_OR_NULL_ARRAY_NULLABLE = "boolean?[]?"
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/dataMapping.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/dataMapping.ts
index 86c291ac26d..ab3aa1e1876 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/dataMapping.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/dataMapping.ts
@@ -16,50 +16,167 @@
  * under the License.
  */
 
-import { createFunctionSignature, DataMappingRecord, GenerateTypesFromRecordRequest, GenerateTypesFromRecordResponse, getSource, ImportInfo } from "@wso2/ballerina-core";
+import { AllDataMapperSourceRequest, Attachment, CodeData, ComponentInfo, createFunctionSignature, CreateTempFileRequest, DataMapperMetadata, DatamapperModelContext, DataMapperModelResponse, DataMappingRecord, DiagnosticList, DMModel, EnumType, ExistingFunctionMatchResult, ExtendedDataMapperMetadata, ExtractMappingDetailsRequest, ExtractMappingDetailsResponse, GenerateTypesFromRecordRequest, GenerateTypesFromRecordResponse, getSource, ImportInfo, ImportStatements, InlineMappingsSourceResult, IORoot, IOTypeField, LinePosition, Mapping, MappingParameters, MetadataWithAttachments, ModuleSummary, PackageSummary, ProjectComponentsResponse, ProjectSource, RecordType, RepairCodeParams, repairCodeRequest, SourceFile, SyntaxTree, TempDirectoryPath } from "@wso2/ballerina-core";
 import { camelCase } from "lodash";
 import path from "path";
 import * as fs from 'fs';
 import * as os from 'os';
-import { typesFileParameterDefinitions } from "../../rpc-managers/ai-panel/utils";
+import { Uri } from "vscode";
+import { extractRecordTypeDefinitionsFromFile, generateMappingExpressionsFromModel, repairSourceFilesWithAI } from "../../rpc-managers/ai-panel/utils";
 import { writeBallerinaFileDidOpenTemp } from "../../utils/modification";
-import { PrimitiveType } from "../../../src/rpc-managers/ai-panel/constants";
+import { ExtendedLangClient, NOT_SUPPORTED } from "../../core";
+import { DefaultableParam, FunctionDefinition, IncludedRecordParam, ModulePart, RequiredParam, RestParam, STKindChecker, STNode } from "@wso2/syntax-tree";
+import { addMissingRequiredFields, attemptRepairProject, checkProjectDiagnostics } from "../../../src/rpc-managers/ai-panel/repair-utils";
+import { NullablePrimitiveType, PrimitiveArrayType, PrimitiveType } from "./constants";
+import { INVALID_RECORD_REFERENCE } from "../../../src/views/ai-panel/errorCodes";
+import { PackageInfo, TypesGenerationResult } from "./service/datamapper/types";
+import { URI } from "vscode-uri";
+import { getAllDataMapperSource } from "./service/datamapper/datamapper";
+import { StateMachine } from "../../stateMachine";
 
-// Generate Ballerina types from a record request
-export async function generateTypeCreation(
-  request: GenerateTypesFromRecordRequest
-): Promise<GenerateTypesFromRecordResponse> {
-    const file = request.attachment && request.attachment.length > 0
-        ? request.attachment[0]
-        : undefined;
+// Set to false to include mappings with default values
+const OMIT_DEFAULT_MAPPINGS_ENABLED = true;
+
+// ================================================================================================
+// Utility Functions - Type checking and validation helpers
+// ================================================================================================
+
+const isPrimitiveType = (type: string): boolean => {
+  return Object.values(PrimitiveType).includes(type as PrimitiveType);
+};
+
+const isNullablePrimitiveType = (type: string): boolean => {
+  return Object.values(NullablePrimitiveType).includes(type as NullablePrimitiveType);
+};
+
+const isPrimitiveArrayType = (type: string): boolean => {
+  if (Object.values(PrimitiveArrayType).includes(type as PrimitiveArrayType)) {
+    return true;
+  }
+
+  const unionArrayPattern = /^\(([^)]+)\)\[\](\?)?$/;
+  const match = type.match(unionArrayPattern);
+
+  if (match) {
+    const unionTypes = match[1].split('|').map(t => t.trim());
+    return unionTypes.every(unionType =>
+      isPrimitiveType(unionType) || isNullablePrimitiveType(unionType)
+    );
+  }
+  return false;
+};
+
+const isAnyPrimitiveType = (type: string): boolean => {
+  return isPrimitiveType(type) || isNullablePrimitiveType(type) || isPrimitiveArrayType(type);
+};
+
+// ================================================================================================
+// Common Data Mapper Functions - Shared utilities for all mapping processes
+// ================================================================================================
+
+export async function createTempDataMappingFile(params: CreateTempFileRequest): Promise<string> {
+  let funcSource: string;
 
-    const updatedSource = await typesFileParameterDefinitions(file);
-    if (typeof updatedSource !== 'string') {
-        throw new Error(`Failed to generate types: ${JSON.stringify(updatedSource)}`);
+  if (!params.hasMatchingFunction) {
+    if (params.inputs && params.output && params.functionName && params.inputNames) {
+      funcSource = createDataMappingFunctionSource(
+        params.inputs,
+        params.output,
+        params.functionName,
+        params.inputNames
+      );
     }
+  }
+
+  const tempFilePath = await createTempBallerinaFile(
+    params.tempDir,
+    params.filePath,
+    funcSource,
+    params.imports,
+    params.hasMatchingFunction
+  );
 
-    return Promise.resolve({ typesCode: updatedSource });
+  return tempFilePath;
 }
 
-// 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[]
+export async function createCustomFunctionsFile(
+  tempDir: string,
+  customFunctions: Mapping[]
 ): Promise<string> {
-  const funcSource = createDataMappingFunctionSource(inputs, output, functionName, inputNames);
-  const tempFilePath = await createTempBallerinaFile(projectRoot, funcSource, imports);
-  return tempFilePath;
+  let functionsSource = customFunctions
+    .map(f => f.functionContent)
+    .filter(Boolean)
+    .join('\n\n');
+
+  const customFunctionsFilePath = path.join(tempDir, "functions.bal");
+  let existingContent = "";
+  if (fs.existsSync(customFunctionsFilePath)) {
+    existingContent = fs.readFileSync(customFunctionsFilePath, 'utf8');
+  }
+
+  functionsSource = existingContent + "\n\n" + functionsSource;
+
+  writeBallerinaFileDidOpenTemp(customFunctionsFilePath, functionsSource);
+  return customFunctionsFilePath;
+}
+
+// Helper function to recursively find all .bal files in a directory
+function findBalFilesInDirectory(dir: string): string[] {
+  let balFiles: string[] = [];
+
+  try {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+
+      // Skip node_modules, target, and hidden directories
+      if (entry.isDirectory() && !entry.name.startsWith('.') &&
+          entry.name !== 'node_modules' && entry.name !== 'target') {
+        balFiles = balFiles.concat(findBalFilesInDirectory(fullPath));
+      } else if (entry.isFile() && entry.name.endsWith('.bal')) {
+        balFiles.push(fullPath);
+      }
+    }
+  } catch (error) {
+    // If directory cannot be read, return empty array
+    console.error(`Error reading directory ${dir}:`, error);
+  }
+
+  return balFiles;
+}
+
+export async function getFunctionDefinitionFromSyntaxTree(
+  langClient: ExtendedLangClient,
+  filePath: string,
+  functionName: string
+): Promise<FunctionDefinition | null> {
+  const st = (await langClient.getSyntaxTree({
+    documentIdentifier: {
+      uri: Uri.file(filePath).toString(),
+    },
+  })) as SyntaxTree;
+
+  const modulePart = st.syntaxTree as ModulePart;
+
+  for (const member of modulePart.members) {
+    if (STKindChecker.isFunctionDefinition(member)) {
+      const funcDef = member as FunctionDefinition;
+      if (funcDef.functionName?.value === functionName) {
+        return funcDef;
+      }
+    }
+  }
+
+  return null;
 }
 
-// Create a temporary Ballerina file with optional imports
 async function createTempBallerinaFile(
-  projectRoot: string,
-  funcSource: string,
-  imports?: ImportInfo[]
+  tempDir: string,
+  filePath: string,
+  funcSource?: string,
+  imports?: ImportInfo[],
+  functionExists?: boolean
 ): Promise<string> {
   let fullSource = funcSource;
 
@@ -72,17 +189,62 @@ async function createTempBallerinaFile(
     fullSource = `${importsString}\n\n${funcSource}`;
   }
 
+  const tempTestFilePath = path.join(tempDir, filePath);
+
+  let existingContent = "";
+  if (fs.existsSync(tempTestFilePath)) {
+    existingContent = fs.readFileSync(tempTestFilePath, 'utf8');
+  }
+
+  if (!functionExists) {
+    if (!funcSource) {
+      fullSource = existingContent;
+    } else {
+      fullSource = existingContent + "\n\n" + fullSource;
+    }
+  } else {
+    fullSource = existingContent;
+  }
+  writeBallerinaFileDidOpenTemp(tempTestFilePath, fullSource);
+  return tempTestFilePath;
+}
+
+export async function createTempBallerinaDir(): Promise<string> {
+  const projectRoot = StateMachine.context().projectUri;
+  const randomNum = Math.floor(Math.random() * 90000) + 10000;
   const tempDir = fs.mkdtempSync(
-    path.join(os.tmpdir(), "ballerina-data-mapping-temp-")
+    path.join(os.tmpdir(), `ballerina-data-mapping-${randomNum}-`)
   );
   fs.cpSync(projectRoot, tempDir, { recursive: true });
-  const tempTestFilePath = path.join(tempDir, "temp.bal");
-  writeBallerinaFileDidOpenTemp(tempTestFilePath, fullSource);
+  return tempDir;
+}
 
-  return tempTestFilePath;
+export async function repairCodeWithLLM(codeRepairRequest: repairCodeRequest): Promise<ProjectSource> {
+  if (!codeRepairRequest) {
+    throw new Error("Code repair request is required");
+  }
+
+  if (!codeRepairRequest.sourceFiles || codeRepairRequest.sourceFiles.length === 0) {
+    throw new Error("Source files are required for code repair");
+  }
+
+  const repairedSourceFiles = await repairSourceFilesWithAI(codeRepairRequest);
+
+  for (const repairedFile of repairedSourceFiles) {
+    try {
+      writeBallerinaFileDidOpenTemp(
+        repairedFile.filePath,
+        repairedFile.content
+      );
+    } catch (error) {
+      console.error(`Error processing file ${repairedFile.filePath}:`, error);
+    }
+  }
+
+  const projectSourceResponse = { sourceFiles: repairedSourceFiles, projectName: "" };
+  return projectSourceResponse;
 }
 
-// Generate the Ballerina source for a data mapping function
 export function createDataMappingFunctionSource(
   inputParams: DataMappingRecord[],
   outputParam: DataMappingRecord,
@@ -106,7 +268,6 @@ export function createDataMappingFunctionSource(
   return getSource(modification);
 }
 
-// Generate parameters string for function signature
 function buildParametersString(
   inputParams: DataMappingRecord[],
   inputNames: string[]
@@ -120,7 +281,6 @@ function buildParametersString(
     .join(", ");
 }
 
-// Generate a default parameter name for primitives and custom types
 function getDefaultParamName(type: string, isArray: boolean): string {
   const processedType = processType(type);
 
@@ -140,7 +300,6 @@ function getDefaultParamName(type: string, isArray: boolean): string {
   }
 }
 
-// Extract the actual type name from a fully qualified type
 function processType(type: string): string {
   let typeName = type.includes("/") ? type.split("/").pop()! : type;
 
@@ -152,7 +311,6 @@ function processType(type: string): string {
   return typeName;
 }
 
-// Format a single function parameter
 function formatParameter(
   item: DataMappingRecord,
   paramName: string
@@ -160,9 +318,1227 @@ function formatParameter(
   return `${processType(item.type)}${item.isArray ? "[]" : ""} ${paramName}`;
 }
 
-// Generate return type string
 function buildReturnTypeString(outputParam: DataMappingRecord): string {
-  return `returns ${processType(outputParam.type)}${
-    outputParam.isArray ? "[]" : ""
-  }`;
+  return `returns ${processType(outputParam.type)}${outputParam.isArray ? "[]" : ""
+    }`;
+}
+
+export async function generateDataMapperModel(
+  params: DatamapperModelContext,
+  langClient: ExtendedLangClient,
+  context: any
+): Promise<DataMapperModelResponse> {
+  let filePath: string;
+  let identifier: string;
+  let dataMapperMetadata: DataMapperMetadata;
+
+  if (params && params.documentUri && params.identifier) {
+    filePath = params.documentUri;
+    identifier = params.identifier;
+    dataMapperMetadata = params.dataMapperMetadata;
+  } else {
+    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.hasOwnProperty('node') ||
+    dataMapperMetadata.codeData.node !== "VARIABLE") {
+    const fileUri = Uri.file(filePath).toString();
+    const fnSTByRange = await 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 langClient
+    .getDataMapperMappings({
+      filePath,
+      codedata: dataMapperMetadata.codeData,
+      targetField: identifier,
+      position: position
+    }) as DataMapperModelResponse;
+
+  if (!dataMapperModel) {
+    console.error('DataMapperModel is undefined', dataMapperModel);
+    throw new Error('Failed to retrieve DataMapperModel from language client');
+  }
+
+  let mappingsModel = ensureUnionRefs(dataMapperModel.mappingsModel as DMModel);
+  mappingsModel = normalizeRefs(mappingsModel);
+  mappingsModel = omitDefaultMappings(mappingsModel, OMIT_DEFAULT_MAPPINGS_ENABLED);
+
+  if (mappingsModel.subMappings && mappingsModel.subMappings.length > 0) {
+    mappingsModel.subMappings = await processSubMappings(
+      mappingsModel.subMappings as IORoot[],
+      filePath,
+      dataMapperMetadata.codeData,
+      langClient,
+      position
+    );
+  }
+
+  return { mappingsModel };
+}
+
+export async function createTempFileAndGenerateMetadata(params: CreateTempFileRequest, langClient: ExtendedLangClient, context: any): Promise<ExtendedDataMapperMetadata> {
+  let filePath = await createTempDataMappingFile(params);
+
+  if (!params.metadata || Object.keys(params.metadata).length === 0) {
+    const funcDefinitionNode = await getFunctionDefinitionFromSyntaxTree(
+      langClient,
+      filePath,
+      params.functionName
+    );
+
+    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 generateDataMapperModel(
+      {
+        documentUri: filePath,
+        identifier: params.functionName,
+        dataMapperMetadata: dataMapperMetadata
+      },
+      langClient,
+      context
+    );
+
+    return {
+      mappingsModel: dataMapperModel.mappingsModel as DMModel,
+      name: params.functionName,
+      codeData: dataMapperMetadata.codeData
+    };
+  }
+
+  const updatedMetadata = {
+    ...params.metadata,
+    codeData: {
+      ...params.metadata.codeData,
+      lineRange: {
+        ...params.metadata.codeData.lineRange,
+        fileName: filePath
+      }
+    }
+  };
+
+  return {
+    mappingsModel: updatedMetadata.mappingsModel,
+    name: params.functionName || updatedMetadata.name,
+    codeData: updatedMetadata.codeData
+  };
+}
+
+export async function generateMappings(
+  metadataWithAttachments: MetadataWithAttachments,
+  context: any
+): Promise<AllDataMapperSourceRequest> {
+  const targetFilePath = metadataWithAttachments.metadata.codeData.lineRange.fileName || context.documentUri;
+
+  const optionalMappingInstructionFile = metadataWithAttachments.attachments && metadataWithAttachments.attachments.length > 0
+    ? metadataWithAttachments.attachments[0]
+    : undefined;
+
+  const generatedMappings = await generateMappingExpressionsFromModel(metadataWithAttachments.metadata.mappingsModel as DMModel, optionalMappingInstructionFile);
+
+  const customFunctionMappings = generatedMappings.filter(mapping => mapping.isFunctionCall);
+  let customFunctionsFilePath: string | undefined;
+
+  if (customFunctionMappings.length > 0) {
+    let tempDirectory = path.dirname(metadataWithAttachments.metadata.codeData.lineRange.fileName);
+    customFunctionsFilePath = await createCustomFunctionsFile(
+      tempDirectory,
+      customFunctionMappings
+    );
+  }
+
+  const allMappingsRequest: AllDataMapperSourceRequest = {
+    filePath: targetFilePath,
+    codedata: metadataWithAttachments.metadata.codeData,
+    varName: metadataWithAttachments.metadata.name,
+    position: {
+      line: metadataWithAttachments.metadata.codeData.lineRange.startLine.line,
+      offset: metadataWithAttachments.metadata.codeData.lineRange.startLine.offset
+    },
+    mappings: generatedMappings,
+    customFunctionsFilePath
+  };
+
+  return allMappingsRequest;
+}
+
+// ================================================================================================
+// DMModel Optimization - Functions for processing and optimizing data mapper models
+// ================================================================================================
+function ensureUnionRefs(model: DMModel): DMModel {
+  const processedModel = JSON.parse(JSON.stringify(model));
+  const unionRefs = new Map<string, any>();
+
+  interface FieldVisitor {
+    visitUnion(field: IOTypeField): void;
+    visitRecord(field: IOTypeField): void;
+    visitArray(field: IOTypeField): void;
+    visitField(field: IOTypeField): void;
+  }
+
+  class UnionRefCollector implements FieldVisitor {
+    visitUnion(field: IOTypeField): void {
+      if (field.ref) {
+        const refId = field.ref;
+
+        if (!processedModel.refs[refId] && !unionRefs.has(refId)) {
+          unionRefs.set(refId, {
+            members: field.members || [],
+            typeName: field.typeName,
+            kind: 'union'
+          });
+        }
+
+        field.members = [];
+      }
+    }
+
+    visitRecord(field: IOTypeField): void {
+      if (field.fields) {
+        this.visitFields(field.fields);
+      }
+    }
+
+    visitArray(field: IOTypeField): void {
+      if (field.member) {
+        this.visitField(field.member);
+      }
+    }
+
+    visitField(field: IOTypeField): void {
+      if (!field) { return; }
+
+      switch (field.kind) {
+        case 'union':
+          this.visitUnion(field);
+          break;
+        case 'record':
+          this.visitRecord(field);
+          break;
+        case 'array':
+          this.visitArray(field);
+          break;
+      }
+
+      if (field.members && Array.isArray(field.members)) {
+        field.members.forEach(member => this.visitField(member));
+      }
+
+      if (field.member && field.kind !== 'array') {
+        this.visitField(field.member);
+      }
+    }
+
+    visitFields(fields: IOTypeField[]): void {
+      if (!fields || !Array.isArray(fields)) { return; }
+
+      for (const field of fields) {
+        this.visitField(field);
+      }
+    }
+  }
+
+  class UnionMemberClearer implements FieldVisitor {
+    visitUnion(field: IOTypeField): void {
+      if (field.ref && field.members) {
+        field.members = [];
+      }
+    }
+
+    visitRecord(field: IOTypeField): void {
+      if (field.fields) {
+        this.visitFields(field.fields);
+      }
+    }
+
+    visitArray(field: IOTypeField): void {
+      if (field.member) {
+        this.visitField(field.member);
+      }
+    }
+
+    visitField(field: IOTypeField): void {
+      if (!field || typeof field !== 'object') { return; }
+
+      if (Array.isArray(field)) {
+        field.forEach(item => this.visitField(item));
+        return;
+      }
+
+      switch (field.kind) {
+        case 'union':
+          this.visitUnion(field);
+          break;
+        case 'record':
+          this.visitRecord(field);
+          break;
+        case 'array':
+          this.visitArray(field);
+          break;
+      }
+
+      for (const key of Object.keys(field)) {
+        if (typeof field[key] === 'object') {
+          this.visitField(field[key]);
+        }
+      }
+    }
+
+    visitFields(fields: IOTypeField[]): void {
+      if (!fields || !Array.isArray(fields)) { return; }
+
+      for (const field of fields) {
+        this.visitField(field);
+      }
+    }
+  }
+
+  const collector = new UnionRefCollector();
+
+  if (processedModel.inputs) {
+    collector.visitFields(processedModel.inputs);
+  }
+
+  if (processedModel.output) {
+    if (processedModel.output.fields) {
+      collector.visitFields(processedModel.output.fields);
+    } else {
+      collector.visitField(processedModel.output);
+    }
+  }
+
+  if (processedModel.subMappings) {
+    collector.visitFields(processedModel.subMappings);
+  }
+
+  if (processedModel.refs) {
+    for (const refKey of Object.keys(processedModel.refs)) {
+      const refObj = processedModel.refs[refKey];
+      if (refObj.fields) {
+        collector.visitFields(refObj.fields);
+      } else if (refObj.members) {
+        refObj.members.forEach((member: IOTypeField) => collector.visitField(member));
+      }
+    }
+  }
+
+  unionRefs.forEach((unionRef, refId) => {
+    if (!processedModel.refs[refId]) {
+      processedModel.refs[refId] = unionRef;
+    }
+  });
+
+  const clearer = new UnionMemberClearer();
+
+  clearer.visitField(processedModel.inputs);
+  clearer.visitField(processedModel.output);
+  if (processedModel.subMappings) {
+    clearer.visitField(processedModel.subMappings);
+  }
+
+  if (processedModel.refs) {
+    for (const refKey of Object.keys(processedModel.refs)) {
+      const refObj = processedModel.refs[refKey];
+      if (refObj.kind === 'record' && refObj.fields) {
+        clearer.visitField(refObj.fields);
+      }
+    }
+  }
+
+  return processedModel;
+}
+
+export function normalizeRefs(model: DMModel): DMModel {
+  const processedModel: DMModel = JSON.parse(JSON.stringify(model));
+
+  function removeRef(field: IOTypeField) {
+    if (!field || typeof field !== 'object') { return; }
+
+    delete field.ref;
+
+    if (field.member) { removeRef(field.member); }
+    if (Array.isArray(field.members)) { field.members.forEach(removeRef); }
+    if ((field as IOTypeField).fields && Array.isArray((field as IOTypeField).fields)) {
+      (field as IOTypeField).fields.forEach(removeRef);
+    }
+  }
+
+  if (processedModel.inputs) { processedModel.inputs.forEach(removeRef); }
+
+  if (processedModel.output) { removeRef(processedModel.output); }
+
+  if (processedModel.subMappings) {
+    processedModel.subMappings.forEach((sub) => removeRef(sub as IOTypeField));
+  }
+
+  const newRefs: Record<string, RecordType | EnumType> = {};
+  if (processedModel.refs) {
+    for (const refObj of Object.values(processedModel.refs)) {
+      const typeName = (refObj as RecordType).typeName;
+      if (typeName) {
+        if ((refObj as RecordType).fields) {
+          (refObj as RecordType).fields.forEach(removeRef);
+        }
+        newRefs[typeName] = refObj as RecordType | EnumType;
+      }
+    }
+  }
+
+  processedModel.refs = newRefs;
+
+  return processedModel;
+}
+
+export function omitDefaultMappings(model: DMModel, enabled: boolean = true): DMModel {
+  if (!enabled || !model.mappings || !Array.isArray(model.mappings)) {
+    return model;
+  }
+
+  const processedModel: DMModel = JSON.parse(JSON.stringify(model));
+
+  processedModel.mappings = processedModel.mappings.filter((mapping: Mapping) => {
+    if (!mapping.inputs || !Array.isArray(mapping.inputs)) {
+      return true;
+    }
+    return mapping.inputs.length > 0;
+  });
+
+  return processedModel;
+}
+
+async function processSubMappings(
+  subMappings: IORoot[],
+  filePath: string,
+  codeData: CodeData,
+  langClient: ExtendedLangClient,
+  position?: LinePosition
+): Promise<Mapping[]> {
+  const allSubMappings: Mapping[] = [];
+
+  for (const subMapping of subMappings) {
+    const subMappingCodeData = await langClient.getSubMappingCodedata({
+      filePath,
+      codedata: codeData,
+      view: (subMapping as IORoot).name
+    });
+
+    const subMappingModel = await langClient.getDataMapperMappings({
+      filePath,
+      codedata: subMappingCodeData.codedata,
+      targetField: (subMapping as IORoot).name,
+      position: position
+    }) as DataMapperModelResponse;
+
+    if (subMappingModel.mappingsModel &&
+      'mappings' in subMappingModel.mappingsModel &&
+      subMappingModel.mappingsModel.mappings) {
+      allSubMappings.push(...subMappingModel.mappingsModel.mappings);
+    }
+  }
+
+  return allSubMappings;
+}
+
+// ================================================================================================
+// Mapping Details Extraction - Functions for extracting and validating mapping parameters
+// ================================================================================================
+
+export async function extractMappingDetails(
+  params: ExtractMappingDetailsRequest,
+  langClient: ExtendedLangClient
+): Promise<ExtractMappingDetailsResponse> {
+  const { parameters, recordMap, allImports, existingFunctions } = params;
+  const importsMap: Record<string, ImportInfo> = {};
+  let inputParams: string[];
+  let outputParam: string;
+  let inputNames: string[] = [];
+
+  const existingFunctionMatch = await processExistingFunctions(
+    existingFunctions,
+    parameters.functionName,
+    langClient
+  );
+
+  const hasProvidedRecords = parameters.inputRecord.length > 0 || parameters.outputRecord !== "";
+
+  if (hasProvidedRecords) {
+    if (existingFunctionMatch.match) {
+      throw new Error(
+        `"${parameters.functionName}" function already exists. Please provide a valid function name.`
+      );
+    }
+    inputParams = parameters.inputRecord;
+    outputParam = parameters.outputRecord;
+  } else {
+    if (!existingFunctionMatch.match || !existingFunctionMatch.functionDefNode) {
+      throw new Error(
+        `"${parameters.functionName}" function was not found. Please provide a valid function name.`
+      );
+    }
+
+    const funcNode = existingFunctionMatch.functionDefNode;
+    const params = funcNode.functionSignature.parameters?.filter(
+      (param): param is RequiredParam | DefaultableParam | RestParam | IncludedRecordParam =>
+        param.kind !== 'CommaToken'
+    ) ?? [];
+
+    inputParams = params.map(param => (param.typeName.source || "").trim());
+    inputNames = params.map(param => (param.paramName.value || "").trim());
+    outputParam = (funcNode.functionSignature.returnTypeDesc.type.source || "").trim();
+  }
+
+  const inputs = processInputs(inputParams, recordMap, allImports, importsMap);
+  const output = processOutput(outputParam, recordMap, allImports, importsMap);
+
+  return {
+    inputs,
+    output,
+    inputParams,
+    outputParam,
+    imports: Object.values(importsMap),
+    inputNames,
+    existingFunctionMatch,
+  };
+}
+
+// Processes existing functions to find a matching function by name
+export async function processExistingFunctions(
+  existingFunctions: ComponentInfo[],
+  functionName: string,
+  langClient: ExtendedLangClient
+): Promise<ExistingFunctionMatchResult> {
+  for (const func of existingFunctions) {
+    const filePath = func.filePath;
+    const fileName = filePath.split("/").pop();
+
+    const funcDefNode = await getFunctionDefinitionFromSyntaxTree(langClient, filePath, functionName);
+    if (funcDefNode) {
+      return {
+        match: true,
+        matchingFunctionFile: fileName,
+        functionDefNode: funcDefNode,
+      };
+    } else {
+      continue;
+    }
+  }
+
+  return {
+    match: false,
+    matchingFunctionFile: null,
+    functionDefNode: null,
+  };
+}
+
+// Process input parameters
+export function processInputs(
+  inputParams: string[],
+  recordMap: Record<string, DataMappingRecord>,
+  allImports: ImportInfo[],
+  importsMap: Record<string, ImportInfo>
+) {
+  let results = inputParams.map((param: string) =>
+    processRecordReference(param, recordMap, allImports, importsMap)
+  );
+  return results.filter((result): result is DataMappingRecord => {
+    if (result instanceof Error) {
+      throw INVALID_RECORD_REFERENCE;
+    }
+    return true;
+  });
+}
+
+// Process Output parameters
+export function processOutput(
+  outputParam: string,
+  recordMap: Record<string, DataMappingRecord>,
+  allImports: ImportInfo[],
+  importsMap: Record<string, ImportInfo>
+) {
+  const outputResult = processRecordReference(outputParam, recordMap, allImports, importsMap);
+  if (outputResult instanceof Error) {
+    throw INVALID_RECORD_REFERENCE;
+  }
+  return outputResult;
+}
+
+// Validate and register an imported type in the imports map
+function registerImportedType(
+  typeName: string,
+  allImports: ImportInfo[],
+  importsMap: Record<string, ImportInfo>
+): void {
+  if (!typeName.includes("/")) {
+    const [moduleName, recName] = typeName.split(":");
+    const matchedImport = allImports.find((imp) => {
+      if (imp.alias) {
+        return typeName.startsWith(imp.alias);
+      }
+      const moduleNameParts = imp.moduleName.split(/[./]/);
+      const inferredAlias = moduleNameParts[moduleNameParts.length - 1];
+      return typeName.startsWith(inferredAlias);
+    });
+
+    if (!matchedImport) {
+      throw new Error(`Import not found for: ${typeName}`);
+    }
+    importsMap[typeName] = {
+      moduleName: matchedImport.moduleName,
+      alias: matchedImport.alias,
+      recordName: recName,
+    };
+  } else {
+    const [moduleName, recName] = typeName.split(":");
+    importsMap[typeName] = {
+      moduleName: moduleName,
+      recordName: recName,
+    };
+  }
+}
+
+// Validate that a type exists as either a primitive, local record, or imported type
+function validateTypeExists(
+  typeName: string,
+  recordMap: Record<string, DataMappingRecord>,
+  allImports: ImportInfo[],
+  importsMap: Record<string, ImportInfo>
+): void {
+  if (isAnyPrimitiveType(typeName)) {
+    return;
+  }
+
+  const cleanedType = typeName.replace(/\[\]$/, "");
+  if (recordMap[cleanedType]) {
+    return;
+  }
+
+  if (cleanedType.includes(":")) {
+    registerImportedType(cleanedType, allImports, importsMap);
+    return;
+  }
+
+  throw new Error(`${cleanedType} is not defined.`);
+}
+
+// Process and validate a union type, returning its data mapping record
+function processUnionType(
+  unionTypeString: string,
+  recordMap: Record<string, DataMappingRecord>,
+  allImports: ImportInfo[],
+  importsMap: Record<string, ImportInfo>
+): DataMappingRecord {
+  const unionTypes = unionTypeString.split("|").map(t => t.trim());
+
+  for (const unionType of unionTypes) {
+    validateTypeExists(unionType, recordMap, allImports, importsMap);
+  }
+
+  return { type: unionTypeString, isArray: false, filePath: null };
+}
+
+// Process and validate a single type reference, returning its data mapping record
+function processSingleType(
+  typeName: string,
+  recordMap: Record<string, DataMappingRecord>,
+  allImports: ImportInfo[],
+  importsMap: Record<string, ImportInfo>
+): DataMappingRecord {
+  if (isAnyPrimitiveType(typeName)) {
+    return { type: typeName, isArray: false, filePath: null };
+  }
+
+  const isArray = typeName.endsWith("[]") && !isPrimitiveArrayType(typeName);
+  const cleanedRecordName = isArray ? typeName.replace(/\[\]$/, "") : typeName;
+
+  const rec = recordMap[cleanedRecordName];
+
+  if (rec) {
+    return { ...rec, isArray };
+  }
+
+  if (cleanedRecordName.includes(":")) {
+    registerImportedType(cleanedRecordName, allImports, importsMap);
+    return { type: typeName, isArray, filePath: null };
+  }
+
+  throw new Error(`${cleanedRecordName} is not defined.`);
+}
+
+// Process a record type reference and validate it exists, handling both union and single types
+export function processRecordReference(
+  recordName: string,
+  recordMap: Record<string, DataMappingRecord>,
+  allImports: ImportInfo[],
+  importsMap: Record<string, ImportInfo>
+): DataMappingRecord {
+  const trimmedRecordName = recordName.trim();
+
+  if (trimmedRecordName.includes("|")) {
+    return processUnionType(trimmedRecordName, recordMap, allImports, importsMap);
+  }
+
+  return processSingleType(trimmedRecordName, recordMap, allImports, importsMap);
+}
+
+// ================================================================================================
+// Code Repair, Diagnostics, and Mapping Generation
+// ================================================================================================
+
+export async function repairAndCheckDiagnostics(
+  langClient: ExtendedLangClient,
+  projectRoot: string,
+  params: TempDirectoryPath
+): Promise<DiagnosticList> {
+  const targetDir = params.tempDir && params.tempDir.trim() !== "" ? params.tempDir : projectRoot;
+
+  let diagnostics = await attemptRepairProject(langClient, targetDir);
+
+  // Add missing required fields and recheck diagnostics
+  let isDiagsChanged = await addMissingRequiredFields(diagnostics, langClient);
+  if (isDiagsChanged) {
+    diagnostics = await checkProjectDiagnostics(langClient, targetDir);
+  }
+
+  const filteredDiagnostics = diagnostics.filter(diag =>
+    params.filePaths.some(filePath => diag.uri.includes(filePath))
+  );
+
+  return { diagnosticsList: filteredDiagnostics };
+}
+
+// ================================================================================================
+// processInlineMappings - Functions for processing inline mapping parameters
+// ================================================================================================
+
+export async function generateInlineMappingsSource(
+  inlineMappingRequest: MetadataWithAttachments,
+  langClient: ExtendedLangClient,
+  context: any,
+): Promise<InlineMappingsSourceResult> {
+  if (!inlineMappingRequest) {
+    throw new Error("Inline mapping request is required");
+  }
+
+  if (!inlineMappingRequest.metadata) {
+    throw new Error("Metadata is required for inline mapping generation");
+  }
+
+  if (!inlineMappingRequest.metadata.codeData) {
+    throw new Error("Code data is required for inline mapping generation");
+  }
+
+  if (!langClient) {
+    throw new Error("Language client is required for inline mapping generation");
+  }
+
+  const targetFileName = inlineMappingRequest.metadata.codeData.lineRange.fileName;
+
+  if (!targetFileName) {
+    throw new Error("Target file name could not be determined from code data");
+  }
+
+  const tempDirectory = await createTempBallerinaDir();
+  const tempFileMetadata = await createTempFileAndGenerateMetadata(
+    {
+      tempDir: tempDirectory,
+      filePath: targetFileName,
+      metadata: inlineMappingRequest.metadata
+    },
+    langClient,
+    context
+  );
+
+  // Prepare mapping request payload
+  const mappingRequestPayload: MetadataWithAttachments = {
+    metadata: tempFileMetadata
+  };
+  if (inlineMappingRequest.attachments && inlineMappingRequest.attachments.length > 0) {
+    mappingRequestPayload.attachments = inlineMappingRequest.attachments;
+  }
+
+  // Generate mappings and source code
+  const allMappingsRequest = await generateMappings(
+    mappingRequestPayload,
+    context
+  );
+
+  const generatedSourceResponse = await getAllDataMapperSource(allMappingsRequest);
+
+  return {
+    sourceResponse: generatedSourceResponse,
+    allMappingsRequest,
+    tempFileMetadata,
+    tempDir: tempDirectory
+  };
+}
+
+// ================================================================================================
+// processContextTypeCreation - Functions for processing context type creation
+// ================================================================================================
+
+// Extract record types from Ballerina code
+export function extractRecordTypes(typesCode: string): { name: string; code: string }[] {
+  const recordPattern = /\b(?:public|private)?\s*type\s+(\w+)\s+record\s+(?:{[|]?|[|]?{)[\s\S]*?;?\s*[}|]?;/g;
+  const matches = [...typesCode.matchAll(recordPattern)];
+  return matches.map((match) => ({
+    name: match[1],
+    code: match[0].trim(),
+  }));
+}
+
+// Generate Ballerina record types from context attachments and validate against existing records
+export async function generateTypesFromContext(
+  sourceAttachments: Attachment[],
+  projectComponents: ProjectComponentsResponse
+): Promise<TypesGenerationResult> {
+  if (!sourceAttachments || sourceAttachments.length === 0) {
+    throw new Error("Source attachments are required for type generation");
+  }
+
+  if (!projectComponents) {
+    throw new Error("Project components are required for type generation");
+  }
+
+  const outputFileName = "types.bal";
+  const existingRecordTypesMap = new Map<string, DataMappingRecord>();
+
+  projectComponents.components.packages?.forEach((packageSummary: PackageSummary) => {
+    packageSummary.modules?.forEach((moduleSummary: ModuleSummary) => {
+      let baseFilePath = packageSummary.filePath;
+      if (moduleSummary.name !== undefined) {
+        baseFilePath += `modules/${moduleSummary.name}/`;
+      }
+      moduleSummary.records.forEach((recordComponent: ComponentInfo) => {
+        const recordFilePath = baseFilePath + recordComponent.filePath;
+        existingRecordTypesMap.set(recordComponent.name, { type: recordComponent.name, isArray: false, filePath: recordFilePath });
+      });
+      moduleSummary.types.forEach((typeComponent: ComponentInfo) => {
+        const typeFilePath = baseFilePath + typeComponent.filePath;
+        existingRecordTypesMap.set(typeComponent.name, { type: typeComponent.name, isArray: false, filePath: typeFilePath });
+      });
+    });
+  });
+
+  // Generate type definitions from attachments
+  const typeGenerationRequest: GenerateTypesFromRecordRequest = {
+    attachment: sourceAttachments
+  };
+
+  const typeGenerationResponse = await generateTypeCreation(typeGenerationRequest);
+  const generatedTypesCode = typeGenerationResponse.typesCode;
+
+  return {
+    typesCode: generatedTypesCode,
+    filePath: outputFileName,
+    recordMap: existingRecordTypesMap
+  };
+}
+
+// Generate Ballerina record type definitions from an attachment file
+export async function generateTypeCreation(
+  typeGenerationRequest: GenerateTypesFromRecordRequest
+): Promise<GenerateTypesFromRecordResponse> {
+  const sourceFile = typeGenerationRequest.attachment?.[0];
+
+  const generatedTypeDefinitions = await extractRecordTypeDefinitionsFromFile(sourceFile);
+  if (typeof generatedTypeDefinitions !== 'string') {
+    throw new Error(`Failed to generate types: ${JSON.stringify(generatedTypeDefinitions)}`);
+  }
+
+  return { typesCode: generatedTypeDefinitions };
+}
+
+export function extractImports(content: string, filePath: string): ImportStatements {
+  const withoutSingleLineComments = content.replace(/\/\/.*$/gm, "");
+  const withoutComments = withoutSingleLineComments.replace(/\/\*[\s\S]*?\*\//g, "");
+
+  const importRegex = /import\s+([\w\.\/]+)(?:\s+as\s+([\w]+))?;/g;
+  const imports: ImportInfo[] = [];
+  let match;
+
+  while ((match = importRegex.exec(withoutComments)) !== null) {
+    const importStatement: ImportInfo = { moduleName: match[1] };
+    if (match[2]) {
+      importStatement.alias = match[2];
+    }
+    imports.push(importStatement);
+  }
+
+  return { filePath, statements: imports };
+}
+
+// ================================================================================================
+// Code Repair and Content Update - Functions for repairing code and getting updated content
+// ================================================================================================
+
+// Collect file paths for diagnostics checking
+function collectDiagnosticFilePaths(
+  tempFileMetadata: ExtendedDataMapperMetadata,
+  customFunctionsFilePath?: string
+): string[] {
+  const filePaths = [tempFileMetadata.codeData.lineRange.fileName];
+  if (customFunctionsFilePath) {
+    filePaths.push(customFunctionsFilePath);
+  }
+  return filePaths;
+}
+
+// Prepare source files for LLM repair
+function prepareSourceFilesForRepair(
+  mainFilePath: string,
+  mainContent: string,
+  customFunctionsFilePath: string | undefined,
+  customFunctionsContent: string
+): SourceFile[] {
+  const sourceFiles: SourceFile[] = [
+    {
+      filePath: mainFilePath,
+      content: mainContent,
+    }
+  ];
+
+  if (customFunctionsFilePath) {
+    sourceFiles.push({
+      filePath: customFunctionsFilePath,
+      content: customFunctionsContent,
+    });
+  }
+
+  return sourceFiles;
+}
+
+// Repair code and get updated content
+export async function repairCodeAndGetUpdatedContent(
+  params: RepairCodeParams,
+  langClient: ExtendedLangClient,
+  projectRoot: string
+): Promise<{ finalContent: string; customFunctionsContent: string }> {
+  
+  // Read main file content
+  let finalContent = fs.readFileSync(params.tempFileMetadata.codeData.lineRange.fileName, 'utf8');
+  
+  // Read custom functions content (only if path is provided)
+  let customFunctionsContent = params.customFunctionsFilePath 
+    ? await getCustomFunctionsContent(params.customFunctionsFilePath)
+    : '';
+
+  // Check and repair diagnostics
+  const diagnostics = await checkAndRepairDiagnostics(
+    params,
+    langClient,
+    projectRoot
+  );
+
+  // Repair with LLM if needed
+  if (diagnostics.diagnosticsList && diagnostics.diagnosticsList.length > 0) {
+    const result = await repairWithLLM(
+      params.tempFileMetadata,
+      finalContent,
+      params.customFunctionsFilePath,
+      customFunctionsContent,
+      diagnostics,
+      params.imports
+    );
+    finalContent = result.finalContent;
+    customFunctionsContent = result.customFunctionsContent;
+  }
+
+  return { finalContent, customFunctionsContent };
+}
+
+// Get custom functions content if file exists
+export async function getCustomFunctionsContent(
+  customFunctionsFilePath: string | undefined,
+): Promise<string> {
+  if (!customFunctionsFilePath) {
+    return "";
+  }
+  return fs.readFileSync(customFunctionsFilePath, 'utf8');
+}
+
+// Check diagnostics and attempt repair
+async function checkAndRepairDiagnostics(
+  params: RepairCodeParams,
+  langClient: ExtendedLangClient,
+  projectRoot: string
+): Promise<DiagnosticList> {
+  const diagnosticsParams: TempDirectoryPath = {
+    filePaths: collectDiagnosticFilePaths(params.tempFileMetadata, params.customFunctionsFilePath)
+  };
+
+  if (params.tempDir) {
+    diagnosticsParams.tempDir = params.tempDir;
+  }
+
+  return await repairAndCheckDiagnostics(langClient, projectRoot, diagnosticsParams);
+}
+
+// Repair code using LLM
+async function repairWithLLM(
+  tempFileMetadata: ExtendedDataMapperMetadata,
+  mainContent: string,
+  customFunctionsFilePath: string | undefined,
+  customFunctionsContent: string,
+  diagnostics: DiagnosticList,
+  imports: ImportInfo[]
+): Promise<{ finalContent: string; customFunctionsContent: string }> {
+  const sourceFiles = prepareSourceFilesForRepair(
+    tempFileMetadata.codeData.lineRange.fileName,
+    mainContent,
+    customFunctionsFilePath,
+    customFunctionsContent
+  );
+
+  await repairCodeWithLLM({sourceFiles, diagnostics, imports});
+
+  // Get updated content after repair
+  const finalContent = fs.readFileSync(tempFileMetadata.codeData.lineRange.fileName, 'utf8');
+  const updatedCustomFunctionsContent = await getCustomFunctionsContent(customFunctionsFilePath);
+
+  return {
+    finalContent,
+    customFunctionsContent: updatedCustomFunctionsContent
+  };
+}
+
+// ================================================================================================
+// processMappingParameters - Functions for processing mapping parameters
+// ================================================================================================
+
+// Build record map from project components
+export function buildRecordMap(
+  projectComponents: ProjectComponentsResponse,
+  moduleDirs: Map<string, string>
+): Map<string, DataMappingRecord> {
+  const recordMap = new Map<string, DataMappingRecord>();
+
+  for (const pkg of projectComponents.components.packages || []) {
+    for (const mod of pkg.modules || []) {
+      let filepath = URI.parse(pkg.filePath).fsPath;
+      if (mod.name !== undefined && moduleDirs.has(mod.name)) {
+        const modDir = moduleDirs.get(mod.name);
+        filepath += `${modDir}/${mod.name}/`;
+      }
+
+      mod.records.forEach((rec: ComponentInfo) => {
+        const recFilePath = filepath + rec.filePath;
+        recordMap.set(rec.name, { type: rec.name, isArray: false, filePath: recFilePath });
+      });
+    }
+  }
+
+  return recordMap;
+}
+
+// Collect existing functions from project components
+export function collectExistingFunctions(
+  projectComponents: ProjectComponentsResponse,
+  moduleDirs: Map<string, string>
+): ComponentInfo[] {
+  const existingFunctions: ComponentInfo[] = [];
+
+  for (const pkg of projectComponents.components.packages || []) {
+    for (const mod of pkg.modules || []) {
+      let filepath = URI.parse(pkg.filePath).fsPath;
+      if (mod.name !== undefined && moduleDirs.has(mod.name)) {
+        const modDir = moduleDirs.get(mod.name);
+        filepath += `${modDir}/${mod.name}/`;
+      }
+
+      mod.functions?.forEach((func: ComponentInfo) => {
+        existingFunctions.push({
+          name: func.name,
+          filePath: filepath + func.filePath,
+          startLine: func.startLine,
+          startColumn: func.startColumn,
+          endLine: func.endLine,
+          endColumn: func.endColumn
+        });
+      });
+    }
+  }
+
+  return existingFunctions;
+}
+
+// Get unique file paths from existing functions
+export function getUniqueFunctionFilePaths(existingFunctions: ComponentInfo[]): string[] {
+  return [...new Set(existingFunctions.map(func => func.filePath))];
+}
+
+// Collect module information that needs directory resolution
+export function collectModuleInfo(projectComponents: ProjectComponentsResponse): PackageInfo[] {
+  const moduleInfo: Array<{ moduleName: string; packageFilePath: string }> = [];
+
+  for (const pkg of projectComponents.components.packages || []) {
+    for (const mod of pkg.modules || []) {
+      if (mod.name !== undefined) {
+        moduleInfo.push({
+          moduleName: mod.name,
+          packageFilePath: pkg.filePath
+        });
+      }
+    }
+  }
+
+  return moduleInfo;
+}
+
+// Determine file path for mapping function
+export function determineMappingFilePath(
+  existingFunctionMatch: ExistingFunctionMatchResult,
+  activeFile: string,
+  projectRoot?: string
+): string {
+  if (existingFunctionMatch.match) {
+    return existingFunctionMatch.matchingFunctionFile;
+  } else if (activeFile && activeFile.endsWith(".bal")) {
+    return activeFile;
+  } else {
+    if (projectRoot) {
+      const allBalFiles = findBalFilesInDirectory(projectRoot);
+      if (allBalFiles.length > 0) {
+        return path.basename(allBalFiles[allBalFiles.length - 1]);
+      }
+    }
+
+    return null;
+  }
+}
+
+// Determine the file path for custom functions
+export function determineCustomFunctionsPath(
+  projectRoot: string,
+  activeFilePath?: string
+): string | null {
+  const functionsBalPath = path.join(projectRoot, "functions.bal");
+
+  if (fs.existsSync(functionsBalPath)) {
+    return functionsBalPath;
+  }
+
+  const allBalFiles = findBalFilesInDirectory(projectRoot);
+  
+  if (activeFilePath) {
+    const normalizedActiveFilePath = path.join(projectRoot, activeFilePath);
+    const otherBalFiles = allBalFiles.filter(file => file !== normalizedActiveFilePath);
+    
+    if (otherBalFiles.length > 0) {
+      return otherBalFiles[0];
+    }
+    if (otherBalFiles.length === 0) {
+      return allBalFiles[0];
+    }
+  } else {
+    if (allBalFiles.length > 0) {
+      return allBalFiles[0];
+    }
+  }
+
+  return null;
+}
+
+// Build file array for mapping results
+export function buildMappingFileArray(
+  filePath: string,
+  finalContent: string,
+  customFunctionsTargetPath?: string,
+  customFunctionsContent?: string
+): SourceFile[] {
+  const fileArray: SourceFile[] = [
+    {
+      filePath: filePath,
+      content: finalContent
+    }
+  ];
+
+  if (customFunctionsContent) {
+    fileArray.push({
+      filePath: customFunctionsTargetPath,
+      content: customFunctionsContent
+    });
+  }
+
+  return fileArray;
+}
+
+// Prepare mapping context with record map, functions, and mapping details for code generation
+export async function prepareMappingContext(
+  mappingParameters: MappingParameters,
+  availableRecordTypes: Map<string, DataMappingRecord>,
+  existingProjectFunctions: ComponentInfo[],
+  projectImports: ImportInfo[],
+  functionSourceContents: Map<string, string>,
+  currentActiveFileName: string,
+  langClient: ExtendedLangClient,
+  projectRoot?: string
+): Promise<{
+  recordMap: Map<string, DataMappingRecord>;
+  existingFunctions: ComponentInfo[];
+  mappingDetails: ExtractMappingDetailsResponse;
+  filePath: string;
+}> {
+  const extractedMappingDetails = await extractMappingDetails({
+    parameters: mappingParameters,
+    recordMap: Object.fromEntries(availableRecordTypes),
+    allImports: projectImports,
+    existingFunctions: existingProjectFunctions,
+    functionContents: Object.fromEntries(functionSourceContents)
+  }, langClient);
+
+  const targetFilePath = determineMappingFilePath(extractedMappingDetails.existingFunctionMatch, currentActiveFileName, projectRoot);
+
+  return {
+    recordMap: availableRecordTypes,
+    existingFunctions: existingProjectFunctions,
+    mappingDetails: extractedMappingDetails,
+    filePath: targetFilePath
+  };
 }
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 51275907843..d9adeb7bb7d 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
@@ -374,7 +374,7 @@ ${JSON.stringify(langlibs, null, 2)}
 - Do not add/modify toml files (Config.toml/Ballerina.toml/Dependencies.toml).
 - Prefer modifying existing bal files over creating new files unless explicitly asked to create a new file in the query.
 
-Begin your response with the very consice explanation. The explanation should contain a very high level the control flow decided in step 1 along with the how libraries are utilized.
+Begin your response with the very consice explanation in the same language as the user query. The explanation should contain a very high level the control flow decided in step 1 along with the how libraries are utilized.
 Once the explanation is finished, make the necessary File modifications. Avoid any usage guides or explanations after the file modifications.
 `;
 }
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 9c90006c062..471f102d90b 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/connection.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/connection.ts
@@ -92,6 +92,15 @@ export async function fetchWithAuth(input: string | URL | Request, options: Requ
             }
         }
 
+        // Handle usage limit exceeded
+        if (response.status === 429) {
+            console.log("Usage limit exceeded (429)");
+            const error = new Error("Usage limit exceeded. Please try again later.");
+            error.name = "UsageLimitError";
+            (error as any).statusCode = 429;
+            throw error;
+        }
+
         return response;
     } catch (error: any) {
         if (error?.message === "TOKEN_EXPIRED") {
@@ -111,9 +120,10 @@ export const getAnthropicClient = async (model: AnthropicModel): Promise<any> =>
 
     // Recreate client if login method has changed or no cached instance
     if (!cachedAnthropic || cachedAuthMethod !== loginMethod) {
+        let url = BACKEND_URL + "/intelligence-api/v1.0/claude";
         if (loginMethod === LoginMethod.BI_INTEL) {
             cachedAnthropic = createAnthropic({
-                baseURL: BACKEND_URL + "/intelligence-api/v1.0/claude",
+                baseURL: url,
                 apiKey: "xx", // dummy value; real auth is via fetchWithAuth
                 fetch: fetchWithAuth,
             });
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/codeRepairPrompt.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/codeRepairPrompt.ts
new file mode 100644
index 00000000000..2f820687694
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/codeRepairPrompt.ts
@@ -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.
+
+/**
+ * Generates the main data mapping prompt for AI
+ */
+export function getBallerinaCodeRepairPrompt(sourceFiles: string, diagnostics: string, imports: string): string {
+  return `You are an expert Ballerina programmer tasked with fixing compiler errors in Ballerina source code.
+
+# Context
+You have been provided with:
+1. Source files with Ballerina code that contains errors
+2. Diagnostic information (compiler errors and warnings)
+3. Import statements available in the project
+
+# Your Task
+Analyze the provided code and diagnostics, then generate corrected Ballerina source files that:
+- Fix all compiler errors identified in the diagnostics
+- Maintain the original code structure and logic as much as possible
+- Use correct Ballerina syntax and idioms
+- Ensure all function signatures, type definitions, and record field accesses are valid
+- Verify that all imported modules are used correctly
+- Follow Ballerina best practices and conventions
+
+# Input Data
+
+## Source Files:
+${sourceFiles}
+
+## Diagnostics (Errors and Warnings):
+${diagnostics}
+
+## Available Imports:
+${imports}
+
+# Instructions
+1. Carefully examine each diagnostic error and identify the root cause
+2. Check function signatures, return types, and parameter types against Ballerina documentation
+3. Verify record field access patterns are correct (use dot notation for required fields, optional chaining for optional fields)
+4. Ensure type compatibility in assignments and function calls
+5. Fix any syntax errors or misused language constructs
+6. Validate that all imported modules and their functions are used correctly
+7. Return the complete corrected source files with the same file paths
+
+# Output Format
+Return a JSON object with the following structure:
+{
+  "repairedFiles": [
+    {
+      "filePath": "path/to/file.bal",
+      "content": "// Complete corrected Ballerina code here"
+    }
+  ]
+}
+
+# Important Notes
+- Include ALL source files in your response, even if some don't have errors
+- Provide the COMPLETE file content, not just the changed portions
+- Ensure the code compiles without errors
+- Maintain code readability and formatting
+- Preserve all existing comments from the original code
+- Do NOT add any new comments or explanatory notes
+- Only fix the errors without adding documentation or explanations
+- Do not change the core logic or business requirements of the code
+
+Generate the repaired source files now.`;
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/constant.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/constant.ts
deleted file mode 100644
index 2de7e713fb2..00000000000
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/constant.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.
-
-// =============================================================================
-// OPERATION TYPE CONSTANTS
-// =============================================================================
-const DIRECT = "DIRECT";
-const LENGTH = "LENGTH";
-const SPLIT = "SPLIT";
-const ADDITION = "ADDITION";
-const SUBTRACTION = "SUBTRACTION";
-const MULTIPLICATION = "MULTIPLICATION";
-const DIVISION = "DIVISION";
-const MODULAR = "MODULAR";
-const EQUAL = "EQUAL";
-const NOTEQUAL = "NOTEQUAL";
-const LESS_THAN = "LESS_THAN";
-const LESS_THAN_OR_EQUAL = "LESS_THAN_OR_EQUAL";
-const AND = "AND";
-const OR = "OR";
-const REPLACE_ALL = "REPLACE_ALL";
-const AVERAGE = "AVERAGE";
-const MAXIMUM = "MAXIMUM";
-const MINIMUM = "MINIMUM";
-const SUMMATION = "SUMMATION";
-const ABSOLUTE = "ABSOLUTE";
-
-// Parameter constants
-const PARAMETER_1 = "PARAMETER_1";
-const PARAMETER_2 = "PARAMETER_2";
-const PARAMETER_3 = "PARAMETER_3";
-const NAME = "NAME";
-
-
-// =============================================================================
-// EXPORTS
-// =============================================================================
-
-// Export operation constants for external use
-export {
-    DIRECT,
-    LENGTH,
-    SPLIT,
-    ADDITION,
-    SUBTRACTION,
-    MULTIPLICATION,
-    DIVISION,
-    MODULAR,
-    EQUAL,
-    NOTEQUAL,
-    LESS_THAN,
-    LESS_THAN_OR_EQUAL,
-    AND,
-    OR,
-    REPLACE_ALL,
-    AVERAGE,
-    MAXIMUM,
-    MINIMUM,
-    SUMMATION,
-    ABSOLUTE,
-    PARAMETER_1,
-    PARAMETER_2,
-    PARAMETER_3,
-    NAME
-};
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/dataMappingPrompt.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/dataMappingPrompt.ts
new file mode 100644
index 00000000000..cd472c44060
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/dataMappingPrompt.ts
@@ -0,0 +1,138 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 main data mapping prompt for AI
+ */
+export function getDataMappingPrompt(DM_MODEL: string, userMappings: string, mappingTips: string, subMappings: string): string {
+  return `You are a specialized code generation assistant for the Ballerina programming language. Your task is to generate syntactically correct Ballerina expressions that transform input data fields into output data fields based on provided specifications.
+
+Here is the data model schema that defines the structure and types:
+${DM_MODEL}
+
+**User-Defined Mappings:**
+${userMappings}
+
+**Sub-Mappings (nested mappings or additional mapping context):**
+${subMappings}                                      
+
+**Mapping Context (These are mapping tips with HIGHEST PRIORITY):**
+${mappingTips}
+
+## Priority Hierarchy
+
+When generating mapping expressions, follow this strict order of priority:
+
+1. **User-defined mappings (mapping tips/mapping context)** - These have ABSOLUTE HIGHEST PRIORITY. Check these first and give them complete precedence over all other considerations.
+2. **Existing submappings** - If a submapping exists for the target output field, use the submapping's output name as a direct reference
+3. **Context and constraints** - Apply all provided business rules and transformation logic
+4. **Ballerina programming knowledge** - Use built-in functions and standard approaches
+5. **Default handling** - Only for non-optional fields when no other mapping is available
+
+## Technical Requirements
+
+### Schema and Type Handling
+- Use existing submappings within the data model schema when available
+- Use specific types defined in the schema - never use generic types like \`anydata\` or \`any\`
+- Use exact type names from the schema in custom function signatures
+- Ensure type compatibility between input and output fields
+- Only reference fields and symbols that exist in the schema
+- For imported package records, use only the package alias (the part after the colon)
+- **For nullable or optional types, always use \`string?\` format instead of \`string|()\`**
+
+### Field Access Rules
+- Use \`?.\` (safe access) only when the field is actually optional or nullable in the schema
+- Use \`.\` (dot notation) for accessing non-optional and non-nullable fields
+- When input and output are the same type, direct assignment is sufficient even for optional fields
+- When input and output are different types, apply appropriate transformation methods
+- For output field names, always use dot notation from the root level
+
+### Union Types and Enums
+- When either input field or output field is a union type or enum, create custom functions
+- For nested union types, create separate custom functions for each level of nesting
+- Each custom function should handle only one level of union complexity
+- Never handle nested unions inline - always create separate helper functions
+- Use exact type names from the schema in all custom function signatures
+
+### Mapping Strategy
+- Perform mapping at the field level, not at the record or array level
+- Break down complex structures and map their individual components
+- For arrays of records, analyze individual fields within those records
+- **Only** use query expressions with the pattern \`from var <element> in <input_array> select <field_mappings>\` when **both the input and output are arrays**. Otherwise, **do not use** this pattern.
+- For nested structures with unions, create record construction expressions that call appropriate custom functions
+
+### Regular Expression Operations
+- Use Ballerina's \`lang.regexp\` library for all regex operations: \`import ballerina/lang.regexp;\`
+- Use the \`re\` template expression to create RegExp values: \`string:RegExp pattern = re \`[0-9]+\`;\`
+- Common functions: \`regexp:isFullMatch()\`, \`regexp:find()\`, \`regexp:findAll()\`, \`regexp:replace()\`, \`regexp:replaceAll()\`, \`regexp:split()\`
+
+### Ballerina Syntax Requirements
+1. Write syntactically correct Ballerina code without compilation errors
+2. Use \`.toString()\` directly for type conversion to strings
+3. Use \`check\` expressions instead of \`trap\` or \`panic\` for error handling
+4. Handle union types and enums with appropriate type checking using \`check\` expressions or \`if-else\` type narrowing
+5. Use dot notation for nested field access
+6. Use Ballerina built-in methods for transformations
+7. Use query expressions for array mappings at the element level
+8. For nested structures, prefer record constructor expressions over inline mapping
+9. **NEVER use \`let\` clause expressions in your mapping output**
+10. If you need complex logic, define separate functions instead and call those functions in the expression
+11. **Type Declaration Consistency**: When declaring nullable types, use ONLY the \`?\` suffix notation (e.g., \`string?\`, \`CustomType?\`). Never combine union syntax \`|()\` with the \`?\` suffix.
+
+### Default Values
+- Only provide default values for non-optional fields when no mapping is available
+- Do not include default values for fields that have explicit mappings
+- Do not provide default values for optional fields
+
+## Output Format
+
+Provide your final answer as a JSON array. Each object in the array must contain exactly these three fields:
+
+- **\`"outputField"\`**: The COMPLETE field path in the output model, starting from the root. This can be:
+  - A complete field path for simple mappings (e.g., \`"transform.id"\`)
+  - A parent record path when constructing nested structures (e.g., \`"transform.bio"\`)
+  - Use \`""\` for root-level mappings
+
+- **\`"expression"\`**: The complete Ballerina code expression that performs the mapping. Provide ONLY executable code without comments. This can be:
+  - A simple field reference for direct mappings
+  - If a submapping exists, use the submapping's output name directly as the expression
+  - A record constructor expression for nested structures
+  - A query expression for array mappings
+
+- **\`"functionDefinition"\`**: (include only when the expression requires a function) All custom function implementations needed, including helper functions, ordered by dependency. Provide ONLY executable Ballerina code without comments. If no custom function is needed, omit this field entirely.
+
+**Important Grouping Rule**: When multiple output fields belong to the same nested record structure, create ONE mapping object with the parent path as \`outputField\` and a record constructor expression that maps all the fields together.
+
+**Example Output Structure:**
+\`\`\`json
+[
+  {
+    "outputField": "mapPatient.customerAge", 
+    "expression": "check int:fromString(input.customer?.age.toString())"
+  },
+  {
+    "outputField": "", 
+    "expression": "from var project in input.projects select {\n   id: project.id,\n   name: project.name\n}"
+  },
+  {
+    "outputField": "transform.customerType",
+    "expression": "processCustomerType(input?.customerType)",
+    "functionDefinition": "\n\nfunction processCustomerType(module:CustomerTypeEnum? inputType) returns string {\n    if inputType is () {\n        return \"UNKNOWN\";\n    }\n    return inputType;\n}"
+  }
+]
+\`\`\`
+`;
+}
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 27e928ead2d..3ca22f012bc 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,1003 +14,814 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { ModelMessage, generateObject } from "ai";
+import { CoreMessage, ModelMessage, generateObject } from "ai";
 import { getAnthropicClient, ANTHROPIC_SONNET_4 } from "../connection";
 import {
     DatamapperResponse,
-    AIDataMappings,
-    MappingJson,
-    MappingRecord,
-    MappingOperation,
-    FieldMetadata,
-    ParameterMetadata,
+    DataModelStructure,
     MappingFields,
-    Mapping,
-    Operation,
-    DataMappingRequest,
-    DataMappingResponse,
-    IOTypeVisitor,
-    VisitorContext,
-    Payload
+    RepairedFiles,
 } from "./types";
-import { MappingSchema } from "./schema";
+import { GeneratedMappingSchema, RepairedSourceFilesSchema } from "./schema";
 import { AIPanelAbortController } from "../../../../../src/rpc-managers/ai-panel/utils";
-import { ADDITION, DIRECT, DIVISION, LENGTH, MODULAR, MULTIPLICATION, NAME, PARAMETER_1, SPLIT, SUBTRACTION } from "./constant";
-import { ExpandedDMModel, DataMapperModelResponse, IOType, TypeKind } 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([
-    [
-        DIRECT,
-        {
-            name: DIRECT,
-            structure: {
-                operation: "DIRECT",
-                outputType: ["int", "float", "decimal", "string", "boolean"],
-                inputType: ["int", "float", "decimal", "string", "boolean"],
-                imports: {},
-                errorReturned: false,
-                expression: "${LHS} : ${PA_1}",
-            },
-        },
-    ],
-    [
-        ADDITION,
-        {
-            name: ADDITION,
-            structure: {
-                operation: "ADDITION",
-                outputType: ["int", "float", "decimal"],
-                inputType: ["int", "float", "decimal"],
-                imports: {},
-                errorReturned: false,
-                expression: "+",
-            },
-        },
-    ],
-    [
-        DIVISION,
-        {
-            name: DIVISION,
-            structure: {
-                operation: "DIVISION",
-                outputType: ["int", "float", "decimal"],
-                inputType: ["int", "float", "decimal"],
-                imports: {},
-                errorReturned: false,
-                expression: "/",
-            },
-        },
-    ],
-    [
-        LENGTH,
-        {
-            name: LENGTH,
-            structure: {
-                operation: "LENGTH",
-                outputType: ["int"],
-                inputType: ["string[]", "int[]", "float[]", "decimal[]", "boolean[]", "record[]"],
-                imports: {},
-                errorReturned: false,
-                expression: "${LHS} : ${RHS}.length()",
-            },
-        },
-    ],
-    [
-        MODULAR,
-        {
-            name: MODULAR,
-            structure: {
-                operation: "MODULAR",
-                outputType: ["int"],
-                inputType: ["int"],
-                imports: {},
-                errorReturned: false,
-                expression: "%",
-            },
-        },
-    ],
-    [
-        MULTIPLICATION,
-        {
-            name: MULTIPLICATION,
-            structure: {
-                operation: "MULTIPLICATION",
-                outputType: ["int", "float", "decimal"],
-                inputType: ["int", "float", "decimal"],
-                imports: {},
-                errorReturned: false,
-                expression: "*",
-            },
-        },
-    ],
-    [
-        SPLIT,
-        {
-            name: SPLIT,
-            structure: {
-                operation: "SPLIT",
-                outputType: ["string[]", "string"],
-                inputType: ["string"],
-                imports: { org: "ballerina", package: "lang.regexp" },
-                errorReturned: false,
-                expression: "${LHS} : re `,`.split(${RHS})",
-            },
-        },
-    ],
-    [
-        SUBTRACTION,
-        {
-            name: SUBTRACTION,
-            structure: {
-                operation: "SUBTRACTION",
-                outputType: ["int", "float", "decimal"],
-                inputType: ["int", "float", "decimal"],
-                imports: {},
-                errorReturned: false,
-                expression: "-",
-            },
-        },
-    ],
-]);
+import { DataMapperModelResponse, DMModel, Mapping, repairCodeRequest, SourceFile, DiagnosticList, ImportInfo, ProcessMappingParametersRequest, Command, MetadataWithAttachments, InlineMappingsSourceResult, ProcessContextTypeCreationRequest, ProjectImports, ImportStatements, TemplateId, GetModuleDirParams, TextEdit, DataMapperSourceResponse, DataMapperSourceRequest, AllDataMapperSourceRequest } from "@wso2/ballerina-core";
+import { getDataMappingPrompt } from "./dataMappingPrompt";
+import { getBallerinaCodeRepairPrompt } from "./codeRepairPrompt";
+import { CopilotEventHandler, createWebviewEventHandler } from "../event";
+import { getErrorMessage } from "../utils";
+import { buildMappingFileArray, buildRecordMap, collectExistingFunctions, collectModuleInfo, createTempBallerinaDir, createTempFileAndGenerateMetadata, getFunctionDefinitionFromSyntaxTree, getUniqueFunctionFilePaths, prepareMappingContext, generateInlineMappingsSource, generateTypesFromContext, extractRecordTypes, repairCodeAndGetUpdatedContent, extractImports, generateDataMapperModel, determineCustomFunctionsPath, generateMappings, getCustomFunctionsContent } from "../../dataMapping";
+import { BiDiagramRpcManager, getBallerinaFiles } from "../../../../../src/rpc-managers/bi-diagram/rpc-manager";
+import { updateSourceCode } from "../../../../../src/utils/source-utils";
+import { StateMachine } from "../../../../stateMachine";
+import { extractVariableDefinitionSource, getHasStopped, setHasStopped } from "../../../../../src/rpc-managers/data-mapper/utils";
+import { commands, Uri, window } from "vscode";
+import { CLOSE_AI_PANEL_COMMAND, OPEN_AI_PANEL_COMMAND } from "../../constants";
+import path from "path";
+import { URI } from "vscode-uri";
 
 // =============================================================================
-// UTILITY FUNCTIONS FOR SCHEMA PROCESSING
+// ENHANCED MAIN ORCHESTRATOR FUNCTION
 // =============================================================================
 
-/**
- * Finds a schema type by path in the input schemas array
- */
+// Generates AI-powered data mappings with retry logic for handling failures
+async function generateAIPoweredDataMappings(dataMapperModelResponse: DataMapperModelResponse): Promise<DatamapperResponse> {
+    if (!dataMapperModelResponse.mappingsModel) {
+        throw new Error("Mappings model is required in the data mapper response");
+    }
+
+    const maxRetries = 3;
+    let lastError: Error;
 
-class IOTypeVisitorImpl implements IOTypeVisitor {
-    visitIOType(ioType: IOType, context: VisitorContext): IOType | null {
-        if (ioType.id === context.targetPath) {
-            context.found = ioType;
-            return this.isContainerWithRecordFields(ioType) ? null : ioType;
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+        if (attempt > 0) {
+            console.debug("Retrying to generate mappings for the payload.");
         }
 
-        // Visit all child types
-        const childTypes = [
-            ...(ioType.fields || []),
-            ...(ioType.members || []),
-            ...(ioType.member ? [ioType.member] : [])
-        ];
+        try {
+            const mappingsModel = dataMapperModelResponse.mappingsModel as DMModel;
+            const existingMappings = mappingsModel.mappings;
+            const userProvidedMappingHints = mappingsModel.mapping_fields || {};
+            const existingSubMappings = mappingsModel.subMappings as Mapping[] || [];
 
-        for (const child of childTypes) {
-            const result = this.visitIOType(child, context);
-            if (result) { return result; }
-        }
+            if (!mappingsModel.inputs || !mappingsModel.output) {
+                throw new Error("Mappings model must contain both inputs and output fields");
+            }
 
-        return null;
-    }
+            // Extract only inputs, output, and refs from mappingsModel
+            const dataModelStructure: DataModelStructure = {
+                inputs: mappingsModel.inputs,
+                output: mappingsModel.output,
+                refs: mappingsModel.refs
+            };
 
-    private isContainerWithRecordFields(ioType: IOType): boolean {
-        return this.hasRecordFields(ioType);
-    }
+            const aiGeneratedMappings = await generateAIMappings(
+                dataModelStructure,
+                existingMappings,
+                userProvidedMappingHints,
+                existingSubMappings
+            );
 
-    private hasRecordFields(type: IOType): boolean {
-        if (!type) { return false; }
-        
-        // Direct record with fields
-        if (type.kind === TypeKind.Record && type.fields?.length) {
-            return true;
-        }
-        
-        // Array containing records
-        if (type.kind === TypeKind.Array) {
-            return this.hasRecordFields(type.member);
-        }
-        
-        // Union containing records
-        if (type.kind === TypeKind.Union && type.members?.length) {
-            return type.members.some(member => this.hasRecordFields(member));
+            if (Object.keys(aiGeneratedMappings).length === 0) {
+                throw new Error("No valid fields were identified for mapping between the given input and output records.");
+            }
+
+            return { mappings: aiGeneratedMappings };
+
+        } catch (error) {
+            console.error(`Error occurred while generating mappings: ${error}`);
+            lastError = error as Error;
         }
-        
-        return false;
     }
+
+    throw lastError!;
 }
 
+// Calls Claude AI to generate mappings based on data model, user mappings, and mapping hints
+async function generateAIMappings(
+    dataModelStructure: DataModelStructure,
+    existingUserMappings: Mapping[],
+    userProvidedMappingHints: { [key: string]: MappingFields },
+    existingSubMappings: Mapping[]
+): Promise<Mapping[]> {
+    if (!dataModelStructure.inputs || !dataModelStructure.output) {
+        throw new Error("Data model structure must contain inputs and output");
+    }
 
-function findSchemaTypeByPath(inputs: IOType[], path: string): IOType | null {
-    const context: VisitorContext = {
-        targetPath: path,
-        found: null
-    };
+    // Build prompt for AI
+    const aiPrompt = getDataMappingPrompt(
+        JSON.stringify(dataModelStructure),
+        JSON.stringify(existingUserMappings || []),
+        JSON.stringify(userProvidedMappingHints || {}),
+        JSON.stringify(existingSubMappings || [])
+    );
 
-    const visitor = new IOTypeVisitorImpl();
+    const chatMessages: ModelMessage[] = [
+        { role: "user", content: aiPrompt }
+    ];
 
-    for (const inputSchema of inputs) {
-        const result = visitor.visitIOType(inputSchema, context);
-        if (result) { return result; }
-    }
+    try {
+        const { object } = await generateObject({
+            model: await getAnthropicClient(ANTHROPIC_SONNET_4),
+            maxOutputTokens: 8192,
+            temperature: 0,
+            messages: chatMessages,
+            schema: GeneratedMappingSchema,
+            abortSignal: AIPanelAbortController.getInstance().signal,
+        });
 
-    return null;
+        const aiGeneratedMappings = object.generatedMappings as Mapping[];
+        return aiGeneratedMappings;
+    } catch (error) {
+        console.error("Failed to parse response:", error);
+        throw new Error(`Failed to parse mapping response: ${error}`);
+    }
 }
 
-/**
- * Removes array indices from path to normalize field paths
- */
-function removeArrayIndicesFromPath(path: string): string {
-    const pathParts = path.split('.');
-    const cleanParts: string[] = [];
+// Uses Claude AI to repair Ballerina source files based on diagnostics and import information
+async function repairBallerinaCode(
+    filesToRepair: SourceFile[],
+    compilationDiagnostics: DiagnosticList,
+    availableImports: ImportInfo[]
+): Promise<SourceFile[]> {
+    if (!filesToRepair || filesToRepair.length === 0) {
+        throw new Error("Source files to repair are required and cannot be empty");
+    }
 
-    for (const part of pathParts) {
-        // Skip numeric indices
-        if (!isNaN(parseInt(part))) {
-            continue;
-        }
-        cleanParts.push(part);
+    if (!compilationDiagnostics) {
+        throw new Error("Compilation diagnostics are required for code repair");
     }
-    
-    return cleanParts.join('.');
-}
 
-/**
- * Removes output record prefix from field name
- */
-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);
-        }
+    // Build repair prompt
+    const codeRepairPrompt = getBallerinaCodeRepairPrompt(
+        JSON.stringify(filesToRepair),
+        JSON.stringify(compilationDiagnostics),
+        JSON.stringify(availableImports || [])
+    );
+
+    const chatMessages: CoreMessage[] = [
+        { role: "user", content: codeRepairPrompt }
+    ];
+
+    try {
+        const { object } = await generateObject({
+            model: await getAnthropicClient(ANTHROPIC_SONNET_4),
+            maxOutputTokens: 8192,
+            temperature: 0,
+            messages: chatMessages,
+            schema: RepairedSourceFilesSchema,
+            abortSignal: AIPanelAbortController.getInstance().signal,
+        });
+
+        return object.repairedFiles as SourceFile[];
+    } catch (error) {
+        console.error("Failed to parse response:", error);
+        throw new Error(`Failed to parse repaired files response: ${error}`);
     }
-    return fieldName;
 }
 
 // =============================================================================
-// MAPPING EVALUATION FUNCTIONS
+// MAIN EXPORT FUNCTION
 // =============================================================================
 
-/**
- * Main function to evaluate mappings with enhanced schema support
- */
-async function evaluateMappings(
-    path: string[], 
-    llmGeneratedMappings: AIDataMappings, 
-    initialRecords: DataMappingRequest
-): Promise<MappingJson | null> {
-    if (isMapping(llmGeneratedMappings)) {
-        return await processMappingOperation(path, llmGeneratedMappings, initialRecords);
-    } else {
-        return await processNestedMappings(path, llmGeneratedMappings as { [key: string]: AIDataMappings }, initialRecords);
+// Main entry point for generating automatic data mappings from data mapper model
+export async function generateAutoMappings(dataMapperModelResponse?: DataMapperModelResponse): Promise<Mapping[]> {
+    if (!dataMapperModelResponse) {
+        throw new Error("Data mapper model response is required for generating auto mappings");
     }
-}
-
-/**
- * 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;
+        const mappingResponse: DatamapperResponse = await generateAIPoweredDataMappings(dataMapperModelResponse);
+        return mappingResponse.mappings;
+    } catch (error) {
+        console.error(`Error generating auto mappings: ${error}`);
+        throw error;
+    }
+}
 
-        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;
-            }
+// Generates repaired Ballerina code by fixing diagnostics with retry logic
+export async function generateRepairCode(codeRepairRequest?: repairCodeRequest): Promise<RepairedFiles> {
+    if (!codeRepairRequest) {
+        throw new Error("Code repair request is required for generating repair code");
+    }
 
-            const fieldMetadata = getFieldMetadataFromSchemaType(inputType, subKey, operationName);
-            if (!fieldMetadata) {
-                continue;
-            }
+    const maxRetries = 3;
+    let attemptCount = 0;
+    let lastError: Error;
 
-            parametersTypes[subKey] = {
-                type: fieldMetadata.type,
-                input: subPathString,
-                optional: fieldMetadata.optional,
-                nullable: fieldMetadata.nullable
-            };
-            validParameters = true;
+    while (attemptCount < maxRetries) {
+        if (attemptCount > 0) {
+            console.debug("Retrying to generate repair code for the payload.");
         }
 
-        if (validParameters) {
-            const outputType = getOutputFieldMetadata(initialRecords.output, path);
-            if (!outputType) {
-                return null;
+        try {
+            // Generate AI-powered repaired source files using Claude
+            const aiRepairedFiles = await repairBallerinaCode(codeRepairRequest.sourceFiles, codeRepairRequest.diagnostics, codeRepairRequest.imports);
+
+            if (!aiRepairedFiles || aiRepairedFiles.length === 0) {
+                const error = new Error("No repaired files were generated. Unable to fix the provided source code.");
+                lastError = error;
+                attemptCount += 1;
+                continue;
             }
-            
-            const mapping = validateMappingOperation(
-                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: DataMappingRequest
-): Promise<MappingJson | null> {
-    const returnRec: { [key: string]: MappingJson } = {};
-
-    for (const [key, value] of Object.entries(llmGeneratedMappings)) {
-        if (value === null || value === undefined) {
+            return { repairedFiles: aiRepairedFiles };
+
+        } catch (error) {
+            console.error(`Error occurred while generating repaired code: ${error}`);
+            lastError = error as Error;
+            attemptCount += 1;
             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 convertFlatToNestedMap(returnRec);
+    throw lastError!;
 }
 
 // =============================================================================
-// MAPPING OPERATION VALIDATION
+// MAPPING CODE GENERATION WITH EVENT HANDLERS
 // =============================================================================
 
-/**
- * Validates mapping operations with enhanced error handling
- */
-function validateMappingOperation(
-    mapping: MappingOperation,
-    inputType: { [key: string]: ParameterMetadata },
-    outputType: FieldMetadata,
-    name: string,
-    inputs: IOType[]
-): MappingJson | null {
-    const operation = mapping.NAME;
-    // STEP 1: Verify operation exists in operations database
-    const op = operationsTable.get(operation);
+// Core mapping code generation function that emits events
+export async function generateMappingCodeCore(mappingRequest: ProcessMappingParametersRequest, eventHandler: CopilotEventHandler): Promise<void> {
+    if (!mappingRequest.parameters) {
+        throw new Error("Parameters are required in the mapping request");
+    }
+
+    if (!mappingRequest.parameters.functionName) {
+        throw new Error("Function name is required in the mapping parameters");
+    }
+
+    if (!eventHandler) {
+        throw new Error("Event handler is required for code generation");
+    }
+
+    // Initialize generation process
+    eventHandler({ type: "start" });
+    let assistantResponse: string = "";
+    const biDiagramRpcManager = new BiDiagramRpcManager();
+    const langClient = StateMachine.langClient();
+    const context = StateMachine.context();
+    const projectRoot = context.projectUri;
+
+    const targetFunctionName = mappingRequest.parameters.functionName;
+
+    const [projectImports, currentActiveFile, projectComponents] = await Promise.all([
+        collectAllImportsFromProject(),
+        getCurrentActiveFileName(),
+        biDiagramRpcManager.getProjectComponents(),
+        langClient
+    ]);
+
+    const allImportStatements = projectImports.imports.flatMap(file => file.statements || []);
+
+    // Remove duplicates based on moduleName
+    const uniqueImportStatements = Array.from(
+        new Map(allImportStatements.map(imp => [imp.moduleName, imp])).values()
+    );
+
+    const moduleInfoList = collectModuleInfo(projectComponents);
+    const moduleDirectoryMap = new Map<string, string>();
+
+    for (const moduleInfo of moduleInfoList) {
+        const moduleDirectoryType = getModuleDirectory({
+            moduleName: moduleInfo.moduleName,
+            filePath: moduleInfo.packageFilePath
+        });
+        moduleDirectoryMap.set(moduleInfo.moduleName, moduleDirectoryType);
+    }
+
+    const recordTypeMap = buildRecordMap(projectComponents, moduleDirectoryMap);
+    const existingFunctionsInProject = collectExistingFunctions(projectComponents, moduleDirectoryMap);
+
+    const functionFileContents = new Map<string, string>();
+    if (existingFunctionsInProject.length > 0) {
+        const uniqueFunctionFilePaths = getUniqueFunctionFilePaths(existingFunctionsInProject);
+        const fileContentResults = await Promise.all(
+            uniqueFunctionFilePaths.map(async (filePath) => {
+                const projectFsPath = URI.parse(filePath).fsPath;
+                const fs = require("fs");
+                const fileContent = await fs.promises.readFile(projectFsPath, "utf-8");
+                return { filePath, content: fileContent };
+            })
+        );
+        fileContentResults.forEach(({ filePath, content }) => {
+            functionFileContents.set(filePath, content);
+        });
+    }
+
+    const mappingContext = await prepareMappingContext(
+        mappingRequest.parameters,
+        recordTypeMap,
+        existingFunctionsInProject,
+        uniqueImportStatements,
+        functionFileContents,
+        currentActiveFile,
+        langClient,
+        projectRoot
+    );
+
+    const tempDirectory = await createTempBallerinaDir();
+    const doesFunctionAlreadyExist = existingFunctionsInProject.some(func => func.name === targetFunctionName);
+
+    const tempFileMetadata = await createTempFileAndGenerateMetadata({
+        tempDir: tempDirectory,
+        filePath: mappingContext.filePath,
+        metadata: mappingRequest.metadata,
+        inputs: mappingContext.mappingDetails.inputs,
+        output: mappingContext.mappingDetails.output,
+        functionName: targetFunctionName,
+        inputNames: mappingContext.mappingDetails.inputNames,
+        imports: mappingContext.mappingDetails.imports,
+        hasMatchingFunction: doesFunctionAlreadyExist,
+    }, langClient, context);
+
+    const allMappingsRequest = await generateMappings({
+        metadata: tempFileMetadata,
+        attachments: mappingRequest.attachments
+    }, context);
+
+    const sourceCodeResponse = await getAllDataMapperSource(allMappingsRequest);
+
+    await updateSourceCode({ textEdits: sourceCodeResponse.textEdits, skipPayloadCheck: true });
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    let customFunctionsTargetPath: string;
+    let customFunctionsFileName: string;
     
-    if (!op) {
-        return null;
+    if (allMappingsRequest.customFunctionsFilePath) {
+        customFunctionsTargetPath = determineCustomFunctionsPath(projectRoot, currentActiveFile);
+        customFunctionsFileName = path.basename(customFunctionsTargetPath);
     }
 
-    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)]
-            };
-        }
-        // STEP 3: Validate LENGTH operation
-        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)]
-            };
-        }
-        // STEP 4: Validate 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]
-            };
+    // Check if mappings file and custom functions file are the same
+    const mainFilePath = tempFileMetadata.codeData.lineRange.fileName;
+    const isSameFile = customFunctionsTargetPath && 
+        path.resolve(mainFilePath) === path.resolve(path.join(tempDirectory, customFunctionsFileName));
+
+    let codeRepairResult: { finalContent: string; customFunctionsContent: string };
+    const customContent = await getCustomFunctionsContent(allMappingsRequest.customFunctionsFilePath);
+
+    if (isSameFile) {
+        const fs = require('fs');
+        const mainContent = fs.readFileSync(mainFilePath, 'utf8');
+
+        if (customContent) {
+            // Merge: main content + custom functions
+            const mergedContent = `${mainContent}\n\n${customContent}`;
+            fs.writeFileSync(mainFilePath, mergedContent, 'utf8');
         }
         
-        default:
-            return null;
+        codeRepairResult = await repairCodeAndGetUpdatedContent({
+            tempFileMetadata,
+            customFunctionsFilePath: undefined,
+            imports: uniqueImportStatements,
+            tempDir: tempDirectory
+        }, langClient, projectRoot);
+
+        codeRepairResult.customFunctionsContent = '';
+    } else {
+        // Files are different, repair them separately
+        codeRepairResult = await repairCodeAndGetUpdatedContent({
+            tempFileMetadata,
+            customFunctionsFilePath: allMappingsRequest.customFunctionsFilePath,
+            imports: uniqueImportStatements,
+            tempDir: tempDirectory
+        }, langClient, projectRoot);
     }
-}
 
-// =============================================================================
-// FIELD METADATA EXTRACTION FUNCTIONS
-// =============================================================================
+    const generatedFunctionDefinition = await getFunctionDefinitionFromSyntaxTree(
+        langClient,
+        tempFileMetadata.codeData.lineRange.fileName,
+        targetFunctionName
+    );
+    await new Promise((resolve) => setTimeout(resolve, 200));
 
-/**
- * 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 };
+    let targetFilePath = path.join(projectRoot, mappingContext.filePath);
+
+    const generatedSourceFiles = buildMappingFileArray(
+        targetFilePath,
+        codeRepairResult.finalContent,
+        customFunctionsTargetPath,
+        codeRepairResult.customFunctionsContent,
+    );
+
+    // Build assistant response
+    assistantResponse = `Mappings consist of the following:\n`;
+    if (mappingRequest.parameters.inputRecord.length === 1) {
+        assistantResponse += `- **Input Record**: ${mappingContext.mappingDetails.inputParams[0]}\n`;
+    } else {
+        assistantResponse += `- **Input Records**: ${mappingContext.mappingDetails.inputParams.join(", ")}\n`;
+    }
+    assistantResponse += `- **Output Record**: ${mappingContext.mappingDetails.outputParam}\n`;
+    assistantResponse += `- **Function Name**: ${targetFunctionName}\n`;
+
+    if (isSameFile) {
+        const mergedContent = `${generatedFunctionDefinition.source}\n${customContent}`;
+        assistantResponse += `<code filename="${mappingContext.filePath}" type="ai_map">\n\`\`\`ballerina\n${mergedContent}\n\`\`\`\n</code>`;
+    } else {
+        assistantResponse += `<code filename="${mappingContext.filePath}" type="ai_map">\n\`\`\`ballerina\n${generatedFunctionDefinition.source}\n\`\`\`\n</code>`;
+
+        if (codeRepairResult.customFunctionsContent) {
+            assistantResponse += `<code filename="${customFunctionsFileName}" type="ai_map">\n\`\`\`ballerina\n${codeRepairResult.customFunctionsContent}\n\`\`\`\n</code>`;
         }
     }
 
-    const kind = inputType.kind;
-    const typeName = inputType.typeName;
+    eventHandler({ type: "generated_sources", fileArray: generatedSourceFiles });
+    eventHandler({ type: "content_block", content: assistantResponse });
+    eventHandler({ type: "stop", command: Command.DataMap });
+}
 
-    if (!kind || !typeName) {
-        throw new Error("Missing kind or typeName in SchemaType");
+// Main public function that uses the default event handler for mapping generation
+export async function generateMappingCode(mappingRequest: ProcessMappingParametersRequest): Promise<void> {
+    const eventHandler = createWebviewEventHandler(Command.DataMap);
+    try {
+        await generateMappingCodeCore(mappingRequest, eventHandler);
+    } catch (error) {
+        console.error("Error during mapping code generation:", error);
+        eventHandler({ type: "error", content: getErrorMessage(error) });
+        throw error;
     }
+}
+
+async function collectAllImportsFromProject(): Promise<ProjectImports> {
+    const projectUri = StateMachine.context().projectUri;
 
-    const typeString = typeName;
-    const isOptional = inputType.optional;
-    let isNullable = false;
+    const ballerinaSourceFiles = await getBallerinaFiles(Uri.file(projectUri).fsPath);
 
-    // Check if type is nullable (contains ? or ())
-    if (typeName.includes("?") || typeName.includes("()")) {
-        isNullable = true;
+    const importStatements: ImportStatements[] = [];
+
+    for (const ballerinaFile of ballerinaSourceFiles) {
+        const fs = require("fs");
+        const sourceFileContent = fs.readFileSync(ballerinaFile, "utf8");
+        const extractedImports = extractImports(sourceFileContent, ballerinaFile);
+        importStatements.push(extractedImports);
     }
 
-    return { 
-        type: typeString, 
-        optional: isOptional, 
-        nullable: isNullable 
+    return {
+        projectPath: projectUri,
+        imports: importStatements,
     };
 }
 
-/**
- * Gets output field metadata from schema type
- */
-function getOutputFieldMetadata(output: IOType, path: string[]): FieldMetadata | null {
-    let current = output;
+function getCurrentActiveFileName(): string {
+    const activeTabGroup = window.tabGroups.all.find(group => {
+        return group.activeTab.isActive && group.activeTab?.input;
+    });
 
-    for (const pathSegment of path) {
-        const found = findFieldInSchemaType(current, pathSegment);
-        if (!found) {
-            return null;
+    if (activeTabGroup && activeTabGroup.activeTab && activeTabGroup.activeTab.input) {
+        const activeTabInput = activeTabGroup.activeTab.input as { uri: { fsPath: string } };
+
+        if (activeTabInput.uri) {
+            const activeFileUri = activeTabInput.uri;
+            const activeFileName = activeFileUri.fsPath.split('/').pop();
+            return activeFileName || '';
         }
-        current = found;
     }
+}
 
-    return getFieldMetadataFromSchemaType(current);
+function getModuleDirectory(params: GetModuleDirParams): string {
+    const { filePath, moduleName } = params;
+    const generatedPath = path.join(filePath, "generated", moduleName);
+    const fs = require("fs");
+    if (fs.existsSync(generatedPath) && fs.statSync(generatedPath).isDirectory()) {
+        return "generated";
+    } else {
+        return "modules";
+    }
+}
+
+export async function getAllDataMapperSource(
+    mappingSourceRequest: AllDataMapperSourceRequest
+): Promise<DataMapperSourceResponse> {
+    setHasStopped(false);
+
+    const individualSourceRequests = buildSourceRequests(mappingSourceRequest);
+    const sourceResponses = await processSourceRequests(individualSourceRequests);
+    const consolidatedTextEdits = consolidateTextEdits(sourceResponses, mappingSourceRequest.mappings.length);
+
+    return { textEdits: consolidatedTextEdits };
+}
+
+
+// Builds individual source requests from the provided parameters by creating a request for each mapping
+export function buildSourceRequests(allMappingsRequest: AllDataMapperSourceRequest): DataMapperSourceRequest[] {
+    return allMappingsRequest.mappings.map(singleMapping => ({
+        filePath: allMappingsRequest.filePath,
+        codedata: allMappingsRequest.codedata,
+        varName: allMappingsRequest.varName,
+        targetField: allMappingsRequest.targetField,
+        mapping: singleMapping
+    }));
 }
 
-/**
- * Finds a field within a schema type structure
- */
-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;
+// Processes source requests with cancellation support and error handling for each request
+export async function processSourceRequests(sourceRequests: DataMapperSourceRequest[]): Promise<PromiseSettledResult<DataMapperSourceResponse>[]> {
+    return Promise.allSettled(
+        sourceRequests.map(async (singleRequest) => {
+            if (getHasStopped()) {
+                throw new Error("Operation was stopped");
             }
-            
-            const found = findFieldInSchemaType(field, fieldId);
-            if (found) {
-                return found;
+            try {
+                return await StateMachine.langClient().getDataMapperSource(singleRequest);
+            } catch (error) {
+                console.error("Error in getDataMapperSource:", error);
+                throw error;
             }
+        })
+    );
+}
+
+// Consolidates text edits from multiple source responses into a single optimized collection
+export function consolidateTextEdits(
+    sourceResponses: PromiseSettledResult<DataMapperSourceResponse>[],
+    totalMappingCount: number
+): { [key: string]: TextEdit[] } {
+    const allTextEditsByFile: { [key: string]: TextEdit[] } = {};
+
+    sourceResponses.forEach((result, index) => {
+        if (result.status === 'fulfilled') {
+            console.log(`>>> Completed mapping ${index + 1}/${totalMappingCount}`);
+            mergeTextEdits(allTextEditsByFile, result.value.textEdits);
+        } else {
+            console.error(`>>> Failed mapping ${index + 1}:`, result.reason);
         }
-    }
+    });
+
+    return optimizeTextEdits(allTextEditsByFile);
+}
+
+// Merges new text edits into the existing collection, grouping by file path
+export function mergeTextEdits(
+    existingTextEdits: { [key: string]: TextEdit[] },
+    newTextEditsToMerge?: { [key: string]: TextEdit[] }
+): void {
+    if (!newTextEditsToMerge) { return; }
 
-    const member = schemaType.member;
-    if (member) {
-        if (member.id === fieldId || member.name === fieldId) {
-            return member;
+    Object.entries(newTextEditsToMerge).forEach(([filePath, editsForFile]) => {
+        if (!existingTextEdits[filePath]) {
+            existingTextEdits[filePath] = [];
         }
-        return findFieldInSchemaType(member, fieldId);
-    }
+        existingTextEdits[filePath].push(...editsForFile);
+    });
+}
+
+// Optimizes text edits by sorting and combining them into single edits per file
+export function optimizeTextEdits(allTextEditsByFile: { [key: string]: TextEdit[] }): { [key: string]: TextEdit[] } {
+    const optimizedEditsByFile: { [key: string]: TextEdit[] } = {};
+
+    Object.entries(allTextEditsByFile).forEach(([filePath, editsForFile]) => {
+        if (editsForFile.length === 0) { return; }
+
+        const sortedEditsForFile = sortTextEdits(editsForFile);
+        const combinedEditForFile = combineTextEdits(sortedEditsForFile);
 
-    return null;
+        optimizedEditsByFile[filePath] = [combinedEditForFile];
+    });
+
+    return optimizedEditsByFile;
 }
 
-/**
- * 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 };
+// Sorts text edits by line number and character position to ensure proper ordering
+export function sortTextEdits(textEdits: TextEdit[]): TextEdit[] {
+    return textEdits.sort((editA, editB) => {
+        if (editA.range.start.line !== editB.range.start.line) {
+            return editA.range.start.line - editB.range.start.line;
         }
+        return editA.range.start.character - editB.range.start.character;
+    });
+}
 
-        const lastPart = parts[parts.length - 1];
-        current[lastPart] = value;
-    }
-    
-    return nested;
+// Combines multiple text edits into a single edit with comma-separated content
+export function combineTextEdits(sortedTextEdits: TextEdit[]): TextEdit {
+    const formattedTextArray = sortedTextEdits.map((singleEdit, editIndex) => {
+        const editContent = singleEdit.newText.trim();
+        return editIndex < sortedTextEdits.length - 1 ? `${editContent},` : editContent;
+    });
+
+    return {
+        range: sortedTextEdits[0].range,
+        newText: formattedTextArray.join('\n').trimStart()
+    };
 }
 
 // =============================================================================
-// ENHANCED MAIN ORCHESTRATOR FUNCTION
+// INLINE MAPPING CODE GENERATION WITH EVENT HANDLERS
 // =============================================================================
 
-/**
- * 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.");
-        }
+// Core inline mapping code generation function that emits events and generates mappings inline
+export async function generateInlineMappingCodeCore(inlineMappingRequest: MetadataWithAttachments, eventHandler: CopilotEventHandler): Promise<void> {
+    if (!inlineMappingRequest.metadata) {
+        throw new Error("Metadata is required in the inline mapping request");
+    }
 
-        try {
-            // Extract existing mapping field hints
-            const mappingFields: { [key: string]: MappingFields } = payload.mappingsModel.mapping_fields || {};
+    if (!inlineMappingRequest.metadata.codeData) {
+        throw new Error("Code data is required in the metadata");
+    }
 
-            // 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 (!eventHandler) {
+        throw new Error("Event handler is required for code generation");
+    }
 
-            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;
-            }
+    // Initialize generation process
+    eventHandler({ type: "start" });
+    let assistantResponse: string = "";
+    const projectImports = await collectAllImportsFromProject();
+    const allImportStatements = projectImports.imports.flatMap(file => file.statements || []);
 
-            // STEP 2: Prepare inputs for validation
-            const inputs: DataMappingRequest = {
-                input: (payload.mappingsModel as ExpandedDMModel)?.inputs,
-                output: (payload.mappingsModel as ExpandedDMModel)?.output
-            };
+    // Remove duplicates based on moduleName
+    const uniqueImportStatements = Array.from(
+        new Map(allImportStatements.map(imp => [imp.moduleName, imp])).values()
+    );
 
-            // STEP 3: Validate and process AI-generated mappings with schema
-            const evaluateMappingsResult = await evaluateMappings([], generatedMappings, inputs);
+    let targetFileName = inlineMappingRequest.metadata.codeData.lineRange.fileName;
 
-            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;
-        }
+    if (!targetFileName) {
+        throw new Error("Target file name could not be determined from code data");
     }
-    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 langClient = StateMachine.langClient();
+    const context = StateMachine.context();
+    const projectRoot = context.projectUri;
 
-    const messages: ModelMessage[] = [
-        { role: "user", content: prompt }
-    ];
+    const inlineMappingsResult: InlineMappingsSourceResult =
+        await generateInlineMappingsSource(inlineMappingRequest, langClient, context);
 
-    try {
-        const { object } = await generateObject({
-            model: await getAnthropicClient(ANTHROPIC_SONNET_4),
-            maxOutputTokens: 4096,
-            temperature: 0,
-            messages: messages,
-            schema: MappingSchema,
-            abortSignal: AIPanelAbortController.getInstance().signal,
-        });
+    await updateSourceCode({ textEdits: inlineMappingsResult.sourceResponse.textEdits, skipPayloadCheck: true });
+    await new Promise((resolve) => setTimeout(resolve, 100));
 
-        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}`);
+    let customFunctionsTargetPath: string | undefined;
+    let customFunctionsFileName: string | undefined;
+    
+    if (inlineMappingsResult.allMappingsRequest.customFunctionsFilePath) {
+        customFunctionsTargetPath = determineCustomFunctionsPath(projectRoot, targetFileName);
+        customFunctionsFileName = path.basename(customFunctionsTargetPath);
     }
-}
 
-function extractMappings(evaluateMappingsResult: MappingJson): DatamapperResponse {
-    const mappings: { [key: string]: MappingJson } = {};
+    // Check if mappings file and custom functions file are the same
+    const mainFilePath = inlineMappingsResult.tempFileMetadata.codeData.lineRange.fileName;
+    const isSameFile = customFunctionsTargetPath && 
+        path.resolve(mainFilePath) === path.resolve(path.join(inlineMappingsResult.tempDir, customFunctionsFileName));
 
-    if (isMappingRecord(evaluateMappingsResult)) {
-        throw new Error("EvaluateMappingsResult is a MappingRecord, expected map structure.");
-    }
+    let codeRepairResult: { finalContent: string; customFunctionsContent: string };
+    const customContent = await getCustomFunctionsContent(inlineMappingsResult.allMappingsRequest.customFunctionsFilePath);
 
-    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;
-            }
+    if (isSameFile) {
+        const fs = require('fs');
+        const mainContent = fs.readFileSync(mainFilePath, 'utf8');
+
+        if (customContent) {
+            // Merge: main content + custom functions
+            const mergedContent = `${mainContent}\n\n${customContent}`;
+            fs.writeFileSync(mainFilePath, mergedContent, 'utf8');
         }
+        
+        codeRepairResult = await repairCodeAndGetUpdatedContent({
+            tempFileMetadata: inlineMappingsResult.tempFileMetadata,
+            customFunctionsFilePath: undefined,
+            imports: uniqueImportStatements,
+            tempDir: inlineMappingsResult.tempDir
+        }, langClient, projectRoot);
+
+        codeRepairResult.customFunctionsContent = '';
+    } else {
+        // Files are different, repair them separately
+        codeRepairResult = await repairCodeAndGetUpdatedContent({
+            tempFileMetadata: inlineMappingsResult.tempFileMetadata,
+            customFunctionsFilePath: inlineMappingsResult.allMappingsRequest.customFunctionsFilePath,
+            tempDir: inlineMappingsResult.tempDir
+        }, langClient, projectRoot);
     }
 
-    return { mappings };
-}
+    const generatedSourceFiles = buildMappingFileArray(
+        context.documentUri,
+        codeRepairResult.finalContent,
+        customFunctionsTargetPath,
+        codeRepairResult.customFunctionsContent,
+    );
 
-// =============================================================================
-// UTILITY FUNCTIONS
-// =============================================================================
+    const variableName = inlineMappingRequest.metadata.name || inlineMappingsResult.tempFileMetadata.name;
 
-/**
- * Type guard to check if value is a MappingRecord
- */
-function isMappingRecord(value: any): value is MappingRecord {
-    return value && typeof value === "object" && "operation" in value && "targetType" in value && "parameters" in value;
-}
+    let codeToDisplay = codeRepairResult.finalContent;
+    if (variableName) {
+        const extractedVariableDefinition = await extractVariableDefinitionSource(
+            inlineMappingsResult.tempFileMetadata.codeData.lineRange.fileName,
+            inlineMappingsResult.tempFileMetadata.codeData,
+            variableName
+        );
+        if (extractedVariableDefinition) {
+            codeToDisplay = extractedVariableDefinition;
+        }
+    }
 
-/**
- * Type guard to check if value is a Mapping
- */
-function isMapping(value: any): value is { OPERATION: MappingOperation } {
-    return value && typeof value === "object" && "OPERATION" in value;
-}
+    // Build assistant response
+    assistantResponse = `Here are the data mappings:\n\n`;
+    assistantResponse += `\n**Note**: When you click **Add to Integration**, it will override your existing mappings.\n`;
 
-// =============================================================================
-// MAIN EXPORT FUNCTION
-// =============================================================================
+    if (isSameFile) {
+        const mergedCodeDisplay = customContent ? `${codeToDisplay}\n${customContent}` : codeToDisplay;
+        assistantResponse += `<code filename="${targetFileName}" type="ai_map">\n\`\`\`ballerina\n${mergedCodeDisplay}\n\`\`\`\n</code>`;
+    } else {
+        assistantResponse += `<code filename="${targetFileName}" type="ai_map">\n\`\`\`ballerina\n${codeToDisplay}\n\`\`\`\n</code>`;
 
-export async function generateAutoMappings(payload?: DataMapperModelResponse): Promise<DatamapperResponse> {
-    if (!payload) {
-        throw new Error("Payload is required for generating auto mappings");
+        if (codeRepairResult.customFunctionsContent) {
+            assistantResponse += `<code filename="${customFunctionsFileName}" type="ai_map">\n\`\`\`ballerina\n${codeRepairResult.customFunctionsContent}\n\`\`\`\n</code>`;
+        }
     }
+
+    eventHandler({ type: "generated_sources", fileArray: generatedSourceFiles });
+    eventHandler({ type: "content_block", content: assistantResponse });
+    eventHandler({ type: "stop", command: Command.DataMap });
+}
+
+// Main public function that uses the default event handler for inline mapping generation
+export async function generateInlineMappingCode(inlineMappingRequest: MetadataWithAttachments): Promise<void> {
+    const eventHandler = createWebviewEventHandler(Command.DataMap);
     try {
-        return await mapData(payload);
+        await generateInlineMappingCodeCore(inlineMappingRequest, eventHandler);
     } catch (error) {
-        console.error(`Error generating auto mappings: ${error}`);
+        console.error("Error during inline mapping code generation:", error);
+        eventHandler({ type: "error", content: getErrorMessage(error) });
         throw error;
     }
 }
 
-/**
- * Helper function to create a sample payload for testing
- */
-export function createSamplePayload(): Payload {
-    return {
-        inputs: {
-            person: {
-                id: { type: "string", comment: "Unique identifier for the person" },
-                firstName: { type: "string", comment: "First name of the person" },
-                lastName: { type: "string", comment: "Last name of the person" },
-                age: { type: "int", comment: "Age of the person" },
-                country: { type: "string", comment: "Country of the person" },
-                courses: {
-                    id: { type: "string", comment: "Unique identifier for the course" },
-                    name: { type: "string", comment: "Name of the course" },
-                    credits: { type: "int", comment: "Credits of the course" },
-                },
-            },
-        },
-        output: {
-            id: { type: "string", comment: "Unique identifier for the student" },
-            firstName: { type: "string", comment: "First name of the student" },
-            age: { type: "int", comment: "Age of the student" },
-            country: { type: "string", comment: "Country of the student" },
-            courses: {
-                id: { type: "string", comment: "Unique identifier for the course" },
-                name: { type: "string", comment: "Name of the course" },
-                credits: { type: "int", comment: "Credits of the course" },
-            },
-        },
-        inputMetadata: {
-            person: {
-                parameterType: "Person",
-                parameterName: "person",
-                isArrayType: false,
-                type: "record",
-                fields: {
-                    id: {
-                        type: "string",
-                        typeInstance: "id",
-                        typeName: "string",
-                        nullable: false,
-                        optional: false,
-                    },
-                    firstName: {
-                        type: "string",
-                        typeInstance: "firstName",
-                        typeName: "string",
-                        nullable: false,
-                        optional: false,
-                    },
-                    lastName: {
-                        type: "string",
-                        typeInstance: "lastName",
-                        typeName: "string",
-                        nullable: false,
-                        optional: false,
-                    },
-                    age: {
-                        type: "int",
-                        typeInstance: "age",
-                        typeName: "int",
-                        nullable: false,
-                        optional: false,
-                    },
-                    country: {
-                        type: "string",
-                        typeInstance: "country",
-                        typeName: "string",
-                        nullable: false,
-                        optional: false,
-                    },
-                    courses: {
-                        type: "record[]",
-                        typeInstance: "courses",
-                        typeName: "record[]",
-                        nullable: false,
-                        optional: false,
-                        fields: {
-                            id: {
-                                type: "string",
-                                typeInstance: "id",
-                                typeName: "string",
-                                nullable: false,
-                                optional: false,
-                            },
-                            name: {
-                                type: "string",
-                                typeInstance: "name",
-                                typeName: "string",
-                                nullable: false,
-                                optional: false,
-                            },
-                            credits: {
-                                type: "int",
-                                typeInstance: "credits",
-                                typeName: "int",
-                                nullable: false,
-                                optional: false,
-                            },
-                        },
-                    },
-                },
-            },
-        },
-        outputMetadata: {
-            id: {
-                type: "string",
-                typeInstance: "id",
-                typeName: "string",
-                nullable: false,
-                optional: false,
-            },
-            firstName: {
-                type: "string",
-                typeInstance: "firstName",
-                typeName: "string",
-                nullable: false,
-                optional: false,
-            },
-            age: {
-                type: "int",
-                typeInstance: "age",
-                typeName: "int",
-                nullable: false,
-                optional: false,
-            },
-            country: {
-                type: "string",
-                typeInstance: "country",
-                typeName: "string",
-                nullable: false,
-                optional: false,
-            },
-            courses: {
-                type: "record[]",
-                typeInstance: "courses",
-                typeName: "record[]",
-                nullable: false,
-                optional: false,
-                fields: {
-                    id: {
-                        type: "string",
-                        typeInstance: "id",
-                        typeName: "string",
-                        nullable: false,
-                        optional: false,
-                    },
-                    name: {
-                        type: "string",
-                        typeInstance: "name",
-                        typeName: "string",
-                        nullable: false,
-                        optional: false,
-                    },
-                    credits: {
-                        type: "int",
-                        typeInstance: "credits",
-                        typeName: "int",
-                        nullable: false,
-                        optional: false,
-                    },
-                },
-            },
-        },
-    };
-}
+// =============================================================================
+// CONTEXT TYPE CREATION WITH EVENT HANDLERS
+// =============================================================================
 
-/**
- * Helper function to validate the structure of a mapping response
- */
-export function validateMappingResponse(response: DatamapperResponse): boolean {
-    if (!response || !response.mappings) {
-        return false;
+// Core context type creation function that emits events and generates Ballerina record types
+export async function generateContextTypesCore(typeCreationRequest: ProcessContextTypeCreationRequest, eventHandler: CopilotEventHandler): Promise<void> {
+    if (!typeCreationRequest.attachments || typeCreationRequest.attachments.length === 0) {
+        throw new Error("Attachments are required for type creation");
     }
 
-    for (const [key, mapping] of Object.entries(response.mappings)) {
-        if (!isValidMapping(mapping)) {
-            console.warn(`Invalid mapping found for key: ${key}`);
-            return false;
-        }
+    if (!eventHandler) {
+        throw new Error("Event handler is required for type creation");
     }
 
-    return true;
-}
+    // Initialize generation process
+    eventHandler({ type: "start" });
+    let assistantResponse: string = "";
 
-/**
- * Recursive function to validate a mapping structure
- */
-function isValidMapping(mapping: MappingJson): boolean {
-    if (isMappingRecord(mapping)) {
-        return Boolean(
-            mapping.operation && mapping.targetType && mapping.parameters && Array.isArray(mapping.parameters)
-        );
-    }
+    try {
+        const biDiagramRpcManager = new BiDiagramRpcManager();
+        const projectComponents = await biDiagramRpcManager.getProjectComponents();
 
-    if (typeof mapping === "object" && mapping !== null) {
-        return Object.values(mapping).every((value) => isValidMapping(value));
-    }
+        // Generate types from context
+        const { typesCode, filePath, recordMap } = await generateTypesFromContext(
+            typeCreationRequest.attachments,
+            projectComponents
+        );
 
-    return false;
-}
+        const extractedNewRecords = extractRecordTypes(typesCode);
+        for (const newRecord of extractedNewRecords) {
+            if (recordMap.has(newRecord.name)) {
+                throw new Error(`Record "${newRecord.name}" already exists in the workspace.`);
+            }
+        }
 
-// =============================================================================
-// EXPORTS
-// =============================================================================
+        // Build assistant response
+        const sourceAttachmentName = typeCreationRequest.attachments?.[0]?.name || "attachment";
+        assistantResponse = `Record types generated from the ${sourceAttachmentName} file shown below.\n`;
+        assistantResponse += `<code filename="${filePath}" type="type_creator">\n\`\`\`ballerina\n${typesCode}\n\`\`\`\n</code>`;
 
-export {
-    operationsTable
-};
-// Default export for the main function
-export default generateAutoMappings;
+        // Send assistant response through event handler
+        eventHandler({ type: "content_block", content: assistantResponse });
+        eventHandler({ type: "stop", command: Command.TypeCreator });
+    } catch (error) {
+        console.error("Error during context type creation:", error);
+        throw error;
+    }
+}
 
-/*
-// Example Usage:
-async function testDataMapping() {
+// Main public function that uses the default event handler for context type creation
+export async function generateContextTypes(typeCreationRequest: ProcessContextTypeCreationRequest): Promise<void> {
+    const eventHandler = createWebviewEventHandler(Command.TypeCreator);
     try {
-        // Create sample payload
-        const payload = createSamplePayload();
-        
-        // Generate mappings
-        const response = await generateAutoMappings(payload);
-        
-        // Validate response
-        const isValid = validateMappingResponse(response);
-        
-        if (isValid) {
-            console.log("Generated mappings:", JSON.stringify(response, null, 2));
-        } else {
-            console.error("Invalid mapping response");
-        }
-        
-        // Expected output structure:
-        // {
-        //   "mappings": {
-        //     "id": {
-        //       "operation": "DIRECT",
-        //       "targetType": "string",
-        //       "parameters": ["person.id"]
-        //     },
-        //     "firstName": {
-        //       "operation": "DIRECT",
-        //       "targetType": "string", 
-        //       "parameters": ["person.firstName"]
-        //     },
-        //     "age": {
-        //       "operation": "DIRECT",
-        //       "targetType": "int",
-        //       "parameters": ["person.age"]
-        //     },
-        //     "courses": {
-        //       "id": {
-        //         "operation": "DIRECT",
-        //         "targetType": "string",
-        //         "parameters": ["person.courses.id"]
-        //       },
-        //       "name": {
-        //         "operation": "DIRECT",
-        //         "targetType": "string",
-        //         "parameters": ["person.courses.name"]
-        //       },
-        //       "credits": {
-        //         "operation": "DIRECT",
-        //         "targetType": "int",
-        //         "parameters": ["person.courses.credits"]
-        //       }
-        //     },
-        //     "country": {
-        //       "operation": "DIRECT",
-        //       "targetType": "string",
-        //       "parameters": ["person.country"]
-        //     }
-        //   }
-        // }
-        
+        await generateContextTypesCore(typeCreationRequest, eventHandler);
     } catch (error) {
-        console.error("Error generating mappings:", error);
+        console.error("Error during context type creation:", error);
+        eventHandler({ type: "error", content: getErrorMessage(error) });
+        throw error;
     }
 }
-*/
+
+export async function openChatWindowWithCommand(): Promise<void> {
+    const langClient = StateMachine.langClient();
+    const context = StateMachine.context();
+    const model = await generateDataMapperModel({}, langClient, context);
+
+    // Automatically open AI mapping chat window with the generated model
+    const { identifier, dataMapperMetadata } = context;
+
+    commands.executeCommand(CLOSE_AI_PANEL_COMMAND);
+    commands.executeCommand(OPEN_AI_PANEL_COMMAND, {
+        type: 'command-template',
+        command: Command.DataMap,
+        templateId: identifier ? TemplateId.MappingsForFunction : TemplateId.InlineMappings,
+        ...(identifier && { params: { functionName: identifier } }),
+        metadata: {
+            ...dataMapperMetadata,
+            mappingsModel: model.mappingsModel as DMModel
+        }
+    });
+}
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
deleted file mode 100644
index 1b9b2cb8a0e..00000000000
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/prompt.ts
+++ /dev/null
@@ -1,454 +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 main data mapping prompt for AI
- */
-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:
-
-{
-  "<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 : 
-
-[
-  {
-    "fields":[
-      {
-        "id":"studentDetails.id",
-        "name":"id",
-        "typeName":"string",
-        "kind":"string",
-        "optional":false
-      },
-      {
-        "id":"studentDetails.tags",
-        "name":"tags",
-        "typeName":"string",
-        "kind":"string",
-        "optional":false
-      },
-      {
-        "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
-      },
-      {
-        "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
-      },
-      {
-        "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
-      },
-      {
-        "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 : 
-
-{
-  "fields":[
-    {
-      "id":"student.studentId",
-      "name":"studentId",
-      "typeName":"int",
-      "kind":"int",
-      "optional":false
-    },
-    {
-      "member":{
-        "id":"student.studentTags",
-        "name":"<studentTagsItem>",
-        "typeName":"string",
-        "kind":"string",
-        "optional":false
-      },
-      "id":"student.studentTags",
-      "name":"studentTags",
-      "typeName":"string[]",
-      "kind":"array",
-      "optional":false
-    },
-    {
-      "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
-    },
-    {
-      "id":"student.studentAddress",
-      "name":"studentAddress",
-      "typeName":"string",
-      "kind":"string",
-      "optional":false
-    },
-    {
-      "id":"student.academicMajor",
-      "name":"academicMajor",
-      "typeName":"string",
-      "kind":"string",
-      "optional":false
-    },
-    {
-      "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:
-
-{
-  "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"
-    }
-  }
-}
-
-## 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/schema.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/schema.ts
index eae58bd7d50..cc31e8123a9 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/schema.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/schema.ts
@@ -16,46 +16,32 @@
 
 import { z } from 'zod';
 
-// Schema for individual operation
-const OperationSchema = z.object({
-  NAME: z.string(),
-  PARAMETER_1: z.union([z.string(), z.number()]).optional(),
-  PARAMETER_2: z.union([z.string(), z.number()]).optional(),
-  PARAMETER_3: z.union([z.string(), z.number()]).optional(),
-  PARAMETER_4: z.union([z.string(), z.number()]).optional(),
-  PARAMETER_5: z.union([z.string(), z.number()]).optional(),
-  PARAMETER_6: z.union([z.string(), z.number()]).optional(),
-  PARAMETER_7: z.union([z.string(), z.number()]).optional(),
-  PARAMETER_8: z.union([z.string(), z.number()]).optional(),
-  PARAMETER_9: z.union([z.string(), z.number()]).optional(),
-  PARAMETER_10: z.union([z.string(), z.number()]).optional(),
+// Forward declaration for recursive Mapping schema
+const MappingSchema: z.ZodType<any> = z.lazy(() => z.object({
+  output: z.string(),
+  expression: z.string(),
+  requiresCustomFunction: z.boolean(),
+  functionContent: z.string().optional(),
+}));
+
+// Main schema for the complete data mapping (array of Mapping objects)
+const DataMappingSchema = z.array(MappingSchema);
+
+// Top-level schema for the generated mappings
+const GeneratedMappingSchema = z.object({
+  generatedMappings: DataMappingSchema,
 });
 
-// Schema for a field mapping that contains an operation
-const FieldMappingSchema = z.object({
-  OPERATION: OperationSchema
+// Schema for a single source file
+const SourceFileSchema = z.object({
+  filePath: z.string().min(1),
+  content: z.string(),
 });
 
-// Schema for nested field mappings (like bio.fullName, bio.age)
-const NestedFieldMappingSchema = z.record(
-  z.string(),
-  z.union([
-    FieldMappingSchema,
-    z.lazy(() => NestedFieldMappingSchema)
-  ])
-);
-
-// Main schema for the complete data mapping
-export const DataMappingSchema = z.record(
-  z.string(),
-  z.union([
-    FieldMappingSchema,
-    NestedFieldMappingSchema
-  ])
-);
-
-// Top-level schema for the data mapping
-export const MappingSchema = z.object({
-  generatedMappings: DataMappingSchema
+// Schema for the array of repaired source files
+const RepairedSourceFilesSchema = z.object({
+  repairedFiles: z.array(SourceFileSchema),
 });
 
+// Export the schema for reuse
+export { GeneratedMappingSchema, RepairedSourceFilesSchema };
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 b52871f49d3..34c28c33ed3 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
@@ -14,94 +14,47 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { IOType } from "@wso2/ballerina-core";
+import { DataMappingRecord, EnumType, IORoot, Mapping, RecordType, SourceFile } from "@wso2/ballerina-core";
 
 // =============================================================================
-// OPERATION TYPES
+// DATA MAPPING REQUEST/RESPONSE
 // =============================================================================
 
-export type OperationType = string;
-
-// =============================================================================
-// MAPPING TYPES
-// =============================================================================
-
-export interface MappingRecord {
-    operation: OperationType;
-    targetType: string;
-    parameters: string[];
+export interface PackageInfo {
+    moduleName: string;
+    packageFilePath: string;
 }
 
-export type MappingJson = MappingRecord | { [key: string]: MappingJson };
-
-export interface DatamapperResponse {
-    mappings: { [key: string]: MappingJson };
+export interface TypesGenerationResult {
+    typesCode: string;
+    filePath: string;
+    recordMap: Map<string, DataMappingRecord>;
 }
 
-export interface Payload {
-    inputs: { [key: string]: RecordField };
-    output: { [key: string]: RecordField };
-    inputMetadata: { [key: string]: Metadata };
-    outputMetadata: { [key: string]: MetadataField };
-    mapping_fields?: { [key: string]: MappingFields };
+export interface DataModelStructure {
+    inputs: IORoot[];
+    output: IORoot;
+    refs: Record<string, RecordType | EnumType>;
 }
 
 // =============================================================================
-// FIELD AND METADATA TYPES
+// DATAMAPPER CODE GENERATION
 // =============================================================================
 
-export interface SimpleField {
-    type: string;
-    comment: string;
-}
-
-export interface MappingOperation {
-    NAME: OperationType;
-    PARAMETER_1: string;
-    PARAMETER_2?: string;
-    PARAMETER_3?: string;
-    PARAMETER_4?: string;
-}
-
-export type RecordField = SimpleField | { [key: string]: RecordField };
-
-export interface Mapping {
-    OPERATION: MappingOperation;
-}
-
-export type AIDataMappings = (Mapping) | { [key: string]: AIDataMappings };
-
-export interface Metadata {
-    parameterName: string;
-    parameterType: string;
-    type: string;
-    isArrayType?: boolean;
-    fields: { [key: string]: MetadataField };
-}
-
-export interface MetadataField {
-    type: string;
-    typeInstance: string;
-    typeName: string;
-    nullable: boolean;
-    optional: boolean;
-    fields?: { [key: string]: MetadataField };
-    members?: { [key: string]: MetadataField };
+export interface DatamapperResponse {
+    mappings: Mapping[];
 }
 
-export interface DataMappingResponse {
-    output: string;
-    inputs?: string[];
-    expression: string;
-}
+// =============================================================================
+// DATAMAPPER CODE REPAIR
+// =============================================================================
 
-export interface DataMappingRequest {
-    input: IOType[];
-    output: IOType;
+export interface RepairedFiles {
+    repairedFiles: SourceFile[];
 }
 
 // =============================================================================
-// MAPPING HINT TYPES
+// MAPPING HINTS
 // =============================================================================
 
 export interface MappingField {
@@ -111,41 +64,8 @@ export interface MappingField {
 
 export type MappingFields = MappingField | { [key: string]: MappingFields };
 
-export type MetadataType = Metadata | MetadataField | { [key: string]: MetadataField };
-
-// =============================================================================
-// OPERATION METADATA STRUCTURES
-// =============================================================================
-
-export interface FieldMetadata {
-    type: string;
-    optional: boolean;
-    nullable: boolean;
-}
-
-export interface ParameterMetadata extends FieldMetadata {
-    input: string;
-}
-
-export interface Structure {
-    operation: string;
-    outputType: string[];
-    inputType: string[];
-    imports: {
-        org?: string;
-        package?: string;
-    };
-    errorReturned: boolean;
-    expression: string;
-}
-
-export interface Operation {
-    readonly name: string;
-    structure: Structure;
-}
-
 // =============================================================================
-// API RESPONSE TYPES
+// CHAT API
 // =============================================================================
 
 export interface ChatMessage {
@@ -167,16 +87,3 @@ export interface ChatResponse {
         total_tokens: number;
     };
 }
-
-// =============================================================================
-// VISITOR PATTERN TYPES
-// =============================================================================
-
-export interface VisitorContext {
-    targetPath: string;
-    found: IOType | null;
-}
-
-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
index 3cd3b3dd1a3..6e6baf68760 100644
--- 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
@@ -18,15 +18,15 @@
 
 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';
+import { StateMachine } from '../../../../stateMachine';
 
 // 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();
+        const projectRoot = StateMachine.context().projectUri;
 
         // Get the project source files
         const projectSource = await getProjectSource(projectRoot);
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/editor/payload-json/payload_json.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/editor/payload-json/payload_json.ts
new file mode 100644
index 00000000000..5f0d06ed3fe
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/editor/payload-json/payload_json.ts
@@ -0,0 +1,52 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 { generateObject } from "ai";
+import { PayloadContext } from "@wso2/ballerina-core";
+import { getAnthropicClient, ANTHROPIC_SONNET_4 } from "../../connection";
+import { AIPanelAbortController } from "../../../../../../src/rpc-managers/ai-panel/utils";
+import { ExamplePayloadSchema, ExamplePayload } from "./schema";
+import { getPayloadGenerationSystemPrompt, getPayloadGenerationUserPrompt } from "./prompts";
+
+/**
+ * Generates an example JSON payload for a service resource using AI
+ *
+ * @param context - The payload context containing service and resource details
+ * @returns Promise<object> - The generated JSON payload
+ * @throws Error if generation fails or response cannot be parsed
+ */
+export async function generateExamplePayload(context: PayloadContext): Promise<object> {
+    const systemPrompt = getPayloadGenerationSystemPrompt(context);
+    const userPrompt = getPayloadGenerationUserPrompt(context);
+
+    try {
+        const { object } = await generateObject({
+            model: await getAnthropicClient(ANTHROPIC_SONNET_4),
+            maxOutputTokens: 4096*2,
+            temperature: 0,
+            system: systemPrompt,
+            prompt: userPrompt,
+            schema: ExamplePayloadSchema,
+            abortSignal: AIPanelAbortController.getInstance().signal,
+        });
+
+        const result = object as ExamplePayload;
+        return result.payload;
+    } catch (error) {
+        console.error("Failed to generate example payload:", error);
+        throw new Error(`Failed to generate example payload: ${error}`);
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/editor/payload-json/prompts.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/editor/payload-json/prompts.ts
new file mode 100644
index 00000000000..257dcbb79cb
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/editor/payload-json/prompts.ts
@@ -0,0 +1,130 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 { PayloadContext, HttpPayloadContext, MessageQueuePayloadContext } from "@wso2/ballerina-core";
+import { isMessageQueuePayloadContext } from "../../utils";
+
+/**
+ * System prompt for generating example JSON payloads
+ */
+export function getSystemPrompt(serviceType: string): string {
+
+    return `You are an expert at generating realistic and contextually appropriate example JSON payloads for ${serviceType} services.
+
+Your task is to analyze the provided service context and generate a meaningful JSON payload that:
+1. Matches the semantic intent of the service and resource
+2. Contains realistic sample data appropriate for the domain
+3. Respects the parameter types and constraints provided
+4. Uses proper naming conventions and data types
+5. Includes nested structures when appropriate for the context
+6. Avoid reintroducing existing parameters unless necessary for completeness
+
+Guidelines:
+- For string fields: Use realistic examples (e.g., "John Doe" for names, "john.doe@example.com" for emails)
+- For numeric fields: Use reasonable values within expected ranges
+- For boolean fields: Choose the most common or expected default
+- For arrays: Include 2-3 example items to show the structure
+- For dates: Use ISO 8601 format (e.g., "2024-01-15T10:30:00Z")
+- Consider the HTTP method and resource path to infer the payload structure
+- If parameter details suggest specific types, ensure the payload respects those types
+
+Return ONLY the JSON payload object in the specified format.`;
+}
+
+/**
+ * User prompt for generating example JSON payloads for HTTP services
+ */
+function getHttpUserPrompt(context: HttpPayloadContext): string {
+    let prompt = `Generate an example JSON payload for the following HTTP service resource:\n\n`;
+
+    prompt += `**Service Name:** ${context.serviceName}\n`;
+    prompt += `**Service Base Path:** ${context.serviceBasePath}\n`;
+
+    if (context.resourceBasePath) {
+        prompt += `**Resource Path:** ${context.resourceBasePath}\n`;
+    }
+
+    if (context.resourceMethod) {
+        prompt += `**HTTP Method:** ${context.resourceMethod}\n`;
+    }
+
+    if (context.resourceDocumentation) {
+        prompt += `**Resource Documentation:** ${context.resourceDocumentation}\n`;
+    }
+
+    if (context.paramDetails && context.paramDetails.length > 0) {
+        prompt += `\n**Existing Parameters:**\n`;
+        context.paramDetails.forEach(param => {
+            prompt += `- **${param.name}** (${param.type})`;
+            if (param.defaulValue) {
+                prompt += ` - Default: ${param.defaulValue}`;
+            }
+            prompt += `\n`;
+        });
+    }
+
+    prompt += `\nBased on the above context, generate a realistic and meaningful example JSON payload that would be appropriate for this service resource.`;
+
+    return prompt;
+}
+
+/**
+ * User prompt for generating example JSON payloads for message brokers
+ */
+function getMessageBrokerUserPrompt(context: MessageQueuePayloadContext): string {
+    let prompt = `Generate an example JSON payload for the following message broker service:\n\n`;
+
+    prompt += `**Service Name:** ${context.serviceName}\n`;
+
+    if (context.queueOrTopic) {
+        prompt += `**Queue/Topic Name:** ${context.queueOrTopic}\n`;
+    }
+
+    if (context.messageDocumentation) {
+        prompt += `**Message Documentation:** ${context.messageDocumentation}\n`;
+    }
+
+    prompt += `\n**IMPORTANT:** Generate ONLY the message payload value that would be consumed by the application logic.
+DO NOT include message broker metadata fields such as topic, partition, offset, timestamp, key, headers, exchange, routing_key, 
+delivery_tag, or any other transport-level metadata.
+Generate ONLY the business data object that represents the actual message content.
+
+Based on the above context, generate a realistic and meaningful example JSON payload that represents the business data for this message.`;
+
+    return prompt;
+}
+
+/**
+ * System prompt for generating example JSON payloads
+ * Automatically selects the appropriate prompt based on the payload context type
+ */
+export function getPayloadGenerationSystemPrompt(context?: PayloadContext): string {
+    if (context && isMessageQueuePayloadContext(context)) {
+        return getSystemPrompt("Message Broker");
+    }
+    return getSystemPrompt("REST API");
+}
+
+/**
+ * User prompt for generating example JSON payloads
+ * Automatically selects the appropriate prompt based on the payload context type
+ */
+export function getPayloadGenerationUserPrompt(context: PayloadContext): string {
+    if (isMessageQueuePayloadContext(context)) {
+        return getMessageBrokerUserPrompt(context);
+    }
+    return getHttpUserPrompt(context as HttpPayloadContext);
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/editor/payload-json/schema.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/editor/payload-json/schema.ts
new file mode 100644
index 00000000000..eac89b05164
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/editor/payload-json/schema.ts
@@ -0,0 +1,26 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 { z } from 'zod';
+
+// Schema for the generated example JSON payload
+// Uses z.any() to allow flexible JSON structure that adapts to the service context
+export const ExamplePayloadSchema = z.object({
+    payload: z.record(z.string(), z.any()).describe("The generated example JSON payload object"),
+});
+
+// Export the type for use in TypeScript
+export type ExamplePayload = z.infer<typeof ExamplePayloadSchema>;
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/event.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/event.ts
index c25db3ab525..cffce53741f 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/event.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/event.ts
@@ -15,7 +15,7 @@
 // under the License.
 
 import { ChatNotify, Command } from "@wso2/ballerina-core";
-import { sendContentAppendNotification, sendContentReplaceNotification, sendDiagnosticMessageNotification, sendErrorNotification, sendMessagesNotification, sendMessageStartNotification, sendMessageStopNotification, sendIntermidateStateNotification, sendToolCallNotification, sendToolResultNotification } from "./utils";
+import { sendContentAppendNotification, sendContentReplaceNotification, sendDiagnosticMessageNotification, sendErrorNotification, sendMessagesNotification, sendMessageStartNotification, sendMessageStopNotification, sendIntermidateStateNotification, sendToolCallNotification, sendToolResultNotification, sendGeneratedSourcesNotification } from "./utils";
 
 export type CopilotEventHandler = (event: ChatNotify) => void;
 
@@ -57,6 +57,9 @@ export function createWebviewEventHandler(command: Command): CopilotEventHandler
             case "diagnostics":
                 sendDiagnosticMessageNotification(event.diagnostics);
                 break;
+            case "generated_sources":
+                sendGeneratedSourcesNotification(event.fileArray);
+                break;
             default:
                 console.warn(`Unhandled event type: ${event}`);
                 break;
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/function_tests.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/function_tests.ts
index f163a14c390..609dbba01b5 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/function_tests.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/function_tests.ts
@@ -17,10 +17,10 @@
 import { TestGenerationTarget, TestGeneratorIntermediaryState, Command } from "@wso2/ballerina-core";
 import { getErrorMessage } from "../utils";
 import { generateTest, getDiagnostics } from "../../testGenerator";
-import { getBallerinaProjectRoot } from "../../../../rpc-managers/ai-panel/rpc-manager";
 import { URI } from "vscode-uri";
 import * as fs from "fs";
 import { CopilotEventHandler, createWebviewEventHandler } from "../event";
+import { StateMachine } from "../../../../stateMachine";
 
 // Core function test generation that emits events
 export async function generateFunctionTestsCore(
@@ -39,7 +39,7 @@ export async function generateFunctionTestsCore(
         content: `\n\n<progress>Generating tests for the function ${functionIdentifier}. This may take a moment.</progress>`,
     });
 
-    const projectRoot = await getBallerinaProjectRoot();
+    const projectRoot = StateMachine.context().projectUri;
     const response = await generateTest(projectRoot, {
         targetType: TestGenerationTarget.Function,
         targetIdentifier: functionIdentifier,
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/test_plan.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/test_plan.ts
index fa03e5ccebb..9643341e7cb 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/test_plan.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/test_plan.ts
@@ -19,9 +19,9 @@ import { getAnthropicClient, ANTHROPIC_SONNET_4 } from "../connection";
 import { getErrorMessage } from "../utils";
 import { TestGenerationTarget, TestPlanGenerationRequest, Command } from "@wso2/ballerina-core";
 import { generateTest, getDiagnostics } from "../../testGenerator";
-import { getBallerinaProjectRoot } from "../../../../rpc-managers/ai-panel/rpc-manager";
 import { CopilotEventHandler, createWebviewEventHandler } from "../event";
 import { AIPanelAbortController } from "../../../../../src/rpc-managers/ai-panel/utils";
+import { StateMachine } from "../../../../stateMachine";
 
 export interface TestPlanResponse {
     testPlan: string;
@@ -168,7 +168,7 @@ export async function generateTestPlanCore(
                         type: "content_block",
                         content: `\n\n<progress>Generating tests for the ${target} service. This may take a moment.</progress>`,
                     });
-                    const projectRoot = await getBallerinaProjectRoot();
+                    const projectRoot = StateMachine.context().projectUri;
                     const testResp = await generateTest(projectRoot, {
                         targetType: TestGenerationTarget.Service,
                         targetIdentifier: target,
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/utils.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/utils.ts
index 58249ba53b9..f0c451730cb 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/utils.ts
@@ -27,11 +27,15 @@ import {
     onChatNotify,
     ProjectSource,
     SourceFiles,
+    SourceFile,
     TestGeneratorIntermediaryState,
     ToolCall,
     ToolResult,
     Command,
-    DocumentationGeneratorIntermediaryState
+    DocumentationGeneratorIntermediaryState,
+    PayloadContext,
+    HttpPayloadContext,
+    MessageQueuePayloadContext
 } from "@wso2/ballerina-core";
 import { ModelMessage } from "ai";
 import { MessageRole } from "./types";
@@ -211,6 +215,14 @@ export function sendToolResultNotification(toolName: string, toolOutput: any): v
     sendAIPanelNotification(msg);
 }
 
+export function sendGeneratedSourcesNotification(fileArray: SourceFile[]): void {
+    const msg: ChatNotify = {
+        type: "generated_sources",
+        fileArray: fileArray,
+    };
+    sendAIPanelNotification(msg);
+}
+
 function sendAIPanelNotification(msg: ChatNotify): void {
     RPCLayer._messenger.sendNotification(onChatNotify, { type: "webview", webviewType: AiPanelWebview.viewType }, msg);
 }
@@ -225,6 +237,9 @@ export function getGenerationMode(generationType: GenerationType) {
 export function getErrorMessage(error: unknown): string {
     if (error instanceof Error) {
         // Standard Error objects have a .message property
+        if (error.name === "UsageLimitError") {
+            return "Usage limit exceeded. Please try again later.";
+        }
         if (error.name === "AI_RetryError") {
             return "An error occured connecting with the AI service. Please try again later.";
         }
@@ -234,13 +249,17 @@ export function getErrorMessage(error: unknown): string {
 
         return error.message;
     }
-    // If it’s an object with a .message field, use that
+    // If it's an object with a .message field, use that
     if (
         typeof error === "object" &&
         error !== null &&
         "message" in error &&
         typeof (error as Record<string, unknown>).message === "string"
     ) {
+        // Check if it has a statusCode property indicating 429
+        if ("statusCode" in error && (error as any).statusCode === 429) {
+            return "Usage limit exceeded. Please try again later.";
+        }
         return (error as { message: string }).message;
     }
     // Fallback: try to JSON-stringify, otherwise call toString()
@@ -250,3 +269,11 @@ export function getErrorMessage(error: unknown): string {
         return String(error);
     }
 }
+
+export function isHttpPayloadContext(context: PayloadContext): context is HttpPayloadContext {
+    return context.protocol === "HTTP";
+}
+
+export function isMessageQueuePayloadContext(context: PayloadContext): context is MessageQueuePayloadContext {
+    return context.protocol === "MESSAGE_BROKER";
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/config-generator/configGenerator.ts b/workspaces/ballerina/ballerina-extension/src/features/config-generator/configGenerator.ts
index 5c437fd2363..9cc7c1c4b5f 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/config-generator/configGenerator.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/config-generator/configGenerator.ts
@@ -29,8 +29,9 @@ import { TextDocumentEdit } from "vscode-languageserver-types";
 import { modifyFileContent } from "../../utils/modification";
 import { fileURLToPath } from "url";
 import { startDebugging } from "../editor-support/activator";
-import { openView } from "../../stateMachine";
+import { openView, StateMachine } from "../../stateMachine";
 import * as path from "path";
+import { TracerMachine } from "../tracing";
 
 const UNUSED_IMPORT_ERR_CODE = "BCE2002";
 
@@ -140,9 +141,11 @@ export async function getCurrentBallerinaProjectFromContext(ballerinaExtInstance
 }
 
 export async function getCurrentBIProject(projectPath: string): Promise<BallerinaProject | undefined> {
-    let currentProject: BallerinaProject = {};
-    currentProject = await getCurrentBallerinaProject(projectPath);
-    return currentProject;
+    if (StateMachine.context().projectUri) {
+        projectPath = StateMachine.context().projectUri;
+    }
+
+    return await getCurrentBallerinaProject(projectPath);
 }
 
 export async function handleOnUnSetValues(packageName: string, configFile: string, ignoreFile: string, ballerinaExtInstance: BallerinaExtension, isCommand: boolean, isBi: boolean): Promise<void> {
@@ -212,6 +215,7 @@ export async function handleOnUnSetValues(packageName: string, configFile: strin
 
 
 async function executeRunCommand(ballerinaExtInstance: BallerinaExtension, filePath: string, isBi?: boolean) {
+    TracerMachine.startServer();
     if (ballerinaExtInstance.enabledRunFast() || isBi) {
         filePath = (await getCurrentBallerinaProject(filePath)).path;
         const projectHasErrors = await cleanAndValidateProject(ballerinaExtInstance.langClient, filePath);
diff --git a/workspaces/ballerina/ballerina-extension/src/features/debugger/config-provider.ts b/workspaces/ballerina/ballerina-extension/src/features/debugger/config-provider.ts
index dfc152e73c4..965fad9fd5b 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/debugger/config-provider.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/debugger/config-provider.ts
@@ -27,7 +27,7 @@ import {
     DebugAdapterTrackerFactory,
     DebugAdapterTracker,
     ViewColumn,
-    TabInputText
+    TaskScope
 } from 'vscode';
 import * as child_process from "child_process";
 import { getPortPromise } from 'portfinder';
@@ -36,24 +36,23 @@ import {
     BallerinaExtension, LANGUAGE, OLD_BALLERINA_VERSION_DEBUGGER_RUNINTERMINAL,
     UNSUPPORTED_DEBUGGER_RUNINTERMINAL_KIND, INVALID_DEBUGGER_RUNINTERMINAL_KIND
 } from '../../core';
-import { ExtendedLangClient } from '../../core/extended-language-client';
 import {
     TM_EVENT_START_DEBUG_SESSION, CMP_DEBUGGER, sendTelemetryEvent, sendTelemetryException,
     CMP_NOTEBOOK, TM_EVENT_START_NOTEBOOK_DEBUG
 } from '../telemetry';
 import { log, debug as debugLog, isSupportedSLVersion, isWindows } from "../../utils";
+import { getProjectWorkingDirectory } from "../../utils/file-utils";
 import { decimal, ExecutableOptions } from 'vscode-languageclient/node';
 import { BAL_NOTEBOOK, getTempFile, NOTEBOOK_CELL_SCHEME } from '../../views/notebook';
 import fileUriToPath from 'file-uri-to-path';
-import { existsSync, readFileSync } from 'fs';
-import { dirname, join, sep } from 'path';
-import { parseTomlToConfig } from '../config-generator/utils';
+import { existsSync } from 'fs';
+import { join } from 'path';
 import { LoggingDebugSession, OutputEvent, TerminatedEvent } from 'vscode-debugadapter';
 import { DebugProtocol } from 'vscode-debugprotocol';
 import { PALETTE_COMMANDS, PROJECT_TYPE } from '../project/cmds/cmd-runner';
 import { Disposable } from 'monaco-languageclient';
-import { getCurrentBallerinaFile, getCurrentBallerinaProject } from '../../utils/project-utils';
-import { BallerinaProject, BallerinaProjectComponents, BIGetEnclosedFunctionRequest, EVENT_TYPE, MainFunctionParamsResponse } from '@wso2/ballerina-core';
+import { getCurrentBallerinaFile, getCurrentBallerinaProject, selectBallerinaProjectForDebugging } from '../../utils/project-utils';
+import { BallerinaProjectComponents, BIGetEnclosedFunctionRequest, EVENT_TYPE, MainFunctionParamsResponse } from '@wso2/ballerina-core';
 import { openView, StateMachine } from '../../stateMachine';
 import { waitForBallerinaService } from '../tryit/utils';
 import { BreakpointManager } from './breakpoint-manager';
@@ -67,8 +66,6 @@ import { findHighestVersionJdk } from '../../utils/server/server';
 
 const BALLERINA_COMMAND = "ballerina.command";
 const EXTENDED_CLIENT_CAPABILITIES = "capabilities";
-const BALLERINA_TOML_REGEX = `**${sep}Ballerina.toml`;
-const BALLERINA_FILE_REGEX = `**${sep}*.bal`;
 const BALLERINA_TOML = `Ballerina.toml`;
 
 export enum DEBUG_REQUEST {
@@ -80,17 +77,6 @@ export enum DEBUG_CONFIG {
     TEST_DEBUG_NAME = 'Ballerina Test'
 }
 
-export interface BALLERINA_TOML {
-    package: PACKAGE;
-    "build-options": any;
-}
-
-export interface PACKAGE {
-    org: string;
-    name: string;
-    version: string;
-    distribution: string;
-}
 
 class DebugConfigProvider implements DebugConfigurationProvider {
     async resolveDebugConfiguration(_folder: WorkspaceFolder, config: DebugConfiguration)
@@ -114,7 +100,7 @@ function getValueFromProgramArgs(programArgs: string[], idx: number) {
 async function handleMainFunctionParams(config: DebugConfiguration) {
     const res = await extension.ballerinaExtInstance.langClient?.getMainFunctionParams({
         projectRootIdentifier: {
-            uri: "file://" + StateMachine.context().projectUri
+            uri: Uri.file(StateMachine.context().projectUri).toString()
         }
     }) as MainFunctionParamsResponse;
     if (res.hasMain) {
@@ -253,6 +239,12 @@ async function getModifiedConfigs(workspaceFolder: WorkspaceFolder, config: Debu
 
     config.noDebug = Boolean(config.noDebug);
 
+    // Notify debug server that the debug session is started in low-code mode
+    const isWebviewPresent = isVisualizerWebviewActive();
+    if (isWebviewPresent && StateMachine.context().isBI) {
+        config.lowCodeMode = true;
+    }
+
     const activeTextEditor = window.activeTextEditor;
 
     if (activeTextEditor && activeTextEditor.document.fileName.endsWith(BAL_NOTEBOOK)) {
@@ -267,52 +259,11 @@ async function getModifiedConfigs(workspaceFolder: WorkspaceFolder, config: Debu
     }
 
     if (!config.script) {
-        const tomls = await workspace.findFiles(workspaceFolder ? new RelativePattern(workspaceFolder, BALLERINA_TOML_REGEX) : BALLERINA_TOML_REGEX);
-        const projects: { project: BallerinaProject; balFile: Uri; relativePath: string }[] = [];
-        for (const toml of tomls) {
-            const projectRoot = dirname(toml.fsPath);
-            const balFiles = await workspace.findFiles(new RelativePattern(projectRoot, BALLERINA_FILE_REGEX), undefined, 1);
-            if (balFiles.length > 0) {
-
-                const tomlContent: string = readFileSync(toml.fsPath, 'utf8');
-                const tomlObj: BALLERINA_TOML = parseTomlToConfig(tomlContent) as BALLERINA_TOML;
-                const relativePath = workspace.asRelativePath(projectRoot);
-                projects.push({ project: { packageName: tomlObj.package.name }, balFile: balFiles[0], relativePath });
-            }
-        }
-
-        if (projects.length > 0) {
-            if (projects.length === 1) {
-                config.script = projects[0].balFile.fsPath;
-            } else {
-                const selectedProject = await window.showQuickPick(projects.map((project) => {
-                    return {
-                        label: project.project.packageName,
-                        description: project.relativePath
-                    };
-                }), { placeHolder: "Select a Ballerina project to debug", canPickMany: false });
-                if (selectedProject) {
-                    config.script = projects[projects.indexOf(projects.find((project) => {
-                        return project.project.packageName === selectedProject.label;
-                    }))].balFile.fsPath;
-                } else {
-                    return Promise.reject();
-                }
-            }
+        // If webview is present and in BI mode, use the project path from the state machine (focused project in BI)
+        if (StateMachine.context().isBI && isWebviewPresent && StateMachine.context().projectUri) {
+            config.script = StateMachine.context().projectUri;
         } else {
-            extension.ballerinaExtInstance.showMessageInvalidProject();
-            return Promise.reject();
-        }
-
-        let langClient = <ExtendedLangClient>extension.ballerinaExtInstance.langClient;
-        if (langClient.initializeResult) {
-            const { experimental } = langClient.initializeResult!.capabilities;
-            if (experimental && experimental.introspection && experimental.introspection.port > 0) {
-                config.networkLogsPort = experimental.introspection.port;
-                if (config.networkLogs === undefined) {
-                    config.networkLogs = false;
-                }
-            }
+            config.script = await selectBallerinaProjectForDebugging(workspaceFolder);
         }
     }
 
@@ -338,14 +289,13 @@ async function getModifiedConfigs(workspaceFolder: WorkspaceFolder, config: Debu
         config.debugServer = debugServerPort.toString();
     }
 
-    // Notify debug server that the debug session is started in low-code mode
-    const isWebviewPresent = VisualizerWebview.currentPanel !== undefined;
-    if (isWebviewPresent && StateMachine.context().isBI) {
-        config.lowCodeMode = true;
-    }
     return config;
 }
 
+function isVisualizerWebviewActive() {
+    return VisualizerWebview.currentPanel !== undefined;
+}
+
 export async function constructDebugConfig(uri: Uri, testDebug: boolean, args?: any): Promise<DebugConfiguration> {
 
     const launchConfig: WorkspaceConfiguration = workspace.getConfiguration('launch').length > 0 ? workspace.getConfiguration('launch') :
@@ -467,7 +417,7 @@ class BallerinaDebugAdapterTrackerFactory implements DebugAdapterTrackerFactory
                         BreakpointManager.getInstance().setActiveBreakpoint(clientBreakpoint);
 
                         if (isWebviewPresent) {
-                            await handleBreakpointVisualization(uri, clientBreakpoint);
+                            await handleDebugHitVisualization(uri, clientBreakpoint);
                         }
                     } else if (msg.command === "continue" || msg.command === "next" || msg.command === "stepIn" || msg.command === "stepOut") {
                         // clear the active breakpoint
@@ -484,7 +434,7 @@ class BallerinaDebugAdapterTrackerFactory implements DebugAdapterTrackerFactory
                         notifyBreakpointChange();
 
                         // restart the fast-run
-                        getCurrentRoot().then(async (root) => {
+                        getCurrentProjectRoot().then(async (root) => {
                             const didStop = await stopRunFast(root);
                             if (didStop) {
                                 runFast(root, msg.body);
@@ -516,13 +466,13 @@ class BallerinaDebugAdapterTrackerFactory implements DebugAdapterTrackerFactory
     }
 }
 
-async function handleBreakpointVisualization(uri: Uri, clientBreakpoint: DebugProtocol.StackFrame) {
+async function handleDebugHitVisualization(uri: Uri, clientBreakpoint: DebugProtocol.StackFrame) {
     const newContext = StateMachine.context();
 
-    // Check if breakpoint is in a different project
+    // Check if breakpoint is in a different package
     if (!uri.fsPath.startsWith(newContext.projectUri)) {
-        console.log("Breakpoint is in a different project");
-        window.showInformationMessage("Cannot visualize breakpoint since it belongs to a different project");
+        console.log("Debug hit in a different package");
+        window.showInformationMessage("Cannot visualize debug hit since it belongs to a different integration");
         openView(EVENT_TYPE.OPEN_VIEW, newContext);
         notifyBreakpointChange();
         return;
@@ -540,7 +490,7 @@ async function handleBreakpointVisualization(uri: Uri, clientBreakpoint: DebugPr
     const res = await StateMachine.langClient().getEnclosedFunctionDef(req);
 
     if (!res?.startLine || !res?.endLine) {
-        window.showInformationMessage("Failed to open the respective view for the breakpoint. Please manually navigate to the respective view.");
+        window.showInformationMessage("Failed to open the respective view for the debug hit. Please manually navigate to the respective view.");
         notifyBreakpointChange();
         return;
     }
@@ -570,7 +520,7 @@ class BallerinaDebugAdapterDescriptorFactory implements DebugAdapterDescriptorFa
     async createDebugAdapterDescriptor(session: DebugSession, executable: DebugAdapterExecutable | undefined): Promise<DebugAdapterDescriptor> {
         // Check if the project contains errors(and fix the possible ones) before starting the debug session
         const langClient = extension.ballerinaExtInstance.langClient;
-        const projectRoot = await getCurrentRoot();
+        const projectRoot = await getCurrentProjectRoot();
         await cleanAndValidateProject(langClient, projectRoot);
 
         // Check if config generation is required before starting the debug session
@@ -582,7 +532,7 @@ class BallerinaDebugAdapterDescriptorFactory implements DebugAdapterDescriptorFa
             });
         }
 
-        if (session.configuration.noDebug && StateMachine.context().isBI) {
+        if (session.configuration.noDebug) {
             return new Promise((resolve) => {
                 resolve(new DebugAdapterInlineImplementation(new BIRunAdapter()));
             });
@@ -665,7 +615,7 @@ class FastRunDebugAdapter extends LoggingDebugSession {
         });
         this.notificationHandler = notificationHandler;
         this.programArgs = (args as any).programArgs;
-        getCurrentRoot().then((root) => {
+        getCurrentProjectRoot().then((root) => {
             this.root = root;
             runFast(root, { programArgs: this.programArgs }).then((didRan) => {
                 response.success = didRan;
@@ -692,48 +642,73 @@ class BIRunAdapter extends LoggingDebugSession {
     taskTerminationListener: Disposable | null = null;
 
     protected launchRequest(response: DebugProtocol.LaunchResponse, args: DebugProtocol.LaunchRequestArguments, request?: DebugProtocol.Request): void {
-        const taskDefinition: TaskDefinition = {
-            type: 'shell',
-            task: 'run'
-        };
-
-        let runCommand: string = `${extension.ballerinaExtInstance.getBallerinaCmd()} run`;
+        getCurrentProjectRoot().then((projectRoot) => {
+            const taskDefinition: TaskDefinition = {
+                type: 'shell',
+                task: 'run'
+            };
 
-        const programArgs = (args as any).programArgs;
-        if (programArgs && programArgs.length > 0) {
-            runCommand = `${runCommand} -- ${programArgs.join(' ')}`;
-        }
+            let runCommand: string = `${extension.ballerinaExtInstance.getBallerinaCmd()} run`;
 
-        if (isSupportedSLVersion(extension.ballerinaExtInstance, 2201130) && extension.ballerinaExtInstance.enabledExperimentalFeatures()) {
-            runCommand = `${runCommand} --experimental`;
-        }
-
-        const execution = new ShellExecution(runCommand);
-        const task = new Task(
-            taskDefinition,
-            workspace.workspaceFolders![0], // Assumes at least one workspace folder is open
-            'Ballerina Run',
-            'ballerina',
-            execution
-        );
-
-        try {
-            tasks.executeTask(task).then((taskExecution) => {
-                this.task = taskExecution;
+            const programArgs = (args as any).programArgs;
+            if (programArgs && programArgs.length > 0) {
+                runCommand = `${runCommand} -- ${programArgs.join(' ')}`;
+            }
 
-                // Add task termination listener
-                this.taskTerminationListener = tasks.onDidEndTaskProcess(e => {
-                    if (e.execution === this.task) {
-                        this.sendEvent(new TerminatedEvent());
-                    }
-                });
+            if (isSupportedSLVersion(extension.ballerinaExtInstance, 2201130) && extension.ballerinaExtInstance.enabledExperimentalFeatures()) {
+                runCommand = `${runCommand} --experimental`;
+            }
 
-                response.success = true;
+            // Use the current process environment which should have the updated PATH
+            const env = process.env;
+            debugLog(`[BIRunAdapter] Creating shell execution with env. PATH length: ${env.PATH?.length || 0}`);
+            
+            // Determine the correct working directory for the task
+            let cwd: string;
+            try {
+                cwd = getProjectWorkingDirectory(projectRoot);
+                debugLog(`[BIRunAdapter] Setting cwd to project root: ${cwd}`);
+            } catch (error) {
+                window.showErrorMessage(`Failed to determine working directory`);
+                response.success = false;
                 this.sendResponse(response);
+                throw error;
+            }
+            
+            const execution = new ShellExecution(runCommand, { 
+                env: env as { [key: string]: string },
+                cwd: cwd
             });
-        } catch (error) {
-            window.showErrorMessage(`Failed to run Ballerina package: ${error}`);
-        }
+            const task = new Task(
+                taskDefinition,
+                TaskScope.Workspace,
+                'Ballerina Run',
+                'ballerina',
+                execution
+            );
+
+            try {
+                tasks.executeTask(task).then((taskExecution) => {
+                    this.task = taskExecution;
+
+                    // Add task termination listener
+                    this.taskTerminationListener = tasks.onDidEndTaskProcess(e => {
+                        if (e.execution === this.task) {
+                            this.sendEvent(new TerminatedEvent());
+                        }
+                    });
+
+                    response.success = true;
+                    this.sendResponse(response);
+                });
+            } catch (error) {
+                window.showErrorMessage(`Failed to run Ballerina package: ${error}`);
+            }
+        }).catch((error) => {
+            window.showErrorMessage(`Failed to determine project root: ${error}`);
+            response.success = false;
+            this.sendResponse(response);
+        });
     }
 
     protected disconnectRequest(response: DebugProtocol.DisconnectResponse, args: DebugProtocol.DisconnectArguments, request?: DebugProtocol.Request): void {
@@ -790,7 +765,14 @@ async function stopRunFast(root: string): Promise<boolean> {
     });
 }
 
-async function getCurrentRoot(): Promise<string> {
+export async function getCurrentProjectRoot(): Promise<string> {
+    // 1. Check if the project path is already set in the state machine context
+    let currentProjectRoot = StateMachine.context().projectUri;
+    if (currentProjectRoot) {
+        return currentProjectRoot;
+    }
+
+    // 2. Try to get any open Ballerina files in the editor and determine the project root from there
     let file: string | undefined;
     try {
         file = getCurrentBallerinaFile();
@@ -798,19 +780,25 @@ async function getCurrentRoot(): Promise<string> {
         // ignore
     }
 
-    // If no Ballerina files are open, safe to assume that the workspace root is same as the package root in BI mode.
-    if (!file) {
-        const workspaceRoot = getWorkspaceRoot();
-        if (!workspaceRoot && StateMachine.context().isBI) {
-            throw new Error("Unable to determine the current workspace root.");
-        }
-        if (isBallerinaProject(workspaceRoot)) {
-            return workspaceRoot;
+    if (file) {
+        const currentProject = await getCurrentBallerinaProject(file);
+        if (currentProject.kind === PROJECT_TYPE.SINGLE_FILE) {
+            return file;
+        } else if (currentProject.path) {
+            return currentProject.path;
         }
     }
 
-    const currentProject = await getCurrentBallerinaProject(file);
-    return (currentProject.kind !== PROJECT_TYPE.SINGLE_FILE) ? currentProject.path! : file;
+    // 3. Fallback to workspace root
+    const workspaceRoot = getWorkspaceRoot();
+    if (!workspaceRoot) {
+        throw new Error("Unable to determine the current workspace root.");
+    }
+    if (isBallerinaProject(workspaceRoot)) {
+        return workspaceRoot;
+    }
+
+    throw new Error(`No valid Ballerina project found`);
 }
 
 function getJavaCommand(): string {
diff --git a/workspaces/ballerina/ballerina-extension/src/features/project/cmds/cmd-runner.ts b/workspaces/ballerina/ballerina-extension/src/features/project/cmds/cmd-runner.ts
index 8dcdc8a3c69..4192d63dcc6 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/project/cmds/cmd-runner.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/project/cmds/cmd-runner.ts
@@ -20,6 +20,7 @@ import { BallerinaProject } from "@wso2/ballerina-core";
 import { Terminal, window, workspace } from "vscode";
 import { isSupportedSLVersion, isWindows } from "../../../utils";
 import { extension } from "../../../BalExtensionContext";
+import { TracerMachine } from "../../../features/tracing";
 
 
 export const PALETTE_COMMANDS = {
@@ -98,11 +99,13 @@ let terminal: Terminal;
 
 export function runCommand(file: BallerinaProject | string, executor: string, cmd: BALLERINA_COMMANDS,
     ...args: string[]) {
+    TracerMachine.startServer();
     runCommandWithConf(file, executor, cmd, '', ...args);
 }
 
 export function runCommandWithConf(file: BallerinaProject | string, executor: string, cmd: BALLERINA_COMMANDS,
     confPath: string, ...args: string[]) {
+    TracerMachine.startServer();
     if (terminal) {
         terminal.dispose();
     }
diff --git a/workspaces/ballerina/ballerina-extension/src/features/project/cmds/run.ts b/workspaces/ballerina/ballerina-extension/src/features/project/cmds/run.ts
index 0a569981c9a..469442d5eb8 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/project/cmds/run.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/project/cmds/run.ts
@@ -25,6 +25,7 @@ import { runCommand, BALLERINA_COMMANDS, PROJECT_TYPE, PALETTE_COMMANDS, runComm
 import { getCurrentBallerinaProject, getCurrentBallerinaFile, getCurrenDirectoryPath } from "../../../utils/project-utils";
 import { prepareAndGenerateConfig } from '../../config-generator/configGenerator';
 import { LANGUAGE } from "../../../core";
+import { TracerMachine } from "../../../features/tracing";
 
 function activateRunCmdCommand() {
 
@@ -45,6 +46,7 @@ function activateRunCmdCommand() {
 
     async function run(args: any[]) {
         try {
+
             sendTelemetryEvent(extension.ballerinaExtInstance, TM_EVENT_PROJECT_RUN, CMP_PROJECT_RUN);
             if (window.activeTextEditor && window.activeTextEditor.document.isDirty) {
                 await commands.executeCommand(PALETTE_COMMANDS.SAVE_ALL);
diff --git a/workspaces/ballerina/ballerina-extension/src/features/tracing/activate.ts b/workspaces/ballerina/ballerina-extension/src/features/tracing/activate.ts
new file mode 100644
index 00000000000..32b21e20a77
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/tracing/activate.ts
@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed on an "AS IS" BASIS, WITHOUT 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 { BallerinaExtension } from '../../core';
+import { TracerMachine } from './tracer-machine';
+import { TraceTreeDataProvider } from './trace-tree-view';
+import { TraceServer, Trace } from './trace-server';
+import { TraceDetailsWebview } from './trace-details-webview';
+
+export const TRACE_WINDOW_COMMAND = 'ballerina.showTraceWindow';
+export const ENABLE_TRACING_COMMAND = 'ballerina.enableTracing';
+export const DISABLE_TRACING_COMMAND = 'ballerina.disableTracing';
+export const CLEAR_TRACES_COMMAND = 'ballerina.clearTraces';
+export const SHOW_TRACE_DETAILS_COMMAND = 'ballerina.showTraceDetails';
+export const TRACE_VIEW_ID = 'ballerina-traceView';
+
+let treeDataProvider: TraceTreeDataProvider | undefined;
+let treeView: vscode.TreeView<vscode.TreeItem> | undefined;
+
+export function activateTracing(ballerinaExtInstance: BallerinaExtension) {
+    const workspaceDirs: string[] = [];
+    try {
+        const folders = vscode.workspace.workspaceFolders;
+        if (folders && folders.length > 0) {
+            workspaceDirs.push(...folders.map(folder => folder.uri.fsPath));
+        }
+    } catch (_) {
+        // ignore
+    }
+
+    // Initialize TracerMachine
+    TracerMachine.initialize(workspaceDirs.length > 0 ? workspaceDirs : undefined);
+
+    // Create TreeDataProvider
+    treeDataProvider = new TraceTreeDataProvider();
+
+    // Create and register TreeView in bottom panel (debug container)
+    treeView = vscode.window.createTreeView(TRACE_VIEW_ID, {
+        treeDataProvider: treeDataProvider,
+        showCollapseAll: true
+    });
+
+    // Subscribe to TracerMachine state changes to update VS Code context
+    TracerMachine.onUpdate(async (state: any) => {
+        await updateContextFromState(state);
+    });
+
+    // Set initial context based on current state
+    const initialState = TracerMachine.getState();
+    updateContextFromState(initialState);
+
+    // Register commands
+    const showTraceWindowCommand = vscode.commands.registerCommand(TRACE_WINDOW_COMMAND, async () => {
+        await showTraceWindow();
+    });
+
+    const enableTracingCommand = vscode.commands.registerCommand(ENABLE_TRACING_COMMAND, () => {
+        TracerMachine.enable();
+        // Focus the VS Code panel section
+        vscode.commands.executeCommand('workbench.action.focusPanel');
+        // Reveal/focus the ballerina-traceView (shows trace panel in panel)
+        vscode.commands.executeCommand('workbench.view.extension.ballerina-traceView');
+    });
+
+    const disableTracingCommand = vscode.commands.registerCommand(DISABLE_TRACING_COMMAND, () => {
+        TracerMachine.disable();
+    });
+
+    const clearTracesCommand = vscode.commands.registerCommand(CLEAR_TRACES_COMMAND, () => {
+        // Clear traces from the server
+        TraceServer.clearTraces();
+
+        // The TraceServer.onTracesCleared callback will update the context and refresh the tree
+    });
+
+    const showTraceDetailsCommand = vscode.commands.registerCommand(
+        SHOW_TRACE_DETAILS_COMMAND,
+        (trace: Trace) => {
+            showTraceDetails(trace);
+        }
+    );
+
+    // Add all subscriptions
+    ballerinaExtInstance.context.subscriptions.push(
+        treeView,
+        showTraceWindowCommand,
+        enableTracingCommand,
+        disableTracingCommand,
+        clearTracesCommand,
+        showTraceDetailsCommand,
+        treeDataProvider
+    );
+}
+
+/**
+ * Update VS Code context based on TracerMachine state
+ */
+async function updateContextFromState(state: any): Promise<void> {
+    const isEnabled = typeof state === 'string'
+        ? state === 'enabled'
+        : (typeof state === 'object' && state !== null && 'enabled' in state);
+
+    await vscode.commands.executeCommand('setContext', 'ballerina.tracingEnabled', isEnabled);
+
+    if (isEnabled) {
+        // Check if traces exist
+        const traces = TraceServer.getTraces();
+        await vscode.commands.executeCommand('setContext', 'ballerina.tracesEmpty', traces.length === 0);
+    }
+}
+
+/**
+ * Show/reveal the trace window
+ */
+async function showTraceWindow(): Promise<void> {
+    if (!treeView) {
+        return;
+    }
+
+    try {
+        // Show the view by executing the show command for the debug container
+        // The trace view is in the debug container (bottom panel)
+        await vscode.commands.executeCommand('workbench.view.debug');
+
+        // Small delay to ensure the view is ready
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // If there are traces, try to reveal the first one
+        const traces = TraceServer.getTraces();
+        if (traces.length > 0 && treeDataProvider) {
+            const children = await treeDataProvider.getChildren();
+            if (children && children.length > 0 && children[0]) {
+                // Reveal the first trace node
+                await treeView.reveal(children[0], { focus: true, select: false });
+            }
+        }
+    } catch (error) {
+        // If reveal fails, at least ensure the view is visible
+        // The error might be due to getParent, but the view should still be shown
+        console.error('Error revealing trace window:', error);
+    }
+}
+
+/**
+ * Show trace details in a webview
+ */
+function showTraceDetails(trace: Trace): void {
+    try {
+        TraceDetailsWebview.show(trace);
+    } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        vscode.window.showErrorMessage(`Failed to show trace details: ${message}`);
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/tracing/constants.ts b/workspaces/ballerina/ballerina-extension/src/features/tracing/constants.ts
new file mode 100644
index 00000000000..e5709325eb3
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/tracing/constants.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 const OTLP_PORT = 59500; // Custom OTLP/HTTP port
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-extension/src/features/tracing/index.ts b/workspaces/ballerina/ballerina-extension/src/features/tracing/index.ts
new file mode 100644
index 00000000000..4ca3b150623
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/tracing/index.ts
@@ -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.
+ */
+
+export { activateTracing, TRACE_WINDOW_COMMAND, ENABLE_TRACING_COMMAND, TRACE_VIEW_ID } from './activate';
+export { TracerMachine } from './tracer-machine';
+export { TraceServer } from './trace-server';
diff --git a/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-details-webview.ts b/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-details-webview.ts
new file mode 100644
index 00000000000..4d80bdb88fd
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-details-webview.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 * as vscode from 'vscode';
+import * as path from 'path';
+import { Uri, ViewColumn, Webview } from 'vscode';
+import { extension } from '../../BalExtensionContext';
+import { Trace } from './trace-server';
+import { getLibraryWebViewContent, getComposerWebViewOptions, WebViewOptions } from '../../utils/webview-utils';
+
+// TraceData interface matching the trace-visualizer component
+interface TraceData {
+    traceId: string;
+    spans: SpanData[];
+    resource: ResourceData;
+    scope: ScopeData;
+    firstSeen: string;
+    lastSeen: string;
+}
+
+interface SpanData {
+    spanId: string;
+    traceId: string;
+    parentSpanId: string;
+    name: string;
+    kind: string | number;
+    startTime?: string;
+    endTime?: string;
+    attributes?: AttributeData[];
+}
+
+interface ResourceData {
+    name: string;
+    attributes: AttributeData[];
+}
+
+interface ScopeData {
+    name: string;
+    version?: string;
+    attributes?: AttributeData[];
+}
+
+interface AttributeData {
+    key: string;
+    value: string;
+}
+
+export class TraceDetailsWebview {
+    private static instance: TraceDetailsWebview | undefined;
+    private _panel: vscode.WebviewPanel | undefined;
+    private _disposables: vscode.Disposable[] = [];
+    private _trace: Trace | undefined;
+    private _isAgentChat: boolean = false;
+
+    private constructor() {
+        this._panel = TraceDetailsWebview.createWebview();
+        this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+        this.setupMessageHandler();
+    }
+
+    private setupMessageHandler(): void {
+        if (!this._panel) {
+            return;
+        }
+
+        this._panel.webview.onDidReceiveMessage(
+            (message) => {
+                switch (message.command) {
+                    case 'requestTraceData':
+                        if (this._trace) {
+                            const traceData = this.convertTraceToTraceData(this._trace);
+                            this._panel!.webview.postMessage({
+                                command: 'traceData',
+                                data: traceData,
+                                isAgentChat: this._isAgentChat,
+                            });
+                        }
+                        break;
+                }
+            },
+            null,
+            this._disposables
+        );
+    }
+
+    private static createWebview(): vscode.WebviewPanel {
+        const panel = vscode.window.createWebviewPanel(
+            'ballerina.trace-details',
+            'Trace Details',
+            ViewColumn.Active,
+            {
+                enableScripts: true,
+                localResourceRoots: [
+                    Uri.file(path.join(extension.context.extensionPath, 'resources', 'jslibs')),
+                    Uri.file(path.join(extension.context.extensionPath, 'resources')),
+                ],
+                retainContextWhenHidden: true,
+            }
+        );
+        panel.iconPath = {
+            light: Uri.file(path.join(extension.context.extensionPath, 'resources', 'images', 'icons', 'ballerina.svg')),
+            dark: Uri.file(path.join(extension.context.extensionPath, 'resources', 'images', 'icons', 'ballerina-inverse.svg'))
+        };
+        return panel;
+    }
+
+    public static show(trace: Trace, isAgentChat: boolean = false): void {
+        if (!TraceDetailsWebview.instance || !TraceDetailsWebview.instance._panel) {
+            // Create new instance if it doesn't exist or was disposed
+            TraceDetailsWebview.instance = new TraceDetailsWebview();
+        }
+
+        // Update the trace and reveal the panel
+        const instance = TraceDetailsWebview.instance;
+        instance._trace = trace;
+        instance._isAgentChat = isAgentChat;
+
+        // Update title based on isAgentChat flag
+        if (instance._panel) {
+            instance._panel.title = isAgentChat ? 'Agent Chat Logs' : 'Trace Details';
+        }
+
+        instance._panel!.reveal();
+        instance.updateWebview();
+    }
+
+    private updateWebview(): void {
+        if (!this._panel || !this._trace) {
+            return;
+        }
+
+        this._panel.webview.html = this.getWebviewContent(this._trace, this._panel.webview);
+
+        // Send trace data immediately after updating HTML (in case webview is already loaded)
+        // The webview will also request it if needed
+        const traceData = this.convertTraceToTraceData(this._trace);
+        this._panel.webview.postMessage({
+            command: 'traceData',
+            data: traceData,
+            isAgentChat: this._isAgentChat,
+        });
+    }
+
+    private convertTraceToTraceData(trace: Trace): TraceData {
+        return {
+            traceId: trace.traceId,
+            spans: trace.spans.map(span => ({
+                spanId: span.spanId,
+                traceId: span.traceId,
+                parentSpanId: span.parentSpanId,
+                name: span.name,
+                kind: span.kind,
+                startTime: span.startTime,
+                endTime: span.endTime,
+                attributes: span.attributes || [],
+            })),
+            resource: {
+                name: trace.resource.name,
+                attributes: trace.resource.attributes || [],
+            },
+            scope: {
+                name: trace.scope.name,
+                version: trace.scope.version,
+                attributes: trace.scope.attributes || [],
+            },
+            firstSeen: trace.firstSeen.toISOString(),
+            lastSeen: trace.lastSeen.toISOString(),
+        };
+    }
+
+    private getWebviewContent(trace: Trace, webView: Webview): string {
+        const body = `<div class="container" id="webview-container"></div>`;
+        const bodyCss = ``;
+        const styles = `
+            .container {
+                background-color: var(--vscode-editor-background);
+                height: 100vh;
+                width: 100%;
+            }
+        `;
+        const scripts = `
+            const vscode = acquireVsCodeApi();
+            let traceData = null;
+            let isAgentChat = false;
+
+            function renderTraceDetails() {
+                if (window.traceVisualizer && window.traceVisualizer.renderWebview && traceData) {
+                    const container = document.getElementById("webview-container");
+                    if (container) {
+                        window.traceVisualizer.renderWebview(traceData, isAgentChat, container);
+                    }
+                } else if (!traceData) {
+                    // Request trace data from extension
+                    vscode.postMessage({ command: 'requestTraceData' });
+                } else {
+                    console.error("TraceVisualizer not loaded");
+                    setTimeout(renderTraceDetails, 100);
+                }
+            }
+
+            // Listen for messages from the extension
+            window.addEventListener('message', event => {
+                const message = event.data;
+                switch (message.command) {
+                    case 'traceData':
+                        traceData = message.data;
+                        isAgentChat = message.isAgentChat || false;
+                        renderTraceDetails();
+                        break;
+                }
+            });
+
+            function loadedScript() {
+                // Request trace data when script is loaded
+                vscode.postMessage({ command: 'requestTraceData' });
+            }
+        `;
+        const options = process.env.TRACE_WEB_VIEW_DEV_HOST ? { devHost: process.env.TRACE_WEB_VIEW_DEV_HOST } : {};
+        const webViewOptions: WebViewOptions = {
+            ...getComposerWebViewOptions("TraceVisualizer", webView, options),
+            body,
+            scripts,
+            styles,
+            bodyCss,
+        };
+
+        return getLibraryWebViewContent(webViewOptions, webView);
+    }
+
+
+    public dispose(): void {
+        this._panel?.dispose();
+
+        while (this._disposables.length) {
+            const disposable = this._disposables.pop();
+            if (disposable) {
+                disposable.dispose();
+            }
+        }
+
+        this._panel = undefined;
+        this._trace = undefined;
+        
+        // Clear the static instance when disposed
+        if (TraceDetailsWebview.instance === this) {
+            TraceDetailsWebview.instance = undefined;
+        }
+    }
+}
+
diff --git a/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-server-task.ts b/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-server-task.ts
new file mode 100644
index 00000000000..1e1bcf33e4f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-server-task.ts
@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed on an "AS IS" BASIS, WITHOUT 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 { TraceServer } from './trace-server';
+import { OTLP_PORT } from './constants';
+
+
+/**
+ * Creates a VS Code task that starts the trace server Express application
+ * Uses CustomExecution to run the server inside the extension host
+ * @returns A VS Code Task that starts the trace server
+ */
+export function createTraceServerTask(): vscode.Task {
+    const taskDefinition: vscode.TaskDefinition = {
+        type: 'custom',
+        task: 'start-trace-server'
+    };
+
+    // Create CustomExecution that runs the server in the extension host
+    const execution = new vscode.CustomExecution(async (): Promise<vscode.Pseudoterminal> => {
+        return new TraceServerPseudoterminal();
+    });
+
+    const task = new vscode.Task(
+        taskDefinition,
+        vscode.TaskScope.Workspace,
+        'Start Trace Server',
+        'ballerina-tracing',
+        execution
+    );
+
+    // Configure task presentation
+    task.presentationOptions = {
+        reveal: vscode.TaskRevealKind.Always,
+        panel: vscode.TaskPanelKind.New,
+        showReuseMessage: false,
+        clear: false,
+        echo: true,
+        focus: false
+    };
+
+    // Set task as a background task (keeps running)
+    task.isBackground = true;
+    task.problemMatchers = [];
+
+    return task;
+}
+
+/**
+ * Pseudoterminal implementation for the trace server task
+ * This runs the Express server inside the extension host
+ */
+class TraceServerPseudoterminal implements vscode.Pseudoterminal {
+    private writeEmitter = new vscode.EventEmitter<string>();
+    private closeEmitter = new vscode.EventEmitter<number>();
+    private serverStarted = false;
+
+    readonly onDidWrite: vscode.Event<string> = this.writeEmitter.event;
+    readonly onDidClose: vscode.Event<number> = this.closeEmitter.event;
+
+    open(initialDimensions: vscode.TerminalDimensions | undefined): void {
+        this.writeLine('🚀 Starting Trace Server...');
+        this.writeLine('');
+
+        // Start the trace server
+        TraceServer.start(OTLP_PORT)
+            .then(() => {
+                this.serverStarted = true;
+                this.writeLine(`📡 OTLP Tracing server started successfully on port ${OTLP_PORT}`);
+                this.writeLine('Do not close this terminal window. It will be used to receive OTLP traces.');
+            })
+            .catch((error) => {
+                const message = error instanceof Error ? error.message : String(error);
+                this.writeLine(`❌ Failed to start trace server: ${message}`);
+                
+                // Check if port is already in use
+                if (message.includes('EADDRINUSE') || message.includes('address already in use')) {
+                    this.writeLine('');
+                    this.writeLine(`⚠️  Port ${OTLP_PORT} is already in use.`);
+                    this.writeLine('   The server may already be running.');
+                    if (TraceServer.isRunning()) {
+                        this.writeLine('   Server is already running in this extension.');
+                    }
+                }
+                
+                this.writeLine('');
+                // Close with error code
+                setTimeout(() => {
+                    this.closeEmitter.fire(1);
+                }, 1000);
+            });
+    }
+
+    close(): void {
+        if (this.serverStarted) {
+            this.writeLine('');
+            this.writeLine('👋 Shutting down trace server...');
+            
+            TraceServer.stop()
+                .then(() => {
+                    this.writeLine('✅ Trace server stopped');
+                    this.closeEmitter.fire(0);
+                })
+                .catch((error) => {
+                    const message = error instanceof Error ? error.message : String(error);
+                    this.writeLine(`⚠️  Error stopping server: ${message}`);
+                    this.closeEmitter.fire(1);
+                });
+        } else {
+            this.closeEmitter.fire(0);
+        }
+    }
+
+    handleInput(data: string): void {
+        // Handle Ctrl+C (EOF) to close the terminal
+        if (data === '\x03') { // Ctrl+C
+            this.close();
+        }
+    }
+
+    private writeLine(text: string): void {
+        this.writeEmitter.fire(text + '\r\n');
+    }
+}
+
+/**
+ * Executes the trace server task
+ * @param workspaceFolder Optional workspace folder
+ * @returns Promise that resolves when the task is executed
+ */
+export async function executeTraceServerTask(): Promise<void> {
+    const task = createTraceServerTask();
+    try {
+        const taskExecution = await vscode.tasks.executeTask(task);
+        console.log('Trace server task executed');
+        return;
+    } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        vscode.window.showErrorMessage(`Failed to execute trace server task: ${message}`);
+        throw error;
+    }
+}
+
diff --git a/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-server.ts b/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-server.ts
new file mode 100644
index 00000000000..d29a8fb1f8f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-server.ts
@@ -0,0 +1,526 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 express from 'express';
+import { EventEmitter } from 'events';
+
+
+export interface Trace {
+    traceId: string;
+    spans: Span[];
+    resource: Resource;
+    scope: Scope;
+    firstSeen: Date;
+    lastSeen: Date;
+}
+
+export interface Span {
+    spanId: string;
+    traceId: string;
+    parentSpanId: string;
+    name: string;
+    kind: string;
+    startTime?: string;
+    endTime?: string;
+    attributes?: Attribute[];
+}
+
+export interface Resource {
+    name: string;
+    attributes: Attribute[];
+}
+
+export interface Scope {
+    name: string;
+    version?: string;
+    attributes?: Attribute[];
+}
+
+export interface Attribute {
+    key: string;
+    value: string;
+}
+
+export interface TraceServer {
+    start(port: number): Promise<void>;
+    stop(): Promise<void>;
+    isRunning(): boolean;
+    getTraces(): Trace[];
+    clearTraces(): void;
+    getTrace(traceId: string): Trace;
+    getTraceBySpanId(spanId: string): Trace;
+    getTraceByResource(resource: string): Trace;
+    getTraceByScope(scope: string): Trace;
+    getTraceByFirstSeen(firstSeen: Date): Trace;
+    getTraceByLastSeen(lastSeen: Date): Trace;
+    onTracesUpdated(callback: () => void): () => void;
+    onTracesCleared(callback: () => void): () => void;
+}
+
+
+const app = express();
+let server: ReturnType<typeof app.listen> | undefined;
+
+// Parse both JSON and Protobuf
+app.use(express.json());
+app.use(express.raw({ type: 'application/x-protobuf', limit: '10mb' }));
+
+// In-memory trace storage with LRU eviction
+const MAX_TRACES = 100;
+const traceStore = new Map(); // Map<traceId, { traceId, spans: [], resource, scope, firstSeen, lastSeen }>
+
+// Event emitter for trace updates
+const traceEvents = new EventEmitter();
+
+// Enforce trace limit with LRU eviction
+function enforceTraceLimit(): void {
+    if (traceStore.size > MAX_TRACES) {
+        // Convert to array and sort by lastSeen (oldest first)
+        const traces = Array.from(traceStore.entries()).sort((a, b) =>
+            a[1].lastSeen.getTime() - b[1].lastSeen.getTime()
+        );
+
+        // Remove oldest traces until we're at the limit
+        const numToRemove = traceStore.size - MAX_TRACES;
+        for (let i = 0; i < numToRemove; i++) {
+            traceStore.delete(traces[i][0]);
+        }
+    }
+}
+
+// Color codes for better readability
+const colors = {
+    reset: '\x1b[0m',
+    bright: '\x1b[1m',
+    cyan: '\x1b[36m',
+    green: '\x1b[32m',
+    yellow: '\x1b[33m',
+    red: '\x1b[31m',
+    magenta: '\x1b[35m',
+    blue: '\x1b[34m'
+};
+
+function bytesToHex(bytes) {
+    if (!bytes) { return 'N/A'; }
+    if (typeof bytes === 'string') { return bytes; }
+    return Buffer.from(bytes).toString('hex');
+}
+
+// REST API endpoint to get traces as JSON
+app.get('/api/traces', (req, res) => {
+    const traces = Array.from(traceStore.values()).sort((a, b) => b.lastSeen - a.lastSeen);
+
+    // Convert to JSON-friendly format with hex IDs
+    const tracesData = traces.map(trace => ({
+        traceId: trace.traceId,
+        spans: trace.spans.map(span => ({
+            ...span,
+            traceId: bytesToHex(span.traceId),
+            spanId: bytesToHex(span.spanId),
+            parentSpanId: bytesToHex(span.parentSpanId)
+        })),
+        resource: trace.resource,
+        scope: trace.scope,
+        firstSeen: trace.firstSeen,
+        lastSeen: trace.lastSeen
+    }));
+
+    res.json({ traces: tracesData });
+});
+
+// OTLP/HTTP endpoint for traces
+app.post('/v1/traces', async (req, res) => {
+    const contentType = req.headers['content-type'] || '';
+
+    try {
+        let resourceSpans;
+
+        // Handle Protobuf format (default from Java SDK)
+        if (contentType.includes('application/x-protobuf') || Buffer.isBuffer(req.body)) {
+
+            // The @opentelemetry/otlp-transformer can decode protobuf
+            // But it's complex, so let's use a simpler approach with protobufjs
+            const { default: protobuf } = await import('protobufjs');
+
+            // Define the complete OTLP protobuf schema inline
+            const root = protobuf.Root.fromJSON({
+                nested: {
+                    opentelemetry: {
+                        nested: {
+                            proto: {
+                                nested: {
+                                    trace: {
+                                        nested: {
+                                            v1: {
+                                                nested: {
+                                                    TracesData: {
+                                                        fields: {
+                                                            resourceSpans: {
+                                                                rule: 'repeated',
+                                                                type: 'ResourceSpans',
+                                                                id: 1
+                                                            }
+                                                        }
+                                                    },
+                                                    ResourceSpans: {
+                                                        fields: {
+                                                            resource: { type: 'Resource', id: 1 },
+                                                            scopeSpans: { rule: 'repeated', type: 'ScopeSpans', id: 2 },
+                                                            schemaUrl: { type: 'string', id: 3 }
+                                                        }
+                                                    },
+                                                    Resource: {
+                                                        fields: {
+                                                            attributes: { rule: 'repeated', type: 'KeyValue', id: 1 },
+                                                            droppedAttributesCount: { type: 'uint32', id: 2 }
+                                                        }
+                                                    },
+                                                    ScopeSpans: {
+                                                        fields: {
+                                                            scope: { type: 'InstrumentationScope', id: 1 },
+                                                            spans: { rule: 'repeated', type: 'Span', id: 2 },
+                                                            schemaUrl: { type: 'string', id: 3 }
+                                                        }
+                                                    },
+                                                    InstrumentationScope: {
+                                                        fields: {
+                                                            name: { type: 'string', id: 1 },
+                                                            version: { type: 'string', id: 2 },
+                                                            attributes: { rule: 'repeated', type: 'KeyValue', id: 3 },
+                                                            droppedAttributesCount: { type: 'uint32', id: 4 }
+                                                        }
+                                                    },
+                                                    Span: {
+                                                        fields: {
+                                                            traceId: { type: 'bytes', id: 1 },
+                                                            spanId: { type: 'bytes', id: 2 },
+                                                            traceState: { type: 'string', id: 3 },
+                                                            parentSpanId: { type: 'bytes', id: 4 },
+                                                            name: { type: 'string', id: 5 },
+                                                            kind: { type: 'SpanKind', id: 6 },
+                                                            startTimeUnixNano: { type: 'fixed64', id: 7 },
+                                                            endTimeUnixNano: { type: 'fixed64', id: 8 },
+                                                            attributes: { rule: 'repeated', type: 'KeyValue', id: 9 },
+                                                            droppedAttributesCount: { type: 'uint32', id: 10 },
+                                                            events: { rule: 'repeated', type: 'Event', id: 11 },
+                                                            droppedEventsCount: { type: 'uint32', id: 12 },
+                                                            links: { rule: 'repeated', type: 'Link', id: 13 },
+                                                            droppedLinksCount: { type: 'uint32', id: 14 },
+                                                            status: { type: 'Status', id: 15 },
+                                                            flags: { type: 'uint32', id: 16 }
+                                                        }
+                                                    },
+                                                    Event: {
+                                                        fields: {
+                                                            timeUnixNano: { type: 'fixed64', id: 1 },
+                                                            name: { type: 'string', id: 2 },
+                                                            attributes: { rule: 'repeated', type: 'KeyValue', id: 3 },
+                                                            droppedAttributesCount: { type: 'uint32', id: 4 }
+                                                        }
+                                                    },
+                                                    Link: {
+                                                        fields: {
+                                                            traceId: { type: 'bytes', id: 1 },
+                                                            spanId: { type: 'bytes', id: 2 },
+                                                            traceState: { type: 'string', id: 3 },
+                                                            attributes: { rule: 'repeated', type: 'KeyValue', id: 4 },
+                                                            droppedAttributesCount: { type: 'uint32', id: 5 },
+                                                            flags: { type: 'uint32', id: 6 }
+                                                        }
+                                                    },
+                                                    KeyValue: {
+                                                        fields: {
+                                                            key: { type: 'string', id: 1 },
+                                                            value: { type: 'AnyValue', id: 2 }
+                                                        }
+                                                    },
+                                                    AnyValue: {
+                                                        fields: {
+                                                            stringValue: { type: 'string', id: 1 },
+                                                            boolValue: { type: 'bool', id: 2 },
+                                                            intValue: { type: 'int64', id: 3 },
+                                                            doubleValue: { type: 'double', id: 4 },
+                                                            arrayValue: { type: 'ArrayValue', id: 5 },
+                                                            kvlistValue: { type: 'KeyValueList', id: 6 },
+                                                            bytesValue: { type: 'bytes', id: 7 }
+                                                        }
+                                                    },
+                                                    ArrayValue: {
+                                                        fields: {
+                                                            values: { rule: 'repeated', type: 'AnyValue', id: 1 }
+                                                        }
+                                                    },
+                                                    KeyValueList: {
+                                                        fields: {
+                                                            values: { rule: 'repeated', type: 'KeyValue', id: 1 }
+                                                        }
+                                                    },
+                                                    Status: {
+                                                        fields: {
+                                                            message: { type: 'string', id: 2 },
+                                                            code: { type: 'StatusCode', id: 3 }
+                                                        }
+                                                    },
+                                                    SpanKind: {
+                                                        values: {
+                                                            SPAN_KIND_UNSPECIFIED: 0,
+                                                            SPAN_KIND_INTERNAL: 1,
+                                                            SPAN_KIND_SERVER: 2,
+                                                            SPAN_KIND_CLIENT: 3,
+                                                            SPAN_KIND_PRODUCER: 4,
+                                                            SPAN_KIND_CONSUMER: 5
+                                                        }
+                                                    },
+                                                    StatusCode: {
+                                                        values: {
+                                                            STATUS_CODE_UNSET: 0,
+                                                            STATUS_CODE_OK: 1,
+                                                            STATUS_CODE_ERROR: 2
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+
+            const TracesData = root.lookupType('opentelemetry.proto.trace.v1.TracesData');
+            const decoded = TracesData.decode(req.body);
+            const traceData = TracesData.toObject(decoded, {
+                longs: String,
+                bytes: Array
+            });
+
+            resourceSpans = traceData.resourceSpans;
+        }
+        // Handle JSON format
+        else {
+            resourceSpans = req.body.resourceSpans;
+        }
+
+        if (resourceSpans && Array.isArray(resourceSpans)) {
+            // Group spans by traceId to show trace structure
+            const traceMap = new Map();
+            let totalSpans = 0;
+            const now = new Date();
+
+            // Helper function to extract string value from OTLP AnyValue
+            const extractValue = (anyValue: any): string => {
+                if (!anyValue) { return ''; }
+                if (typeof anyValue === 'string') { return anyValue; }
+                if (anyValue.stringValue !== undefined) { return String(anyValue.stringValue); }
+                if (anyValue.intValue !== undefined) { return String(anyValue.intValue); }
+                if (anyValue.doubleValue !== undefined) { return String(anyValue.doubleValue); }
+                if (anyValue.boolValue !== undefined) { return String(anyValue.boolValue); }
+                return '';
+            };
+
+            // Helper function to extract resource name from attributes
+            const extractResourceName = (resource: any): string => {
+                if (resource.name) { return resource.name; }
+                if (resource.attributes) {
+                    const serviceNameAttr = resource.attributes.find((attr: any) => 
+                        attr.key === 'service.name' || attr.key === 'service_name'
+                    );
+                    if (serviceNameAttr) {
+                        return extractValue(serviceNameAttr.value);
+                    }
+                }
+                return 'Unknown Resource';
+            };
+
+            // Helper function to process resource attributes
+            const processAttributes = (attributes: any[]): Array<{key: string; value: string}> => {
+                if (!attributes || !Array.isArray(attributes)) { return []; }
+                return attributes.map((attr: any) => ({
+                    key: attr.key || '',
+                    value: extractValue(attr.value)
+                }));
+            };
+
+            // Collect all spans and group by traceId
+            resourceSpans.forEach(resourceSpan => {
+                if (resourceSpan.scopeSpans) {
+                    resourceSpan.scopeSpans.forEach(scopeSpan => {
+                        if (scopeSpan.spans) {
+                            scopeSpan.spans.forEach(span => {
+                                const traceId = bytesToHex(span.traceId);
+                                if (!traceMap.has(traceId)) {
+                                    // Process resource and scope
+                                    const resourceName = extractResourceName(resourceSpan.resource);
+                                    const scopeName = scopeSpan.scope?.name || 'Unknown Scope';
+                                    
+                                    traceMap.set(traceId, {
+                                        spans: [],
+                                        resource: {
+                                            name: resourceName,
+                                            attributes: processAttributes(resourceSpan.resource?.attributes)
+                                        },
+                                        scope: {
+                                            name: scopeName,
+                                            version: scopeSpan.scope?.version,
+                                            attributes: processAttributes(scopeSpan.scope?.attributes)
+                                        }
+                                    });
+                                }
+                                // Convert span IDs to hex strings to match interface
+                                // Convert timestamps from nanoseconds to ISO strings
+                                const startTime = span.startTimeUnixNano
+                                    ? new Date(Number(span.startTimeUnixNano) / 1_000_000).toISOString()
+                                    : undefined;
+                                const endTime = span.endTimeUnixNano
+                                    ? new Date(Number(span.endTimeUnixNano) / 1_000_000).toISOString()
+                                    : undefined;
+
+                                const processedSpan = {
+                                    ...span,
+                                    spanId: bytesToHex(span.spanId),
+                                    traceId: traceId,
+                                    parentSpanId: bytesToHex(span.parentSpanId || ''),
+                                    startTime,
+                                    endTime,
+                                    attributes: processAttributes(span.attributes)
+                                };
+                                traceMap.get(traceId).spans.push(processedSpan);
+                                totalSpans++;
+                            });
+                        }
+                    });
+                }
+            });
+
+            // Store traces in memory
+            traceMap.forEach((traceData, traceId) => {
+                if (traceStore.has(traceId)) {
+                    // Update existing trace
+                    const existing = traceStore.get(traceId);
+                    existing.spans.push(...traceData.spans);
+                    existing.lastSeen = now;
+                } else {
+                    // Add new trace
+                    traceStore.set(traceId, {
+                        traceId,
+                        spans: traceData.spans,
+                        resource: traceData.resource,
+                        scope: traceData.scope,
+                        firstSeen: now,
+                        lastSeen: now
+                    });
+                }
+            });
+
+            // Enforce LRU eviction if we exceed the limit
+            enforceTraceLimit();
+
+            // Emit event for trace updates
+            traceEvents.emit('tracesUpdated');
+
+            // Simple logging - just show received data
+            console.log(`${colors.cyan}📨 Received ${totalSpans} span(s) across ${traceMap.size} trace(s) | Total stored: ${traceStore.size} trace(s)${colors.reset}`);
+        } else {
+            console.log(`${colors.red}⚠️  Invalid OTLP payload - no resourceSpans found${colors.reset}`);
+        }
+
+        res.status(200).json({ partialSuccess: {} });
+    } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        const stack = error instanceof Error ? error.stack : undefined;
+        console.error(`${colors.red}Error processing traces:${colors.reset}`, message);
+        if (stack) { console.error(stack); }
+        res.status(500).json({ error: message });
+    }
+});
+
+app.get('/health', (req, res) => {
+    res.status(200).json({ status: 'healthy', service: 'devtrace-otlp-server' });
+});
+
+
+
+
+export const TraceServer: TraceServer = {
+    start: (port: number) => new Promise((resolve, reject) => {
+        if (server) {
+            // Server already running
+            resolve();
+            return;
+        }
+        
+        server = app.listen(port, () => {
+            resolve();
+        });
+        server.on('error', (error) => {
+            reject(error);
+        });
+    }),
+    stop: () => new Promise((resolve, reject) => {
+        if (!server) {
+            resolve();
+            return;
+        }
+        server.close((error) => {
+            if (error) {
+                reject(error);
+            } else {
+                server = undefined;
+                resolve();
+            }
+        });
+    }),
+    isRunning: () => {
+        return server?.listening ?? false;
+    },
+    getTraces: () => {
+        return Array.from(traceStore.values());
+    },
+    clearTraces: () => {
+        traceStore.clear();
+        traceEvents.emit('tracesCleared');
+    },
+    getTrace: (traceId: string) => {
+        return traceStore.get(traceId);
+    },
+    getTraceBySpanId: (spanId: string) => {
+        return Array.from(traceStore.values()).find(trace => trace.spans.some(span => span.spanId === spanId));
+    },
+    getTraceByResource: (resource: string) => {
+        return Array.from(traceStore.values()).find(trace => trace.resource.name === resource);
+    },
+    getTraceByScope: (scope: string) => {
+        return Array.from(traceStore.values()).find(trace => trace.scope.name === scope);
+    },
+    getTraceByFirstSeen: (firstSeen: Date) => {
+        return Array.from(traceStore.values()).find(trace => trace.firstSeen === firstSeen);
+    },
+    getTraceByLastSeen: (lastSeen: Date) => {
+        return Array.from(traceStore.values()).find(trace => trace.lastSeen === lastSeen);
+    },
+    onTracesUpdated: (callback: () => void) => {
+        traceEvents.on('tracesUpdated', callback);
+        return () => traceEvents.off('tracesUpdated', callback);
+    },
+    onTracesCleared: (callback: () => void) => {
+        traceEvents.on('tracesCleared', callback);
+        return () => traceEvents.off('tracesCleared', callback);
+    }
+};
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-tree-view.ts b/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-tree-view.ts
new file mode 100644
index 00000000000..aa2bee9098f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/tracing/trace-tree-view.ts
@@ -0,0 +1,455 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed on an "AS IS" BASIS, WITHOUT 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 { Trace, Span } from './trace-server';
+import { TraceServer } from './trace-server';
+import { TracerMachine } from './tracer-machine';
+
+/**
+ * Represents a trace node in the tree view
+ */
+class TraceNode {
+    constructor(
+        public readonly trace: Trace,
+        public readonly label: string
+    ) {}
+}
+
+/**
+ * Represents a span node in the tree view
+ */
+class SpanNode {
+    constructor(
+        public readonly span: Span,
+        public readonly traceId: string,
+        public readonly label: string,
+        public readonly children: SpanNode[]
+    ) {}
+}
+
+/**
+ * TreeDataProvider for displaying traces and spans
+ */
+export class TraceTreeDataProvider implements vscode.TreeDataProvider<TraceNode | SpanNode> {
+    private _onDidChangeTreeData: vscode.EventEmitter<TraceNode | SpanNode | undefined | null | void> = 
+        new vscode.EventEmitter<TraceNode | SpanNode | undefined | null | void>();
+    readonly onDidChangeTreeData: vscode.Event<TraceNode | SpanNode | undefined | null | void> = 
+        this._onDidChangeTreeData.event;
+
+    private traceServerUnsubscribeUpdated?: () => void;
+    private traceServerUnsubscribeCleared?: () => void;
+
+    constructor() {
+        // Subscribe to TracerMachine state changes
+        // Note: TracerMachine.onUpdate doesn't return unsubscribe function
+        TracerMachine.onUpdate((state: any) => {
+            this.refresh();
+        });
+
+        // Subscribe to TraceServer updates
+        this.traceServerUnsubscribeUpdated = TraceServer.onTracesUpdated(async () => {
+            const traces = TraceServer.getTraces();
+            if (traces.length > 0) {
+                // Update context when first trace arrives
+                await vscode.commands.executeCommand('setContext', 'ballerina.tracesEmpty', false);
+            }
+            this.refresh();
+        });
+
+        this.traceServerUnsubscribeCleared = TraceServer.onTracesCleared(async () => {
+            await vscode.commands.executeCommand('setContext', 'ballerina.tracesEmpty', true);
+            this.refresh();
+        });
+    }
+
+    refresh(): void {
+        this._onDidChangeTreeData.fire();
+    }
+
+    getTreeItem(element: TraceNode | SpanNode): vscode.TreeItem {
+        if (element instanceof TraceNode) {
+            const item = new vscode.TreeItem(
+                element.label,
+                vscode.TreeItemCollapsibleState.Collapsed
+            );
+            item.tooltip = `Trace ID: ${element.trace.traceId}\n` +
+                `Resource: ${element.trace.resource.name}\n` +
+                `Scope: ${element.trace.scope.name}\n` +
+                `First Seen: ${element.trace.firstSeen.toLocaleString()}\n` +
+                `Last Seen: ${element.trace.lastSeen.toLocaleString()}\n` +
+                `Spans: ${element.trace.spans.length}`;
+            item.iconPath = new vscode.ThemeIcon('search');
+            item.contextValue = 'trace';
+            // Add command to open trace details when clicked
+            item.command = {
+                command: 'ballerina.showTraceDetails',
+                title: 'Show Trace Details',
+                arguments: [element.trace]
+            };
+            return item;
+        } else {
+            // SpanNode
+            const hasChildren = element.children.length > 0;
+            const item = new vscode.TreeItem(
+                element.label,
+                hasChildren ? vscode.TreeItemCollapsibleState.Collapsed : vscode.TreeItemCollapsibleState.None
+            );
+            
+            // Build tooltip with span details
+            const spanKind = this.getSpanKindLabel(element.span.kind);
+            item.tooltip = `Span: ${element.span.name}\n` +
+                `Kind: ${spanKind}\n` +
+                `Trace ID: ${element.traceId}\n` +
+                `Span ID: ${element.span.spanId}\n` +
+                (element.span.parentSpanId && element.span.parentSpanId !== '0000000000000000' ? `Parent Span ID: ${element.span.parentSpanId}` : 'Root Span');
+            
+            item.iconPath = new vscode.ThemeIcon('package');
+            item.contextValue = 'span';
+            return item;
+        }
+    }
+
+    async getChildren(element?: TraceNode | SpanNode): Promise<(TraceNode | SpanNode)[]> {
+        // Check if tracing is enabled
+        const isEnabled = TracerMachine.isEnabled();
+        
+        if (!isEnabled) {
+            // Return empty array - VS Code will show placeholder from viewsWelcome
+            return [];
+        }
+        
+        // Get traces from TraceServer
+        const traces = TraceServer.getTraces();
+        
+        if (traces.length === 0) {
+            // Return empty array - VS Code will show empty state placeholder
+            // Make sure ballerina.tracesEmpty context is set to true
+            await vscode.commands.executeCommand('setContext', 'ballerina.tracesEmpty', true);
+            return [];
+        }
+        
+        // Update context - traces exist now
+        await vscode.commands.executeCommand('setContext', 'ballerina.tracesEmpty', false);
+        
+        // Return trace nodes or span nodes based on element
+        if (!element) {
+            // Root level - return all traces
+            return traces.map(trace => new TraceNode(
+                trace,
+                `Trace: ${this.truncateId(trace.traceId)}`
+            ));
+        } else if (element instanceof TraceNode) {
+            // Trace node - return child spans (organized hierarchically)
+            return this.getSpansForTrace(element.trace);
+        } else if (element instanceof SpanNode) {
+            // Span node - return child spans if any
+            return element.children;
+        }
+        
+        return [];
+    }
+
+    getParent(element: TraceNode | SpanNode): vscode.ProviderResult<TraceNode | SpanNode> {
+        // Root elements (TraceNodes) have no parent
+        if (element instanceof TraceNode) {
+            return undefined;
+        }
+        
+        // For SpanNodes, find the parent based on parentSpanId
+        if (element instanceof SpanNode) {
+            const parentSpanId = element.span.parentSpanId;
+            
+            // If no parent span ID or it's the root span marker, parent is the TraceNode
+            if (!parentSpanId || 
+                parentSpanId === '0000000000000000' || 
+                parentSpanId === '') {
+                // Return the parent TraceNode
+                const traces = TraceServer.getTraces();
+                const trace = traces.find(t => t.traceId === element.traceId);
+                if (trace) {
+                    return new TraceNode(trace, `Trace: ${this.truncateId(trace.traceId)}`);
+                }
+                return undefined;
+            }
+            
+            // Find the parent span in the same trace
+            const traces = TraceServer.getTraces();
+            const trace = traces.find(t => t.traceId === element.traceId);
+            if (trace) {
+                // Find the parent span by parentSpanId
+                const parentSpan = trace.spans.find(s => s.spanId === parentSpanId);
+                if (parentSpan) {
+                    // Build the hierarchy and find the parent SpanNode
+                    const spanNodes = this.getSpansForTrace(trace);
+                    const parentNode = this.findSpanNodeById(parentSpanId, spanNodes);
+                    if (parentNode) {
+                        return parentNode;
+                    }
+                    
+                    // If not found in hierarchy (shouldn't happen), create one
+                    // This is a fallback for edge cases
+                    const label = this.formatSpanLabel(parentSpan);
+                    return new SpanNode(parentSpan, element.traceId, label, []);
+                }
+            }
+        }
+        
+        return undefined;
+    }
+
+    /**
+     * Recursively find a span node by span ID
+     */
+    private findSpanNodeById(spanId: string, spanNodes: SpanNode[]): SpanNode | null {
+        for (const spanNode of spanNodes) {
+            if (spanNode.span.spanId === spanId) {
+                return spanNode;
+            }
+            
+            // Recursively search in children
+            const found = this.findSpanNodeById(spanId, spanNode.children);
+            if (found) {
+                return found;
+            }
+        }
+        
+        return null;
+    }
+
+    /**
+     * Get spans for a trace, organized in a hierarchical structure
+     */
+    private getSpansForTrace(trace: Trace): SpanNode[] {
+        const spanMap = new Map<string, SpanNode>();
+        const rootSpans: SpanNode[] = [];
+
+        // First pass: create all span nodes
+        trace.spans.forEach(span => {
+            // spanId is already a hex string from trace-server
+            const spanIdHex = span.spanId || '';
+            const label = this.formatSpanLabel(span);
+            
+            spanMap.set(spanIdHex, new SpanNode(
+                span,
+                trace.traceId,
+                label,
+                [] // Children will be set in second pass
+            ));
+        });
+
+        // Second pass: build parent-child relationships
+        trace.spans.forEach(span => {
+            const spanIdHex = span.spanId || '';
+            const parentSpanIdHex = span.parentSpanId || '';
+            const spanNode = spanMap.get(spanIdHex);
+            
+            if (!spanNode) {
+                return;
+            }
+
+            // Root span: empty or all zeros parentSpanId, or parent not found
+            if (!parentSpanIdHex || 
+                parentSpanIdHex === '0000000000000000' || 
+                parentSpanIdHex === '' ||
+                !spanMap.has(parentSpanIdHex)) {
+                rootSpans.push(spanNode);
+            } else {
+                // Child span - add to parent's children
+                const parentNode = spanMap.get(parentSpanIdHex);
+                if (parentNode) {
+                    parentNode.children.push(spanNode);
+                }
+            }
+        });
+
+        // Sort root spans by span name for consistency
+        rootSpans.sort((a, b) => a.span.name.localeCompare(b.span.name));
+
+        return rootSpans;
+    }
+
+    /**
+     * Format span label with name and kind
+     */
+    private formatSpanLabel(span: Span): string {
+        const spanKind = this.getSpanKindLabel(span.kind);
+        return `${span.name} (${spanKind})`;
+    }
+
+    /**
+     * Get human-readable span kind label
+     */
+    private getSpanKindLabel(kind: string | number): string {
+        if (typeof kind === 'string') {
+            return kind;
+        }
+        const kindMap: { [key: number]: string } = {
+            0: 'UNSPECIFIED',
+            1: 'INTERNAL',
+            2: 'SERVER',
+            3: 'CLIENT',
+            4: 'PRODUCER',
+            5: 'CONSUMER'
+        };
+        return kindMap[kind] || `UNKNOWN(${kind})`;
+    }
+
+    /**
+     * Truncate trace ID for display
+     */
+    private truncateId(id: string, length: number = 8): string {
+        if (id.length <= length) {
+            return id;
+        }
+        return `${id.substring(0, length)}...`;
+    }
+
+    /**
+     * Format trace details as text for display in editor
+     */
+    static formatTraceDetails(trace: Trace): string {
+        const lines: string[] = [];
+        
+        // Header
+        lines.push('='.repeat(80));
+        lines.push('TRACE DETAILS');
+        lines.push('='.repeat(80));
+        lines.push('');
+        
+        // Trace Information
+        lines.push('Trace ID:');
+        lines.push(`  ${trace.traceId}`);
+        lines.push('');
+        
+        lines.push('Resource:');
+        lines.push(`  Name: ${trace.resource.name}`);
+        if (trace.resource.attributes && trace.resource.attributes.length > 0) {
+            lines.push('  Attributes:');
+            trace.resource.attributes.forEach(attr => {
+                lines.push(`    ${attr.key}: ${attr.value}`);
+            });
+        }
+        lines.push('');
+        
+        lines.push('Instrumentation Scope:');
+        lines.push(`  Name: ${trace.scope.name}`);
+        if (trace.scope.version) {
+            lines.push(`  Version: ${trace.scope.version}`);
+        }
+        if (trace.scope.attributes && trace.scope.attributes.length > 0) {
+            lines.push('  Attributes:');
+            trace.scope.attributes.forEach(attr => {
+                lines.push(`    ${attr.key}: ${attr.value}`);
+            });
+        }
+        lines.push('');
+        
+        lines.push('Timestamps:');
+        lines.push(`  First Seen: ${trace.firstSeen.toLocaleString()}`);
+        lines.push(`  Last Seen: ${trace.lastSeen.toLocaleString()}`);
+        const duration = trace.lastSeen.getTime() - trace.firstSeen.getTime();
+        lines.push(`  Duration: ${duration}ms`);
+        lines.push('');
+        
+        // Spans
+        lines.push('='.repeat(80));
+        lines.push(`SPANS (${trace.spans.length} total)`);
+        lines.push('='.repeat(80));
+        lines.push('');
+        
+        // Build span hierarchy
+        const spanMap = new Map<string, Span>();
+        const rootSpans: Span[] = [];
+        
+        trace.spans.forEach(span => {
+            spanMap.set(span.spanId, span);
+        });
+        
+        trace.spans.forEach(span => {
+            const parentSpanId = span.parentSpanId || '';
+            if (!parentSpanId || 
+                parentSpanId === '0000000000000000' || 
+                parentSpanId === '' ||
+                !spanMap.has(parentSpanId)) {
+                rootSpans.push(span);
+            }
+        });
+        
+        // Format spans recursively
+        const formatSpan = (span: Span, indent: number = 0): void => {
+            const indentStr = '  '.repeat(indent);
+            const spanKind = this.getSpanKindLabelStatic(span.kind);
+            
+            lines.push(`${indentStr}${'─'.repeat(60 - indent * 2)}`);
+            lines.push(`${indentStr}Span: ${span.name}`);
+            lines.push(`${indentStr}  ID: ${span.spanId}`);
+            lines.push(`${indentStr}  Kind: ${spanKind}`);
+            if (span.parentSpanId && span.parentSpanId !== '0000000000000000') {
+                lines.push(`${indentStr}  Parent Span ID: ${span.parentSpanId}`);
+            } else {
+                lines.push(`${indentStr}  Parent: Root Span`);
+            }
+            lines.push(`${indentStr}  Trace ID: ${span.traceId}`);
+            
+            // Find child spans
+            const childSpans = trace.spans.filter(s => s.parentSpanId === span.spanId);
+            if (childSpans.length > 0) {
+                lines.push(`${indentStr}  Child Spans: ${childSpans.length}`);
+                childSpans.forEach(childSpan => {
+                    formatSpan(childSpan, indent + 1);
+                });
+            }
+            lines.push('');
+        };
+        
+        // Format all root spans
+        rootSpans.forEach(span => {
+            formatSpan(span, 0);
+        });
+        
+        return lines.join('\n');
+    }
+    
+    /**
+     * Get human-readable span kind label (static version)
+     */
+    private static getSpanKindLabelStatic(kind: string | number): string {
+        if (typeof kind === 'string') {
+            return kind;
+        }
+        const kindMap: { [key: number]: string } = {
+            0: 'UNSPECIFIED',
+            1: 'INTERNAL',
+            2: 'SERVER',
+            3: 'CLIENT',
+            4: 'PRODUCER',
+            5: 'CONSUMER'
+        };
+        return kindMap[kind] || `UNKNOWN(${kind})`;
+    }
+
+    /**
+     * Dispose resources
+     */
+    dispose(): void {
+        this.traceServerUnsubscribeUpdated?.();
+        this.traceServerUnsubscribeCleared?.();
+        this._onDidChangeTreeData.dispose();
+    }
+}
+
diff --git a/workspaces/ballerina/ballerina-extension/src/features/tracing/tracer-machine.ts b/workspaces/ballerina/ballerina-extension/src/features/tracing/tracer-machine.ts
new file mode 100644
index 00000000000..db7143831e9
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/tracing/tracer-machine.ts
@@ -0,0 +1,539 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { createMachine, assign, interpret } from 'xstate';
+import type { Interpreter } from 'xstate';
+import { TraceServer } from './trace-server';
+import * as path from 'path';
+import * as fs from 'fs';
+import { createTraceServerTask } from './trace-server-task';
+import * as vscode from 'vscode';
+import { setTracingConfig, removeTracingConfig } from './utils';
+import { OTLP_PORT } from './constants';
+
+
+
+/**
+ * State machine flow 
+ * 
+ * If the tracing is enabled in the project, the state machine will transition to the enabled state.
+ * If the tracing is not enabled in the project, the state machine will transition to the disabled state.
+ * 
+ * User can manually enable/disable tracing via UI
+ *  Then trace machine will update all the projects with relevent imports
+ * 
+ * When user runs the program when state machine is enabled 
+ *  it will start the tracing server and it will be on for rest of the program execution.
+ * 
+ * If user disable tracing via UI
+ *  it will stop the tracing server and it will be off for rest of the program execution.
+ * 
+ * We will only capture trace logs if the window is opened
+ *  
+ */
+
+/**
+ * Context for the tracing server state machine
+ */
+export interface TracerMachineContext {
+    serverPort?: number;
+    serverPid?: number;
+    error?: string;
+    startFailureReason?: string;
+    workspaceDirs?: string[];
+    isDisabling?: boolean;
+    traceServer?: TraceServer;
+    taskExecution?: vscode.TaskExecution;
+    taskTerminationListener?: vscode.Disposable;
+}
+
+/**
+ * Check if tracing is enabled in the current project
+ */
+function isTraceEnabledInProject(context: TracerMachineContext): Promise<{ isTraceEnabledInProject: boolean }> {
+    return new Promise((resolve) => {
+        // Check if a file called trace_enabled.bal exists in any workspace dir
+        const traceEnabled = context.workspaceDirs?.some((workspaceDir) => {
+            return fs.existsSync(path.join(workspaceDir, 'trace_enabled.bal'));
+        }) ?? false;
+
+        resolve({ isTraceEnabledInProject: traceEnabled });
+    });
+}
+
+function enableTracingInProject(context: TracerMachineContext, event?: any): void {
+    console.log('enableTracingInProject called with context:', {
+        workspaceDirs: context.workspaceDirs,
+        hasWorkspaceDirs: !!context.workspaceDirs,
+        workspaceDirsLength: context.workspaceDirs?.length || 0
+    });
+
+    if (!context.workspaceDirs || context.workspaceDirs.length === 0) {
+        console.error('enableTracingInProject: No workspace directories provided');
+        return;
+    }
+
+    context.workspaceDirs.forEach((workspaceDir) => {
+        try {
+            const traceFilePath = path.join(workspaceDir, 'trace_enabled.bal');
+            fs.writeFileSync(traceFilePath, 'import ballerinax/idetraceprovider as _;');
+
+            setTracingConfig(workspaceDir);
+        } catch (error) {
+            console.error(`Failed to write trace_enabled.bal to ${workspaceDir}:`, error);
+        }
+    });
+}
+
+function disableTracingInProject(context: TracerMachineContext, event?: any): void {
+    console.log('disableTracingInProject called with context:', {
+        workspaceDirs: context.workspaceDirs,
+        hasWorkspaceDirs: !!context.workspaceDirs,
+        workspaceDirsLength: context.workspaceDirs?.length || 0
+    });
+
+    if (!context.workspaceDirs || context.workspaceDirs.length === 0) {
+        console.error('disableTracingInProject: No workspace directories provided');
+        return;
+    }
+
+    context.workspaceDirs.forEach((workspaceDir) => {
+        try {
+            const traceFilePath = path.join(workspaceDir, 'trace_enabled.bal');
+            if (fs.existsSync(traceFilePath)) {
+                fs.unlinkSync(traceFilePath);
+            }
+            removeTracingConfig(workspaceDir);
+        } catch (error) {
+            console.error(`Failed to disable tracing in ${workspaceDir}:`, error);
+        }
+    });
+}
+
+function startServer(context: TracerMachineContext, event?: any): Thenable<vscode.TaskExecution> {
+    const task = createTraceServerTask();
+    return vscode.tasks.executeTask(task);
+}
+
+function stopServer(context: TracerMachineContext, event?: any): Promise<void> {
+    return TraceServer.stop();
+}
+
+
+/**
+ * Creates a state machine for managing the tracing server lifecycle
+ */
+function createTracerMachine(workspaceDirs?: string[]) {
+    return createMachine<TracerMachineContext>(
+        {
+            /** @xstate-layout N4IgpgJg5mDOIC5QBcBOBDAxmVBZLAFgJYB2YAxAIIAi1A+gOoDyASgNIDKACpQMICiHANoAGALqJQABwD2sIsiIySkkAA9EARgBM2gMwA6TQBYRANgCsAdgAcFm2e0mANCACeWkVYMBOC3s1NHxsREWMLYzM9AF9o1zQsHHxMYjJyFn5cJgA1fkZWTh4BYXFVWXlFZVUNBB0vAz1g4z0RPWMrYzszVw9a7Vj4jGw8QlIwA1IFcghlcdIANxkAa3GE4eTUuZIFBAWZTHRKklExE7K5BSUVJHVEC00bIwe-MzNNKzM7HsROiwMOqx6SzaGwfXRAgYgNZJUZkCbbZDTWbwxYrAzQkYpMbwnZ7A5HE5CTQSG7lS5VG41d7GAxOczWETaaz+XTfBBmYw+AzWHyaBkWMJ8qyQjEbbGTRE4VAyVAGKQAG0OADMZQBbdFDGFYuES3YkRb4q6E0qki5HapaHyGUG6bQ+XT+EQCvRskIiXyRNpeKyhEQ+MwizWYzYGMAkdAAI3lkHI1AAkhxKAAhAAy-DOpoqVwtCCsugMZh9Zh8rXMVl5xjZmg5ZiMIk0jT8rRemkDiWD2LDkejEHS-AAYhkOAAJDPSM3ZymIWzeHxWyyhPS2dqV9yIRruvkmJdBV5LtvrWHjLtRyAGWA4eY4DjIGRSKQxjgAFUoLCfdA4-BYuRYY5AZPNKdcwsbQCyZUsHEZECbCrRlNAMYxdBsFc-TncIDy1EMTx7c9L2vZB0FQRQSCgJEdX1ZZViDMU4Wws8L1QK9UBvQjiKgPUDUOI1xD-ADJ1AKk-VAwFjFE6xAm0esXTXWpWm8d4QR9RDATMJ0MI7Wjw1PCBcMY-DWNIUipRlOVFWQFVUHVUUj1DLScIYpiWKIwyOP2LjlGNElxyzCkBM8e1-jaMSrAkqTXRCgt-QCRpNHrGd1Jo487PovDUH7dAiB7J8ZCcxEMifFgAE1eInXzblqKJDHLT5nV5VoHDZEt5LzBwrFsBslxsBKbLonSHJwdLMsgbLcr7AriuJc4fOuPyKr0Kr-TsZtYr0BqZK6AsWs5f1PidHxuu1JLuxSvTmIIojHyfJguA-L8fxK6ac0k7RawsecojeyxAhgmT7W8RCQTeCwgbUuIoWonrkr61KbzvKRDLIrZUSo9tEts47odO2H7xcvF3OOHiTW88kZvK57XvevRPvuB42UBf6kPaOSWneA6sKh3THNvHGSPIYzZQVZU1Q1VHIYxzn8Lh3GKMNDzCa8-9StJmpntnJdlOUgVbFdNoEOLDpC0ZODWzB6zDoMCAiFgDHyH4AA5ZM0wekmc2sKs2tAmw7X0HRAjeTo2exS3re0vtB0EUcicVx6gIbeCQrCN4Pdeawft6BsSwMGwSy9v1OmQ4xYjBkgZAgOBVDNzYppdoCAFpNDZFpQK+4xqxBCxgb+wPyIUavANm9o2Vb0CFJsea5zebQPm7o7tL7-jyv8bx-B0K1fSCPk2Q7917RBPwfDa4J+lNiHzd6iWzrhyB57Kmp7D+Fe7RaUIN4sRqve5cxdwCUwQv2k-RZnw5v1M6BkSI32Voge0jxCwbytNWSwwRGrBAQkhJ0QQC5WAsDPdG2kL6DSyjlc6yAIE5m3H8dqLQsHZycFPV0xZfBITHlTSSXscHnxAbla+mYa6zQeI4MCApORMlWiFNOiBQTwVHn4NoNhYp2nYcAmG3N4bgJ4f3MmQIuQcidP4FkIkdZ-G-sCcI5YAg4ODhjUhQFn4GFaHUVuC5VrIXdkELO2d5FWnuH4Iu0QgA */
+            id: 'tracerMachine',
+            initial: 'init',
+            context: {
+                serverPort: OTLP_PORT,
+                serverPid: undefined,
+                error: undefined,
+                startFailureReason: undefined,
+                workspaceDirs: workspaceDirs || [],
+                isDisabling: false,
+                taskExecution: undefined,
+                taskTerminationListener: undefined
+            },
+            on: {
+                ADD_WORKSPACES: {
+                    actions: assign({
+                        workspaceDirs: (context, event) => [...context.workspaceDirs, (event as any).workspaceDir],
+                    }),
+                },
+                REMOVE_WORKSPACES: {
+                    actions: assign({
+                        workspaceDirs: (context, event) => context.workspaceDirs.filter((dir) => dir !== (event as any).workspaceDir),
+                    }),
+                },
+            },
+            states: {
+                /**
+                 * Initial state when the tracer machine is first created
+                 */
+                init: {
+                    entry: () => {
+                        console.log('Tracer state: init');
+                    },
+
+                    invoke: {
+                        src: 'initializeTracer',
+                        onDone: [
+                            {
+                                target: 'enabled',
+                                cond: (context, event) => {
+                                    const traceEnabled = (event as any).data?.isTraceEnabledInProject;
+                                    return traceEnabled === true;
+                                }
+                            },
+                            {
+                                target: 'disabled'
+                            }
+                        ],
+                        onError: {
+                            target: 'disabled',
+                            actions: assign({
+                                startFailureReason: (context, event) => (event as any).data?.error || context.error,
+                                error: (context, event) => (event as any).data?.error || context.error,
+                            }),
+                        },
+                    }
+                },
+
+                /**
+                 * Tracer is enabled and ready to start the server
+                 * Contains nested states for server lifecycle management
+                 */
+                enabled: {
+                    initial: 'serverStopped',
+                    entry: [
+                        () => {
+                            console.log('Tracer state: enabled');
+                        },
+                        assign({
+                            error: undefined,
+                        }),
+                        () => {
+                            // TODO: Implement enable logic (register handlers, etc.)
+                        },
+                    ],
+                    on: {
+                        DISABLE: [
+                            {
+                                target: 'enabled.serverStopping',
+                                cond: () => {
+                                    // If server is running, stop it first before disabling
+                                    return TraceServer.isRunning();
+                                },
+                                actions: [
+                                    assign({
+                                        isDisabling: true,
+                                    }),
+                                ],
+                            },
+                            {
+                                target: 'disabled',
+                                actions: [
+                                    disableTracingInProject,
+                                ],
+                            },
+                        ],
+
+                        REFRESH: {
+                            target: 'init',
+                            actions: assign({
+                                error: undefined,
+                                startFailureReason: undefined,
+                                serverPort: undefined,
+                                serverPid: undefined,
+                                isDisabling: false,
+                            }),
+                        }
+                    },
+                    states: {
+                        /**
+                         * Server is stopped (initial state when enabled)
+                         */
+                        serverStopped: {
+                            entry: () => {
+                                console.log('Tracer state: enabled.serverStopped');
+                            },
+
+                            on: {
+                                START_SERVER: {
+                                    target: "serverStarting"
+                                }
+                            }
+                        },
+
+                        serverStarting: {
+                            invoke: {
+                                src: startServer,
+                                onDone: {
+                                    target: "serverStarted",
+                                    actions: assign({
+                                        error: undefined,
+                                        taskExecution: (context, event) => (event as any).data,
+                                    }),
+                                },
+                                onError: {
+                                    target: "serverFailedToStart",
+                                    actions: assign({
+                                        error: (context, event) => {
+                                            const err = (event as any).data;
+                                            return err instanceof Error ? err.message : String(err);
+                                        }
+                                    })
+                                }
+                            }
+                        },
+                        /**
+                         * Server start failed
+                         */
+                        serverFailedToStart: {
+                            entry: () => {
+                                console.log('Tracer state: enabled.serverFailedToStart');
+                            },
+
+                            on: {
+                                RETRY: [{
+                                    target: "serverStarted",
+                                    cond: "New guard"
+                                }, "serverStarted"]
+                            }
+                        },
+
+                        /**
+                         * Server is started and running
+                         */
+                        serverStarted: {
+                            entry: [
+                                () => {
+                                    console.log('Tracer state: enabled.serverStarted');
+                                },
+                                assign({
+                                    error: undefined,
+                                }),
+                            ],
+                            invoke: {
+                                id: 'taskTerminationListener',
+                                src: (context, event) => (callback, onReceive) => {
+                                    // Capture taskExecution reference at setup time
+                                    const taskExecution = context.taskExecution;
+                                    
+                                    // Set up task termination listener
+                                    const disposable = vscode.tasks.onDidEndTask((taskEvent) => {
+                                        // Check if the ended task matches our task execution
+                                        if (taskExecution && taskEvent.execution === taskExecution) {
+                                            console.log('Trace server task terminated');
+                                            callback({ type: 'TASK_TERMINATED' });
+                                        }
+                                    });
+                                    
+                                    // Return cleanup function
+                                    return () => {
+                                        disposable.dispose();
+                                    };
+                                },
+                            },
+                            on: {
+                                STOP_SERVER: {
+                                    target: "serverStopping"
+                                },
+                                TASK_TERMINATED: {
+                                    target: "serverStopped",
+                                    actions: [
+                                        assign({
+                                            taskExecution: undefined,
+                                        }),
+                                    ],
+                                }
+                            }
+                        },
+
+                        serverStopping: {
+                            invoke: {
+                                src: stopServer,
+                                onDone: [
+                                    {
+                                        target: "#tracerMachine.disabled",
+                                        cond: (context) => context.isDisabling === true,
+                                        actions: [
+                                            disableTracingInProject,
+                                            assign({
+                                                isDisabling: false,
+                                            }),
+                                        ],
+                                    },
+                                    {
+                                        target: "serverStopped",
+                                    },
+                                ],
+                                onError: {
+                                    target: "serverStarted",
+                                    actions: [
+                                        assign({
+                                            error: (context, event) => {
+                                                const err = (event as any).data;
+                                                return err instanceof Error ? err.message : String(err);
+                                            },
+                                            isDisabling: false,
+                                        }),
+                                    ],
+                                }
+                            },
+                            on: {
+                                DISABLE: {
+                                    actions: [
+                                        assign({
+                                            isDisabling: true,
+                                        }),
+                                    ],
+                                },
+                            },
+                        }
+                    },
+                },
+
+                /**
+                 * Tracer is disabled (server cannot be started)
+                 */
+                disabled: {
+                    entry: [
+                        () => {
+                            console.log('Tracer state: disabled');
+                        },
+                        assign({
+                            isDisabling: false,
+                        }),
+                    ],
+                    on: {
+                        ENABLE: {
+                            target: 'enabled',
+                            actions: enableTracingInProject,
+                        },
+                        REFRESH: {
+                            target: 'init',
+                            actions: assign({
+                                error: undefined,
+                                startFailureReason: undefined,
+                                serverPort: undefined,
+                                serverPid: undefined,
+                                isDisabling: false,
+                            }),
+                        }
+                    },
+                }
+            },
+        },
+        {
+            services: {
+                // Initialize the tracer
+                initializeTracer: isTraceEnabledInProject
+            },
+        });
+}
+
+// Service instance (created on initialization)
+let tracerService: ReturnType<typeof interpret> | undefined;
+
+/**
+ * Ensures the tracer service is initialized and returns it
+ * @throws {Error} If the tracer service is not initialized
+ */
+function ensureInitialized(): ReturnType<typeof interpret> {
+    if (!tracerService) {
+        throw new Error('TracerMachine not initialized. Call initialize() first.');
+    }
+    return tracerService;
+}
+
+/**
+ * Singleton object providing access to the tracer state machine
+ */
+export const TracerMachine = {
+    /**
+     * Create and start the tracer machine with workspace directories
+     */
+    initialize: (workspaceDirs?: string[]) => {
+        const machine = createTracerMachine(workspaceDirs);
+        tracerService = interpret(machine) as ReturnType<typeof interpret>;
+        tracerService.start();
+    },
+
+    addWorkspace: (workspaceDir: string) => {
+        ensureInitialized().send({ type: 'ADD_WORKSPACES' }, { workspaceDir });
+    },
+
+    removeWorkspace: (workspaceDir: string) => {
+        ensureInitialized().send({ type: 'REMOVE_WORKSPACES' }, { workspaceDir });
+    },
+
+
+    isEnabled: () => {
+        const value = ensureInitialized().getSnapshot().value;
+        if (typeof value === 'string') {
+            return value === 'enabled';
+        }
+        if (typeof value === 'object' && value !== null) {
+            return value.hasOwnProperty('enabled');
+        }
+        return false;
+    },
+
+    isServerStarted: () => {
+        const snapshot = ensureInitialized().getSnapshot();
+        const value = snapshot.value;
+        if (typeof value === 'string') {
+            return value === 'enabled.serverStarted';
+        }
+        if (typeof value === 'object' && value !== null) {
+            const obj = value as Record<string, string>;
+            return obj.enabled === 'serverStarted';
+        }
+        return false;
+    },
+
+    /**
+     * Get the current state value (for testing)
+     */
+    getState: () => {
+        return ensureInitialized().getSnapshot().value;
+    },
+
+    startServer: () => {
+        ensureInitialized().send({ type: 'START_SERVER' });
+    },
+
+    stopServer: () => {
+        ensureInitialized().send({ type: 'STOP_SERVER' });
+    },
+
+    enable: () => {
+        ensureInitialized().send({ type: 'ENABLE' });
+    },
+
+    disable: () => {
+        ensureInitialized().send({ type: 'DISABLE' });
+    },
+
+    refresh: (workspaceDirs?: string[]) => {
+        const snapshot = ensureInitialized().getSnapshot();
+        const context = snapshot.context as TracerMachineContext;
+        const currentWorkspaceDirs = context.workspaceDirs || [];
+        const updatedWorkspaceDirs = workspaceDirs || currentWorkspaceDirs;
+        const machine = createTracerMachine(updatedWorkspaceDirs);
+        tracerService = interpret(machine) as ReturnType<typeof interpret>;
+        tracerService.start();
+    },
+
+    onUpdate: (callback: (state: any) => void) => {
+        ensureInitialized().subscribe((state) => {
+            callback(state.value);
+        });
+    },
+
+    getTraceServer: () => {
+        return TraceServer;
+    },
+};
+
diff --git a/workspaces/ballerina/ballerina-extension/src/features/tracing/utils.ts b/workspaces/ballerina/ballerina-extension/src/features/tracing/utils.ts
new file mode 100644
index 00000000000..64915867015
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/tracing/utils.ts
@@ -0,0 +1,425 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed on an "AS IS" BASIS, WITHOUT 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 fs from 'fs';
+import * as path from 'path';
+import { parse } from 'toml';
+import { OTLP_PORT } from './constants';
+
+/**
+ * Sets tracing configuration in Config.toml and Ballerina.toml files
+ * 
+ * This function will:
+ * - Read existing Config.toml if it exists
+ * - Update or add [ballerina.observe] section with tracingEnabled = true and tracingProvider = "idetraceprovider"
+ * - Update or add [ballerinax.idetraceprovider] section with endpoint = "http://localhost:<port>/v1/traces"
+ * - Read existing Ballerina.toml if it exists
+ * - Update or add [build-options] section with observabilityIncluded = true
+ * - Preserve all other existing configuration
+ * 
+ * @param workspaceDir The workspace directory where Config.toml and Ballerina.toml should be created/updated
+ * @returns Promise<void> Resolves when configuration is successfully written
+ * @throws Error if file operations fail
+ */
+export async function setTracingConfig(workspaceDir: string): Promise<void> {
+    // Update Config.toml
+    const configFilePath = path.join(workspaceDir, 'Config.toml');
+    
+    // Read existing Config.toml content if it exists
+    let existingContent = '';
+    let parsedConfig: any = {};
+    
+    if (fs.existsSync(configFilePath)) {
+        try {
+            existingContent = fs.readFileSync(configFilePath, 'utf-8');
+            parsedConfig = parse(existingContent);
+        } catch (error) {
+            console.error('Failed to parse existing Config.toml:', error);
+            // Continue with empty config if parsing fails
+        }
+    }
+    
+    // Update the parsed config object
+    if (!parsedConfig['ballerina']) {
+        parsedConfig['ballerina'] = {};
+    }
+    if (!parsedConfig['ballerina']['observe']) {
+        parsedConfig['ballerina']['observe'] = {};
+    }
+    
+    parsedConfig['ballerina']['observe']['tracingEnabled'] = true;
+    parsedConfig['ballerina']['observe']['tracingProvider'] = 'idetraceprovider';
+    
+    // Convert the updated config object back to TOML string
+    const updatedContent = convertObjectToToml(parsedConfig, existingContent);
+    
+    // Write the updated content to Config.toml
+    fs.writeFileSync(configFilePath, updatedContent, 'utf-8');
+    
+    // Update Ballerina.toml
+    const ballerinaTomlPath = path.join(workspaceDir, 'Ballerina.toml');
+    
+    // Read existing Ballerina.toml content if it exists
+    let ballerinaTomlContent = '';
+    if (fs.existsSync(ballerinaTomlPath)) {
+        try {
+            ballerinaTomlContent = fs.readFileSync(ballerinaTomlPath, 'utf-8');
+        } catch (error) {
+            console.error('Failed to read existing Ballerina.toml:', error);
+            // Continue with empty content if reading fails
+        }
+    }
+    
+    // Update or add [build-options] section with observabilityIncluded = true
+    ballerinaTomlContent = updateOrAddSection(
+        ballerinaTomlContent,
+        'build-options',
+        {
+            observabilityIncluded: true
+        }
+    );
+    
+    // Ensure file ends with newline
+    if (!ballerinaTomlContent.endsWith('\n')) {
+        ballerinaTomlContent += '\n';
+    }
+    
+    // Write the updated content to Ballerina.toml
+    fs.writeFileSync(ballerinaTomlPath, ballerinaTomlContent, 'utf-8');
+}
+
+/**
+ * Converts a JavaScript object to TOML format string
+ * Uses a simpler approach: updates existing sections or appends new ones
+ * 
+ * @param config The parsed config object
+ * @param originalContent Original TOML content for reference
+ * @returns TOML formatted string
+ */
+function convertObjectToToml(config: any, originalContent: string): string {
+    let updatedContent = originalContent || '';
+    
+    // Update or add [ballerina.observe] section
+    updatedContent = updateOrAddSection(
+        updatedContent,
+        'ballerina.observe',
+        {
+            tracingEnabled: config.ballerina?.observe?.tracingEnabled ?? true,
+            tracingProvider: config.ballerina?.observe?.tracingProvider ?? 'idetraceprovider'
+        }
+    );
+    
+    // Ensure file ends with newline
+    if (!updatedContent.endsWith('\n')) {
+        updatedContent += '\n';
+    }
+    
+    return updatedContent;
+}
+
+/**
+ * Updates an existing TOML section or adds it if it doesn't exist
+ * 
+ * @param content Original TOML content
+ * @param sectionName Section name (e.g., 'ballerina.observe')
+ * @param values Object with key-value pairs to set in the section
+ * @returns Updated TOML content
+ */
+function updateOrAddSection(content: string, sectionName: string, values: Record<string, any>): string {
+    const sectionHeader = `[${sectionName}]`;
+    
+    // Build the new section content
+    let sectionLines: string[] = [sectionHeader];
+    for (const [key, value] of Object.entries(values)) {
+        const formattedValue = typeof value === 'string' ? `"${value}"` : String(value);
+        sectionLines.push(`${key} = ${formattedValue}`);
+    }
+    const sectionContent = sectionLines.join('\n');
+    
+    // Check if section exists
+    const lines = content.split('\n');
+    const sectionStartIndex = lines.findIndex(line => line.trim() === sectionHeader);
+    
+    if (sectionStartIndex !== -1) {
+        // Section exists - find where it ends
+        let sectionEndIndex = lines.length;
+        for (let i = sectionStartIndex + 1; i < lines.length; i++) {
+            const trimmedLine = lines[i].trim();
+            // Check if this is the start of a new section
+            if (trimmedLine.startsWith('[') && trimmedLine.endsWith(']')) {
+                sectionEndIndex = i;
+                break;
+            }
+        }
+        
+        // Replace the section
+        const beforeSection = lines.slice(0, sectionStartIndex);
+        const afterSection = lines.slice(sectionEndIndex);
+        
+        // Combine: before + new section + after
+        const resultLines: string[] = [];
+        if (beforeSection.length > 0) {
+            resultLines.push(...beforeSection);
+        }
+        resultLines.push(...sectionLines);
+        if (afterSection.length > 0) {
+            resultLines.push(...afterSection);
+        }
+        
+        return resultLines.join('\n');
+    }
+    
+    // Section doesn't exist - append it
+    const trimmedLines = lines.filter((line, index) => {
+        // Remove trailing empty lines
+        if (index >= lines.length - 1 && line.trim() === '') {
+            return false;
+        }
+        return true;
+    });
+    
+    // Add the new section
+    if (trimmedLines.length > 0 && trimmedLines[trimmedLines.length - 1].trim() !== '') {
+        trimmedLines.push('');
+    }
+    trimmedLines.push(...sectionLines);
+    
+    return trimmedLines.join('\n');
+}
+
+/**
+ * Removes tracing configuration from Config.toml and Ballerina.toml files
+ * 
+ * This function will:
+ * - Read existing Config.toml if it exists
+ * - Remove tracingEnabled and tracingProvider from [ballerina.observe] section
+ *   (removes the entire section if it becomes empty)
+ * - Remove the entire [ballerinax.idetraceprovider] section
+ * - Read existing Ballerina.toml if it exists
+ * - Remove observabilityIncluded from [build-options] section
+ *   (removes the entire section if it becomes empty)
+ * - Preserve all other existing configuration
+ * 
+ * @param workspaceDir The workspace directory where Config.toml and Ballerina.toml should be updated
+ * @returns Promise<void> Resolves when configuration is successfully written
+ * @throws Error if file operations fail
+ */
+export async function removeTracingConfig(workspaceDir: string): Promise<void> {
+    // Remove from Config.toml
+    const configFilePath = path.join(workspaceDir, 'Config.toml');
+    
+    // If file doesn't exist, nothing to do
+    if (!fs.existsSync(configFilePath)) {
+        return;
+    }
+    
+    // Read existing Config.toml content
+    let existingContent = '';
+    try {
+        existingContent = fs.readFileSync(configFilePath, 'utf-8');
+    } catch (error) {
+        console.error('Failed to read Config.toml:', error);
+        throw error;
+    }
+    
+    // Remove the tracing configuration sections
+    let updatedContent = removeSection(existingContent, 'ballerinax.idetraceprovider');
+    
+    // Remove tracing keys from [ballerina.observe] section
+    updatedContent = removeKeysFromSection(
+        updatedContent,
+        'ballerina.observe',
+        ['tracingEnabled', 'tracingProvider']
+    );
+    
+    // Clean up trailing newlines but ensure file ends with one
+    updatedContent = updatedContent.trimEnd();
+    if (updatedContent.length > 0 && !updatedContent.endsWith('\n')) {
+        updatedContent += '\n';
+    }
+    
+    // Write the updated content to Config.toml
+    fs.writeFileSync(configFilePath, updatedContent, 'utf-8');
+    
+    // Remove from Ballerina.toml
+    const ballerinaTomlPath = path.join(workspaceDir, 'Ballerina.toml');
+    
+    // If file doesn't exist, nothing to do
+    if (!fs.existsSync(ballerinaTomlPath)) {
+        return;
+    }
+    
+    // Read existing Ballerina.toml content
+    let ballerinaTomlContent = '';
+    try {
+        ballerinaTomlContent = fs.readFileSync(ballerinaTomlPath, 'utf-8');
+    } catch (error) {
+        console.error('Failed to read Ballerina.toml:', error);
+        throw error;
+    }
+    
+    // Remove observabilityIncluded from [build-options] section
+    ballerinaTomlContent = removeKeysFromSection(
+        ballerinaTomlContent,
+        'build-options',
+        ['observabilityIncluded']
+    );
+    
+    // Clean up trailing newlines but ensure file ends with one
+    ballerinaTomlContent = ballerinaTomlContent.trimEnd();
+    if (ballerinaTomlContent.length > 0 && !ballerinaTomlContent.endsWith('\n')) {
+        ballerinaTomlContent += '\n';
+    }
+    
+    // Write the updated content to Ballerina.toml
+    fs.writeFileSync(ballerinaTomlPath, ballerinaTomlContent, 'utf-8');
+}
+
+/**
+ * Removes an entire section from TOML content
+ * 
+ * @param content Original TOML content
+ * @param sectionName Section name (e.g., 'ballerinax.idetraceprovider')
+ * @returns Updated TOML content with section removed
+ */
+function removeSection(content: string, sectionName: string): string {
+    const sectionHeader = `[${sectionName}]`;
+    const lines = content.split('\n');
+    const sectionStartIndex = lines.findIndex(line => line.trim() === sectionHeader);
+    
+    if (sectionStartIndex === -1) {
+        // Section doesn't exist, return original content
+        return content;
+    }
+    
+    // Find where the section ends
+    let sectionEndIndex = lines.length;
+    for (let i = sectionStartIndex + 1; i < lines.length; i++) {
+        const trimmedLine = lines[i].trim();
+        // Check if this is the start of a new section
+        if (trimmedLine.startsWith('[') && trimmedLine.endsWith(']')) {
+            sectionEndIndex = i;
+            break;
+        }
+    }
+    
+    // Remove the section
+    const beforeSection = lines.slice(0, sectionStartIndex);
+    const afterSection = lines.slice(sectionEndIndex);
+    
+    // Combine before and after, removing extra empty lines
+    const resultLines: string[] = [];
+    
+    if (beforeSection.length > 0) {
+        resultLines.push(...beforeSection);
+    }
+    
+    if (afterSection.length > 0) {
+        // Remove trailing empty line from before section if present
+        if (resultLines.length > 0 && resultLines[resultLines.length - 1].trim() === '') {
+            resultLines.pop();
+        }
+        // Remove leading empty line from after section if present
+        let afterStart = 0;
+        if (afterSection[0]?.trim() === '') {
+            afterStart = 1;
+        }
+        resultLines.push(...afterSection.slice(afterStart));
+    }
+    
+    return resultLines.join('\n');
+}
+
+/**
+ * Removes specific keys from a TOML section
+ * If the section becomes empty after removing keys, removes the entire section
+ * 
+ * @param content Original TOML content
+ * @param sectionName Section name (e.g., 'ballerina.observe')
+ * @param keysToRemove Array of keys to remove from the section
+ * @returns Updated TOML content with keys removed
+ */
+function removeKeysFromSection(content: string, sectionName: string, keysToRemove: string[]): string {
+    const sectionHeader = `[${sectionName}]`;
+    const lines = content.split('\n');
+    const sectionStartIndex = lines.findIndex(line => line.trim() === sectionHeader);
+    
+    if (sectionStartIndex === -1) {
+        // Section doesn't exist, return original content
+        return content;
+    }
+    
+    // Find where the section ends
+    let sectionEndIndex = lines.length;
+    for (let i = sectionStartIndex + 1; i < lines.length; i++) {
+        const trimmedLine = lines[i].trim();
+        // Check if this is the start of a new section
+        if (trimmedLine.startsWith('[') && trimmedLine.endsWith(']')) {
+            sectionEndIndex = i;
+            break;
+        }
+    }
+    
+    // Extract section lines
+    const sectionLines = lines.slice(sectionStartIndex, sectionEndIndex);
+    
+    // Remove keys from section
+    const remainingLines = sectionLines.filter(line => {
+        const trimmedLine = line.trim();
+        // Keep the section header
+        if (trimmedLine === sectionHeader) {
+            return true;
+        }
+        // Check if this line contains a key we want to remove
+        for (const key of keysToRemove) {
+            // Match key = value (with or without quotes, with or without spaces)
+            const keyPattern = new RegExp(`^\\s*${key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*=`);
+            if (keyPattern.test(trimmedLine)) {
+                return false; // Remove this line
+            }
+        }
+        // Keep all other lines
+        return true;
+    });
+    
+    // Check if section is empty (only header remains)
+    const hasContent = remainingLines.some((line, index) => {
+        // Skip the header line
+        return index > 0 && line.trim() !== '';
+    });
+    
+    // If section is empty, remove the entire section
+    if (!hasContent) {
+        return removeSection(content, sectionName);
+    }
+    
+    // Rebuild content with remaining section lines
+    const beforeSection = lines.slice(0, sectionStartIndex);
+    const afterSection = lines.slice(sectionEndIndex);
+    
+    const resultLines: string[] = [];
+    if (beforeSection.length > 0) {
+        resultLines.push(...beforeSection);
+    }
+    resultLines.push(...remainingLines);
+    if (afterSection.length > 0) {
+        resultLines.push(...afterSection);
+    }
+    
+    return resultLines.join('\n');
+}
+
diff --git a/workspaces/ballerina/ballerina-extension/src/features/tracing/webview.ts b/workspaces/ballerina/ballerina-extension/src/features/tracing/webview.ts
new file mode 100644
index 00000000000..a20b1c91ea7
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/tracing/webview.ts
@@ -0,0 +1,298 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { Uri, ViewColumn } from 'vscode';
+import { extension } from '../../BalExtensionContext';
+
+export class TraceWindowWebview {
+    public static currentPanel: TraceWindowWebview | undefined;
+    public static readonly viewType = 'ballerina.trace-window';
+    private _panel: vscode.WebviewPanel | undefined;
+    private _disposables: vscode.Disposable[] = [];
+    private _logEntries: LogEntry[] = [];
+
+    constructor() {
+        this._panel = TraceWindowWebview.createWebview();
+        this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+        this._panel.webview.html = this.getWebviewContent(this._panel.webview);
+        
+        // Handle messages from webview
+        this._panel.webview.onDidReceiveMessage(
+            message => {
+                switch (message.command) {
+                    case 'clear':
+                        this._logEntries = [];
+                        this.updateWebview();
+                        break;
+                    case 'export':
+                        this.exportLogs();
+                        break;
+                }
+            },
+            null,
+            this._disposables
+        );
+    }
+
+    private static createWebview(): vscode.WebviewPanel {
+        const panel = vscode.window.createWebviewPanel(
+            TraceWindowWebview.viewType,
+            "Ballerina Trace Window",
+            ViewColumn.Beside,
+            {
+                enableScripts: true,
+                localResourceRoots: [Uri.file(path.join(extension.context.extensionPath, 'resources'))],
+                retainContextWhenHidden: true,
+            }
+        );
+        panel.iconPath = {
+            light: Uri.file(path.join(extension.context.extensionPath, 'resources', 'images', 'icons', 'ballerina.svg')),
+            dark: Uri.file(path.join(extension.context.extensionPath, 'resources', 'images', 'icons', 'ballerina-inverse.svg'))
+        };
+        return panel;
+    }
+
+    public getWebview(): vscode.WebviewPanel | undefined {
+        return this._panel;
+    }
+
+    public addLogEntry(message: string, category: 'stderr' | 'stdout' | 'stdlog') {
+        const entry: LogEntry = {
+            timestamp: new Date().toISOString(),
+            message: message,
+            category: category,
+            level: category === 'stderr' ? 'error' : 'info'
+        };
+        this._logEntries.push(entry);
+        this.updateWebview();
+    }
+
+    private updateWebview() {
+        if (this._panel) {
+            this._panel.webview.postMessage({
+                command: 'updateLogs',
+                logs: this._logEntries
+            });
+        }
+    }
+
+    private async exportLogs() {
+        try {
+            const logsContent = this._logEntries
+                .map(entry => `[${entry.timestamp}] [${entry.level}] ${entry.message}`)
+                .join('\n');
+            
+            if (logsContent.trim()) {
+                const doc = await vscode.workspace.openTextDocument({
+                    content: logsContent,
+                    language: 'plaintext'
+                });
+                await vscode.window.showTextDocument(doc);
+            }
+        } catch (error) {
+            vscode.window.showErrorMessage('Failed to export logs: ' + error);
+        }
+    }
+
+    private getWebviewContent(webView: vscode.Webview): string {
+        const logsHtml = this._logEntries.map((log, index) => 
+            `<div class="log-entry ${log.level}">
+                <span class="timestamp">${log.timestamp}</span>
+                <span class="level">[${log.level}]</span>
+                <span class="message">${this.escapeHtml(log.message)}</span>
+            </div>`
+        ).join('');
+
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ballerina Trace Window</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: var(--vscode-font-family);
+            background-color: var(--vscode-editor-background);
+            color: var(--vscode-editor-foreground);
+        }
+        .header {
+            padding: 10px;
+            background-color: var(--vscode-titleBar-background);
+            border-bottom: 1px solid var(--vscode-panel-border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .header h3 {
+            margin: 0;
+            font-size: 14px;
+        }
+        .controls {
+            display: flex;
+            gap: 10px;
+        }
+        button {
+            padding: 4px 12px;
+            background-color: var(--vscode-button-background);
+            color: var(--vscode-button-foreground);
+            border: none;
+            border-radius: 2px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: var(--vscode-button-hoverBackground);
+        }
+        .log-container {
+            padding: 10px;
+            overflow-y: auto;
+            height: calc(100vh - 80px);
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 12px;
+        }
+        .log-entry {
+            margin-bottom: 4px;
+            padding: 4px;
+            border-left: 3px solid transparent;
+        }
+        .log-entry.error {
+            border-left-color: var(--vscode-errorForeground);
+            color: var(--vscode-errorForeground);
+        }
+        .log-entry.info {
+            border-left-color: var(--vscode-textLink-foreground);
+        }
+        .log-entry.success {
+            border-left-color: var(--vscode-testing-iconPassed);
+        }
+        .timestamp {
+            color: var(--vscode-descriptionForeground);
+            margin-right: 10px;
+            font-size: 10px;
+        }
+        .level {
+            font-weight: bold;
+            margin-right: 8px;
+        }
+        .message {
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+        .empty-state {
+            text-align: center;
+            color: var(--vscode-descriptionForeground);
+            margin-top: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h3>Ballerina Trace Logs</h3>
+        <div class="controls">
+            <button id="exportBtn">Export</button>
+            <button id="clearBtn">Clear</button>
+        </div>
+    </div>
+    <div class="log-container" id="logContainer">
+        ${this._logEntries.length === 0 ? '<div class="empty-state">No trace logs yet. Start debugging or running your Ballerina program to see logs here.</div>' : logsHtml}
+    </div>
+    <script>
+        const vscode = acquireVsCodeApi();
+        const logContainer = document.getElementById('logContainer');
+        
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+        
+        function renderLogs(logs) {
+            if (logs.length === 0) {
+                logContainer.innerHTML = '<div class="empty-state">No trace logs yet. Start debugging or running your Ballerina program to see logs here.</div>';
+            } else {
+                logContainer.innerHTML = logs.map(log => 
+                    \`<div class="log-entry \${log.level}">
+                        <span class="timestamp">\${log.timestamp}</span>
+                        <span class="level">[\${log.level}]</span>
+                        <span class="message">\${escapeHtml(log.message)}</span>
+                    </div>\`
+                ).join('');
+                // Auto-scroll to bottom
+                logContainer.scrollTop = logContainer.scrollHeight;
+            }
+        }
+        
+        // Handle messages from extension
+        window.addEventListener('message', event => {
+            const message = event.data;
+            switch (message.command) {
+                case 'updateLogs':
+                    renderLogs(message.logs);
+                    break;
+            }
+        });
+        
+        // Handle button clicks
+        document.getElementById('exportBtn').addEventListener('click', () => {
+            vscode.postMessage({ command: 'export' });
+        });
+        
+        document.getElementById('clearBtn').addEventListener('click', () => {
+            vscode.postMessage({ command: 'clear' });
+        });
+    </script>
+</body>
+</html>`;
+    }
+
+    private escapeHtml(text: string): string {
+        const map: { [key: string]: string } = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;'
+        };
+        return text.replace(/[&<>"']/g, m => map[m]);
+    }
+
+    public dispose() {
+        TraceWindowWebview.currentPanel = undefined;
+        this._panel?.dispose();
+
+        while (this._disposables.length) {
+            const disposable = this._disposables.pop();
+            if (disposable) {
+                disposable.dispose();
+            }
+        }
+
+        this._panel = undefined;
+    }
+}
+
+interface LogEntry {
+    timestamp: string;
+    message: string;
+    category: 'stderr' | 'stdout' | 'stdlog';
+    level: 'error' | 'info' | 'success';
+}
+
diff --git a/workspaces/ballerina/ballerina-extension/src/features/tryit/activator.ts b/workspaces/ballerina/ballerina-extension/src/features/tryit/activator.ts
index 36106b1ab85..a5ae789b001 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/tryit/activator.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/tryit/activator.ts
@@ -25,9 +25,12 @@ import { BallerinaExtension } from "src/core";
 import Handlebars from "handlebars";
 import { clientManager, findRunningBallerinaProcesses, handleError, HTTPYAC_CONFIG_TEMPLATE, TRYIT_TEMPLATE, waitForBallerinaService } from "./utils";
 import { BIDesignModelResponse, OpenAPISpec } from "@wso2/ballerina-core";
+import { getProjectWorkingDirectory } from "../../utils/file-utils";
 import { startDebugging } from "../editor-support/activator";
 import { v4 as uuidv4 } from "uuid";
 import { createGraphqlView } from "../../views/graphql";
+import { StateMachine } from "../../stateMachine";
+import { getCurrentProjectRoot } from "../debugger";
 
 // File constants
 const FILE_NAMES = {
@@ -65,16 +68,26 @@ async function openTryItView(withNotice: boolean = false, resourceMetadata?: Res
             throw new Error('Ballerina Language Server is not connected');
         }
 
-        const workspaceRoot = vscode.workspace.workspaceFolders && vscode.workspace.workspaceFolders[0].uri.fsPath;
-        if (!workspaceRoot) {
-            throw new Error('Please open a workspace first');
+        let projectPath = StateMachine.context().projectUri;
+        if (!projectPath) {
+            const currentProjectRoot = await getCurrentProjectRoot();
+            if (!currentProjectRoot) {
+                throw new Error('Please open a workspace first');
+            }
+            // If currentProjectRoot is a file (single file project), use its directory
+            // Otherwise, use the current project root
+            try {
+                projectPath = getProjectWorkingDirectory(currentProjectRoot);
+            } catch (error) {
+                throw new Error(`Failed to determine working directory`);
+            }
         }
 
-        let services: ServiceInfo[] | null = await getAvailableServices(workspaceRoot);
+        let services: ServiceInfo[] | null = await getAvailableServices(projectPath);
 
         // if the getDesignModel() LS API is unavailable, create a ServiceInfo from ServiceMetadata to support Try It functionality. (a fallback logic for Ballerina versions prior to 2201.12.x)
         if (services == null && serviceMetadata && filePath) {
-            const service = createServiceInfoFromMetadata(serviceMetadata, workspaceRoot, filePath);
+            const service = createServiceInfoFromMetadata(serviceMetadata, projectPath, filePath);
             services = [service];
         }
 
@@ -94,7 +107,7 @@ async function openTryItView(withNotice: boolean = false, resourceMetadata?: Res
                 return;
             }
         } else {
-            const processesRunning = await checkBallerinaProcessRunning(workspaceRoot);
+            const processesRunning = await checkBallerinaProcessRunning(projectPath);
             if (!processesRunning) {
                 return;
             }
@@ -146,26 +159,33 @@ async function openTryItView(withNotice: boolean = false, resourceMetadata?: Res
             return;
         }
 
-        const targetDir = path.join(workspaceRoot, 'target');
+        const targetDir = path.join(projectPath, 'target');
         if (!fs.existsSync(targetDir)) {
             fs.mkdirSync(targetDir);
         }
 
         if (selectedService.type === ServiceType.HTTP) {
             const openapiSpec: OAISpec = await getOpenAPIDefinition(selectedService);
-            const selectedPort: number = await getServicePort(workspaceRoot, selectedService, openapiSpec);
+            const selectedPort: number = await getServicePort(projectPath, selectedService, openapiSpec);
             selectedService.port = selectedPort;
 
             const tryitFileUri = await generateTryItFileContent(targetDir, openapiSpec, selectedService, resourceMetadata);
             await openInSplitView(tryitFileUri, 'http');
         } else if (selectedService.type === ServiceType.GRAPHQL) {
-            const selectedPort: number = await getServicePort(workspaceRoot, selectedService);
+            const selectedPort: number = await getServicePort(projectPath, selectedService);
             const port = selectedPort;
             const path = selectedService.basePath;
             const service = `http://localhost:${port}${path}`;
             await createGraphqlView(service);
+        } else if (selectedService.type === ServiceType.MCP) {
+            const selectedPort: number = await getServicePort(projectPath, selectedService);
+            selectedService.port = selectedPort;
+            const path = selectedService.basePath;
+            const serviceUrl = `http://localhost:${selectedPort}${path}`;
+
+            await openMcpInspector(serviceUrl);
         } else {
-            const selectedPort: number = await getServicePort(workspaceRoot, selectedService);
+            const selectedPort: number = await getServicePort(projectPath, selectedService);
             selectedService.port = selectedPort;
 
             await openChatView(selectedService.basePath, selectedPort.toString());
@@ -218,6 +238,33 @@ async function openChatView(basePath: string, port: string) {
     }
 }
 
+async function openMcpInspector(serverUrl: string) {
+    const extensionId = 'wso2.mcp-server-inspector';
+
+    const extension = vscode.extensions.getExtension(extensionId);
+
+    if (extension) {
+        try {
+            await vscode.commands.executeCommand('mcpInspector.openInspectorWithUrl', {
+                serverUrl: serverUrl,
+                transport: "streamable-http"
+            });
+        } catch (error) {
+            vscode.window.showErrorMessage(`Failed to open MCP Inspector: ${error}`);
+        }
+    } else {
+        const choice = await vscode.window.showInformationMessage(
+            'MCP Inspector extension is required. Would you like to install it?',
+            'Install',
+            'Cancel'
+        );
+
+        if (choice === 'Install') {
+            vscode.commands.executeCommand('workbench.extensions.search', extensionId);
+        }
+    }
+}
+
 async function findServiceForResource(services: ServiceInfo[], resourceMetadata: ResourceMetadata, serviceMetadata: ServiceMetadata): Promise<ServiceInfo | undefined> {
     try {
         // Normalize path values for comparison
@@ -257,7 +304,8 @@ async function findServiceForResource(services: ServiceInfo[], resourceMetadata:
 
 async function getAvailableServices(projectDir: string): Promise<ServiceInfo[] | null> {
     try {
-        const langClient = clientManager.getClient();
+        // const langClient = clientManager.getClient();
+        const langClient = StateMachine.langClient();
 
         const response: BIDesignModelResponse = await langClient.getDesignModel({
             projectPath: projectDir
@@ -268,12 +316,24 @@ async function getAvailableServices(projectDir: string): Promise<ServiceInfo[] |
         const services = response.designModel.services
             .filter(({ type }) => {
                 const lowerType = type.toLowerCase();
-                return lowerType.includes('http') || lowerType.includes('ai') || lowerType.includes('graphql');
+                return lowerType.includes('http') || lowerType.includes('ai') || lowerType.includes('graphql') || lowerType.includes('mcp');
             })
             .map(({ displayName, absolutePath, location, attachedListeners, type }) => {
                 const trimmedPath = absolutePath.trim();
                 const name = displayName || (trimmedPath.startsWith('/') ? trimmedPath.substring(1) : trimmedPath);
-                const serviceType = type.toLowerCase().includes('http') ? ServiceType.HTTP : type.toLowerCase().includes('graphql') ? ServiceType.GRAPHQL : ServiceType.AGENT;
+
+                let serviceType: ServiceType;
+                const lowerType = type.toLowerCase();
+                if (lowerType.includes('http')) {
+                    serviceType = ServiceType.HTTP;
+                } else if (lowerType.includes('graphql')) {
+                    serviceType = ServiceType.GRAPHQL;
+                } else if (lowerType.includes('mcp')) {
+                    serviceType = ServiceType.MCP;
+                } else {
+                    serviceType = ServiceType.AGENT;
+                }
+
                 const listener = {
                     name: attachedListeners
                         .map(listenerId => response.designModel.listeners.find(l => l.uuid === listenerId)?.symbol)
@@ -415,7 +475,7 @@ async function getOpenAPIDefinition(service: ServiceInfo): Promise<OAISpec> {
             throw new Error(`OpenAPI spec generation failed for the service with base path: '${service.basePath}'`);
         }
 
-        const matchingDefinition = (openapiDefinitions as OpenAPISpec).content.filter(content =>
+        const matchingDefinition = (openapiDefinitions as OpenAPISpec).content?.filter(content =>
             content.serviceName.toLowerCase() === service?.name.toLowerCase()
             || (service.basePath !== "" && service?.name === '' && content.spec?.servers[0]?.url?.endsWith(service.basePath))
             || (service?.name === '' && content.spec?.servers[0]?.url == undefined) // TODO: Update the condition after fixing the issue in the OpenAPI tool
@@ -915,7 +975,8 @@ function disposeErrorWatcher() {
 enum ServiceType {
     HTTP = 'HTTP',
     AGENT = 'AI Agent',
-    GRAPHQL = 'GraphQL'
+    GRAPHQL = 'GraphQL',
+    MCP = 'MCP'
 }
 
 interface ServiceInfo {
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/agent-chat/rpc-handler.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/agent-chat/rpc-handler.ts
index a6b2b3bc837..b2fd21add3b 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/agent-chat/rpc-handler.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/agent-chat/rpc-handler.ts
@@ -14,12 +14,16 @@
  * 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 {
-    ChatReqMessage,
     abortChatRequest,
+    ChatReqMessage,
     getChatMessage,
+    getTracingStatus,
+    showTraceView,
+    TraceInput
 } from "@wso2/ballerina-core";
 import { Messenger } from "vscode-messenger";
 import { AgentChatRpcManager } from "./rpc-manager";
@@ -28,4 +32,6 @@ export function registerAgentChatRpcHandlers(messenger: Messenger) {
     const rpcManger = new AgentChatRpcManager();
     messenger.onRequest(getChatMessage, (args: ChatReqMessage) => rpcManger.getChatMessage(args));
     messenger.onNotification(abortChatRequest, () => rpcManger.abortChatRequest());
+    messenger.onRequest(getTracingStatus, () => rpcManger.getTracingStatus());
+    messenger.onNotification(showTraceView, (args: TraceInput) => rpcManger.showTraceView(args));
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/agent-chat/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/agent-chat/rpc-manager.ts
index 24f8e27c565..635f82f4b3c 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/agent-chat/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/agent-chat/rpc-manager.ts
@@ -20,8 +20,14 @@ import {
     AgentChatAPI,
     ChatReqMessage,
     ChatRespMessage,
+    TraceInput,
+    TraceStatus
 } from "@wso2/ballerina-core";
+import * as vscode from 'vscode';
 import { extension } from '../../BalExtensionContext';
+import { TracerMachine, TraceServer } from "../../features/tracing";
+import { TraceDetailsWebview } from "../../features/tracing/trace-details-webview";
+import { Trace } from "../../features/tracing/trace-server";
 
 export class AgentChatRpcManager implements AgentChatAPI {
     private currentAbortController: AbortController | null = null;
@@ -122,4 +128,108 @@ export class AgentChatRpcManager implements AgentChatAPI {
             throw new Error(errorMessage);
         }
     }
+
+    async getTracingStatus(): Promise<TraceStatus> {
+        return new Promise(async (resolve) => {
+            const isEnabled = TracerMachine.isEnabled();
+            resolve({
+                enabled: isEnabled
+            });
+        });
+    }
+
+
+    /**
+     * Find the trace that corresponds to a chat message by matching span attributes
+     * @param userMessage The user's input message
+     * @returns The matching trace or undefined if not found
+     */
+    findTraceForMessage(userMessage: string): Trace | undefined {
+        // Get all traces from the TraceServer
+        const traces = TraceServer.getTraces();
+
+        // Helper function to extract string value from attribute value
+        const extractValue = (value: any): string => {
+            if (typeof value === 'string') {
+                return value;
+            }
+            if (value && typeof value === 'object' && 'stringValue' in value) {
+                return String(value.stringValue);
+            }
+            return '';
+        };
+
+        // Iterate through each trace to find matching spans
+        for (const trace of traces) {
+            // Check each span in the trace
+            for (const span of trace.spans || []) {
+                // Check if this span matches our criteria:
+                // 1. span.type === "ai"
+                // 2. gen_ai.operation.name === "invoke_agent"
+                // 3. gen_ai.input.messages matches the user message
+
+                const attributes = span.attributes || [];
+
+                // Find relevant attributes
+                let spanType: string | undefined;
+                let operationName: string | undefined;
+                let inputMessages: string | undefined;
+
+                for (const attr of attributes) {
+                    const attrValue = extractValue(attr.value);
+
+                    if (attr.key === 'span.type') {
+                        spanType = attrValue;
+                    } else if (attr.key === 'gen_ai.operation.name') {
+                        operationName = attrValue;
+                    } else if (attr.key === 'gen_ai.input.messages') {
+                        inputMessages = attrValue;
+                    }
+                }
+
+                // Check if all criteria match
+                if (spanType === 'ai' &&
+                    operationName === 'invoke_agent' &&
+                    inputMessages) {
+                    // Check if the input message matches
+                    // inputMessages might be JSON or contain the message
+                    if (inputMessages.includes(userMessage)) {
+                        return trace;
+                    }
+                }
+            }
+        }
+
+        return undefined;
+    }
+
+    /**
+     * Show trace details webview for a given chat message
+     * Finds the trace matching the message and opens it in the trace details webview
+     * @param userMessage The user's input message
+     * @throws Error if no trace is found for the message
+     */
+    async showTraceDetailsForMessage(userMessage: string): Promise<void> {
+        try {
+            // Find the trace that matches the user message
+            const trace = this.findTraceForMessage(userMessage);
+
+            if (!trace) {
+                const errorMessage = 'No trace found for the given message. Make sure tracing is enabled and the agent has processed this message.';
+                vscode.window.showErrorMessage(errorMessage);
+                throw new Error(errorMessage);
+            }
+
+            // Open the trace details webview with isAgentChat=true
+            TraceDetailsWebview.show(trace, true);
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to show trace details';
+            vscode.window.showErrorMessage(`Error: ${errorMessage}`);
+            throw error;
+        }
+    }
+
+    async showTraceView(params: TraceInput): Promise<void> {
+        await this.showTraceDetailsForMessage(params.message);
+    }
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-agent/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-agent/rpc-manager.ts
index f858b7ac5b8..e64989ea722 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-agent/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-agent/rpc-manager.ts
@@ -411,87 +411,27 @@ export class AiAgentRpcManager implements AIAgentAPI {
 
     async updateMCPToolKit(params: McpToolUpdateRequest): Promise<void> {
         const projectUri = StateMachine.context().projectUri;
-        const filePath = Utils.joinPath(URI.file(projectUri), "agents.bal").fsPath;
-
-        // Generate the variable name from the server name
-        const variableName = params.updatedNode.properties["variable"].value;
+        const agentsFilePath = Utils.joinPath(URI.file(projectUri), params.agentFlowNode.codedata.lineRange.fileName).fsPath;
+        const connectionsFilePath = Utils.joinPath(URI.file(projectUri), "connections.bal").fsPath;
+        const mcpToolKitVarName = params.updatedNode.properties["variable"].value;
 
         // 1. Use the updatedNode from params for the MCP ToolKit edits
         let mcpEdits: { [filePath: string]: any[] } = {};
         if (params.updatedNode) {
-            // Get the template node
-            const nodeTemplate = await StateMachine.langClient().getNodeTemplate({
-                position: params.agentFlowNode.codedata.lineRange.endLine,
-                filePath: filePath,
-                id: {
-                    node: "CLASS_INIT",
-                    org: "ballerinax",
-                    module: "ai",
-                    packageName: "ai",
-                    version: "1.2.1",
-                    symbol: "init",
-                    object: "McpToolKit"
-                }
-            });
-
-            // Map all properties from updatedNode to nodeTemplate.flowNode
-            for (const key in params.updatedNode.properties) {
-                if (key === "type") {
-                    continue;
-                }
-                if (nodeTemplate.flowNode.properties.hasOwnProperty(key)) {
-                    nodeTemplate.flowNode.properties[key].value = params.updatedNode.properties[key].value;
-                }
-            }
             if (params.selectedTools.length === 0) {
-                (nodeTemplate.flowNode.properties["permittedTools"] as { value: any }).value = `()`;
+                params.updatedNode.properties["permittedTools"].value = `()`;
             } else {
-                if ("permittedTools" in nodeTemplate.flowNode.properties) {
-                    (nodeTemplate.flowNode.properties["permittedTools"] as { value: any }).value = params.selectedTools.map(tool => `"${tool}"`);
+                if ("permittedTools" in params.updatedNode.properties) {
+                    params.updatedNode.properties["permittedTools"].value = `[${params.selectedTools.map(tool => `"${tool}"`).join(", ")}]`;
                 }
             }
-            // Pass codedata if present
-            if (params.codedata) {
-                nodeTemplate.flowNode.codedata.lineRange = params.codedata.lineRange;
-            }
+
             // Use only the template node for generating text edits
             const mcpToolKitEdits = await StateMachine.langClient().getSourceCode({
-                filePath: filePath,
-                flowNode: nodeTemplate.flowNode,
+                filePath: connectionsFilePath,
+                flowNode: params.updatedNode,
             });
             mcpEdits = mcpToolKitEdits.textEdits;
-
-
-            for (const key in mcpToolKitEdits.textEdits) {
-                const filtered = mcpToolKitEdits.textEdits[key]
-                    .filter(edit => !edit.newText.includes("import"))
-                    .map(edit => ({
-                        ...edit
-                    }));
-
-                if (filtered.length > 0) {
-                    mcpEdits[key] = filtered;
-                }
-            }
-            // Update the range fields using params.codedata.lineRange
-            if (params.codedata && params.codedata.lineRange) {
-                const { startLine, endLine } = params.codedata.lineRange;
-                for (const file in mcpEdits) {
-                    mcpEdits[file] = mcpEdits[file].map(edit => ({
-                        ...edit,
-                        range: {
-                            start: {
-                                line: startLine.line,
-                                character: startLine.offset,
-                            },
-                            end: {
-                                line: endLine.line,
-                                character: endLine.offset,
-                            },
-                        }
-                    }));
-                }
-            }
         }
 
         // 2. Update the agent's tools array to include the variable name (following updateAIAgentTools pattern)
@@ -499,17 +439,17 @@ export class AiAgentRpcManager implements AIAgentAPI {
         let toolsValue = agentFlowNode.properties["tools"].value;
 
         // Parse existing tools and add the variable name
-        if (typeof toolsValue === "string" && typeof variableName === "string") {
+        if (typeof toolsValue === "string" && typeof mcpToolKitVarName === "string") {
             const toolsArray = this.parseToolsString(toolsValue);
             if (toolsArray.length > 0) {
                 // Add the variable name if not exists
-                if (!toolsArray.includes(variableName)) {
-                    toolsArray.push(variableName);
+                if (!toolsArray.includes(mcpToolKitVarName)) {
+                    toolsArray.push(mcpToolKitVarName);
                 }
                 // Update the tools value
                 toolsValue = `[${toolsArray.join(", ")}]`;
             } else {
-                toolsValue = `[${variableName}]`;
+                toolsValue = `[${mcpToolKitVarName}]`;
             }
         }
 
@@ -518,14 +458,14 @@ export class AiAgentRpcManager implements AIAgentAPI {
 
         // Generate source code for the updated agent
         const agentEdits = await StateMachine.langClient().getSourceCode({
-            filePath: filePath,
+            filePath: agentsFilePath,
             flowNode: agentFlowNode
         });
 
 
         // 3. Apply both edits
-        await updateSourceCode({ textEdits: mcpEdits });
         await updateSourceCode({ textEdits: agentEdits.textEdits });
+        await updateSourceCode({ textEdits: mcpEdits });
     }
 
     private parseToolsString(toolsStr: string): string[] {
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/constants.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/constants.ts
index 49c88fd0343..534951410d7 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/constants.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/constants.ts
@@ -24,98 +24,3 @@ export const REQ_KEY = "user_requirements_file";
 export const DEVELOPMENT_KEY = "developer_intention_file";
 export const DEVELOPMENT_DOCUMENT = "developer.md";
 export const TEST_DIR_NAME = "tests";
-
-// Datamapper Constants
-// Primitive data types supported by the datamapper
-export enum PrimitiveType {
-  STRING = "string",
-  INT = "int",
-  FLOAT = "float",
-  DECIMAL = "decimal",
-  BOOLEAN = "boolean"
-}
-
-export const NUMERIC_AND_BOOLEAN_TYPES = [
-    PrimitiveType.INT, 
-    PrimitiveType.FLOAT, 
-    PrimitiveType.DECIMAL, 
-    PrimitiveType.BOOLEAN
-];
-
-// Operations that can be performed during data mapping
-export enum Operation {
-  DIRECT = "DIRECT",
-  LENGTH = "LENGTH",
-  SPLIT = "SPLIT",
-  ADDITION = "ADDITION",
-  SUBTRACTION = "SUBTRACTION",
-  MULTIPLICATION = "MULTIPLICATION",
-  DIVISION = "DIVISION",
-  MODULAR = "MODULAR",
-  EQUAL = "EQUAL",
-  NOTEQUAL = "NOTEQUAL",
-  LESS_THAN = "LESS_THAN",
-  LESS_THAN_OR_EQUAL = "LESS_THAN_OR_EQUAL",
-  AND = "AND",
-  OR = "OR",
-  REPLACE_ALL = "REPLACE_ALL",
-  AVERAGE = "AVERAGE",
-  MAXIMUM = "MAXIMUM",
-  MINIMUM = "MINIMUM",
-  SUMMATION = "SUMMATION",
-  ABSOLUTE = "ABSOLUTE"
-}
-
-// Array types specifically for record data structures
-export enum ArrayRecordType {
-  RECORD_ARRAY = "record[]",
-  RECORD_ARRAY_NULLABLE = "record[]|()",
-  READONLY_RECORD_ARRAY = "(readonly&record)[]",
-  READONLY_RECORD_ARRAY_NULLABLE = "(readonly&record)[]|()",
-  RECORD_OR_NULL_ARRAY = "(record|())[]",
-  RECORD_OR_NULL_ARRAY_NULLABLE = "(record|())[]|()",
-  READONLY_RECORD_OR_NULL_ARRAY = "(readonly&record|())[]",
-  READONLY_RECORD_OR_NULL_ARRAY_NULLABLE = "(readonly&record|())[]|()"
-}
-
-// Array types for enum, union, and intersection data structures
-export enum ArrayEnumUnionType {
-  ENUM_ARRAY = "enum[]",
-  UNION_ARRAY = "union[]",
-  INTERSECTION_ARRAY = "intersection[]",
-  ENUM_ARRAY_NULLABLE = "enum[]|()",
-  UNION_ARRAY_NULLABLE = "union[]|()",
-  INTERSECTION_ARRAY_NULLABLE = "intersection[]|()"
-}
-
-export enum RecordType {
-  RECORD = "record",
-  RECORD_NULLABLE = "record|()",
-  READONLY_RECORD = "readonly&record",
-  READONLY_RECORD_NULLABLE = "readonly&record|()",
-  RECORD_ARRAY = "record[]",
-  RECORD_ARRAY_NULLABLE = "record[]|()",
-  READONLY_RECORD_ARRAY = "(readonly&record)[]",
-  READONLY_RECORD_ARRAY_NULLABLE = "(readonly&record)[]|()",
-  RECORD_OR_NULL_ARRAY = "(record|())[]",
-  RECORD_OR_NULL_ARRAY_NULLABLE = "(record|())[]|()",
-  READONLY_RECORD_OR_NULL_ARRAY = "(readonly&record|())[]",
-  READONLY_RECORD_OR_NULL_ARRAY_NULLABLE = "(readonly&record|())[]|()"
-}
-
-export enum UnionEnumIntersectionType {
-  ENUM = "enum",
-  UNION = "union",
-  INTERSECTION = "intersection",
-  ENUM_ARRAY = "enum[]",
-  ENUM_ARRAY_NULLABLE = "enum[]|()",
-  UNION_ARRAY = "union[]",
-  UNION_ARRAY_NULLABLE = "union[]|()",
-  INTERSECTION_ARRAY = "intersection[]",
-  INTERSECTION_ARRAY_NULLABLE = "intersection[]|()"
-}
-
-export enum MetadataType {
-    INPUT_METADATA = "inputMetadata",
-    OUTPUT_METADATA = "outputMetadata"
-}
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 b34f95b5f01..ada4a69c2f2 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
@@ -62,7 +62,7 @@ export async function checkProjectDiagnostics(langClient: ExtendedLangClient, te
 export async function isModuleNotFoundDiagsExist(diagnosticsResult: Diagnostics[], langClient): Promise<boolean> {
     // Create a Map to store unique diagnostic messages and their corresponding diagnostic information
     const uniqueDiagnosticMap = new Map<string, { diagnostic: any, uri: string }>();
-    
+
     // First pass: collect unique diagnostic messages across all files
     for (const diagResult of diagnosticsResult) {
         for (const diag of diagResult.diagnostics) {
@@ -74,12 +74,12 @@ export async function isModuleNotFoundDiagsExist(diagnosticsResult: Diagnostics[
             }
         }
     }
-    
+
     // If no BCE2003 diagnostics found, return false
     if (uniqueDiagnosticMap.size === 0) {
         return false;
     }
-    
+
     // Process each unique diagnostic only once
     let projectModified = false;
     for (const [_, { uri }] of uniqueDiagnosticMap.entries()) {
@@ -88,7 +88,7 @@ export async function isModuleNotFoundDiagsExist(diagnosticsResult: Diagnostics[
                 uri: uri
             }
         });
-        
+
         const response = dependenciesResponse as SyntaxTree;
         if (response.parseSuccess) {
             // Read and save content to a string
@@ -109,7 +109,7 @@ export async function isModuleNotFoundDiagsExist(diagnosticsResult: Diagnostics[
             throw Error("Module resolving failed");
         }
     }
-    
+
     return projectModified;
 }
 
@@ -185,35 +185,135 @@ export async function removeUnusedImports(diagnosticsResult: Diagnostics[], lang
     for (const diag of diagnosticsResult) {
         const fielUri = diag.uri;
         const diagnostics = diag.diagnostics;
-            // Filter the unused import diagnostics
-            const diagnostic = diagnostics.find(d => d.code === "BCE2002");
-            if (!diagnostic) { continue; }
-            const codeActions = await langClient.codeAction({
-                textDocument: { uri: fielUri },
-                range: {
-                    start: diagnostic.range.start,
-                    end: diagnostic.range.end
-                },
-                context: { diagnostics: [diagnostic] }
-            });
+        // Filter the unused import diagnostics
+        const diagnostic = diagnostics.find(d => d.code === "BCE2002");
+        if (!diagnostic) { continue; }
+        const codeActions = await langClient.codeAction({
+            textDocument: { uri: fielUri },
+            range: {
+                start: diagnostic.range.start,
+                end: diagnostic.range.end
+            },
+            context: { diagnostics: [diagnostic] }
+        });
 
-            // Find and apply the appropriate code action
-            const action = codeActions.find(action => action.title === "Remove all unused imports");
-            if (!action?.edit?.documentChanges?.length) { continue; }
-            const docEdit = action.edit.documentChanges[0] as TextDocumentEdit;
+        // Find and apply the appropriate code action
+        const action = codeActions.find(action => action.title === "Remove all unused imports");
+        if (!action?.edit?.documentChanges?.length) { continue; }
+        const docEdit = action.edit.documentChanges[0] as TextDocumentEdit;
 
-            // Apply modifications to syntax tree
-            const syntaxTree = await langClient.stModify({
-                documentIdentifier: { uri: docEdit.textDocument.uri },
-                astModifications: docEdit.edits.map(edit => ({
+        // Apply modifications to syntax tree
+        const syntaxTree = await langClient.stModify({
+            documentIdentifier: { uri: docEdit.textDocument.uri },
+            astModifications: docEdit.edits.map(edit => ({
+                startLine: edit.range.start.line,
+                startColumn: edit.range.start.character,
+                endLine: edit.range.end.line,
+                endColumn: edit.range.end.character,
+                type: "INSERT",
+                isImport: true,
+                config: { STATEMENT: edit.newText }
+            }))
+        });
+
+        // Update file content
+        const { source } = syntaxTree as SyntaxTree;
+        if (!source) {
+            // Handle the case where source is undefined, when compiler issue occurs
+            return false;
+        }
+        const absolutePath = fileURLToPath(fielUri);
+        writeBallerinaFileDidOpenTemp(absolutePath, source);
+        projectModified = true;
+    }
+    return projectModified;
+}
+
+export async function addMissingRequiredFields(
+    diagnosticsResult: Diagnostics[],
+    langClient: ExtendedLangClient
+): Promise<boolean> {
+    let projectModified = false;
+
+    for (const diag of diagnosticsResult) {
+        const fileUri = diag.uri;
+        const diagnostics = diag.diagnostics;
+
+        // Filter BCE2520 diagnostics (missing required record fields)
+        const bce2520Diagnostics = diagnostics.filter(d => d.code === "BCE2520");
+        if (!bce2520Diagnostics.length) {
+            continue;
+        }
+
+        // Group diagnostics by their range (same location = same record literal)
+        const diagnosticsByRange = new Map<string, typeof bce2520Diagnostics>();
+        
+        for (const d of bce2520Diagnostics) {
+            const rangeKey = `${d.range.start.line}:${d.range.start.character}-${d.range.end.line}:${d.range.end.character}`;
+            if (!diagnosticsByRange.has(rangeKey)) {
+                diagnosticsByRange.set(rangeKey, []);
+            }
+            diagnosticsByRange.get(rangeKey)!.push(d);
+        }
+
+        const astModifications: STModification[] = [];
+
+        // Process each group of diagnostics (one group per record literal)
+        for (const [rangeKey, groupedDiagnostics] of diagnosticsByRange) {
+            try {
+                // Use the first diagnostic's range, but pass ALL diagnostics in the group
+                const firstDiag = groupedDiagnostics[0];
+                
+                // Get code actions with ALL diagnostics for this location
+                const codeActions = await langClient.codeAction({
+                    textDocument: { uri: fileUri },
+                    range: {
+                        start: firstDiag.range.start,
+                        end: firstDiag.range.end
+                    },
+                    context: { 
+                        diagnostics: groupedDiagnostics, 
+                        only: ['quickfix'],
+                        triggerKind: 1
+                    }
+                });
+
+                if (!codeActions?.length) {
+                    console.warn(`No code actions returned for ${fileUri} at ${rangeKey}`);
+                    continue;
+                }
+
+                // Find the action that fills required fields
+                const action = codeActions.find(
+                    action => action.title && action.title.includes("required fields")
+                );
+
+                if (!action?.edit?.documentChanges?.length) {
+                    continue;
+                }
+
+                const docEdit = action.edit.documentChanges[0] as TextDocumentEdit;
+                const edit = docEdit.edits[0];
+
+                astModifications.push({
                     startLine: edit.range.start.line,
                     startColumn: edit.range.start.character,
                     endLine: edit.range.end.line,
                     endColumn: edit.range.end.character,
                     type: "INSERT",
-                    isImport: true,
+                    isImport: false,
                     config: { STATEMENT: edit.newText }
-                }))
+                });
+            } catch (err) {
+                console.warn(`Could not apply code action for ${fileUri} at ${rangeKey}:`, err);
+            }
+        }
+
+        // Apply modifications to syntax tree
+        if (astModifications.length > 0) {
+            const syntaxTree = await langClient.stModify({
+                documentIdentifier: { uri: fileUri },
+                astModifications: astModifications
             });
 
             // Update file content
@@ -222,9 +322,11 @@ export async function removeUnusedImports(diagnosticsResult: Diagnostics[], lang
                 // Handle the case where source is undefined, when compiler issue occurs
                 return false;
             }
-            const absolutePath = fileURLToPath(fielUri);
+            const absolutePath = fileURLToPath(fileUri);
             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 8404ed51eb1..139e5aeb5ea 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,22 +21,15 @@ import {
     abortAIGeneration,
     abortTestGeneration,
     addChatSummary,
-    addCodeSegmentToWorkspace,
     addFilesToProject,
     AddFilesToProjectRequest,
-    addInlineCodeSegmentToWorkspace,
     addToProject,
     AddToProjectRequest,
     AIChatSummary,
     applyDoOnFailBlocks,
     checkSyntaxError,
     clearInitialPrompt,
-    CodeSegment,
-    createTempFileAndGenerateMetadata,
-    CreateTempFileRequest,
     createTestDirecoryIfNotExists,
-    DatamapperModelContext,
-    DataMapperModelResponse,
     deleteFromProject,
     DeleteFromProjectRequest,
     DeveloperDocument,
@@ -45,19 +38,17 @@ import {
     FetchDataRequest,
     generateCode,
     GenerateCodeRequest,
-    generateDataMapperModel,
+    generateContextTypes,
     generateFunctionTests,
     generateHealthcareCode,
-    generateMappings,
+    generateInlineMappingCode,
+    generateMappingCode,
     generateOpenAPI,
     GenerateOpenAPIRequest,
     generateTestPlan,
-    GenerateTypesFromRecordRequest,
     getAccessToken,
-    getActiveFile,
     getAIMachineSnapshot,
     getBackendUrl,
-    getContentFromFile,
     getDefaultPrompt,
     getDriftDiagnosticContents,
     getFileExists,
@@ -67,8 +58,6 @@ import {
     getGeneratedDocumentation,
     getGeneratedTests,
     getLoginMethod,
-    getModuleDirectory,
-    GetModuleDirParams,
     getProjectUuid,
     getRefreshedAccessToken,
     getRelevantLibrariesAndFunctions,
@@ -78,18 +67,18 @@ import {
     getServiceSourceForName,
     getShadowDiagnostics,
     getTestDiagnostics,
-    getTypesFromRecord,
     handleChatSummaryError,
     isCopilotSignedIn,
     isNaturalProgrammingDirectoryExists,
     isRequirementsSpecificationFileExist,
+    isUserAuthenticated,
     markAlertShown,
     MetadataWithAttachments,
-    notifyAIMappings,
-    NotifyAIMappingsRequest,
-    openAIMappingChatWindow,
+    openChatWindowWithCommand,
     postProcess,
     PostProcessRequest,
+    ProcessContextTypeCreationRequest,
+    ProcessMappingParametersRequest,
     ProjectSource,
     promptGithubAuthorize,
     promptWSO2AILogout,
@@ -99,7 +88,6 @@ import {
     RepairParams,
     RequirementSpecification,
     showSignInAlert,
-    stopAIMappings,
     submitFeedback,
     SubmitFeedbackRequest,
     TestGenerationRequest,
@@ -126,18 +114,13 @@ export function registerAiPanelRpcHandlers(messenger: Messenger) {
     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(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(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(openChatWindowWithCommand, () => rpcManger.openChatWindowWithCommand());
+    messenger.onRequest(generateContextTypes, (args: ProcessContextTypeCreationRequest) => rpcManger.generateContextTypes(args));
+    messenger.onRequest(generateMappingCode, (args: ProcessMappingParametersRequest) => rpcManger.generateMappingCode(args));
+    messenger.onRequest(generateInlineMappingCode, (args: MetadataWithAttachments) => rpcManger.generateInlineMappingCode(args));
     messenger.onRequest(getGeneratedTests, (args: TestGenerationRequest) => rpcManger.getGeneratedTests(args));
     messenger.onRequest(getTestDiagnostics, (args: TestGenerationResponse) => rpcManger.getTestDiagnostics(args));
     messenger.onRequest(getServiceSourceForName, (args: string) => rpcManger.getServiceSourceForName(args));
@@ -147,7 +130,6 @@ export function registerAiPanelRpcHandlers(messenger: Messenger) {
     messenger.onNotification(abortTestGeneration, () => rpcManger.abortTestGeneration());
     messenger.onNotification(applyDoOnFailBlocks, () => rpcManger.applyDoOnFailBlocks());
     messenger.onRequest(postProcess, (args: PostProcessRequest) => rpcManger.postProcess(args));
-    messenger.onRequest(getActiveFile, () => rpcManger.getActiveFile());
     messenger.onRequest(promptGithubAuthorize, () => rpcManger.promptGithubAuthorize());
     messenger.onRequest(promptWSO2AILogout, () => rpcManger.promptWSO2AILogout());
     messenger.onRequest(isCopilotSignedIn, () => rpcManger.isCopilotSignedIn());
@@ -163,8 +145,6 @@ export function registerAiPanelRpcHandlers(messenger: Messenger) {
     messenger.onNotification(updateDevelopmentDocument, (args: DeveloperDocument) => rpcManger.updateDevelopmentDocument(args));
     messenger.onNotification(updateRequirementSpecification, (args: RequirementSpecification) => rpcManger.updateRequirementSpecification(args));
     messenger.onNotification(createTestDirecoryIfNotExists, (args: string) => rpcManger.createTestDirecoryIfNotExists(args));
-    messenger.onRequest(getModuleDirectory, (args: GetModuleDirParams) => rpcManger.getModuleDirectory(args));
-    messenger.onRequest(getContentFromFile, (args: GetFromFileRequest) => rpcManger.getContentFromFile(args));
     messenger.onRequest(submitFeedback, (args: SubmitFeedbackRequest) => rpcManger.submitFeedback(args));
     messenger.onRequest(getRelevantLibrariesAndFunctions, (args: RelevantLibrariesAndFunctionsRequest) => rpcManger.getRelevantLibrariesAndFunctions(args));
     messenger.onNotification(generateOpenAPI, (args: GenerateOpenAPIRequest) => rpcManger.generateOpenAPI(args));
@@ -176,4 +156,5 @@ export function registerAiPanelRpcHandlers(messenger: Messenger) {
     messenger.onNotification(abortAIGeneration, () => rpcManger.abortAIGeneration());
     messenger.onNotification(getGeneratedDocumentation, (args: DocGenerationRequest) => rpcManger.getGeneratedDocumentation(args));
     messenger.onRequest(addFilesToProject, (args: AddFilesToProjectRequest) => rpcManger.addFilesToProject(args));
+    messenger.onRequest(isUserAuthenticated, () => rpcManger.isUserAuthenticated());
 }
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 f74490e5f92..a4293462a47 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
@@ -24,40 +24,27 @@ import {
     AIPanelPrompt,
     AddFilesToProjectRequest,
     AddToProjectRequest,
-    AllDataMapperSourceRequest,
     BIModuleNodesRequest,
     BISourceCodeResponse,
-    CodeSegment,
-    Command,
-    CreateTempFileRequest,
-    DMModel,
-    DataMapperModelResponse,
-    DatamapperModelContext,
     DeleteFromProjectRequest,
     DeveloperDocument,
     DiagnosticEntry,
     Diagnostics,
     DocGenerationRequest,
-    ExpandedDMModel,
-    ExtendedDataMapperMetadata,
     FetchDataRequest,
     FetchDataResponse,
     GenerateCodeRequest,
-    GenerateMappingsResponse,
     GenerateOpenAPIRequest,
-    GenerateTypesFromRecordRequest,
-    GenerateTypesFromRecordResponse,
     GetFromFileRequest,
     GetModuleDirParams,
     LLMDiagnostics,
-    LinePosition,
     LoginMethod,
-    MappingElement,
     MetadataWithAttachments,
-    NotifyAIMappingsRequest,
     OperationType,
     PostProcessRequest,
     PostProcessResponse,
+    ProcessContextTypeCreationRequest,
+    ProcessMappingParametersRequest,
     ProjectDiagnostics,
     ProjectModule,
     ProjectSource,
@@ -67,31 +54,26 @@ import {
     RequirementSpecification,
     SourceFile,
     SubmitFeedbackRequest,
-    SyntaxTree,
-    TemplateId,
     TestGenerationMentions,
     TestGenerationRequest,
     TestGenerationResponse,
     TestGeneratorIntermediaryState,
-    TestPlanGenerationRequest,
-    TextEdit
+    TestPlanGenerationRequest
 } from "@wso2/ballerina-core";
 import * as crypto from 'crypto';
 import * as fs from 'fs';
 import * as os from 'os';
 import path from "path";
 import { parse } from 'toml';
-import { Uri, commands, window, workspace } from 'vscode';
+import { 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 { ExtendedLangClient } from "src/core";
 import { fetchWithAuth } from "../../../src/features/ai/service/connection";
+import { generateContextTypes, generateInlineMappingCode, generateMappingCode, openChatWindowWithCommand } from "../../../src/features/ai/service/datamapper/datamapper";
 import { generateOpenAPISpec } from "../../../src/features/ai/service/openapi/openapi";
 import { AIStateMachine } from "../../../src/views/ai-panel/aiMachine";
 import { extension } from "../../BalExtensionContext";
-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";
@@ -105,9 +87,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, writeBallerinaFileDidOpenTemp } from "../../utils/modification";
+import { writeBallerinaFileDidOpen, writeBallerinaFileDidOpenTemp } from "../../utils/modification";
 import { updateSourceCode } from "../../utils/source-utils";
-import { expandDMModel, refreshDataMapper, updateAndRefreshDataMapper } from "../data-mapper/utils";
+import { refreshDataMapper } from "../data-mapper/utils";
 import {
     DEVELOPMENT_DOCUMENT,
     NATURAL_PROGRAMMING_DIR_NAME, REQUIREMENT_DOC_PREFIX,
@@ -116,9 +98,9 @@ import {
     REQ_KEY, TEST_DIR_NAME
 } from "./constants";
 import { attemptRepairProject, checkProjectDiagnostics } from "./repair-utils";
-import { AIPanelAbortController, addToIntegration, cleanDiagnosticMessages, handleStop, isErrorCode, processMappings, requirementsSpecification, searchDocumentation } from "./utils";
+import { AIPanelAbortController, addToIntegration, cleanDiagnosticMessages, isErrorCode, requirementsSpecification, searchDocumentation } from "./utils";
 import { fetchData } from "./utils/fetch-data-utils";
-import { CLOSE_AI_PANEL_COMMAND, OPEN_AI_PANEL_COMMAND } from "../../../src/features/ai/constants";
+import { checkToken } from "../../../src/views/ai-panel/utils";
 
 export class AiPanelRpcManager implements AIPanelAPI {
 
@@ -203,21 +185,15 @@ export class AiPanelRpcManager implements AIPanelAPI {
     }
 
     async addToProject(req: AddToProjectRequest): Promise<boolean> {
-
-        const workspaceFolders = workspace.workspaceFolders;
-        if (!workspaceFolders) {
-            throw new Error("No workspaces found.");
-        }
-
-        const workspaceFolderPath = workspaceFolders[0].uri.fsPath;
+        const projectPath = StateMachine.context().projectUri;
         // Check if workspaceFolderPath is a Ballerina project
         // Assuming a Ballerina project must contain a 'Ballerina.toml' file
-        const ballerinaProjectFile = path.join(workspaceFolderPath, 'Ballerina.toml');
+        const ballerinaProjectFile = path.join(projectPath, 'Ballerina.toml');
         if (!fs.existsSync(ballerinaProjectFile)) {
             throw new Error("Not a Ballerina project.");
         }
 
-        let balFilePath = path.join(workspaceFolderPath, req.filePath);
+        let balFilePath = path.join(projectPath, req.filePath);
 
         const directory = path.dirname(balFilePath);
         if (!fs.existsSync(directory)) {
@@ -231,38 +207,31 @@ export class AiPanelRpcManager implements AIPanelAPI {
         return true;
     }
 
-    async getFromFile(req: GetFromFileRequest): Promise<string> {
-        return new Promise(async (resolve) => {
-            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.");
-            }
+    async getFromFile(req: GetFromFileRequest): Promise<string> {
+        const projectPath = StateMachine.context().projectUri;
+        const ballerinaProjectFile = path.join(projectPath, 'Ballerina.toml');
+        if (!fs.existsSync(ballerinaProjectFile)) {
+            throw new Error("Not a Ballerina project.");
+        }
 
-            const balFilePath = path.join(workspaceFolderPath, req.filePath);
-            const content = fs.promises.readFile(balFilePath, 'utf-8');
-            resolve(content);
-        });
+        const balFilePath = path.join(projectPath, req.filePath);
+        try {
+            const content = await fs.promises.readFile(balFilePath, 'utf-8');
+            return content;
+        } catch (error) {
+            throw error;
+        }
     }
 
     async deleteFromProject(req: DeleteFromProjectRequest): Promise<void> {
-        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');
+        const projectPath = StateMachine.context().projectUri;
+        const ballerinaProjectFile = path.join(projectPath, 'Ballerina.toml');
         if (!fs.existsSync(ballerinaProjectFile)) {
             throw new Error("Not a Ballerina project.");
         }
 
-        const balFilePath = path.join(workspaceFolderPath, req.filePath);
+        const balFilePath = path.join(projectPath, req.filePath);
         if (fs.existsSync(balFilePath)) {
             try {
                 fs.unlinkSync(balFilePath);
@@ -278,57 +247,19 @@ export class AiPanelRpcManager implements AIPanelAPI {
     }
 
     async getFileExists(req: GetFromFileRequest): Promise<boolean> {
-        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');
+        const projectPath = StateMachine.context().projectUri;
+        const ballerinaProjectFile = path.join(projectPath, 'Ballerina.toml');
         if (!fs.existsSync(ballerinaProjectFile)) {
             throw new Error("Not a Ballerina project.");
         }
 
-        const balFilePath = path.join(workspaceFolderPath, req.filePath);
+        const balFilePath = path.join(projectPath, req.filePath);
         if (fs.existsSync(balFilePath)) {
             return true;
         }
         return false;
     }
 
-    async notifyAIMappings(params: NotifyAIMappingsRequest): Promise<boolean> {
-        const { newFnPosition, prevFnSource, filePath } = params;
-        const fileUri = Uri.file(filePath).toString();
-        const undoAction = 'Undo';
-        const msg = 'You have automatically generated mappings. Do you want to undo the changes?';
-        const result = await window.showInformationMessage(msg, undoAction, 'Close');
-
-        if (result === undoAction) {
-            const res = await StateMachine.langClient().stModify({
-                astModifications: [{
-                    type: "INSERT",
-                    config: { STATEMENT: prevFnSource },
-                    ...newFnPosition
-                }],
-                documentIdentifier: {
-                    uri: fileUri
-                }
-            });
-
-            const { source } = res as SyntaxTree;
-            await modifyFileContent({ filePath, content: source });
-            updateView();
-        }
-
-        return true;
-    }
-
-    async stopAIMappings(): Promise<GenerateMappingsResponse> {
-        handleStop();
-        return { userAborted: true };
-    }
-
-
     async getShadowDiagnostics(project: ProjectSource): Promise<ProjectDiagnostics> {
         const environment = await setupProjectEnvironment(project);
         if (!environment) {
@@ -379,7 +310,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
     async getGeneratedTests(params: TestGenerationRequest): Promise<TestGenerationResponse> {
         return new Promise(async (resolve, reject) => {
             try {
-                const projectRoot = await getBallerinaProjectRoot();
+                const projectRoot = StateMachine.context().projectUri;
 
                 const generatedTests = await generateTest(projectRoot, params, AIPanelAbortController.getInstance());
                 resolve(generatedTests);
@@ -392,7 +323,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
     async getTestDiagnostics(params: TestGenerationResponse): Promise<ProjectDiagnostics> {
         return new Promise(async (resolve, reject) => {
             try {
-                const projectRoot = await getBallerinaProjectRoot();
+                const projectRoot = StateMachine.context().projectUri;
                 const diagnostics = await getDiagnostics(projectRoot, params);
                 resolve(diagnostics);
             } catch (error) {
@@ -404,7 +335,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
     async getServiceSourceForName(params: string): Promise<string> {
         return new Promise(async (resolve, reject) => {
             try {
-                const projectRoot = await getBallerinaProjectRoot();
+                const projectRoot = StateMachine.context().projectUri;
                 const { serviceDeclaration, serviceDocFilePath } = await getServiceDeclaration(projectRoot, params);
                 resolve(serviceDeclaration.source);
             } catch (error) {
@@ -416,7 +347,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
     async getResourceSourceForMethodAndPath(params: string): Promise<string> {
         return new Promise(async (resolve, reject) => {
             try {
-                const projectRoot = await getBallerinaProjectRoot();
+                const projectRoot = StateMachine.context().projectUri;
                 const { serviceDeclaration, resourceAccessorDef, serviceDocFilePath } = await getResourceAccessorDef(projectRoot, params);
                 resolve(resourceAccessorDef.source);
             } catch (error) {
@@ -428,7 +359,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
     async getServiceNames(): Promise<TestGenerationMentions> {
         return new Promise(async (resolve, reject) => {
             try {
-                const projectRoot = await getBallerinaProjectRoot();
+                const projectRoot = StateMachine.context().projectUri;
                 const serviceDeclNames = await getServiceDeclarationNames(projectRoot);
                 resolve({
                     mentions: serviceDeclNames
@@ -442,7 +373,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
     async getResourceMethodAndPaths(): Promise<TestGenerationMentions> {
         return new Promise(async (resolve, reject) => {
             try {
-                const projectRoot = await getBallerinaProjectRoot();
+                const projectRoot = StateMachine.context().projectUri;
                 const resourceAccessorNames = await getResourceAccessorNames(projectRoot);
                 resolve({
                     mentions: resourceAccessorNames
@@ -457,16 +388,12 @@ export class AiPanelRpcManager implements AIPanelAPI {
         AIPanelAbortController.getInstance().abort();
     }
 
-    async getTypesFromRecord(params: GenerateTypesFromRecordRequest): Promise<GenerateTypesFromRecordResponse> {
-        return await generateTypeCreation(params);
-    }
-
     async postProcess(req: PostProcessRequest): Promise<PostProcessResponse> {
         return await postProcess(req);
     }
 
     async applyDoOnFailBlocks(): Promise<void> {
-        const projectRoot = await getBallerinaProjectRoot();
+        const projectRoot = StateMachine.context().projectUri;
 
         if (!projectRoot) {
             return null;
@@ -495,23 +422,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
             };
 
             const resp: BISourceCodeResponse = await StateMachine.langClient().addErrorHandler(req);
-            await updateSourceCode({ textEdits: resp.textEdits }, null, 'Error Handler Creation');
-        }
-    }
-
-    async getActiveFile(): Promise<string> {
-        const activeTabGroup = window.tabGroups.all.find(group => {
-            return group.activeTab.isActive && group.activeTab?.input;
-        });
-
-        if (activeTabGroup && activeTabGroup.activeTab && activeTabGroup.activeTab.input) {
-            const activeTabInput = activeTabGroup.activeTab.input as { uri: { fsPath: string } };
-
-            if (activeTabInput.uri) {
-                const fileUri = activeTabInput.uri;
-                const fileName = fileUri.fsPath.split('/').pop();
-                return fileName || '';
-            }
+            await updateSourceCode({ textEdits: resp.textEdits, description: 'Error Handler Creation' });
         }
     }
 
@@ -660,8 +571,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
 
     async getModuleDirectory(params: GetModuleDirParams): Promise<string> {
         return new Promise((resolve) => {
-            const projectUri = params.filePath;
-            const projectFsPath = URI.parse(projectUri).fsPath;
+            const projectFsPath = params.filePath;
             const moduleName = params.moduleName;
             const generatedPath = path.join(projectFsPath, "generated", moduleName);
             if (fs.existsSync(generatedPath) && fs.statSync(generatedPath).isDirectory()) {
@@ -672,14 +582,6 @@ 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 = await fs.promises.readFile(projectFsPath, 'utf-8');
-            resolve(fileContent);
-        });
-    }
-
     async submitFeedback(content: SubmitFeedbackRequest): Promise<boolean> {
         return new Promise(async (resolve) => {
             try {
@@ -747,296 +649,49 @@ export class AiPanelRpcManager implements AIPanelAPI {
         AIPanelAbortController.getInstance().abort();
     }
 
-    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: 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.hasOwnProperty('node') ||
-                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()
-                .getDataMapperMappings({
-                    filePath,
-                    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 getGeneratedDocumentation(params: DocGenerationRequest): Promise<void> {
+        await generateDocumentationForService(params);
     }
 
-    async addCodeSegmentToWorkspace(params: CodeSegment): Promise<boolean> {
+    async addFilesToProject(params: AddFilesToProjectRequest): 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[] };
+            const projectPath = StateMachine.context().projectUri; 
 
-            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
-                        }
-                    }
-                };
-                allTextEdits = {
-                    [filePath]: [textEdit]
-                };
+            const ballerinaProjectFile = path.join(projectPath, "Ballerina.toml");
+            if (!fs.existsSync(ballerinaProjectFile)) {
+                throw new Error("Not a Ballerina project.");
             }
-            await updateSourceCode({ textEdits: allTextEdits }, null, 'AI Code Segment Creation');
+            await addToIntegration(projectPath, params.fileChanges);
+            updateView();
             return true;
         } catch (error) {
-            console.error(">>> Failed to add code segment to the workspace", error);
-            throw error;
+            console.error(">>> Failed to add files to the project", error);
+            return false; //silently fail for timeout issues.
         }
     }
 
-    async openAIMappingChatWindow(params: DataMapperModelResponse): Promise<void> {
-        try {
-            const context = StateMachine.context();
-            const { identifier, dataMapperMetadata } = context;
-
-            commands.executeCommand(CLOSE_AI_PANEL_COMMAND);
-            commands.executeCommand(OPEN_AI_PANEL_COMMAND, {
-                type: 'command-template',
-                command: Command.DataMap,
-                templateId: identifier ? TemplateId.MappingsForFunction : TemplateId.InlineMappings,
-                ...(identifier && { params: { functionName: identifier } }),
-                metadata: {
-                    ...dataMapperMetadata,
-                    mappingsModel: params.mappingsModel as ExpandedDMModel
-                }
-            });
-        } catch (error) {
-            console.error("Failed to open AI chat window for mapping:", error);
-            throw error;
-        }
+    async generateMappingCode(params: ProcessMappingParametersRequest): Promise<void> {
+        await generateMappingCode(params);
     }
 
-    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 generateInlineMappingCode(params: MetadataWithAttachments): Promise<void> {
+        await generateInlineMappingCode(params);
     }
 
-    async addInlineCodeSegmentToWorkspace(params: CodeSegment): Promise<void> {
-        try {
-            let filePath = StateMachine.context().documentUri;
-            const datamapperMetadata = StateMachine.context().dataMapperMetadata;
-            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
-                    }
-                }
-            };
-            const allTextEdits: { [key: string]: TextEdit[] } = {
-                [filePath]: [textEdit]
-            };
-
-            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 generateContextTypes(params: ProcessContextTypeCreationRequest): Promise<void> {
+        await generateContextTypes(params);
     }
 
-    async getGeneratedDocumentation(params: DocGenerationRequest): Promise<void> {
-        await generateDocumentationForService(params);
+    async openChatWindowWithCommand(): Promise<void> {
+        await openChatWindowWithCommand();
     }
 
-    async addFilesToProject(params: AddFilesToProjectRequest): Promise<boolean> {
+    async isUserAuthenticated(): 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;
+            const token = await checkToken();
+            return !!token;
         } catch (error) {
-            console.error(">>> Failed to add files to the project", error);
-            return false; //silently fail for timeout issues.
+            return false;
         }
     }
 }
@@ -1084,9 +739,9 @@ interface BalModification {
     moduleName: string;
 }
 
-async function setupProjectEnvironment(project: ProjectSource): Promise<{ langClient: any, tempDir: string } | null> {
+async function setupProjectEnvironment(project: ProjectSource): Promise<{ langClient: ExtendedLangClient, tempDir: string } | null> {
     //TODO: Move this to LS
-    const projectRoot = await getBallerinaProjectRoot();
+    const projectRoot = StateMachine.context().projectUri;
     if (!projectRoot) {
         return null;
     }
@@ -1122,11 +777,6 @@ export function getProjectFromResponse(req: string): ProjectSource {
     return { sourceFiles, projectName: "" };
 }
 
-function getContentInsideQuotes(input: string): string | null {
-    const match = input.match(/'([^']+)'/);
-    return match ? match[1] : null;
-}
-
 function getErrorDiagnostics(diagnostics: Diagnostics[]): DiagnosticEntry[] {
     const errorDiagnostics: DiagnosticEntry[] = [];
 
@@ -1165,7 +815,7 @@ enum CodeGenerationType {
 }
 
 async function getCurrentProjectSource(requestType: OperationType): Promise<BallerinaProject> {
-    const projectRoot = await getBallerinaProjectRoot();
+    const projectRoot = StateMachine.context().projectUri;
 
     if (!projectRoot) {
         return null;
@@ -1254,24 +904,6 @@ async function populateModules(modulesDir: string, project: BallerinaProject) {
     }
 }
 
-export async function 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;
-}
-
-
 export async function postProcess(req: PostProcessRequest): Promise<PostProcessResponse> {
     let assist_resp = req.assistant_response;
     assist_resp = assist_resp.replace(/import ballerinax\/client\.config/g, "import ballerinax/'client.config");
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/types.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/types.ts
index 5f91c2c2da0..6d3b6e39c84 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/types.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/types.ts
@@ -18,58 +18,6 @@
  */
 
 // Data-mapper related interfaces
-export interface SimpleFieldDescriptor {
-    type: string;
-    comment: string;
-}
-
-export interface NestedFieldDescriptor {
-    [key: string]: SimpleFieldDescriptor | NestedFieldDescriptor;
-}
-
-export interface RecordDefinitonObject {
-    recordFields: NestedFieldDescriptor;
-    recordFieldsMetadata: {
-        [fieldName: string]: FieldMetadata;
-    };
-}
-
-export interface FieldMetadata {
-    typeName: string;
-    type: string;
-    typeInstance: string;
-    optional: boolean;
-    nullable?: boolean;
-    nullableArray?: boolean;
-    members?: {
-        [memberName: string]: FieldMetadata;
-    };
-    fields?: {
-        [fieldName: string]: FieldMetadata;
-    };
-}
-
-export interface ParameterField {
-    isArrayType: boolean;
-    parameterName: string;
-    parameterType: string;
-    type: string;
-    members?: {
-        [memberName: string]: FieldMetadata;
-    };
-    fields?: {
-        [fieldName: string]: FieldMetadata;
-    };
-}
-
-export interface InputMetadata {
-    [parameterName: string]: ParameterField;
-}
-
-export interface OutputMetadata {
-    [fieldName: string]: FieldMetadata;
-}
-
 export interface MappingField {
     MAPPING_TIP: string;
     INPUT_FIELDS: string[];
@@ -83,40 +31,6 @@ export interface MappingFileRecord {
     mapping_fields: MappingFields;
 }
 
-export interface ParameterMetadata {
-    inputs: NestedFieldDescriptor;
-    output: NestedFieldDescriptor;
-    inputMetadata: InputMetadata;
-    outputMetadata: OutputMetadata;
-    mapping_fields?: MappingFields;
-    constants?: Record<string, FieldMetadata>;
-    configurables?: Record<string, FieldMetadata>;
-    variables?: Record<string, FieldMetadata>;
-    enums?: Record<string, FieldMetadata>;
-}
-
-export interface ParameterDefinitions {
-    parameterMetadata: ParameterMetadata;
-    errorStatus: boolean;
-}
-
-export interface VisitorContext {
-    recordFields: NestedFieldDescriptor;
-    recordFieldsMetadata: { [key: string]: FieldMetadata };
-    memberRecordFields: NestedFieldDescriptor;
-    memberFieldsMetadata: { [key: string]: FieldMetadata };
-    fieldMetadata: FieldMetadata;
-    isNill: boolean;
-    isNullable: boolean;
-    isArray: boolean;
-    isRecord: boolean;
-    isSimple: boolean;
-    isUnion: boolean;
-    isArrayNullable: boolean;
-    isRecordNullable: boolean;
-    memberName: string;
-}
-
 export interface MappingData {
     operation: string;
     parameters: string[];
@@ -131,18 +45,3 @@ export interface MappingsResponse {
     mappings: IntermediateMapping;
 }
 
-export interface ProcessParentKeyResult {
-    itemKey: string;
-    combinedKey: string;
-    inputArrayNullable: boolean;
-    isSet: boolean;
-    isInputDeeplyNested: boolean;
-}
-
-export interface ProcessCombinedKeyResult {
-    isinputRecordArrayNullable: boolean;
-    isinputRecordArrayOptional: boolean;
-    isinputArrayNullable: boolean;
-    isinputArrayOptional: boolean;
-    isinputNullableArray: boolean;
-}
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 e1bf8e5ba81..904c00faf7b 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,22 +16,17 @@
  * under the License.
  */
 
-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 { Attachment, AttachmentStatus, DiagnosticEntry, DataMapperModelResponse, Mapping, FileChanges, DMModel, SourceFile, repairCodeRequest} from "@wso2/ballerina-core";
+import { Position, Range, Uri, 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 { 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, IntermediateMapping, MappingData, MappingFileRecord, ParameterDefinitions, ParameterField, ParameterMetadata, ProcessCombinedKeyResult, ProcessParentKeyResult, RecordDefinitonObject } from "./types";
-import { generateAutoMappings } from "../../../src/features/ai/service/datamapper/datamapper";
+import { MappingFileRecord} from "./types";
+import { generateAutoMappings, generateRepairCode } 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$/, "");
 //TODO: Temp workaround as custom domain seem to block file uploads
@@ -39,2153 +34,45 @@ const CONTEXT_UPLOAD_URL_V1 = "https://e95488c8-8511-4882-967f-ec3ae2a0f86f-prod
 // const CONTEXT_UPLOAD_URL_V1 = BACKEND_BASE_URL + "/context-api/v1.0";
 // const ASK_API_URL_V1 = BACKEND_BASE_URL + "/ask-api/v1.0";
 
-export const REQUEST_TIMEOUT = 2000000;
-
-let abortController = new AbortController();
-
-export class AIPanelAbortController {
-    private static instance: AIPanelAbortController;
-    private abortController: AbortController;
-
-    private constructor() {
-        this.abortController = new AbortController();
-    }
-
-    public static getInstance(): AIPanelAbortController {
-        if (!AIPanelAbortController.instance) {
-            AIPanelAbortController.instance = new AIPanelAbortController();
-        }
-        return AIPanelAbortController.instance;
-    }
-
-    public get signal(): AbortSignal {
-        return this.abortController.signal;
-    }
-
-    public abort(): void {
-        this.abortController.abort();
-        // Create a new AbortController for the next operation
-        this.abortController = new AbortController();
-    }
-}
-
-export function handleStop() {
-    AIPanelAbortController.getInstance().abort();
-}
-
-// Normalize int subtypes (int:Signed32, int:Unsigned16, etc.) to base type "int"
-const normalizeIntSubtype = (type: string): string => {
-    if (type.startsWith("int:")) {
-        return "int";
-    }
-    return type;
-};
-
-const isPrimitiveType = (type: string): boolean => {
-    const normalizedType = normalizeIntSubtype(type);
-    return Object.values(PrimitiveType).includes(normalizedType as PrimitiveType);
-};
-
-const isUnionEnumIntersectionType = (type: string): boolean => {
-    return Object.values(UnionEnumIntersectionType).includes(type as UnionEnumIntersectionType);
-};
-
-const isRecordType = (type: string): boolean => {
-    return Object.values(RecordType).includes(type as RecordType);
-};
-
-const isArrayRecord = (type: string): boolean => {
-    return Object.values(ArrayRecordType).includes(type as ArrayRecordType);
-};
-
-const isArrayEnumUnion = (type: string): boolean => {
-    return Object.values(ArrayEnumUnionType).includes(type as ArrayEnumUnionType);
-};
-
-function isMappingData(
-    obj: MappingData | IntermediateMapping
-): obj is MappingData {
-    return (
-        typeof obj === "object" &&
-        obj !== null &&
-        typeof obj.operation === "string" &&
-        Array.isArray(obj.parameters) &&
-        typeof obj.targetType === "string"
-    );
-}
-
-export async function generateBallerinaCode(
-    response: IntermediateMapping,
-    parameterDefinitions: ParameterMetadata,
-    nestedKey: string = "",
-    nestedKeyArray: string[]
-): Promise<Record<string, string>> {
-    let recordFields: Record<string, string> = {};
-    if (isMappingData(response)) {
-        return await processMappingData(
-            response,
-            parameterDefinitions,
-            nestedKey,
-            nestedKeyArray
-        );
-    }
-
-    const objectKeys = Object.keys(response);
-    for (const key of objectKeys) {
-        const subRecord = response[key];
-        if (isMappingData(subRecord)) {
-            const nestedResponseRecord = await processMappingData(
-                subRecord,
-                parameterDefinitions,
-                key,
-                nestedKeyArray
-            );
-            Object.assign(recordFields, nestedResponseRecord);
-        } else {
-            nestedKeyArray.push(key);
-            const responseRecord = await generateBallerinaCode(
-                subRecord as IntermediateMapping,
-                parameterDefinitions,
-                key,
-                nestedKeyArray
-            );
-            const hasValidFields = Object.values(responseRecord).some(value => !isEmptyValue(value));
-            if (hasValidFields) {
-                const recordFieldDetails = await handleRecordArrays(
-                    key,
-                    nestedKey,
-                    responseRecord,
-                    parameterDefinitions,
-                    nestedKeyArray
-                );
-                Object.assign(recordFields, recordFieldDetails);
-            }
-            nestedKeyArray.pop();
-        }
-    }
-    return recordFields;
-}
-
-async function processMappingData(
-    mappingData: MappingData,
-    parameterDefinitions: ParameterMetadata,
-    nestedKey: string,
-    nestedKeyArray: string[]
-): Promise<Record<string, string>> {
-    const parameters = mappingData.parameters;
-    const paths = parameters[0].split(".");
-    let path: string = "";
-
-    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 {};
-    }
-
-    const recordFieldName = paths.length === 1 ? nestedKey : (nestedKey || paths[1]);
-    return { [recordFieldName]: path };
-}
-
-// Get union types from the combination of union types
-function getUnionTypes(types: string[]) {
-    const result = new Set<string>(); // Use a Set to avoid duplicates
-    const len = types.length;
-
-    // Generate combinations of at least two elements
-    for (let i = 2; i <= len; i++) {
-        generateCombinations(types, i, 0, [], result);
-    }
-
-    return Array.from(result);
-}
-
-// Generate union combination
-function generateCombinations(arr: string[], size: number, start: number, current: string[], result: Set<string>) {
-    if (current.length === size) {
-        result.add(current.slice().sort().join("|")); // Sort to ensure order consistency
-        return;
-    }
-    for (let i = start; i < arr.length; i++) {
-        generateCombinations(arr, size, i + 1, [...current, arr[i]], result);
-    }
-}
-
-// Function to check if a given type is a valid union type (order-independent)
-function isUnionType(type: string): boolean {
-    const sortedType = type.split("|").sort().join("|"); // Sort input type for consistency
-    const validUnionTypes = getUnionTypes(Object.values(PrimitiveType)); // Get valid union types
-    return validUnionTypes.includes(sortedType); // Check against Set
-}
-
-async function getMappingString(mapping: MappingData, parameterDefinitions: ParameterMetadata, nestedKey: string, nestedKeyArray: string[]): Promise<string> {
-    let operation: string = mapping.operation;
-    let targetType: string = mapping.targetType;
-    let parameters: string[] = mapping.parameters;
-
-    let path: string = "";
-    let modifiedPaths: string[] = [];
-    let inputTypeName: string = "";
-    let inputType: string = "";
-    let baseType: string = "";
-    let baseTargetType: string = "";
-    let outputType: string = "";
-    let baseOutputType: string = "";
-    let baseInputType: string = "";
-    let modifiedInput: FieldMetadata;
-    let outputObject: FieldMetadata;
-    let isInputNullableArray: boolean;
-    let isOutputNullableArray: boolean;
-
-    let paths = parameters[0].split(".");
-    let recordObjectName: string = paths[0];
-
-    // Retrieve inputType
-    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]] || parameterDefinitions.inputMetadata[recordObjectName + 'Item']?.["fields"]?.[paths[1]];
-    } else {
-        modifiedInput = parameterDefinitions.configurables[recordObjectName] ||
-                parameterDefinitions.constants[recordObjectName] ||
-                parameterDefinitions.variables[recordObjectName] || parameterDefinitions.inputMetadata[recordObjectName].fields[paths[0]];
-    }
-
-    // Resolve output metadata
-    if (nestedKeyArray.length > 0) {
-        outputObject = await getMetadata(parameterDefinitions, nestedKeyArray, nestedKey, MetadataType.OUTPUT_METADATA);
-    } else if (parameterDefinitions.outputMetadata.hasOwnProperty("fields") || !parameterDefinitions.outputMetadata[nestedKey]) {
-        throw new Error(`Invalid or missing metadata for nestedKey: ${nestedKey}.`);
-    } else {
-        outputObject = parameterDefinitions.outputMetadata[nestedKey];
-    }
-
-    baseTargetType = targetType.replace(/\|\(\)$/, "");
-
-    inputTypeName = modifiedInput.typeName;
-    baseType = inputTypeName.replace(/\|\(\)$/, "");
-
-    inputType = modifiedInput.type;
-    baseInputType = inputType.replace(/\|\(\)$/, "");
-
-    outputType = outputObject.type;
-    baseOutputType = outputType.replace(/\|\(\)$/, "");
-
-    if (operation === Operation.DIRECT) {
-        if (parameters.length > 1) {
-            return "";
-        }
-        // Helper function to check if type contains []
-        const hasArrayNotation = (type: string) => type.includes("[]");
-        if (isRecordType(baseType)) {
-            // Both baseType and baseTargetType either contain "[]" or do not
-            if (!(hasArrayNotation(baseType) === hasArrayNotation(baseTargetType)) && !(baseTargetType === "int")) {
-                return "";
-            }
-        } else if (isUnionEnumIntersectionType(baseOutputType)) {
-            // Both baseInputType and baseOutputType either contain "[]" or do not
-            if (!(hasArrayNotation(baseInputType) === hasArrayNotation(baseOutputType))) {
-                return "";
-            }
-        }
-        modifiedPaths = await accessMetadata(
-            paths,
-            parameterDefinitions,
-            outputObject,
-            baseType,
-            baseTargetType,
-            operation
-        );
-        for (let index = 0; index < modifiedPaths.length; index++) {
-            if (index > 0 && modifiedPaths[index] === modifiedPaths[index - 1]) {
-                continue;
-            }
-            if (path !== "") {
-                path = `${path}.`;
-            }
-            path = `${path}${modifiedPaths[index]}`;
-        }
-        // Add split operation if inputType is "string" and targetType is "string[]"
-        if (baseType === PrimitiveType.STRING && baseTargetType === "string[]") {
-            return `re \`,\`.split(${path})`;
-        }
-
-        // Add length operation if inputType is "record[]" and targetType is "int"
-        if (isArrayRecord(baseType) && baseTargetType === PrimitiveType.INT) {
-            return `(${path}).length()`;
-        }
-
-        // Type conversion logic
-        const stringConversions: Record<string, string> = {
-            int: "check int:fromString",
-            float: "check float:fromString",
-            decimal: "check decimal:fromString",
-            boolean: "check boolean:fromString"
-        };
-
-        const numericConversions: { [key: string]: Record<string, string> } = {
-            float: {
-                int: `check (${path}).ensureType()`,
-                decimal: `check (${path}).ensureType()`
-            },
-            int: {
-                float: `check (${path}).ensureType()`,
-                decimal: `check (${path}).ensureType()`
-            },
-            decimal: {
-                int: `check (${path}).ensureType()`,
-                float: `check (${path}).ensureType()`
-            }
-        };
-
-        function convertUnionTypes(inputType: string, targetType: string, variablePath: string): string {
-            const inputTypes = inputType.split("|").filter(isPrimitiveType);
-            const isStringInput = inputTypes.includes(PrimitiveType.STRING);
-            const isNumericOrBooleanTarget = NUMERIC_AND_BOOLEAN_TYPES.includes(targetType as PrimitiveType);
-
-            if (targetType === PrimitiveType.STRING) {
-                return `(${variablePath}).toString()`;
-            }
-
-            if (isStringInput && isNumericOrBooleanTarget) {
-                return `(${variablePath}) is string ? check ${targetType}:fromString((${variablePath}).toString()) : check (${variablePath}).ensureType()`;
-            }
-
-            if (isNumericOrBooleanTarget) {
-                return `check (${variablePath}).ensureType()`;
-            }
-
-            return variablePath;
-        }
-
-        isOutputNullableArray = outputObject.nullableArray;
-        isInputNullableArray = modifiedInput.nullableArray;
-
-        const isStringInput = ["string", "string|()"].includes(inputTypeName);
-        const isStringTarget = ["string", "string|()"].includes(targetType);
-        if (isPrimitiveType(baseTargetType) && isPrimitiveType(baseType)) {
-            // Normalize int subtypes for comparison
-            const normalizedInputTypeName = normalizeIntSubtype(inputTypeName);
-            const normalizedTargetType = normalizeIntSubtype(targetType);
-            const normalizedBaseTargetType = normalizeIntSubtype(baseTargetType);
-            const normalizedBaseType = normalizeIntSubtype(baseType);
-
-            if (normalizedInputTypeName === normalizedTargetType || normalizedInputTypeName === normalizedBaseTargetType) {
-                path = `${path}`;
-            } else if (isStringInput) {
-                const conversion = stringConversions[normalizedBaseTargetType];
-                if (conversion) {
-                    path = `${conversion}(${path})`;
-                } else if (!isStringTarget) {
-                    return "";
-                }
-            } else if (isStringTarget) {
-                path = `(${path}).toString()`;
-            } else {
-                const conversion = numericConversions[normalizedInputTypeName]?.[normalizedTargetType];
-                if (conversion && normalizedBaseTargetType !== PrimitiveType.BOOLEAN) {
-                    path = conversion;
-                } else if (normalizedBaseType === normalizedBaseTargetType) {
-                    path = `${path}`;
-                } else if ((targetType.includes("|()") && normalizedInputTypeName !== normalizedBaseTargetType) || inputTypeName.includes("|()") && normalizedBaseTargetType !== PrimitiveType.BOOLEAN) {
-                    path = `check (${path}).ensureType()`;
-                } else {
-                    return "";
-                }
-            }
-        } else if (isUnionEnumIntersectionType(inputType)) {
-            if (isUnionType(baseType)) {
-                path = convertUnionTypes(baseType, baseTargetType, path);
-            } else {
-                path = `${path}`;
-                if (isInputNullableArray && !isOutputNullableArray) {
-                    path = `check (${path}).cloneWithType()`;
-                }
-            }
-        }
-    } else if (operation === Operation.LENGTH) {
-        if (parameters.length > 1) {
-            return "";
-        }
-        modifiedPaths = await accessMetadata(
-            paths,
-            parameterDefinitions,
-            outputObject,
-            baseType,
-            baseTargetType,
-            operation
-        );
-        for (let index = 0; index < modifiedPaths.length; index++) {
-            if (path !== "") {
-                path = `${path}.`;
-            }
-            path = `${path}${modifiedPaths[index]}`;
-        }
-        path = `(${path}).length()`;
-    } else if (operation === Operation.SPLIT) {
-        if (parameters.length > 2) {
-            return "";
-        }
-        modifiedPaths = await accessMetadata(
-            paths,
-            parameterDefinitions,
-            outputObject,
-            baseType,
-            baseTargetType,
-            operation
-        );
-        for (let index = 0; index < modifiedPaths.length; index++) {
-            if (path !== "") {
-                path = `${path}.`;
-            }
-            path = `${path}${modifiedPaths[index]}`;
-        }
-        path = `re \`${parameters[1]}\`.split(${path})`;
-    }
-    return path;
-}
-
-//Define interfaces for the visitor pattern
-interface TypeInfoVisitor {
-    visitField(field: FormField, context: VisitorContext): void;
-    visitMember(member: any, context: VisitorContext): { typeName: string, member: any };
-    visitRecord(field: FormField, context: VisitorContext): void;
-    visitUnionOrIntersection(field: FormField, context: VisitorContext): void;
-    visitArray(field: FormField, context: VisitorContext): void;
-    visitEnum(field: FormField, context: VisitorContext): void;
-    visitPrimitive(field: FormField, context: VisitorContext): void;
-}
-
-//Context object to maintain state during traversal
-interface VisitorContext {
-    recordFields: { [key: string]: any };
-    recordFieldsMetadata: { [key: string]: any };
-    memberRecordFields: { [key: string]: any };
-    memberFieldsMetadata: { [key: string]: any };
-    fieldMetadata: { [key: string]: any };
-    isNill: boolean;
-    isNullable: boolean;
-    isArray: boolean;
-    isRecord: boolean;
-    isSimple: boolean;
-    isUnion: boolean;
-    isArrayNullable: boolean;
-    isRecordNullable: boolean;
-    memberName: string;
-}
-
-// Implementation of the visitor
-class TypeInfoVisitorImpl implements TypeInfoVisitor {
-    constructor() { }
-
-    visitField(field: FormField, context: VisitorContext): void {
-        // Reset state for each field
-        this.resetContext(context);
-
-        const typeName = field.typeName;
-
-        if (!typeName) {
-            this.handleTypeInfo(field, context);
-            return;
-        }
-
-        switch (typeName) {
-            case "record":
-                this.visitRecord(field, context);
-                break;
-            case "union":
-            case "intersection":
-                this.visitUnionOrIntersection(field, context);
-                break;
-            case "array":
-                this.visitArray(field, context);
-                break;
-            case "enum":
-                this.visitEnum(field, context);
-                break;
-            default:
-                this.visitPrimitive(field, context);
-                break;
-        }
-    }
-
-    visitMember(member: any, context: VisitorContext): { typeName: string, member: any } {
-        let typeName: string;
-        if (member.typeName === "record" && member.fields) {
-            typeName = this.handleRecordMember(member, context);
-        } else if (member.typeName === "array") {
-            const result = this.handleArrayMember(member, context);
-            typeName = result.typeName;
-            member = result.member;
-        } else if (["union", "intersection", "enum"].includes(member.typeName)) {
-            typeName = this.handleCompositeMember(member, context);
-        } else if (member.typeName === "()") {
-            typeName = this.handleNullMember(member, context);
-        } else {
-            typeName = this.handleSimpleMember(member, context);
-        }
-        return { typeName, member };
-    }
-
-    visitRecord(field: FormField, context: VisitorContext): void {
-        const temporaryRecord = navigateTypeInfo(field.fields, false);
-        context.isRecord = true;
-
-        const fieldName = getBalRecFieldName(field.name);
-        if (field.typeInfo && field.typeInfo.name.endsWith("?")) {
-            context.isNullable = true;
-        }
-        context.recordFields[fieldName] = temporaryRecord.recordFields;
-        context.recordFieldsMetadata[fieldName] = {
-            nullable: context.isNullable,
-            optional: field.optional,
-            type: "record",
-            typeInstance: fieldName,
-            typeName: field.typeName,
-            fields: temporaryRecord.recordFieldsMetadata
-        };
-    }
-
-    visitUnionOrIntersection(field: FormField, context: VisitorContext): void {
-        let memberTypeNames: string[] = [];
-        let resolvedTypeName: string = "";
-
-        // Check for record fields in union members and handle appropriately
-        this.processUnionMembers(field.members, context);
-
-        for (const member of field.members) {
-            const result = this.visitMember(member, context);
-            memberTypeNames.push(result.typeName);
-            if (Object.keys(result.member).length === 0) {
-                field.members = [];
-                break;
-            }
-        }
-
-        if (field.members.length === 0) {
-            context.memberRecordFields = {};
-            context.memberFieldsMetadata = {};
-            return;
-        }
-
-        resolvedTypeName = this.getResolvedTypeName(field.typeName, memberTypeNames);
-
-        this.buildFieldMetadata(field, resolvedTypeName, context);
-        this.setFieldAndMetadata(field, resolvedTypeName, context);
-    }
-
-    visitArray(field: FormField, context: VisitorContext): void {
-        if (field.memberType.hasOwnProperty("members") &&
-            ["union", "intersection", "enum"].includes(field.memberType.typeName)) {
-
-            // Handle array with union/intersection/enum member type
-            this.processUnionMembers(field.memberType.members, context);
-
-            if (field.memberType.members.length === 0) {
-                context.memberRecordFields = {};
-                context.memberFieldsMetadata = {};
-                return;
-            }
-
-            this.handleArrayWithCompositeType(field, context);
-        } else if (field.memberType.hasOwnProperty("fields") && field.memberType.typeName === "record") {
-            this.handleArrayWithRecordType(field, context);
-        } else {
-            this.handleSimpleArray(field, context);
-        }
-    }
-
-    visitEnum(field: FormField, context: VisitorContext): void {
-        let memberTypeNames: string[] = [];
-
-        for (const member of field.members) {
-            const result = this.visitMember(member, context);
-            memberTypeNames.push(result.typeName);
-        }
-
-        const resolvedTypeName = memberTypeNames.join("|");
-
-        this.buildFieldMetadata(field, resolvedTypeName, context);
-        this.setFieldAndMetadata(field, resolvedTypeName, context);
-    }
-
-    visitPrimitive(field: FormField, context: VisitorContext): void {
-        const typeName = field.typeName;
-
-        if (field.hasOwnProperty("name")) {
-            const fieldName = getBalRecFieldName(field.name);
-            context.recordFields[fieldName] = { type: typeName, comment: "" };
-            context.recordFieldsMetadata[fieldName] = {
-                typeName: typeName,
-                type: typeName,
-                typeInstance: fieldName,
-                nullable: context.isNill,
-                optional: field.optional
-            };
-        } else {
-            context.recordFields[typeName] = { type: "string", comment: "" };
-            context.recordFieldsMetadata[typeName] = {
-                typeName: typeName,
-                type: "string",
-                typeInstance: typeName,
-                nullable: context.isNill,
-                optional: field.optional
-            };
-        }
-    }
-
-    private handleTypeInfo(field: FormField, context: VisitorContext): void {
-        const fieldName = getBalRecFieldName(field.name);
-        context.recordFields[fieldName] = { type: field.typeInfo.name, comment: "" };
-        context.recordFieldsMetadata[fieldName] = {
-            typeName: field.typeInfo.name,
-            type: field.typeInfo.name,
-            typeInstance: fieldName,
-            nullable: context.isNill,
-            optional: field.optional
-        };
-    }
-
-    private handleRecordMember(member: any, context: VisitorContext): string {
-        const temporaryRecord = navigateTypeInfo(member.fields, false);
-        context.isRecord = true;
-        let memberName: string;
-
-        if (context.isUnion && member.hasOwnProperty("name")) {
-            memberName = member.name;
-            const fieldName = getBalRecFieldName(memberName);
-            context.memberRecordFields[fieldName] = (temporaryRecord as RecordDefinitonObject).recordFields;
-            context.memberFieldsMetadata[fieldName] = {
-                nullable: context.isNill,
-                optional: member.optional,
-                type: "record",
-                typeInstance: fieldName,
-                typeName: member.typeName,
-                fields: (temporaryRecord as RecordDefinitonObject).recordFieldsMetadata
-            };
-        } else {
-            memberName = "record";
-            context.memberRecordFields = {
-                ...context.memberRecordFields,
-                ...(temporaryRecord as RecordDefinitonObject).recordFields
-            };
-            context.memberFieldsMetadata = {
-                ...context.memberFieldsMetadata,
-                ...((temporaryRecord as RecordDefinitonObject).recordFieldsMetadata)
-            };
-        }
-
-        return memberName;
-    }
-
-    private handleArrayMember(member: any, context: VisitorContext): { typeName: string, member: any } {
-        context.isArray = true;
-        let memberName: string;
-
-        if (member.memberType.hasOwnProperty("fields") && member.memberType.typeName === "record") {
-            const temporaryRecord = navigateTypeInfo(member.memberType.fields, false);
-            memberName = `${member.memberType.typeName}[]`;
-            context.memberRecordFields = {
-                ...context.memberRecordFields,
-                ...(temporaryRecord as RecordDefinitonObject).recordFields
-            };
-            context.memberFieldsMetadata = {
-                ...context.memberFieldsMetadata,
-                ...((temporaryRecord as RecordDefinitonObject).recordFieldsMetadata)
-            };
-        } else if (member.memberType.hasOwnProperty("members") &&
-            ["union", "intersection", "enum"].includes(member.memberType.typeName)) {
-
-            // Process union members to handle records appropriately
-            this.processUnionMembers(member.memberType.members, context);
-
-            if (member.memberType.members.length === 0) {
-                memberName = "";
-                member = [];
-            } else {
-                memberName = this.handleArrayWithCompositeTypeMember(member, context);
-            }
-        } else if (member.memberType.hasOwnProperty("typeInfo")) {
-            if (member.memberType.hasOwnProperty("name") && !member.memberType.hasOwnProperty("typeName")) {
-                memberName = `${member.memberType.name}[]`;
-            } else {
-                memberName = "record[]";
-            }
-        } else {
-            memberName = `${member.memberType.typeName}[]`;
-        }
-
-        return { typeName: memberName, member };
-    }
-
-    private handleArrayWithCompositeTypeMember(member: any, context: VisitorContext): string {
-        let memberTypes: string[] = [];
-        const members = member.memberType.members;
-
-        this.determineIfUnion(members, context);
-
-        for (const innerMember of members) {
-            const result = this.visitMember(innerMember, context);
-            memberTypes.push(result.typeName);
-        }
-
-        context.isSimple = false;
-
-        if (member.memberType.typeName === "intersection") {
-            return `(${memberTypes.join("&")})[]`;
-        } else {
-            return `(${memberTypes.join("|")})[]`;
-        }
-    }
-
-    private handleCompositeMember(member: any, context: VisitorContext): string {
-        let memberTypeNames: string[] = [];
-
-        for (const innerMember of member.members) {
-            const result = this.visitMember(innerMember, context);
-            memberTypeNames.push(result.typeName);
-        }
-
-        if (member.typeName === "intersection") {
-            return `${memberTypeNames.join("&")}`;
-        } else {
-            return `${memberTypeNames.join("|")}`;
-        }
-    }
-
-    private handleNullMember(member: any, context: VisitorContext): string {
-        const memberName = member.typeName;
-
-        if (context.isArray) {
-            context.isArrayNullable = true;
-        }
-        if (context.isRecord) {
-            context.isRecordNullable = true;
-        }
-        if (context.isSimple) {
-            context.isNullable = true;
-        }
-
-        return memberName;
-    }
-
-    private handleSimpleMember(member: any, context: VisitorContext): string {
-        context.isSimple = true;
-        let memberName: string;
-
-        if (member.hasOwnProperty("typeName")) {
-            memberName = member.typeName;
-
-            if (member.hasOwnProperty("name") && !member.hasOwnProperty("id")) {
-                this.addNamedSimpleMember(member, memberName, context);
-            } else {
-                this.addUnnamedSimpleMember(memberName, member, context);
-            }
-        } else {
-            memberName = member.name;
-        }
-
-        return memberName;
-    }
-
-    private addNamedSimpleMember(member: any, memberName: string, context: VisitorContext): void {
-        const fieldName = getBalRecFieldName(member.name);
-        context.memberRecordFields = {
-            ...context.memberRecordFields,
-            [fieldName]: {
-                type: memberName,
-                comment: ""
-            }
-        };
-        context.memberFieldsMetadata = {
-            ...context.memberFieldsMetadata,
-            [fieldName]: {
-                typeName: memberName,
-                type: memberName,
-                typeInstance: fieldName,
-                nullable: context.isNill,
-                optional: member.optional
-            }
-        };
-    }
-
-    private addUnnamedSimpleMember(memberName: string, member: any, context: VisitorContext): void {
-        // Check if typeName is not one of the BasicTypes types
-        const BasicTypes = ["int", "string", "float", "boolean", "decimal", "readonly"];
-        if (!BasicTypes.includes(memberName)) {
-            const fieldName = getBalRecFieldName(memberName);
-            context.memberFieldsMetadata = {
-                ...context.memberFieldsMetadata,
-                [fieldName]: {
-                    typeName: fieldName,
-                    type: fieldName,
-                    typeInstance: fieldName,
-                    nullable: context.isNill,
-                    optional: member.optional
-                }
-            };
-        }
-    }
-
-    private handleArrayWithCompositeType(field: FormField, context: VisitorContext): void {
-        let memberTypeNames: string[] = [];
-
-        for (const member of field.memberType.members) {
-            const result = this.visitMember(member, context);
-            memberTypeNames.push(result.typeName);
-        }
-
-        context.isArray = true;
-        let resolvedTypeName: string = "";
-
-        if (field.memberType.typeName === "intersection") {
-            resolvedTypeName = `${memberTypeNames.join("&")}`;
-        } else {
-            resolvedTypeName = `${memberTypeNames.join("|")}`;
-        }
-
-        const fieldName = getBalRecFieldName(field.name);
-        context.recordFields[fieldName] = Object.keys(context.memberRecordFields).length > 0
-            ? context.memberRecordFields
-            : { type: `(${resolvedTypeName})[]`, comment: "" };
-
-        this.buildArrayFieldMetadata(field, resolvedTypeName, context);
-    }
-
-    private handleArrayWithRecordType(field: FormField, context: VisitorContext): void {
-        const temporaryRecord = navigateTypeInfo(field.memberType.fields, false);
-        const fieldName = getBalRecFieldName(field.name);
-        context.recordFields[fieldName] = (temporaryRecord as RecordDefinitonObject).recordFields;
-        context.isArray = true;
-        context.isRecord = true;
-
-        context.fieldMetadata = {
-            optional: field.optional,
-            typeName: "record[]",
-            type: "record[]",
-            typeInstance: fieldName,
-            fields: (temporaryRecord as RecordDefinitonObject).recordFieldsMetadata
-        };
-
-        this.applyNullabilityToFieldMetadata(context);
-        context.recordFieldsMetadata[field.name] = context.fieldMetadata;
-    }
-
-    private handleSimpleArray(field: FormField, context: VisitorContext): void {
-        let typeName: string;
-
-        if (field.memberType.hasOwnProperty("typeInfo")) {
-            typeName = "record[]";
-        } else {
-            typeName = `${field.memberType.typeName}[]`;
-        }
-
-        if (field.memberType.members && field.memberType.members.length === 0) {
-            context.memberRecordFields = {};
-            context.memberFieldsMetadata = {};
-        } else {
-            const fieldName = getBalRecFieldName(field.name);
-            context.recordFields[fieldName] = { type: typeName, comment: "" };
-            context.recordFieldsMetadata[fieldName] = {
-                typeName: typeName,
-                type: typeName,
-                typeInstance: fieldName,
-                nullable: context.isNill,
-                optional: field.optional
-            };
-        }
-    }
-
-    private processUnionMembers(members: any[], context: VisitorContext): void {
-        this.determineIfUnion(members, context);
-
-        if (members.length > 2) {
-            // If at least one member has fields, remove that field
-            for (let i = members.length - 1; i >= 0; i--) {
-                if (members[i].fields) {
-                    members.length = 0;
-                    break;
-                }
-            }
-        } else if (members.length === 2) {
-            // If one member is "()" proceed normally, else if one member has fields, remove it
-            for (let i = members.length - 1; i >= 0; i--) {
-                if (members[i].fields && context.isUnion) {
-                    members.length = 0;
-                    break;
-                }
-            }
-        }
-    }
-
-    private determineIfUnion(members: any[], context: VisitorContext): void {
-        if (members.length > 2) {
-            context.isUnion = members.some((member) => member.typeName === "()");
-        } else if (members.length === 2) {
-            context.isUnion = !members.some(member => member.typeName === "()" || member.typeName === "readonly");
-        } else {
-            context.isUnion = false;
-        }
-    }
-
-    private getResolvedTypeName(typeName: string, memberTypeNames: string[]): string {
-        if (typeName === "intersection") {
-            return `${memberTypeNames.join("&")}`;
-        } else {
-            return `${memberTypeNames.join("|")}`;
-        }
-    }
-
-    private buildFieldMetadata(field: FormField, resolvedTypeName: string, context: VisitorContext): void {
-        context.fieldMetadata = {
-            optional: field.optional,
-            typeName: resolvedTypeName,
-            type: context.isArray
-                ? (context.isArrayNullable
-                    ? `${field.typeName}[]|()` : `${field.typeName}[]`)
-                : field.typeName,
-            typeInstance: field.name,
-            ...(Object.keys(context.memberFieldsMetadata).length > 0 && { members: context.memberFieldsMetadata })
-        };
-
-        this.applyNullabilityToFieldMetadata(context);
-    }
-
-    private buildArrayFieldMetadata(field: FormField, resolvedTypeName: string, context: VisitorContext): void {
-        context.fieldMetadata = {
-            optional: field.optional,
-            typeName: `(${resolvedTypeName})[]`,
-            type: `${field.memberType.typeName}[]`,
-            typeInstance: field.name,
-            ...(Object.keys(context.memberFieldsMetadata).length > 0 && { members: context.memberFieldsMetadata })
-        };
-
-        this.applyNullabilityToFieldMetadata(context);
-        const fieldName = getBalRecFieldName(field.name);
-        context.recordFieldsMetadata[fieldName] = context.fieldMetadata;
-    }
-
-    private applyNullabilityToFieldMetadata(context: VisitorContext): void {
-        // Apply nullableArray property
-        if (context.isArray) {
-            if (context.isRecord) {
-                context.fieldMetadata.nullableArray = context.isRecordNullable;
-            } else {
-                context.fieldMetadata.nullableArray = context.isNullable;
-            }
-        }
-
-        // Apply nullable property
-        if (context.isArray) {
-            context.fieldMetadata.nullable = context.isArrayNullable;
-        } else if (context.isRecord) {
-            context.fieldMetadata.nullable = context.isRecordNullable;
-        } else if (context.isSimple) {
-            context.fieldMetadata.nullable = context.isNullable;
-        }
-    }
-
-    private setFieldAndMetadata(field: FormField, resolvedTypeName: string, context: VisitorContext): void {
-        const fieldName = getBalRecFieldName(field.name);
-        context.recordFields[fieldName] = Object.keys(context.memberRecordFields).length > 0
-            ? context.memberRecordFields
-            : { type: resolvedTypeName, comment: "" };
-        context.recordFieldsMetadata[fieldName] = context.fieldMetadata;
-    }
-
-    private resetContext(context: VisitorContext): void {
-        context.memberRecordFields = {};
-        context.memberFieldsMetadata = {};
-        context.fieldMetadata = {};
-        context.isArrayNullable = false;
-        context.isRecordNullable = false;
-        context.isNullable = false;
-        context.isArray = false;
-        context.isRecord = false;
-        context.isSimple = false;
-        context.isUnion = false;
-    }
-}
-
-export function navigateTypeInfo(
-    typeInfos: FormField[],
-    isNill: boolean
-): RecordDefinitonObject {
-    const context: VisitorContext = {
-        recordFields: {},
-        recordFieldsMetadata: {},
-        memberRecordFields: {},
-        memberFieldsMetadata: {},
-        fieldMetadata: {},
-        isNill,
-        isNullable: false,
-        isArray: false,
-        memberName: '',
-        isRecord: false,
-        isArrayNullable: false,
-        isRecordNullable: false,
-        isSimple: false,
-        isUnion: false
-    };
-
-    const visitor = new TypeInfoVisitorImpl();
-
-    for (const field of typeInfos) {
-        visitor.visitField(field, context);
-    }
-    return {
-        recordFields: context.recordFields,
-        recordFieldsMetadata: context.recordFieldsMetadata
-    };
-}
-
-export function getBalRecFieldName(fieldName: string) {
-    return keywords.includes(fieldName) ? `'${fieldName}` : fieldName;
-}
-
-async function getDatamapperCode(dataMapperResponse: DataMapperModelResponse, parameterDefinitions: ParameterMetadata): Promise<Record<string, string>> {
-    let nestedKeyArray: string[] = [];
-    try {
-        let response: DatamapperResponse = await sendDatamapperRequest(dataMapperResponse);
-        let intermediateMapping = response.mappings;
-        let finalCode = await generateBallerinaCode(intermediateMapping, parameterDefinitions, "", nestedKeyArray);
-        return finalCode;
-    } catch (error) {
-        console.error(error);
-        throw error;
-    }
-}
-
-export async function constructRecord(codeObject: object): Promise<{ recordString: string; isCheckError: boolean; }> {
-    let recordString: string = "";
-    let isCheckError: boolean = false;
-    let objectKeys = Object.keys(codeObject);
-    for (let index = 0; index < objectKeys.length; index++) {
-        let key = objectKeys[index];
-        let mapping = codeObject[key];
-        if (typeof mapping === "string") {
-            if (mapping.includes("check ")) {
-                isCheckError = true;
-            }
-            if (recordString !== "") {
-                recordString += ",\n";
-            }
-            recordString += `${key}:${mapping}`;
-        } else {
-            let subRecordResult = await constructRecord(mapping);
-            if (subRecordResult.isCheckError) {
-                isCheckError = true;
-            }
-            if (recordString !== "") {
-                recordString += ",\n";
-            }
-            recordString += `${key}:${subRecordResult.recordString}`;
-        }
-    }
-    return { recordString: `{\n${recordString}}`, isCheckError };
-}
-
-export async function getFunction(modulePart: ModulePart, functionName: string) {
-    const fns = modulePart.members.filter((mem) =>
-        STKindChecker.isFunctionDefinition(mem)
-    ) as FunctionDefinition[];
-
-    return fns.find(mem => mem.functionName.value === functionName);
-}
-
-export function notifyNoGeneratedMappings() {
-    const msg = 'No automatic mappings detected. Try manual mapping for precise connections.';
-    window.showInformationMessage(msg);
-}
-
-async function sendDatamapperRequest(dataMapperResponse: DataMapperModelResponse): Promise<DatamapperResponse> {
-    const response: DatamapperResponse = await generateAutoMappings(dataMapperResponse);
-    return response;
-}
-
-export async function searchDocumentation(message: string): Promise<string> {
-    const resp = await getAskResponse(message,);
-    const finalResponse = resp.content.replace(/<thinking>[\s\S]*?<\/thinking>/g, '');
-    const referenceSources = resp.references;
-    let responseContent: string;
-    if (referenceSources.length > 0) {
-        responseContent = `${finalResponse}  \nreference sources:  \n${referenceSources.join('  \n')}`;
-    } else {
-        responseContent = finalResponse;
-    }
-
-    return responseContent;
-}
-
-export async function filterDocumentation(resp: Response): Promise<string> {
-    let responseContent: string;
-    if (resp.status == 200 || resp.status == 201) {
-        const data = (await resp.json()) as any;
-        console.log("data", data.response);
-        const finalResponse = await (data.response.content).replace(/<thinking>[\s\S]*?<\/thinking>/g, '');
-        const referenceSources = data.response.references;
-        if (referenceSources.length > 0) {
-            responseContent = `${finalResponse}  \nreference sources:  \n${referenceSources.join('  \n')}`;
-        } else {
-            responseContent = finalResponse;
-        }
-        return responseContent;
-    }
-    throw new Error(AIChatError.UNKNOWN_CONNECTION_ERROR);
-}
-
-async function attatchmentToFileData(file: Attachment): Promise<FileData> {
-    return {
-        fileName: file.name,
-        content: file.content
-    };
-}
-
-export async function mappingFileParameterDefinitions(file: Attachment, parameterDefinitions: ParameterMetadata): Promise<ParameterMetadata> {
-    if (!file) { return parameterDefinitions; }
-    const fileData = await attatchmentToFileData(file);
-    const params: DataMapperRequest = {
-        file: fileData,
-        processType: "mapping_instruction"
-    };
-    const resp: DataMapperResponse = await processDataMapperInput(params);
-    let mappingFile: MappingFileRecord = JSON.parse(resp.fileContent) as MappingFileRecord;
-
-    return {
-        ...parameterDefinitions,
-        mapping_fields: mappingFile.mapping_fields
-    };
-}
-
-export async function mappingFileDataMapperModel(file: Attachment, dataMapperResponse: DataMapperModelResponse): Promise<DataMapperModelResponse> {
-    if (!file) { return dataMapperResponse; }
-    const fileData = await attatchmentToFileData(file);
-    const params: DataMapperRequest = {
-        file: fileData,
-        processType: "mapping_instruction"
-    };
-    const resp: DataMapperResponse = await processDataMapperInput(params);
-    let mappingFile: MappingFileRecord = JSON.parse(resp.fileContent) as MappingFileRecord;
-
-    return {
-        ...dataMapperResponse,
-        mappingsModel: {
-            ...dataMapperResponse.mappingsModel,
-            mapping_fields: mappingFile.mapping_fields
-        }
-    };
-}
-
-export async function typesFileParameterDefinitions(file: Attachment): Promise<string> {
-    if (!file) { throw new Error("File is undefined"); }
-
-    const fileData = await attatchmentToFileData(file);
-    const params: DataMapperRequest = {
-        file: fileData,
-        processType: "records"
-    };
-    const resp: DataMapperResponse = await processDataMapperInput(params);
-    return resp.fileContent;
-}
-
-export function isErrorCode(error: any): boolean {
-    return error.hasOwnProperty("code") && error.hasOwnProperty("message");
-}
-
-async function accessMetadata(
-    paths: string[],
-    parameterDefinitions: ParameterMetadata,
-    outputObject: FieldMetadata,
-    baseType: string,
-    baseTargetType: string,
-    operation: string
-): Promise<string[]> {
-    let newPath = [...paths];
-    let isUsingDefault = false;
-    let isUsingArray = false;
-    let defaultValue: string;
-
-    baseTargetType = outputObject.typeName.replace(/\|\(\)$/, "");
-
-    for (let index = 1; index < paths.length; index++) {
-        const pathIndex = paths[index];
-        let inputObject = await getMetadata(parameterDefinitions, paths, pathIndex, MetadataType.INPUT_METADATA);
-
-        if (inputObject.hasOwnProperty("members") || inputObject.hasOwnProperty("fields") || operation === Operation.LENGTH) {
-            if (!["enum", "enum|()"].includes(inputObject.type)) {
-                isUsingDefault = false;
-            }
-            if (isArrayRecord(inputObject.typeName) || isArrayEnumUnion(inputObject.type)) {
-                isUsingArray = inputObject.nullableArray;
-            }
-            if (isUsingArray && isRecordType(inputObject.typeName)) {
-                newPath[index] = `${paths[index]}?`;
-            }
-            if (inputObject.nullable || inputObject.optional) {
-                // Handle record types
-                if (isRecordType(inputObject.typeName)) {
-                    if (!inputObject.typeName.includes("[]")) {
-                        if (index !== (paths.length - 1)) {
-                            newPath[index] = `${paths[index]}?`;
-                            isUsingDefault = true;
-                        }
-                    }
-                    if (inputObject.typeName.includes("[]") && operation === Operation.LENGTH) {
-                        let lastInputObject = await getMetadata(parameterDefinitions, paths, paths[paths.length - 1], MetadataType.INPUT_METADATA);
-                        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    
-                } else if (isUnionEnumIntersectionType(inputObject.type)) {
-                    if (inputObject.nullable && inputObject.optional) {
-                        newPath[index - 1] = `${paths[index - 1]}?`;
-                    }
-                    if (inputObject.type.includes("[]") && operation === Operation.LENGTH) {
-                        let lastInputObject = await getMetadata(parameterDefinitions, paths, paths[paths.length - 1], MetadataType.INPUT_METADATA);
-                        let inputDataType = lastInputObject.type.replace(/\|\(\)$/, "");
-                        defaultValue = await getDefaultValue(inputDataType);
-                        newPath[paths.length - 1] = `${paths[paths.length - 1]}?:${defaultValue}`;
-                    } else if (!outputObject.nullable && !outputObject.optional) {
-                        if (isUnionEnumIntersectionType(inputObject.type) && inputObject.members) {
-                            if (!inputObject.nullableArray || outputObject.nullableArray) {
-                                let typeName = inputObject.type.includes("[]")
-                                    ? inputObject.type.replace(/\|\(\)$/, "")
-                                    : (inputObject as any).members[Object.keys((inputObject as any).members)[0]].typeName;
-
-                                let defaultValue = await getDefaultValue(typeName);
-                                newPath[paths.length - 1] = `${paths[paths.length - 1]}?:${defaultValue !== "void" ? defaultValue : JSON.stringify(typeName)}`;
-                            }
-                        }
-                        return newPath;
-                    }
-                }
-            } else {
-                if (isUsingDefault && isUnionEnumIntersectionType(inputObject.type) && inputObject.members) {
-                    if (!outputObject.nullable && !outputObject.optional) {
-                        let typeName = inputObject.type.includes("[]")
-                            ? inputObject.type.replace("|()", "")
-                            : (inputObject as any).members[Object.keys((inputObject as any).members)[0]].typeName;
-
-                        let defaultValue = await getDefaultValue(typeName);
-                        newPath[paths.length - 1] = `${paths[paths.length - 1]}?:${defaultValue !== "void" ? defaultValue : JSON.stringify(typeName)}`;
-                    }
-                }
-            }
-        } else {
-            if (inputObject.nullable && inputObject.optional) {
-                newPath[index - 1] = `${paths[index - 1]}?`;
-            }
-            if (!isPrimitiveType(baseType) && baseType.includes("[]")) {
-                defaultValue = (!inputObject.nullableArray || outputObject.nullableArray) ? `[]` : undefined;
-            } else {
-                const typeToUse = !isPrimitiveType(baseType)
-                    ? baseType.replace(/[\[\]()]*/g, "").split("|")[0].trim()
-                    : baseType;
-                defaultValue = await getDefaultValue(typeToUse);
-            }
-
-            if (isUsingArray) {
-                newPath[index] = `${pathIndex}?:${defaultValue}`;
-            }
-
-            if (isUsingDefault && !outputObject.nullable && !outputObject.optional) {
-                newPath[index] = `${pathIndex}?:${defaultValue}`;
-                continue;
-            }
-            if (!(inputObject.nullable || inputObject.optional)) {
-                continue;
-            }
-
-            // Handle nullable/optional input
-            const shouldUseDefault = (
-                (!outputObject.nullable && !outputObject.optional && !inputObject.nullableArray && outputObject.nullableArray) ||
-                (!outputObject.nullable && !outputObject.optional && (baseType === PrimitiveType.STRING || baseType === baseTargetType)) ||
-                (baseType !== baseTargetType && baseType === PrimitiveType.STRING)
-            );
-            newPath[index] = shouldUseDefault ? `${pathIndex}?:${defaultValue}` : `${pathIndex}`;
-            return newPath;
-        }
-    }
-    return newPath;
-}
-
-async function getDefaultValue(dataType: string): Promise<string> {
-    switch (dataType) {
-        case "string":
-            return "\"\"";
-        case "int":
-        case "int:Signed8":
-        case "int:Signed16":
-        case "int:Signed32":
-        case "int:Unsigned8":
-        case "int:Unsigned16":
-        case "int:Unsigned32":
-            return "0";
-        case "decimal":
-            return "0.0";
-        case "float":
-            return "0.0";
-        case "boolean":
-            return "false";
-        case "json":
-            return "()";
-        case "int[]":
-        case "string[]":
-        case "float[]":
-        case "decimal[]":
-        case "boolean[]":
-        case "record[]":
-        case "(readonly&record)[]":
-        case "enum[]":
-        case "union[]":
-        case "intersection[]":
-        case "json[]":
-            return "[]";
-        default:
-            // change the following to a appropriate value
-            return "void";
-    }
-}
-
-function isEmptyValue(value: string): boolean {
-    if (!value || value.trim() === '') {
-        return true;
-    }
-    
-    // Check if it's an empty string
-    if (value === '') {
-        return true;
-    }
-    
-    // Check if it's an empty object string like "{\n  \n}" or "{}"
-    const trimmedValue = value.trim();
-    if (trimmedValue === '{}' || /^\{\s*\}$/.test(trimmedValue)) {
-        return true;
-    }
-    
-    return false;
-}
-
-async function getNestedType(paths: string[], metadata: ParameterField | FieldMetadata): Promise<FieldMetadata> {
-    let currentMetadata = metadata;
-    for (const path of paths) {
-        const cleanPath = path.replace(/\?.*$/, "");
-        const nextMetadata = currentMetadata.fields?.[cleanPath] ?? currentMetadata.members?.[cleanPath];
-        if (!nextMetadata) {
-            throw new Error(`Field ${cleanPath} not found in metadata.`);
-        }
-        currentMetadata = nextMetadata;
-    }
-    return currentMetadata as FieldMetadata;
-}
-
-async function getMetadata(
-    parameterDefinitions: ParameterMetadata,
-    nestedKeyArray: string[],
-    key: string,
-    metadataType: MetadataType.INPUT_METADATA | MetadataType.OUTPUT_METADATA
-): Promise<FieldMetadata> {
-    try {
-        let currentMetadata = parameterDefinitions[metadataType];
-        for (const nestedKey of nestedKeyArray) {
-            const nested = currentMetadata[nestedKey];
-            const hasNestedStructure = nested?.fields || nested?.members;
-
-            if (hasNestedStructure) {
-                if (nestedKey === key) {
-                    return nested as FieldMetadata;
-                }
-                currentMetadata = nested.fields || nested.members;
-            } else {
-                return currentMetadata[key] as FieldMetadata;
-            }
-        }
-        return currentMetadata[key] as FieldMetadata;
-    } catch {
-        throw new Error(`Metadata not found for key: "${key}" in ${metadataType}.`);
-    }
-}
-
-async function handleRecordArrays(key: string, nestedKey: string, responseRecord: Record<string, string>, parameterDefinitions: ParameterMetadata,nestedKeyArray: string[]) {
-    let recordFields: Record<string, string> = {};
-    let subObjectKeys = Object.keys(responseRecord);
-
-    let formattedRecordsArray: string[] = [];
-    let itemKey: string = "";
-    let combinedKey: string = "";
-    let modifiedOutput: FieldMetadata;
-    let outputMetadataType: string = "";
-    let outputMetadataTypeName: string = "";
-    let isOutputDeeplyNested: boolean = false;
-
-    for (let subObjectKey of subObjectKeys) {
-        const currentValue = responseRecord[subObjectKey];
-        if (isEmptyValue(currentValue)) {
-            continue;
-        }
-        if (!nestedKey) {
-            modifiedOutput = parameterDefinitions.outputMetadata[key];
-        } else {
-            modifiedOutput = await getMetadata(parameterDefinitions, nestedKeyArray, key, MetadataType.OUTPUT_METADATA);
-        }
-        outputMetadataTypeName = modifiedOutput.typeName;
-        outputMetadataType = modifiedOutput.type;
-        isOutputDeeplyNested = (isArrayRecord(outputMetadataTypeName) || isArrayEnumUnion(outputMetadataType));
-
-        let { itemKey: currentItemKey, combinedKey: currentCombinedKey, inputArrayNullable, isSet, isInputDeeplyNested } = await extractKeys(responseRecord[subObjectKey], parameterDefinitions);
-        if (currentItemKey.includes('?')) {
-            currentItemKey = currentItemKey.replace('?', '');
-        }
-        if (modifiedOutput.hasOwnProperty("fields") || modifiedOutput.hasOwnProperty("members")) {
-            if (isOutputDeeplyNested) {
-                const subArrayRecord = responseRecord[subObjectKey];
-                const isCombinedKeyModified = currentCombinedKey.endsWith('?');
-                const replacementKey = inputArrayNullable || isCombinedKeyModified
-                    ? `${currentItemKey}Item?.`
-                    : `${isInputDeeplyNested ? currentItemKey + 'Item' : currentItemKey}.`;
-                const regex = new RegExp(
-                    currentCombinedKey.replace(/\?/g, '\\?').replace(/\./g, '\\.') + '\\.', 'g'
-                );
-
-                formattedRecordsArray.push(
-                    `${subObjectKey}: ${subArrayRecord.replace(regex, replacementKey)}`
-                );
-
-                if (isSet || (itemKey === "" && combinedKey === "")) {
-                    itemKey = currentItemKey;
-                    combinedKey = currentCombinedKey;
-                }
-            } else {
-                formattedRecordsArray.push(`${subObjectKey}: ${responseRecord[subObjectKey]}`);
-            }
-        } else {
-            recordFields = { ...recordFields, [key]: JSON.stringify(responseRecord) };
-        }
-    }
-
-    if (formattedRecordsArray.length > 0 && itemKey && combinedKey) {
-        const formattedRecords = formattedRecordsArray.join(",\n");
-        const keyToReplace = combinedKey.endsWith('?') ? combinedKey.replace(/\?$/, '') : combinedKey;
-        const processedKeys = await processCombinedKey(combinedKey, parameterDefinitions);
-        const combinedKeyExpression = (processedKeys.isinputRecordArrayNullable || processedKeys.isinputRecordArrayOptional || processedKeys.isinputArrayNullable || processedKeys.isinputArrayOptional || processedKeys.isinputNullableArray)
-            ? `${keyToReplace} ?: []`
-            : keyToReplace;
-        recordFields[key] = `from var ${itemKey}Item in ${combinedKeyExpression}\n select {\n ${formattedRecords}\n}`;
-    } else {
-        recordFields[key] = `{\n ${formattedRecordsArray.join(",\n")} \n}`;
-    }
-    return { ...recordFields };
-}
-
-async function extractKeys(
-    key: string,
-    parameterDefinitions: ParameterMetadata
-): Promise<ProcessParentKeyResult> {
-    let innerKey: string;
-    let itemKey: string = "";
-    let combinedKey: string = "";
-    let inputArrayNullable: boolean = false;
-    let isSet: boolean = false;
-    let isInputDeeplyNested = false;
-
-    // Handle the key for nullable and optional fields
-    key = key.replace(/\?*$/, "");
-
-    // Check for a nested mapping like 'from var ... in ...'
-    const nestedMappingMatch = key.match(/from\s+var\s+(\w+)\s+in\s+([\w?.]+)/);
-    if (nestedMappingMatch) {
-        itemKey = nestedMappingMatch[1];
-        innerKey = nestedMappingMatch[2];
-
-        const keys = innerKey.split(".");
-        combinedKey = keys.slice(0, keys.length - 1).join(".");
-    } else if (key.startsWith("{") && key.endsWith("}")) {
-        // Handle complex nested mappings in braces
-        const matches = key.match(/\{\s*([^}]+)\s*\}/);
-        innerKey = matches ? matches[1] : key;
-
-        // Use regex to find each deeply nested mapping within braces
-        const nestedKeys = innerKey.match(/[\w\s]+:\s*([\w?.]+)/g);
-        if (nestedKeys) {
-            const parsedKeys = nestedKeys.map(kv => kv.split(":")[1].trim());
-            innerKey = parsedKeys[0] || ""; // Assume the first entry for simplicity if multiple mappings
-        } else {
-            // Fallback for simpler cases
-            innerKey = innerKey.split(",").map(kv => kv.split(":")[1].trim())[0] || "";
-        }
-    } else {
-        // Standard case
-        innerKey = key.match(/\(([^)]+)\)/)?.[1] || key;
-
-        innerKey = innerKey
-            .replace(/^check\s*/, '')
-            .replace(/\.ensureType\(\)$/, '')
-            .replace(/\.toString\(\)$/, '');
-    }
-    // Call the helper function to process parent keys
-    const processedKeys = await processParentKey(innerKey, parameterDefinitions);
-    itemKey = processedKeys.itemKey;
-    combinedKey = processedKeys.combinedKey;
-    inputArrayNullable = processedKeys.inputArrayNullable;
-    isSet = processedKeys.isSet;
-    isInputDeeplyNested = processedKeys.isInputDeeplyNested;
-    return { itemKey, combinedKey, inputArrayNullable, isSet, isInputDeeplyNested };
-}
-
-function refineKey(key: string): string {
-    return key
-        .replace(/\?\./g, ".") // Replace `?.` with `.`
-        .replace(/\?$/g, "") // Remove a trailing `?`
-        .replace(/\s*\?:.*$/g, "") // Remove `?: <value>`
-        .replace(/[\(\)]/g, ""); // Remove parentheses
-}
-
-async function processParentKey(
-    innerKey: string,
-    parameterDefinitions: ParameterMetadata
-): Promise<ProcessParentKeyResult> {
-    let itemKey: string = "";
-    let combinedKey: string = "";
-    let isSet: boolean = false;
-    let inputArrayNullable: boolean = false;
-    let isInputDeeplyNested: boolean = false;
-
-    // Split the innerKey to get parent keys and field name
-    let keys = innerKey.split(".");
-    let fieldName = keys.pop()!;
-    let parentKey = keys.slice(0, keys.length);
-
-    const refinedInnerKey = refineKey(innerKey);
-    const refinedKeys = refinedInnerKey.split(".");
-    const refinedParentKey = refinedKeys.slice(0, keys.length);
-
-    // Handle the base case where there's only one key
-    if (refinedParentKey.length === 1) {
-        itemKey = parentKey[0];
-        combinedKey = parentKey[0];
-        return { itemKey, combinedKey, inputArrayNullable, isSet, isInputDeeplyNested };
-    }
-
-    for (let index = refinedParentKey.length - 1; index > 0; index--) {
-        const modifiedInputs = await getMetadata(parameterDefinitions, refinedParentKey, refinedParentKey[index], MetadataType.INPUT_METADATA);
-        inputArrayNullable = modifiedInputs.nullableArray;
-
-        const isArrayType = isArrayRecord(modifiedInputs.typeName) || isArrayEnumUnion(modifiedInputs.type);
-        if (isArrayType) {
-            if (!isSet) {
-                itemKey = parentKey[index];
-                combinedKey = parentKey.slice(0, index + 1).join(".");
-                isSet = true;
-            }
-            isInputDeeplyNested = true;
-        }
-    }
-    return { itemKey, combinedKey, inputArrayNullable, isSet, isInputDeeplyNested };
-}
-
-async function processCombinedKey(
-    combinedKey: string,
-    parameterDefinitions: ParameterMetadata
-): Promise<ProcessCombinedKeyResult> {
-    let isinputRecordArrayNullable: boolean = false;
-    let isinputRecordArrayOptional: boolean = false;
-    let isinputArrayNullable: boolean = false;
-    let isinputArrayOptional: boolean = false;
-    let isSet: boolean = false;
-    let isinputNullableArray: boolean = false;
-
-    let refinedCombinedKey = refineKey(combinedKey);
-    let refinedCombinedKeys = refinedCombinedKey.split(".");
-    let lastIndex = refinedCombinedKeys.length - 1;
-
-    const modifiedInputs = await getMetadata(parameterDefinitions, refinedCombinedKeys, refinedCombinedKeys[lastIndex], MetadataType.INPUT_METADATA);
-
-    if (!isSet && (isArrayRecord(modifiedInputs.typeName) || isArrayEnumUnion(modifiedInputs.type))) {
-        isSet = true;
-    }
-
-    if (isSet) {
-        // Update record array flags
-        if (modifiedInputs.nullable) { isinputRecordArrayNullable = true; }
-        if (modifiedInputs.optional) { isinputRecordArrayOptional = true; }
-
-        // Check preceding elements for non-`record[]` types
-        for (let nextIndex = lastIndex - 1; nextIndex >= 0; nextIndex--) {
-            isinputNullableArray = false;
-            const nextModifiedInputs = await getMetadata(parameterDefinitions, refinedCombinedKeys, refinedCombinedKeys[nextIndex], MetadataType.INPUT_METADATA);
-            if (!(isArrayRecord(nextModifiedInputs.typeName) || isArrayEnumUnion(nextModifiedInputs.type))) {
-                if (nextModifiedInputs.nullable) { isinputArrayNullable = true; }
-                if (nextModifiedInputs.optional) { isinputArrayOptional = true; }
-            } else {
-                if (isArrayRecord(nextModifiedInputs.typeName) || isArrayEnumUnion(nextModifiedInputs.type)) {
-                    if (nextModifiedInputs?.nullableArray && (nextIndex === (lastIndex - 1))) { isinputNullableArray = true; }
-                }
-                return { isinputRecordArrayNullable, isinputRecordArrayOptional, isinputArrayNullable, isinputArrayOptional, isinputNullableArray };
-            }
-        }
-    }
-    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,
-            enums: transformedInputs.enums
-        },
-        errorStatus: false
-    };
-}
-
-function transformInputs(inputs: IOType[]): {
-    constants: Record<string, FieldMetadata>;
-    configurables: Record<string, FieldMetadata>;
-    variables: Record<string, FieldMetadata>;
-    enums: 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 enums: Record<string, FieldMetadata> = {};
-    const parameters: ParameterField[] = [];
-    const parameterFields: { [parameterName: string]: FormField[] } = {};
-
-    const createParameterField = (input: IOType): ParameterField => {
-        let typeName = input.kind !== input.typeName ? input.typeName : (input.typeName || input.kind || "unknown");
-        const isArrayType = input.kind === TypeKind.Array;
-        let type = isArrayType ? `${input.member?.kind || typeName}[]` : input.kind;
-
-        return {
-            isArrayType,
-            parameterName: input.id,
-            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 || false
-        };
-    };
-
-    const addAsParameter = (input: IOType) => {
-        const parameterField = createParameterField(input);
-        parameters.push(parameterField);
-
-        if (input.kind === "array" && input.member) {
-            parameterFields[input.id] = input.member.fields 
-                ? input.member.fields.map(transformIOType)
-                : [transformIOType(input.member)];
-        } else if (input.fields) {
-            parameterFields[input.id] = input.fields.map(transformIOType);
-        } else {
-            parameterFields[input.id] = [transformIOType(input)];
-        }
-    };
-
-    inputs.forEach((input) => {
-        switch (input.category) {
-            case InputCategory.Constant:
-                constants[input.id] = createFieldConfig(input);
-                break;
-
-            case InputCategory.Configurable:
-                configurables[input.id] = createFieldConfig(input);
-                break;
-
-            case InputCategory.Variable:
-            case InputCategory.ModuleVariable:
-                variables[input.id] = createFieldConfig(input);
-                break;
-
-            case InputCategory.Enum:
-                const enumMembers: Record<string, FieldMetadata> = {};
-                const memberNames: string[] = [];
-
-                input.members?.forEach(member => {
-                    memberNames.push(member.name);
-                    enumMembers[member.name] = createFieldConfig(member);
-                });
-
-                enums[input.id] = {
-                    typeName: memberNames.join('|'),
-                    type: input.kind,
-                    typeInstance: input.id,
-                    nullable: false,
-                    optional: input.optional || false,
-                    members: enumMembers
-                };
-                break;
-
-            case InputCategory.Parameter:
-                addAsParameter(input);
-                break;
-
-            case InputCategory.LocalVariable:
-                if (!input.fields && !input.members) {
-                    variables[input.id] = createFieldConfig(input);
-                } else {
-                    addAsParameter(input);
-                }
-                break;
-        }
-    });
-
-    return { constants, configurables, variables, enums, 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;
-    }
+export class AIPanelAbortController {
+    private static instance: AIPanelAbortController;
+    private abortController: AbortController;
 
-    // Handle unions
-    if (input.kind === "union" && input.members) {
-        return {
-            ...baseField,
-            typeName: "union",
-            members: input.members.map(transformIOType) as FormField[]
-        } as FormField;
+    private constructor() {
+        this.abortController = new AbortController();
     }
 
-    // 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
-            };
+    public static getInstance(): AIPanelAbortController {
+        if (!AIPanelAbortController.instance) {
+            AIPanelAbortController.instance = new AIPanelAbortController();
         }
-
-        return recordField;
-    }
-
-    // Handle enums
-    if (input.kind === "enum" && input.members) {
-        return { ...baseField, typeName: "enum", members: input.members.map(transformIOType) };
-    }
-
-    // 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 AIPanelAbortController.instance;
     }
 
-    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)];
+    public get signal(): AbortSignal {
+        return this.abortController.signal;
     }
-}
-
-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);
-        });
+    public abort(): void {
+        this.abortController.abort();
+        // Create a new AbortController for the next operation
+        this.abortController = new AbortController();
     }
-
-    return mappings;
 }
 
-export async function requirementsSpecification(filepath: string): Promise<string> {
-    if (!filepath) {
-        throw new Error("File is undefined");
-    }
-    const fileData = await attatchmentToFileData({
-        name: path.basename(filepath),
-        content: getBase64FromFile(filepath), status: AttachmentStatus.UnknownError
-    });
-    const params: DataMapperRequest = {
-        file: fileData,
-        processType: "requirements",
-        isRequirementAnalysis: true
-    };
-    const resp: DataMapperResponse = await processDataMapperInput(params);
-    return resp.fileContent;
-}
+// Common functions
 
-function getBase64FromFile(filePath) {
-    const fileBuffer = fs.readFileSync(filePath);
-    return fileBuffer.toString('base64');
+// Aborts the current AI panel operation
+export function handleStop() {
+    AIPanelAbortController.getInstance().abort();
 }
 
-export function cleanDiagnosticMessages(entries: DiagnosticEntry[]): DiagnosticEntry[] {
-    return entries.map(entry => ({
-        code: entry.code || "",
-        message: entry.message,
-    }));
+// Checks if an error object has both 'code' and 'message' properties
+export function isErrorCode(error: any): boolean {
+    return error.hasOwnProperty("code") && error.hasOwnProperty("message");
 }
 
-
+// Adds file changes to the workspace and waits for artifact update notifications
 export async function addToIntegration(workspaceFolderPath: string, fileChanges: FileChanges[]) {
     const formattedWorkspaceEdit = new WorkspaceEdit();
     const nonBalFiles: FileChanges[] = [];
@@ -2252,3 +139,152 @@ export async function addToIntegration(workspaceFolderPath: string, fileChanges:
         };
     });
 }
+
+// Converts an attachment to file data format
+async function convertAttachmentToFileData(attachment: Attachment): Promise<FileData> {
+    return {
+        fileName: attachment.name,
+        content: attachment.content
+    };
+}
+
+// Datamapper related functions
+
+// Processes data mapper model and optional mapping instruction file to generate mapping expressions
+export async function generateMappingExpressionsFromModel(
+    dataMapperModel: DMModel,
+    mappingInstructionFile?: Attachment
+): Promise<Mapping[]> {
+    let dataMapperResponse: DataMapperModelResponse = {
+        mappingsModel: dataMapperModel as DMModel
+    };
+    if (mappingInstructionFile) {
+        const enhancedResponse = await enrichModelWithMappingInstructions(mappingInstructionFile, dataMapperResponse);
+        dataMapperResponse = enhancedResponse as DataMapperModelResponse;
+    }
+
+    const generatedMappings = await generateAutoMappings(dataMapperResponse);
+    return generatedMappings.map(mapping => ({
+        output: mapping.output,
+        expression: mapping.expression,
+        isFunctionCall: (mapping as any).requiresCustomFunction,
+        functionContent: mapping.functionContent
+    }));
+}
+
+// Processes a mapping instruction file and merges it with the existing data mapper model
+export async function enrichModelWithMappingInstructions(mappingInstructionFile: Attachment, currentDataMapperResponse: DataMapperModelResponse): Promise<DataMapperModelResponse> {
+    if (!mappingInstructionFile) { return currentDataMapperResponse; }
+    const fileData = await convertAttachmentToFileData(mappingInstructionFile);
+    const requestParams: DataMapperRequest = {
+        file: fileData,
+        processType: "mapping_instruction"
+    };
+    const response: DataMapperResponse = await processDataMapperInput(requestParams);
+    let parsedMappingInstructions: MappingFileRecord = JSON.parse(response.fileContent) as MappingFileRecord;
+
+    return {
+        ...currentDataMapperResponse,
+        mappingsModel: {
+            ...currentDataMapperResponse.mappingsModel,
+            mapping_fields: parsedMappingInstructions.mapping_fields
+        }
+    };
+}
+
+// Processes a repair request and returns the repaired source files using AI
+export async function repairSourceFilesWithAI(codeRepairRequest: repairCodeRequest): Promise<SourceFile[]> {
+    try {
+        const repairResponse = await generateRepairCode(codeRepairRequest);
+        return repairResponse.repairedFiles;
+    } catch (error) {
+        console.error(error);
+        throw error;
+    }
+}
+
+// Type Creator related functions
+
+// Extracts type definitions from a file attachment and generates Ballerina record definitions
+export async function extractRecordTypeDefinitionsFromFile(sourceFile: Attachment): Promise<string> {
+    if (!sourceFile) { throw new Error("File is undefined"); }
+
+    const fileData = await convertAttachmentToFileData(sourceFile);
+    const requestParams: DataMapperRequest = {
+        file: fileData,
+        processType: "records"
+    };
+    const response: DataMapperResponse = await processDataMapperInput(requestParams);
+    return response.fileContent;
+}
+
+// Natural language programming related functions
+
+// Analyzes a requirements document and returns the specification
+export async function requirementsSpecification(filepath: string): Promise<string> {
+    if (!filepath) {
+        throw new Error("File is undefined");
+    }
+    const fileData = await convertAttachmentToFileData({
+        name: path.basename(filepath),
+        content: convertFileToBase64(filepath), status: AttachmentStatus.UnknownError
+    });
+    const params: DataMapperRequest = {
+        file: fileData,
+        processType: "requirements",
+        isRequirementAnalysis: true
+    };
+    const resp: DataMapperResponse = await processDataMapperInput(params);
+    return resp.fileContent;
+}
+
+// Reads a file and converts it to base64 encoding
+function convertFileToBase64(filePath: string) {
+    const fileBuffer = fs.readFileSync(filePath);
+    return fileBuffer.toString('base64');
+}
+
+// Feedback related functions
+
+// Removes unnecessary fields from diagnostic entries
+export function cleanDiagnosticMessages(entries: DiagnosticEntry[]): DiagnosticEntry[] {
+    return entries.map(entry => ({
+        code: entry.code || "",
+        message: entry.message,
+    }));
+}
+
+// Ask related functions
+
+// Searches documentation and formats the response with reference sources
+export async function searchDocumentation(message: string): Promise<string> {
+    const resp = await getAskResponse(message,);
+    const finalResponse = resp.content.replace(/<thinking>[\s\S]*?<\/thinking>/g, '');
+    const referenceSources = resp.references;
+    let responseContent: string;
+    if (referenceSources.length > 0) {
+        responseContent = `${finalResponse}  \nreference sources:  \n${referenceSources.join('  \n')}`;
+    } else {
+        responseContent = finalResponse;
+    }
+
+    return responseContent;
+}
+
+// Filters and formats documentation response from API response
+export async function filterDocumentation(resp: Response): Promise<string> {
+    let responseContent: string;
+    if (resp.status == 200 || resp.status == 201) {
+        const data = (await resp.json()) as any;
+        console.log("data", data.response);
+        const finalResponse = await (data.response.content).replace(/<thinking>[\s\S]*?<\/thinking>/g, '');
+        const referenceSources = data.response.references;
+        if (referenceSources.length > 0) {
+            responseContent = `${finalResponse}  \nreference sources:  \n${referenceSources.join('  \n')}`;
+        } else {
+            responseContent = finalResponse;
+        }
+        return responseContent;
+    }
+    throw new Error(AIChatError.UNKNOWN_CONNECTION_ERROR);
+}
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 0bee6a351da..af588c1d2c4 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
@@ -30,18 +30,20 @@ import {
     BIGetEnclosedFunctionRequest,
     BIGetVisibleVariableTypesRequest,
     BINodeTemplateRequest,
+    BISearchNodesRequest,
     BISearchRequest,
     BISourceCodeRequest,
     BreakpointRequest,
     BuildMode,
+    buildProject,
     ClassFieldModifierRequest,
     ComponentRequest,
-    MigrateRequest,
-    buildProject,
+    ConfigVariableRequest,
     createComponent,
     createGraphqlClassType,
     createProject,
     deleteByComponentInfo,
+    DeleteConfigVariableRequestV2,
     deleteConfigVariableV2,
     deleteFlowNode,
     deleteOpenApiGeneratedModules,
@@ -49,11 +51,16 @@ import {
     DeleteTypeRequest,
     DeploymentRequest,
     deployProject,
+    EndOfFileRequest,
+    ExpressionCompletionsRequest,
+    ExpressionDiagnosticsRequest,
     formDidClose,
+    FormDidCloseParams,
     formDidOpen,
+    FormDidOpenParams,
+    FunctionNodeRequest,
     generateOpenApiClient,
     getAiSuggestions,
-    getAllImports,
     getAvailableChunkers,
     getAvailableDataLoaders,
     getAvailableEmbeddingProviders,
@@ -63,6 +70,7 @@ import {
     getAvailableVectorStores,
     getBreakpointInfo,
     getConfigVariableNodeTemplate,
+    GetConfigVariableNodeTemplateRequest,
     getConfigVariables,
     getConfigVariablesV2,
     getDesignModel,
@@ -72,6 +80,7 @@ import {
     getExpressionCompletions,
     getExpressionDiagnostics,
     getFlowModel,
+    getFormDiagnostics,
     getFunctionNames,
     getFunctionNode,
     getModuleNodes,
@@ -81,68 +90,63 @@ import {
     getProjectStructure,
     getReadmeContent,
     getRecordConfig,
+    GetRecordConfigRequest,
     getRecordModelFromSource,
+    GetRecordModelFromSourceRequest,
     getRecordNames,
     getRecordSource,
     getServiceClassModel,
     getSignatureHelp,
     getSourceCode,
     getType,
+    getTypeFromJson,
+    GetTypeRequest,
     getTypes,
+    GetTypesRequest,
     getVisibleTypes,
     getVisibleVariableTypes,
     getWorkspaces,
     handleReadmeContent,
-    openAIChat,
-    openConfigToml,
-    openReadme,
-    removeBreakpointFromSource,
-    renameIdentifier,
-    runProject,
-    search,
-    updateClassField,
-    updateConfigVariables,
-    updateConfigVariablesV2,
-    updateImports,
-    updateRecordConfig,
-    updateServiceClass,
-    updateType,
-    updateTypes,
-    DeleteConfigVariableRequestV2,
-    ConfigVariableRequest,
-    ProjectRequest,
-    EndOfFileRequest,
-    ExpressionCompletionsRequest,
-    ExpressionDiagnosticsRequest,
-    FormDidCloseParams,
-    FormDidOpenParams,
-    FunctionNodeRequest,
-    GetConfigVariableNodeTemplateRequest,
-    GetRecordConfigRequest,
-    GetRecordModelFromSourceRequest,
-    getTypeFromJson,
-    GetTypeRequest,
-    GetTypesRequest,
     JsonToTypeRequest,
     ModelFromCodeRequest,
+    openAIChat,
     OpenAPIClientDeleteRequest,
     OpenAPIClientGenerationRequest,
     OpenAPIGeneratedModulesRequest,
+    openConfigToml,
     OpenConfigTomlRequest,
+    openReadme,
+    ProjectRequest,
     ReadmeContentRequest,
     RecordSourceGenRequest,
+    removeBreakpointFromSource,
+    renameIdentifier,
     RenameIdentifierRequest,
+    runProject,
+    search,
+    searchNodes,
     ServiceClassSourceRequest,
     SignatureHelpRequest,
+    updateClassField,
     UpdateConfigVariableRequest,
     UpdateConfigVariableRequestV2,
+    updateConfigVariables,
+    updateConfigVariablesV2,
+    updateImports,
     UpdateImportsRequest,
+    updateRecordConfig,
     UpdateRecordConfigRequest,
+    updateServiceClass,
+    updateType,
     UpdateTypeRequest,
+    updateTypes,
     UpdateTypesRequest,
     verifyTypeDelete,
     VerifyTypeDeleteRequest,
-    VisibleTypesRequest
+    VisibleTypesRequest,
+    FormDiagnosticsRequest,
+    getExpressionTokens,
+    ExpressionTokensRequest
 } from "@wso2/ballerina-core";
 import { Messenger } from "vscode-messenger";
 import { BiDiagramRpcManager } from "./rpc-manager";
@@ -191,8 +195,9 @@ export function registerBiDiagramRpcHandlers(messenger: Messenger) {
     messenger.onNotification(addBreakpointToSource, (args: BreakpointRequest) => rpcManger.addBreakpointToSource(args));
     messenger.onNotification(removeBreakpointFromSource, (args: BreakpointRequest) => rpcManger.removeBreakpointFromSource(args));
     messenger.onRequest(getBreakpointInfo, () => rpcManger.getBreakpointInfo());
+    messenger.onRequest(getFormDiagnostics, (args: FormDiagnosticsRequest) => rpcManger.getFormDiagnostics(args));
     messenger.onRequest(getExpressionDiagnostics, (args: ExpressionDiagnosticsRequest) => rpcManger.getExpressionDiagnostics(args));
-    messenger.onRequest(getAllImports, () => rpcManger.getAllImports());
+    messenger.onRequest(getExpressionTokens, (args: ExpressionTokensRequest) => rpcManger.getExpressionTokens(args));
     messenger.onNotification(formDidOpen, (args: FormDidOpenParams) => rpcManger.formDidOpen(args));
     messenger.onNotification(formDidClose, (args: FormDidCloseParams) => rpcManger.formDidClose(args));
     messenger.onRequest(getDesignModel, () => rpcManger.getDesignModel());
@@ -217,6 +222,7 @@ export function registerBiDiagramRpcHandlers(messenger: Messenger) {
     messenger.onRequest(getFunctionNode, (args: FunctionNodeRequest) => rpcManger.getFunctionNode(args));
     messenger.onRequest(getEndOfFile, (args: EndOfFileRequest) => rpcManger.getEndOfFile(args));
     messenger.onRequest(search, (args: BISearchRequest) => rpcManger.search(args));
+    messenger.onRequest(searchNodes, (args: BISearchNodesRequest) => rpcManger.searchNodes(args));
     messenger.onRequest(getRecordNames, () => rpcManger.getRecordNames());
     messenger.onRequest(getFunctionNames, () => rpcManger.getFunctionNames());
     messenger.onRequest(getDevantMetadata, () => rpcManger.getDevantMetadata());
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 2766bc90a2c..a55c1a09997 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
@@ -23,6 +23,7 @@ import {
     AddFunctionRequest,
     AddImportItemResponse,
     ArtifactData,
+    AvailableNode,
     BIAiSuggestionsRequest,
     BIAiSuggestionsResponse,
     BIAvailableNodesRequest,
@@ -42,6 +43,8 @@ import {
     BIModuleNodesResponse,
     BINodeTemplateRequest,
     BINodeTemplateResponse,
+    BISearchNodesRequest,
+    BISearchNodesResponse,
     BISearchRequest,
     BISearchResponse,
     BISourceCodeRequest,
@@ -51,9 +54,11 @@ import {
     BallerinaProject,
     BreakpointRequest,
     BuildMode,
+    Category,
     ClassFieldModifierRequest,
     Command,
     ComponentRequest,
+    ConfigVariableRequest,
     ConfigVariableResponse,
     CreateComponentResponse,
     CurrentBreakpointsResponse,
@@ -85,14 +90,14 @@ import {
     GetTypeResponse,
     GetTypesRequest,
     GetTypesResponse,
-    ImportStatement,
-    ImportStatements,
+    Item,
     JsonToTypeRequest,
     JsonToTypeResponse,
     LinePosition,
     LoginMethod,
     ModelFromCodeRequest,
     NodeKind,
+    NodePosition,
     OpenAPIClientDeleteRequest,
     OpenAPIClientDeleteResponse,
     OpenAPIClientGenerationRequest,
@@ -100,7 +105,6 @@ import {
     OpenAPIGeneratedModulesResponse,
     OpenConfigTomlRequest,
     ProjectComponentsResponse,
-    ProjectImports,
     ProjectRequest,
     ProjectStructureResponse,
     ReadmeContentRequest,
@@ -111,13 +115,11 @@ import {
     RenameIdentifierRequest,
     RenameRequest,
     SCOPE,
-    STModification,
     ServiceClassModelResponse,
     ServiceClassSourceRequest,
     SignatureHelpRequest,
     SignatureHelpResponse,
     SourceEditResponse,
-    SyntaxTree,
     TemplateId,
     TextEdit,
     UpdateConfigVariableRequest,
@@ -132,17 +134,16 @@ import {
     UpdateTypesRequest,
     UpdateTypesResponse,
     UpdatedArtifactsResponse,
-    VisibleTypesRequest,
-    VisibleTypesResponse,
     VerifyTypeDeleteRequest,
     VerifyTypeDeleteResponse,
+    VisibleTypesRequest,
+    VisibleTypesResponse,
     WorkspaceFolder,
     WorkspacesResponse,
-    ConfigVariableRequest,
-    AvailableNode,
-    Item,
-    Category,
-    NodePosition,
+    FormDiagnosticsRequest,
+    FormDiagnosticsResponse,
+    ExpressionTokensRequest,
+    ExpressionTokensResponse,
 } from "@wso2/ballerina-core";
 import * as fs from "fs";
 import * as path from 'path';
@@ -171,8 +172,8 @@ 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 { checkProjectDiagnostics, removeUnusedImports } from "../ai-panel/repair-utils";
 import { getView } from "../../utils/state-machine-utils";
+import { checkProjectDiagnostics, removeUnusedImports } from "../ai-panel/repair-utils";
 export class BiDiagramRpcManager implements BIDiagramAPI {
     OpenConfigTomlRequest: (params: OpenConfigTomlRequest) => Promise<void>;
 
@@ -223,10 +224,10 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
                 .then(async (model) => {
                     console.log(">>> bi source code from ls", model);
                     if (params?.isConnector) {
-                        const artifacts = await updateSourceCode({ textEdits: model.textEdits }, null, this.getSourceDescription(params));
+                        const artifacts = await updateSourceCode({ textEdits: model.textEdits, description: this.getSourceDescription(params) });
                         resolve({ artifacts });
                     } else {
-                        const artifacts = await updateSourceCode({ textEdits: model.textEdits }, this.getArtifactDataFromNodeKind(params.flowNode.codedata.node), this.getSourceDescription(params));
+                        const artifacts = await updateSourceCode({ textEdits: model.textEdits, artifactData: this.getArtifactDataFromNodeKind(params.flowNode.codedata.node), description: this.getSourceDescription(params) });
                         resolve({ artifacts });
                     }
                 })
@@ -421,8 +422,16 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
     async getAvailableNodes(params: BIAvailableNodesRequest): Promise<BIAvailableNodesResponse> {
         console.log(">>> requesting bi available nodes from ls", params);
         return new Promise((resolve) => {
+            const fileNameOrPath = params.filePath;
+            let filePath = fileNameOrPath;
+            if (path.basename(fileNameOrPath) === fileNameOrPath) {
+                filePath = path.join(StateMachine.context().projectUri, fileNameOrPath);
+            }
             StateMachine.langClient()
-                .getAvailableNodes(params)
+                .getAvailableNodes({
+                    position: params.position,
+                    filePath
+                })
                 .then((model) => {
                     console.log(">>> bi available nodes from ls", model);
                     const filteredModel = this.filterAdvancedAiNodes(model);
@@ -494,16 +503,16 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
     }
 
     async getAvailableVectorKnowledgeBases(params: BIAvailableNodesRequest): Promise<BIAvailableNodesResponse> {
-        console.log(">>> requesting bi available vector knowledge bases from ls", params);
+        console.log(">>> requesting bi available knowledge bases from ls", params);
         return new Promise((resolve) => {
             StateMachine.langClient()
                 .getAvailableVectorKnowledgeBases(params)
                 .then((model) => {
-                    console.log(">>> bi available vector knowledge bases from ls", model);
+                    console.log(">>> bi available knowledge bases from ls", model);
                     resolve(model);
                 })
                 .catch((error) => {
-                    console.log(">>> error fetching available vector knowledge bases from ls", error);
+                    console.log(">>> error fetching available knowledge bases from ls", error);
                     return new Promise((resolve) => {
                         resolve(undefined);
                     });
@@ -767,7 +776,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
                 .deleteFlowNode(params)
                 .then(async (model) => {
                     console.log(">>> bi delete node from ls", model);
-                    const artifacts = await updateSourceCode({ textEdits: model.textEdits }, null, 'Flow Node Deletion - ' + params.flowNode.metadata.label);
+                    const artifacts = await updateSourceCode({ textEdits: model.textEdits, description: 'Flow Node Deletion - ' + params.flowNode.metadata.label });
                     resolve({ artifacts });
                 })
                 .catch((error) => {
@@ -839,7 +848,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
             }
 
             const response = await StateMachine.langClient().updateConfigVariables(req) as BISourceCodeResponse;
-            await updateSourceCode({ textEdits: response.textEdits }, { artifactType: DIRECTORY_MAP.CONFIGURABLE }, 'Config Variable Update');
+            await updateSourceCode({ textEdits: response.textEdits, artifactData: { artifactType: DIRECTORY_MAP.CONFIGURABLE }, description: 'Config Variable Update' });
             resolve(response);
         });
     }
@@ -870,7 +879,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
                 writeBallerinaFileDidOpen(params.configFilePath, "\n");
             }
             const response = await StateMachine.langClient().updateConfigVariablesV2(req) as UpdateConfigVariableResponseV2;
-            await updateSourceCode({ textEdits: response.textEdits }, { artifactType: DIRECTORY_MAP.CONFIGURABLE }, 'Config Variable Update');
+            await updateSourceCode({ textEdits: response.textEdits, artifactData: { artifactType: DIRECTORY_MAP.CONFIGURABLE }, description: 'Config Variable Update' });
             resolve(response);
         });
     }
@@ -883,7 +892,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
                 writeBallerinaFileDidOpen(params.configFilePath, "\n");
             }
             const response = await StateMachine.langClient().deleteConfigVariableV2(req) as BISourceCodeResponse;
-            await updateSourceCode({ textEdits: response.textEdits }, { artifactType: DIRECTORY_MAP.CONFIGURABLE }, 'Config Variable Deletion');
+            await updateSourceCode({ textEdits: response.textEdits, artifactData: { artifactType: DIRECTORY_MAP.CONFIGURABLE }, description: 'Config Variable Deletion' });
             resolve(response);
         });
     }
@@ -1143,7 +1152,8 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
             buildCommand = path.join(ballerinaHome, 'bin', buildCommand);
         }
 
-        const execution = new ShellExecution(buildCommand);
+        // Use the current process environment which should have the updated PATH
+        const execution = new ShellExecution(buildCommand, { env: process.env as { [key: string]: string } });
 
         const task = new Task(
             taskDefinition,
@@ -1213,7 +1223,11 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
                     .deleteByComponentInfo(params)
                     .then(async (model) => {
                         console.log(">>> bi delete node from ls by componentInfo", model);
-                        await updateSourceCode({ textEdits: model.textEdits }, null, `${this.capitalizeFirstLetter(componentView.location.artifactType)} Deletion - ${componentView.location.identifier}`);
+                        let description = 'Component Deletion';
+                        if (componentView?.location?.artifactType && componentView?.location?.identifier) {
+                            description = `${this.capitalizeFirstLetter(componentView.location.artifactType)} Deletion - ${componentView.location.identifier}`;
+                        }
+                        await updateSourceCode({ textEdits: model.textEdits, description: description, skipPayloadCheck: true }); // Skip payload check because the component is deleted
                         resolve(model);
                     })
                     .catch((error) => {
@@ -1244,6 +1258,21 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
         }
     }
 
+    async getFormDiagnostics(params: FormDiagnosticsRequest): Promise<FormDiagnosticsResponse> {
+        return new Promise((resolve, reject) => {
+            console.log(">>> requesting form diagnostics from ls", params);
+            StateMachine.langClient()
+                .getFormDiagnostics(params)
+                .then((diagnostics) => {
+                    console.log(">>> form diagnostics response from ls", diagnostics);
+                    resolve(diagnostics);
+                })
+                .catch((error) => {
+                    reject("Error fetching form diagnostics from ls");
+                });
+        });
+    }
+
     async getExpressionDiagnostics(params: ExpressionDiagnosticsRequest): Promise<ExpressionDiagnosticsResponse> {
         return new Promise((resolve, reject) => {
             console.log(">>> requesting expression diagnostics from ls", params);
@@ -1324,22 +1353,6 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
         });
     }
 
-    async getAllImports(): Promise<ProjectImports> {
-        const projectUri = StateMachine.context().projectUri;
-        const ballerinaFiles = await getBallerinaFiles(Uri.file(projectUri).fsPath);
-        const imports: ImportStatements[] = [];
-
-        for (const file of ballerinaFiles) {
-            const fileContent = fs.readFileSync(file, "utf8");
-            const fileImports = await extractImports(fileContent, file);
-            imports.push(fileImports);
-        }
-        return {
-            projectPath: projectUri,
-            imports,
-        };
-    }
-
     async getEnclosedFunction(params: BIGetEnclosedFunctionRequest): Promise<BIGetEnclosedFunctionResponse> {
         console.log(">>> requesting parent functin definition", params);
         return new Promise((resolve) => {
@@ -1460,7 +1473,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
                 .updateType({ filePath, type: params.type, description: "" })
                 .then(async (updateTypeResponse: UpdateTypeResponse) => {
                     console.log(">>> update type response", updateTypeResponse);
-                    await updateSourceCode({ textEdits: updateTypeResponse.textEdits }, null, 'Type Update');
+                    await updateSourceCode({ textEdits: updateTypeResponse.textEdits, description: 'Type Update', identifier: params.type.name });
                     resolve(updateTypeResponse);
                 }).catch((error) => {
                     console.log(">>> error fetching types from ls", error);
@@ -1564,6 +1577,19 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
         });
     }
 
+    async getExpressionTokens(params: ExpressionTokensRequest): Promise<number[]> {
+        return new Promise((resolve) => {
+            StateMachine.langClient().getExpressionTokens(params)
+                .then((response) => {
+                    resolve(response?.data || []);
+                })
+                .catch((error) => {
+                    console.log(">>> Error getting expression tokens", error);
+                    resolve(undefined);
+                });
+        });
+    }
+
     async createGraphqlClassType(params: UpdateTypeRequest): Promise<UpdateTypeResponse> {
         const projectUri = StateMachine.context().projectUri;
         const filePath = path.join(projectUri, params.filePath);
@@ -1572,7 +1598,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
                 .createGraphqlClassType({ filePath, type: params.type, description: "" })
                 .then(async (updateTypeResponse: UpdateTypeResponse) => {
                     console.log(">>> create graphql class type response", updateTypeResponse);
-                    await updateSourceCode({ textEdits: updateTypeResponse.textEdits }, null, 'Graphql Class Type Creation');
+                    await updateSourceCode({ textEdits: updateTypeResponse.textEdits, description: 'Graphql Class Type Creation' });
                     resolve(updateTypeResponse);
                 }).catch((error) => {
                     console.log(">>> error fetching class type from ls", error);
@@ -1596,7 +1622,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
         return new Promise(async (resolve) => {
             try {
                 const res: SourceEditResponse = await StateMachine.langClient().updateClassField(params);
-                await updateSourceCode({ textEdits: res.textEdits }, null, 'Class Field Update');
+                await updateSourceCode({ textEdits: res.textEdits, description: 'Class Field Update' });
                 resolve(res);
             } catch (error) {
                 console.log(error);
@@ -1608,7 +1634,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
         return new Promise(async (resolve) => {
             try {
                 const res: SourceEditResponse = await StateMachine.langClient().updateServiceClass(params);
-                const artifacts = await updateSourceCode({ textEdits: res.textEdits }, null, 'Service Class Update');
+                const artifacts = await updateSourceCode({ textEdits: res.textEdits, description: 'Service Class Update' });
                 resolve({ artifacts });
             } catch (error) {
                 console.log(error);
@@ -1620,7 +1646,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
         return new Promise(async (resolve) => {
             try {
                 const res: SourceEditResponse = await StateMachine.langClient().addClassField(params);
-                await updateSourceCode({ textEdits: res.textEdits }, null, 'Class Field Creation');
+                await updateSourceCode({ textEdits: res.textEdits, description: 'Class Field Creation' });
                 resolve(res);
             } catch (error) {
                 console.log(error);
@@ -1642,7 +1668,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
         try {
             const workspaceEdit = await StateMachine.langClient().rename(request);
             if (workspaceEdit && 'changes' in workspaceEdit && workspaceEdit.changes) {
-                await updateSourceCode({ textEdits: workspaceEdit.changes }, null, 'Rename for ' + params.newName);
+                await updateSourceCode({ textEdits: workspaceEdit.changes, description: 'Rename for ' + params.newName, isRenameOperation: true });
             }
         } catch (error) {
             console.error('Error in renameIdentifier:', error);
@@ -1787,7 +1813,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
             ).then(async (updateTypesresponse: UpdateTypesResponse) => {
                 console.log(">>> update type response", updateTypesresponse);
                 if (updateTypesresponse.textEdits) {
-                    await updateSourceCode({ textEdits: updateTypesresponse.textEdits }, null, 'Type Update');
+                    await updateSourceCode({ textEdits: updateTypesresponse.textEdits, description: 'Type Update' });
                     resolve(updateTypesresponse);
                 } else {
                     console.log(">>> error updating types", updateTypesresponse?.errorMsg);
@@ -1928,7 +1954,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
             StateMachine.langClient().deleteType({ filePath: filePath, lineRange: params.lineRange })
                 .then(async (deleteTypeResponse: DeleteTypeResponse) => {
                     if (deleteTypeResponse.textEdits) {
-                        await updateSourceCode({ textEdits: deleteTypeResponse.textEdits }, null, 'Type Deletion');
+                        await updateSourceCode({ textEdits: deleteTypeResponse.textEdits, description: 'Type Deletion' });
                         resolve(deleteTypeResponse);
                     } else {
                         reject(deleteTypeResponse.errorMsg);
@@ -1957,6 +1983,17 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
                 });
         });
     }
+
+    async searchNodes(params: BISearchNodesRequest): Promise<BISearchNodesResponse> {
+        return new Promise((resolve, reject) => {
+            StateMachine.langClient().searchNodes(params).then((res) => {
+                resolve(res);
+            }).catch((error) => {
+                console.log(">>> error searching", error);
+                reject(error);
+            });
+        });
+    }
 }
 
 export function getRepoRoot(projectRoot: string): string | undefined {
@@ -1986,22 +2023,3 @@ export async function getBallerinaFiles(dir: string): Promise<string[]> {
     }
     return files;
 }
-
-export async function extractImports(content: string, filePath: string): Promise<ImportStatements> {
-    const withoutSingleLineComments = content.replace(/\/\/.*$/gm, "");
-    const withoutComments = withoutSingleLineComments.replace(/\/\*[\s\S]*?\*\//g, "");
-
-    const importRegex = /import\s+([\w\.\/]+)(?:\s+as\s+([\w]+))?;/g;
-    const imports: ImportStatement[] = [];
-    let match;
-
-    while ((match = importRegex.exec(withoutComments)) !== null) {
-        const importStatement: ImportStatement = { moduleName: match[1] };
-        if (match[2]) {
-            importStatement.alias = match[2];
-        }
-        imports.push(importStatement);
-    }
-
-    return { filePath, statements: imports };
-}
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 82ab5d908c4..c47b09628ba 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
@@ -33,6 +33,7 @@ import {
     getTypeCompletions,
     getWorkspaceFiles,
     getWorkspaceRoot,
+    getWorkspaceType,
     goToSource,
     isNPSupported,
     openExternalUrl,
@@ -60,4 +61,5 @@ export function registerCommonRpcHandlers(messenger: Messenger) {
     messenger.onRequest(getWorkspaceRoot, () => rpcManger.getWorkspaceRoot());
     messenger.onNotification(showErrorMessage, (args: ShowErrorMessageRequest) => rpcManger.showErrorMessage(args));
     messenger.onRequest(getCurrentProjectTomlValues, () => rpcManger.getCurrentProjectTomlValues());
+    messenger.onRequest(getWorkspaceType, () => rpcManger.getWorkspaceType());
 }
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 5207d4d34a5..6c96823599b 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,21 +35,33 @@ import {
     RunExternalCommandResponse,
     ShowErrorMessageRequest,
     SyntaxTree,
-    TomlValues,
+    PackageTomlValues,
     TypeResponse,
     WorkspaceFileRequest,
     WorkspaceRootResponse,
     WorkspacesFileResponse,
+    WorkspaceTypeResponse,
 } from "@wso2/ballerina-core";
 import child_process from 'child_process';
 import { Uri, commands, env, window, workspace, MarkdownString } from "vscode";
 import { URI } from "vscode-uri";
 import { extension } from "../../BalExtensionContext";
 import { StateMachine } from "../../stateMachine";
-import { goToSource } from "../../utils";
-import { askFileOrFolderPath, askFilePath, askProjectPath, BALLERINA_INTEGRATOR_ISSUES_URL, getUpdatedSource } from "./utils";
-import { parse } from 'toml';
-import * as fs from 'fs';
+import {
+    checkIsBallerinaPackage,
+    checkIsBallerinaWorkspace,
+    getBallerinaPackages,
+    getProjectTomlValues,
+    goToSource,
+    hasMultipleBallerinaPackages
+} from "../../utils";
+import {
+    askFileOrFolderPath,
+    askFilePath,
+    askProjectPath,
+    BALLERINA_INTEGRATOR_ISSUES_URL,
+    getUpdatedSource
+} from "./utils";
 import path from "path";
 
 export class CommonRpcManager implements CommonRPCAPI {
@@ -246,32 +258,50 @@ export class CommonRpcManager implements CommonRPCAPI {
         return extension.ballerinaExtInstance.isNPSupported;
     }
 
-    async getBallerinaProjectRoot(): Promise<string | null> {
+    async getCurrentProjectTomlValues(): Promise<PackageTomlValues> {
+        return getProjectTomlValues(StateMachine.context().projectUri);
+    }
+
+    async getWorkspaceType(): Promise<WorkspaceTypeResponse> {
         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;
+        if (workspaceFolders.length > 1) {
+            let balPackagesCount = 0;
+            for (const folder of workspaceFolders) {
+                const packages = await getBallerinaPackages(folder.uri);
+                balPackagesCount += packages.length;
+            }
+
+            const isWorkspaceFile = workspace.workspaceFile?.scheme === "file";
+            if (balPackagesCount > 1) {
+                return isWorkspaceFile
+                    ? { type: "VSCODE_WORKSPACE" }
+                    : { type: "MULTIPLE_PROJECTS" };
             }
+        } else if (workspaceFolders.length === 1) {
+            const workspaceFolderPath = workspaceFolders[0].uri.fsPath;
+
+            const isBallerinaWorkspace = await checkIsBallerinaWorkspace(Uri.file(workspaceFolderPath));
+            if (isBallerinaWorkspace) {
+                return { type: "BALLERINA_WORKSPACE" };
+            }
+
+            const isBallerinaPackage = await checkIsBallerinaPackage(Uri.file(workspaceFolderPath));
+            if (isBallerinaPackage) {
+                return { type: "SINGLE_PROJECT" };
+            }
+
+            const hasMultiplePackages = await hasMultipleBallerinaPackages(Uri.file(workspaceFolderPath));
+            if (hasMultiplePackages) {
+                return { type: "MULTIPLE_PROJECTS" };
+            }
+
+            return { type: "UNKNOWN" };
         }
+
+        return { type: "UNKNOWN" };
     }
 }
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 73d9100ae37..3dc74928b47 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/utils.ts
@@ -79,7 +79,7 @@ export async function askFilePath() {
         canSelectMany: false,
         defaultUri: Uri.file(os.homedir()),
         filters: {
-            'Files': ['yaml', 'json', 'yml']
+            'Files': ['yaml', 'json', 'yml', 'graphql']
         },
         title: "Select a file",
     });
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-handler.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-handler.ts
index 98e04b388c2..ef60effd2ff 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-handler.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-handler.ts
@@ -24,7 +24,6 @@ import {
     addNewArrayElement,
     addSubMapping,
     AddSubMappingRequest,
-    AllDataMapperSourceRequest,
     clearTypeCache,
     convertToQuery,
     ConvertToQueryRequest,
@@ -37,7 +36,6 @@ import {
     deleteSubMapping,
     DeleteSubMappingRequest,
     DMModelRequest,
-    getAllDataMapperSource,
     getDataMapperCodedata,
     GetDataMapperCodedataRequest,
     getDataMapperModel,
@@ -77,7 +75,6 @@ export function registerDataMapperRpcHandlers(messenger: Messenger) {
     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: 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/data-mapper/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-manager.ts
index a374db3a2b0..a9e94e73ce9 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-manager.ts
@@ -21,7 +21,6 @@ import {
     AddArrayElementRequest,
     AddClausesRequest,
     AddSubMappingRequest,
-    AllDataMapperSourceRequest,
     ClearTypeCacheResponse,
     ConvertToQueryRequest,
     DataMapperAPI,
@@ -52,12 +51,8 @@ import {
 import { StateMachine } from "../../stateMachine";
 
 import {
-    buildSourceRequests,
-    consolidateTextEdits,
     expandDMModel,
-    processSourceRequests,
     processTypeReference,
-    setHasStopped,
     updateAndRefreshDataMapper,
     updateSource
 } from "./utils";
@@ -228,17 +223,6 @@ export class DataMapperRpcManager implements DataMapperAPI {
         });
     }
 
-    async getAllDataMapperSource(params: AllDataMapperSourceRequest): Promise<DataMapperSourceResponse> {
-        return new Promise(async (resolve) => {
-            setHasStopped(false);
-
-            const sourceRequests = buildSourceRequests(params);
-            const responses = await processSourceRequests(sourceRequests);
-            const allTextEdits = consolidateTextEdits(responses, params.mappings.length);
-            resolve ({ textEdits: allTextEdits });
-        });
-    }
-
     async getProperty(params: PropertyRequest): Promise<PropertyResponse> {
         return new Promise(async (resolve) => {
             const property = await StateMachine
@@ -317,19 +301,8 @@ export class DataMapperRpcManager implements DataMapperAPI {
 
     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);
+            const expandedModel = expandDMModel(params.model, params.rootViewId);
 
             return {
                 expandedModel,
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/utils.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/utils.ts
index 471fc7261d5..b0eb34f4b08 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/utils.ts
@@ -33,7 +33,8 @@ import {
     IOTypeField,
     IORoot,
     ExpandModelOptions,
-    ExpandedDMModel
+    ExpandedDMModel,
+    MACHINE_VIEW
 } from "@wso2/ballerina-core";
 import { updateSourceCode, UpdateSourceCodeRequest } from "../../utils";
 import { StateMachine, updateDataMapperView } from "../../stateMachine";
@@ -80,6 +81,12 @@ export async function fetchDataMapperCodeData(
     const response = await StateMachine
         .langClient()
         .getDataMapperCodedata({ filePath, codedata: modifiedCodeData, name: varName });
+    if (response.codedata && StateMachine.context().view === MACHINE_VIEW.DataMapper) {
+        // Following is a temporary hack to remove the node property from the code data
+        // TODO: Remove this once the LS API is updated (https://github.com/wso2/product-ballerina-integrator/issues/1732)
+        const { node, ...cleanCodeData } = response.codedata;
+        return cleanCodeData;
+    }
     return response.codedata;
 }
 
@@ -109,7 +116,7 @@ export async function updateSourceCodeIteratively(updateSourceCodeRequest: Updat
     const filePaths = Object.keys(textEdits);
 
     if (filePaths.length == 1) {
-        return await updateSourceCode(updateSourceCodeRequest, null, 'Data Mapper Update');
+        return await updateSourceCode({ ...updateSourceCodeRequest, description: 'Data Mapper Update' });
     }
 
     // TODO: Remove this once the designModelService/publishArtifacts API supports simultaneous file changes
@@ -132,7 +139,7 @@ export async function updateSourceCodeIteratively(updateSourceCodeRequest: Updat
 
     let updatedArtifacts: ProjectStructureArtifactResponse[];
     for (const request of requests) {
-        updatedArtifacts = await updateSourceCode(request, null, 'Data Mapper Update');
+        updatedArtifacts = await updateSourceCode({ ...request, description: 'Data Mapper Update' });
     }
 
     return updatedArtifacts;
@@ -210,7 +217,7 @@ export async function updateSubMappingSource(
     name: string
 ): Promise<CodeData> {
     try {
-        await updateSourceCode({ textEdits }, null, 'Sub Mapping Update');
+        await updateSourceCode({ textEdits: textEdits, description: 'Sub Mapping Update' });
         return await fetchSubMappingCodeData(filePath, codedata, name);
     } catch (error) {
         console.error(`Failed to update source for sub mapping "${name}" in ${filePath}:`, error);
@@ -291,6 +298,63 @@ function findVariableInFlowModel(flowModel: Flow, varName: string): CodeData | n
     return variableNode?.codedata || null;
 }
 
+export async function extractVariableDefinitionSource(
+    filePath: string,
+    codeData: CodeData,
+    varName: string
+): Promise<string | null> {
+    try {
+        const variableCodeData = await fetchDataMapperCodeData(filePath, codeData, varName);
+
+        if (!variableCodeData?.lineRange) {
+            return null;
+        }
+
+        const fs = require('fs');
+        const fileContent = fs.readFileSync(filePath, 'utf8');
+        const lines = fileContent.split('\n');
+
+        const startLine = variableCodeData.lineRange.startLine.line;
+        const endLine = variableCodeData.lineRange.endLine.line;
+
+        const variableLines = lines.slice(startLine, endLine + 1);
+
+        const formattedCode = formatExtractedCode(variableLines);
+        return formattedCode;
+    } catch (error) {
+        console.error(`Failed to extract variable definition for "${varName}":`, error);
+        return null;
+    }
+}
+
+// Formats extracted code lines by:
+function formatExtractedCode(lines: string[]): string {
+    if (lines.length === 0) {
+        return '';
+    }
+
+    const nonEmptyLines = lines.filter(line => line.trim().length > 0);
+    if (nonEmptyLines.length === 0) {
+        return '';
+    }
+
+    const minIndent = Math.min(
+        ...nonEmptyLines.map(line => {
+            const match = line.match(/^(\s*)/);
+            return match ? match[1].length : 0;
+        })
+    );
+
+    const formattedLines = lines.map(line => {
+        if (line.trim().length === 0) {
+            return '';
+        }
+        return line.substring(minIndent);
+    });
+
+    return formattedLines.join('\n').trimEnd();
+}
+
 /**
  * Applies a temporary hack to update the source code with a random string.
  * TODO: Remove this once the lang server is updated to return the new source code
@@ -354,121 +418,6 @@ export async function refreshDataMapper(
     }
 }
 
-/**
- * Builds individual source requests from the provided parameters by mapping over each mapping.
- */
-export function buildSourceRequests(params: AllDataMapperSourceRequest): DataMapperSourceRequest[] {
-    return params.mappings.map(mapping => ({
-        filePath: params.filePath,
-        codedata: params.codedata,
-        varName: params.varName,
-        targetField: params.targetField,
-        mapping: mapping
-    }));
-}
-
-/**
- * Handles operation cancellation and error logging for each request.
- */
-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().getDataMapperSource(request);
-            } catch (error) {
-                console.error("Error in getDataMapperSource:", error);
-                throw error;
-            }
-        })
-    );
-}
-
-/**
- * Consolidates text edits from multiple source responses into a single optimized collection.
- */
-export function consolidateTextEdits(
-    responses: PromiseSettledResult<DataMapperSourceResponse>[],
-    totalMappings: number
-): { [key: string]: TextEdit[] } {
-    const allTextEdits: { [key: string]: TextEdit[] } = {};
-
-    responses.forEach((result, index) => {
-        if (result.status === 'fulfilled') {
-            console.log(`>>> Completed mapping ${index + 1}/${totalMappings}`);
-            mergeTextEdits(allTextEdits, result.value.textEdits);
-        } else {
-            console.error(`>>> Failed mapping ${index + 1}:`, result.reason);
-        }
-    });
-
-    return optimizeTextEdits(allTextEdits);
-}
-
-/**
- * Merges new text edits into the existing collection, grouping by file path.
- */
-export function mergeTextEdits(
-    allTextEdits: { [key: string]: TextEdit[] },
-    newTextEdits?: { [key: string]: TextEdit[] }
-): void {
-    if (!newTextEdits) { return; }
-
-    Object.entries(newTextEdits).forEach(([key, edits]) => {
-        if (!allTextEdits[key]) {
-            allTextEdits[key] = [];
-        }
-        allTextEdits[key].push(...edits);
-    });
-}
-
-/**
- * Optimizes text edits by sorting and combining them into single edits per file.
- */
-export function optimizeTextEdits(allTextEdits: { [key: string]: TextEdit[] }): { [key: string]: TextEdit[] } {
-    const optimizedEdits: { [key: string]: TextEdit[] } = {};
-
-    Object.entries(allTextEdits).forEach(([key, edits]) => {
-        if (edits.length === 0) { return; }
-
-        const sortedEdits = sortTextEdits(edits);
-        const combinedEdit = combineTextEdits(sortedEdits);
-
-        optimizedEdits[key] = [combinedEdit];
-    });
-
-    return optimizedEdits;
-}
-
-/**
- * Sorts text edits by line number and character position to ensure proper ordering.
- */
-export function sortTextEdits(edits: TextEdit[]): TextEdit[] {
-    return edits.sort((a, b) => {
-        if (a.range.start.line !== b.range.start.line) {
-            return a.range.start.line - b.range.start.line;
-        }
-        return a.range.start.character - b.range.start.character;
-    });
-}
-
-/**
- * Combines multiple text edits into a single edit with comma-separated content.
- */
-export function combineTextEdits(edits: TextEdit[]): TextEdit {
-    const formattedTexts = edits.map((edit, index) => {
-        const text = edit.newText.trim();
-        return index < edits.length - 1 ? `${text},` : text;
-    });
-
-    return {
-        range: edits[0].range,
-        newText: formattedTexts.join('\n').trimStart()
-    };
-}
-
 /**
  * Determines whether a variable declaration range is completely contained within an artifact's position range.
  */
@@ -591,7 +540,7 @@ function processTypeKind(
 /**
  * Processes an IORoot (input or output) into an IOType
  */
-function processIORoot(root: IORoot, model: DMModel): IOType {
+export function processIORoot(root: IORoot, model: DMModel): IOType {
     const ioType = createBaseIOType(root);
 
     const typeSpecificProps = processTypeKind(root, root.name, model, new Set<string>());
@@ -795,3 +744,4 @@ function processEnum(
         ...(member.optional !== undefined && { optional: member.optional })
     }));
 }
+
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/icp-service/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/icp-service/rpc-manager.ts
index 20a886773ef..acdbb2f75c2 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/icp-service/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/icp-service/rpc-manager.ts
@@ -39,7 +39,7 @@ export class ICPServiceRpcManager implements ICPServiceAPI {
                 const projectPath: string = context.projectUri;
                 const param = { projectPath };
                 const res: TestSourceEditResponse = await context.langClient.addICP(param);
-                await updateSourceCode({ textEdits: res.textEdits }, null, 'ICP Creation');
+                await updateSourceCode({ textEdits: res.textEdits, description: 'ICP Creation' });
                 const result: ICPEnabledResponse = await context.langClient.isIcpEnabled(param);
                 resolve(result);
             } catch (error) {
@@ -55,7 +55,7 @@ export class ICPServiceRpcManager implements ICPServiceAPI {
                 const projectPath: string = context.projectUri;
                 const param = { projectPath };
                 const res: TestSourceEditResponse = await context.langClient.disableICP(param);
-                await updateSourceCode({ textEdits: res.textEdits }, null, 'ICP Disable');
+                await updateSourceCode({ textEdits: res.textEdits, description: 'ICP Disable' });
                 const result: ICPEnabledResponse = await context.langClient.isIcpEnabled(param);
                 resolve(result);
             } catch (error) {
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/service-designer/rpc-handler.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/service-designer/rpc-handler.ts
index 2dabb631e0f..291c9261086 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/service-designer/rpc-handler.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/service-designer/rpc-handler.ts
@@ -22,11 +22,13 @@ import {
     addListenerSourceCode,
     addResourceSourceCode,
     addServiceSourceCode,
+    createServiceAndListener,
     exportOASFile,
     ExportOASRequest,
     FunctionFromSourceRequest,
     FunctionModelRequest,
     FunctionSourceCodeRequest,
+    generateExamplePayloadJson,
     getFunctionFromSource,
     getFunctionModel,
     getHttpResourceModel,
@@ -34,6 +36,7 @@ import {
     getListenerModelFromCode,
     getListeners,
     getResourceReturnTypes,
+    getServiceInitModel,
     getServiceModel,
     getServiceModelFromCode,
     getTriggerModels,
@@ -42,7 +45,9 @@ import {
     ListenerModelRequest,
     ListenerSourceCodeRequest,
     ListenersRequest,
+    PayloadContext,
     ResourceReturnTypesRequest,
+    ServiceInitSourceRequest,
     ServiceModelFromCodeRequest,
     ServiceModelRequest,
     ServiceSourceCodeRequest,
@@ -74,4 +79,7 @@ export function registerServiceDesignerRpcHandlers(messenger: Messenger) {
     messenger.onRequest(addResourceSourceCode, (args: FunctionSourceCodeRequest) => rpcManger.addResourceSourceCode(args));
     messenger.onRequest(addFunctionSourceCode, (args: FunctionSourceCodeRequest) => rpcManger.addFunctionSourceCode(args));
     messenger.onRequest(updateResourceSourceCode, (args: FunctionSourceCodeRequest) => rpcManger.updateResourceSourceCode(args));
+    messenger.onRequest(getServiceInitModel, (args: ServiceModelRequest) => rpcManger.getServiceInitModel(args));
+    messenger.onRequest(createServiceAndListener, (args: ServiceInitSourceRequest) => rpcManger.createServiceAndListener(args));
+    messenger.onRequest(generateExamplePayloadJson, (args: PayloadContext) => rpcManger.generateExamplePayloadJson(args));
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/service-designer/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/service-designer/rpc-manager.ts
index c180b7d875a..aa6192916e8 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/service-designer/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/service-designer/rpc-manager.ts
@@ -37,18 +37,22 @@ import {
     ListenersRequest,
     ListenersResponse,
     OpenAPISpec,
+    PayloadContext,
     ResourceReturnTypesRequest,
-    ResourceReturnTypesResponse,
     ResourceSourceCodeResponse,
     ServiceDesignerAPI,
+    ServiceInitSourceRequest,
     ServiceModelFromCodeRequest,
     ServiceModelFromCodeResponse,
+    ServiceModelInitResponse,
     ServiceModelRequest,
     ServiceModelResponse,
     ServiceSourceCodeRequest,
+    SourceEditResponse,
     TriggerModelsRequest,
     TriggerModelsResponse,
-    UpdatedArtifactsResponse
+    UpdatedArtifactsResponse,
+    VisibleTypesResponse
 } from "@wso2/ballerina-core";
 import * as fs from 'fs';
 import * as yaml from 'js-yaml';
@@ -57,6 +61,7 @@ import { window, workspace } from "vscode";
 import { extension } from "../../BalExtensionContext";
 import { StateMachine } from "../../stateMachine";
 import { updateSourceCode } from "../../utils/source-utils";
+import { generateExamplePayload } from "../../features/ai/service/editor/payload-json/payload_json";
 
 export class ServiceDesignerRpcManager implements ServiceDesignerAPI {
 
@@ -129,7 +134,7 @@ export class ServiceDesignerRpcManager implements ServiceDesignerAPI {
                 this.ensureFileExists(targetFile);
                 params.filePath = targetFile;
                 const res: ListenerSourceCodeResponse = await context.langClient.addListenerSourceCode(params);
-                const artifacts = await updateSourceCode({ textEdits: res.textEdits, resolveMissingDependencies: true }, { artifactType: DIRECTORY_MAP.LISTENER }, params.listener.name + ' Creation');
+                const artifacts = await updateSourceCode({ textEdits: res.textEdits, resolveMissingDependencies: true, artifactData: { artifactType: DIRECTORY_MAP.LISTENER }, description: params.listener.name + ' Creation' });
                 const result: UpdatedArtifactsResponse = {
                     artifacts: artifacts
                 };
@@ -166,7 +171,7 @@ export class ServiceDesignerRpcManager implements ServiceDesignerAPI {
                 this.ensureFileExists(targetFile);
                 params.filePath = targetFile;
                 const res: ListenerSourceCodeResponse = await context.langClient.updateListenerSourceCode(params);
-                const artifacts = await updateSourceCode(res, { artifactType: DIRECTORY_MAP.LISTENER }, params.listener.name + ' Update');
+                const artifacts = await updateSourceCode({ textEdits: res.textEdits, artifactData: { artifactType: DIRECTORY_MAP.LISTENER }, description: params.listener.name + ' Update' });
                 const result: UpdatedArtifactsResponse = {
                     artifacts: artifacts
                 };
@@ -221,7 +226,7 @@ export class ServiceDesignerRpcManager implements ServiceDesignerAPI {
                     }
                 }
                 const res: ListenerSourceCodeResponse = await context.langClient.addServiceSourceCode(params);
-                const artifacts = await updateSourceCode(res, { artifactType: DIRECTORY_MAP.SERVICE }, params.service.name + ' Creation');
+                const artifacts = await updateSourceCode({ textEdits: res.textEdits, artifactData: { artifactType: DIRECTORY_MAP.SERVICE }, description: params.service.name + ' Creation' });
                 let result: UpdatedArtifactsResponse = {
                     artifacts: artifacts
                 };
@@ -248,7 +253,7 @@ export class ServiceDesignerRpcManager implements ServiceDesignerAPI {
                     }
                 }
                 const res: ListenerSourceCodeResponse = await context.langClient.updateServiceSourceCode(params);
-                const artifacts = await updateSourceCode(res, { artifactType: DIRECTORY_MAP.SERVICE }, params.service.name + ' Update');
+                const artifacts = await updateSourceCode({ textEdits: res.textEdits, artifactData: { artifactType: DIRECTORY_MAP.SERVICE }, description: params.service.name + ' Update' });
                 const result: UpdatedArtifactsResponse = {
                     artifacts: artifacts
                 };
@@ -300,7 +305,7 @@ export class ServiceDesignerRpcManager implements ServiceDesignerAPI {
                     params.filePath = targetFile;
                 }
                 const res: ResourceSourceCodeResponse = await context.langClient.addResourceSourceCode(params);
-                const artifacts = await updateSourceCode(res, { artifactType: DIRECTORY_MAP.SERVICE }, 'Resource Creation');
+                const artifacts = await updateSourceCode({ textEdits: res.textEdits, artifactData: { artifactType: DIRECTORY_MAP.SERVICE }, description: 'Resource Creation' });
                 const result: UpdatedArtifactsResponse = {
                     artifacts: artifacts
                 };
@@ -316,7 +321,7 @@ export class ServiceDesignerRpcManager implements ServiceDesignerAPI {
             const context = StateMachine.context();
             try {
                 const res: ResourceSourceCodeResponse = await context.langClient.updateResourceSourceCode(params);
-                const artifacts = await updateSourceCode(res, null, 'Resource Update');
+                const artifacts = await updateSourceCode({ textEdits: res.textEdits, artifactData: params.artifactType ? { artifactType: params.artifactType } : null, description: 'Resource Update' });
                 const result: UpdatedArtifactsResponse = {
                     artifacts: artifacts
                 };
@@ -344,7 +349,7 @@ export class ServiceDesignerRpcManager implements ServiceDesignerAPI {
             const context = StateMachine.context();
             try {
                 const res: ResourceSourceCodeResponse = await context.langClient.addFunctionSourceCode(params);
-                const artifacts = await updateSourceCode(res, null, 'Function Creation');
+                const artifacts = await updateSourceCode({ textEdits: res.textEdits, artifactData: params.artifactType ? { artifactType: params.artifactType } : { artifactType: DIRECTORY_MAP.FUNCTION }, description: 'Function Creation' });
                 const result: UpdatedArtifactsResponse = {
                     artifacts: artifacts
                 };
@@ -388,13 +393,12 @@ export class ServiceDesignerRpcManager implements ServiceDesignerAPI {
         }
     }
 
-    async getResourceReturnTypes(params: ResourceReturnTypesRequest): Promise<ResourceReturnTypesResponse> {
+    async getResourceReturnTypes(params: ResourceReturnTypesRequest): Promise<VisibleTypesResponse> {
         return new Promise(async (resolve) => {
             const context = StateMachine.context();
-            params.filePath = StateMachine.context().projectUri;
-            params.context = "HTTP_STATUS_CODE";
+            params.filePath = params.filePath || context.projectUri;
             try {
-                const res: ResourceReturnTypesResponse = await context.langClient.getResourceReturnTypes(params);
+                const res: VisibleTypesResponse = await context.langClient.getResourceReturnTypes(params);
                 resolve(res);
             } catch (error) {
                 console.log(">>> error fetching resource return types", error);
@@ -413,4 +417,67 @@ export class ServiceDesignerRpcManager implements ServiceDesignerAPI {
             }
         });
     }
+
+    async getServiceInitModel(params: ServiceModelRequest): Promise<ServiceModelInitResponse> {
+        return new Promise(async (resolve) => {
+            const context = StateMachine.context();
+            try {
+                const projectDir = path.join(StateMachine.context().projectUri);
+                const targetFile = path.join(projectDir, `main.bal`);
+                this.ensureFileExists(targetFile);
+                params.filePath = targetFile;
+                const res: ServiceModelInitResponse = await context.langClient.getServiceInitModel(params);
+                resolve(res);
+            } catch (error) {
+                console.log(error);
+            }
+        });
+    }
+
+    async createServiceAndListener(params: ServiceInitSourceRequest): Promise<UpdatedArtifactsResponse> {
+        return new Promise(async (resolve) => {
+            const context = StateMachine.context();
+            try {
+                const projectDir = path.join(StateMachine.context().projectUri);
+                const targetFile = path.join(projectDir, `main.bal`);
+                this.ensureFileExists(targetFile);
+                params.filePath = targetFile;
+                const identifiers = [];
+                for (let property in params.serviceInitModel.properties) {
+                    const value = params.serviceInitModel.properties[property].value
+                        || params.serviceInitModel.properties[property].values?.at(0);
+                    if (value) {
+                        identifiers.push(value);
+                    }
+                    if (params.serviceInitModel.properties[property].choices) {
+                        params.serviceInitModel.properties[property].choices.forEach(choice => {
+                            if (choice.properties) {
+                                Object.keys(choice.properties).forEach(subProperty => {
+                                    const subPropertyValue = choice.properties[subProperty].value;
+                                    if (subPropertyValue) {
+                                        identifiers.push(subPropertyValue);
+                                    }
+                                });
+                            }
+                        });
+                    }
+                }
+                const res: SourceEditResponse = await context.langClient.createServiceAndListener(params);
+
+                const edits = { textEdits: res.textEdits, resolveMissingDependencies: false };
+
+                const artifacts = await updateSourceCode({ ...edits, artifactData: { artifactType: DIRECTORY_MAP.SERVICE }, description: 'Service and Listener Creation' });
+                let result: UpdatedArtifactsResponse = {
+                    artifacts: artifacts
+                };
+                resolve(result);
+            } catch (error) {
+                console.log(error);
+            }
+        });
+    }
+
+    async generateExamplePayloadJson(params: PayloadContext): Promise<object> {
+        return await generateExamplePayload(params);
+    }
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/test-manager/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/test-manager/rpc-manager.ts
index ec0030b8398..40bf18f8eb5 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/test-manager/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/test-manager/rpc-manager.ts
@@ -44,7 +44,7 @@ export class TestServiceManagerRpcManager implements TestManagerServiceAPI {
                     startColumn: params.function.codedata.lineRange.startLine.offset
                 };
                 const res: TestSourceEditResponse = await context.langClient.updateTestFunction(params);
-                const artifacts = await updateSourceCode({ textEdits: res.textEdits }, null, 'Test Function Update');
+                const artifacts = await updateSourceCode({ textEdits: res.textEdits, description: 'Test Function Update' });
                 const result: SourceUpdateResponse = {
                     artifacts: artifacts
                 };
@@ -63,7 +63,7 @@ export class TestServiceManagerRpcManager implements TestManagerServiceAPI {
                 const targetFile = params.filePath;
                 params.filePath = targetFile;
                 const res: TestSourceEditResponse = await context.langClient.addTestFunction(params);
-                const artifacts = await updateSourceCode({ textEdits: res.textEdits }, null, 'Test Function Creation');
+                const artifacts = await updateSourceCode({ textEdits: res.textEdits, description: 'Test Function Creation' });
                 const result: SourceUpdateResponse = {
                     artifacts: artifacts
                 };
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/visualizer/rpc-handler.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/visualizer/rpc-handler.ts
index 72023e8f11a..20a990373b8 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/visualizer/rpc-handler.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/visualizer/rpc-handler.ts
@@ -32,7 +32,9 @@ import {
     OpenViewRequest,
     redo,
     undo,
-    undoRedoState
+    undoRedoState,
+    updateCurrentArtifactLocation,
+    UpdatedArtifactsResponse
 } from "@wso2/ballerina-core";
 import { Messenger } from "vscode-messenger";
 import { VisualizerRpcManager } from "./rpc-manager";
@@ -51,4 +53,5 @@ export function registerVisualizerRpcHandlers(messenger: Messenger) {
     messenger.onRequest(undoRedoState, () => rpcManger.undoRedoState());
     messenger.onRequest(joinProjectPath, (args: string | string[]) => rpcManger.joinProjectPath(args));
     messenger.onRequest(getThemeKind, () => rpcManger.getThemeKind());
+    messenger.onRequest(updateCurrentArtifactLocation, (args: UpdatedArtifactsResponse) => rpcManger.updateCurrentArtifactLocation(args));
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/visualizer/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/visualizer/rpc-manager.ts
index 2d67a76554c..f4da55ae255 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/visualizer/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/visualizer/rpc-manager.ts
@@ -23,21 +23,20 @@ import {
     MACHINE_VIEW,
     OpenViewRequest,
     PopupVisualizerLocation,
+    ProjectStructureArtifactResponse,
     SHARED_COMMANDS,
     UndoRedoStateResponse,
-    UpdateUndoRedoMangerRequest,
+    UpdatedArtifactsResponse,
     VisualizerAPI,
-    VisualizerLocation,
-    vscode,
+    VisualizerLocation
 } from "@wso2/ballerina-core";
+import fs from "fs";
 import { commands, Range, Uri, window, workspace, WorkspaceEdit } from "vscode";
 import { URI, Utils } from "vscode-uri";
-import fs from "fs";
+import { notifyCurrentWebview } from "../../RPCLayer";
 import { history, openView, StateMachine, undoRedoManager, updateView } from "../../stateMachine";
 import { openPopupView } from "../../stateMachinePopup";
 import { ArtifactNotificationHandler, ArtifactsUpdated } from "../../utils/project-artifacts-handler";
-import { notifyCurrentWebview } from "../../RPCLayer";
-import { updateCurrentArtifactLocation } from "../../utils/state-machine-utils";
 import { refreshDataMapper } from "../data-mapper/utils";
 
 export class VisualizerRpcManager implements VisualizerAPI {
@@ -109,9 +108,13 @@ export class VisualizerRpcManager implements VisualizerAPI {
             // Subscribe to artifact updated notifications
             let unsubscribe = notificationHandler.subscribe(ArtifactsUpdated.method, undefined, async (payload) => {
                 console.log("Received notification:", payload);
-                updateCurrentArtifactLocation({ artifacts: payload.data });
+                const currentArtifact = await this.updateCurrentArtifactLocation({ artifacts: payload.data });
                 clearTimeout(timeoutId);
                 StateMachine.setReadyMode();
+                if (!currentArtifact) {
+                    openView(EVENT_TYPE.OPEN_VIEW, { view: MACHINE_VIEW.Overview });
+                    resolve("Undo successful"); // resolve the undo string
+                }
                 notifyCurrentWebview();
                 await this.refreshDataMapperView();
                 unsubscribe();
@@ -154,7 +157,7 @@ export class VisualizerRpcManager implements VisualizerAPI {
             // Subscribe to artifact updated notifications
             let unsubscribe = notificationHandler.subscribe(ArtifactsUpdated.method, undefined, async (payload) => {
                 console.log("Received notification:", payload);
-                updateCurrentArtifactLocation({ artifacts: payload.data });
+                await this.updateCurrentArtifactLocation({ artifacts: payload.data });
                 clearTimeout(timeoutId);
                 StateMachine.setReadyMode();
                 notifyCurrentWebview();
@@ -205,4 +208,57 @@ export class VisualizerRpcManager implements VisualizerAPI {
     async undoRedoState(): Promise<UndoRedoStateResponse> {
         return undoRedoManager.getUIState();
     }
+
+    async updateCurrentArtifactLocation(params: UpdatedArtifactsResponse): Promise<ProjectStructureArtifactResponse> {
+        return new Promise((resolve) => {
+            if (params.artifacts.length === 0) {
+                resolve(undefined);
+                return;
+            }
+            console.log(">>> Updating current artifact location", { artifacts: params.artifacts });
+            // Get the updated component and update the location
+            const currentIdentifier = StateMachine.context().identifier;
+            const currentType = StateMachine.context().type;
+            const parentIdentifier = StateMachine.context().parentIdentifier;
+
+            // Find the correct artifact by currentIdentifier (id)
+            let currentArtifact = undefined;
+            for (const artifact of params.artifacts) {
+                if (currentType && currentType.codedata.node === "CLASS" && currentType.name === artifact.name) {
+                    currentArtifact = artifact;
+                    if (artifact.resources && artifact.resources.length > 0) {
+                        const resource = artifact.resources.find(
+                            (resource) => resource.id === currentIdentifier || resource.name === currentIdentifier
+                        );
+                        if (resource) {
+                            currentArtifact = resource;
+                            break;
+                        }
+                    }
+
+                } else if (artifact.id === currentIdentifier || artifact.name === currentIdentifier) {
+                    currentArtifact = artifact;
+                }
+
+                // Check if parent artifact is matched and has resources and find within those
+                if (parentIdentifier && artifact.name === parentIdentifier && artifact.resources && artifact.resources.length > 0) {
+                    const resource = artifact.resources.find(
+                        (resource) => resource.id === currentIdentifier || resource.name === currentIdentifier
+                    );
+                    if (resource) {
+                        currentArtifact = resource;
+                    }
+                }
+            }
+
+            if (currentArtifact) {
+                openView(EVENT_TYPE.UPDATE_PROJECT_LOCATION, {
+                    documentUri: currentArtifact.path,
+                    position: currentArtifact.position,
+                    identifier: currentIdentifier,
+                });
+            }
+            resolve(currentArtifact);
+        });
+    }
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/stateMachine.ts b/workspaces/ballerina/ballerina-extension/src/stateMachine.ts
index dbc86d127c5..0e647e6a217 100644
--- a/workspaces/ballerina/ballerina-extension/src/stateMachine.ts
+++ b/workspaces/ballerina/ballerina-extension/src/stateMachine.ts
@@ -2,19 +2,17 @@
 import { ExtendedLangClient } from './core';
 import { createMachine, assign, interpret } from 'xstate';
 import { activateBallerina } from './extension';
-import { EVENT_TYPE, SyntaxTree, History, HistoryEntry, MachineStateValue, STByRangeRequest, SyntaxTreeResponse, IUndoRedoManager, VisualizerLocation, webviewReady, MACHINE_VIEW, DIRECTORY_MAP, SCOPE, ProjectStructureResponse, ArtifactData, ProjectStructureArtifactResponse, CodeData, getVisualizerLocation, ProjectDiagnosticsResponse } from "@wso2/ballerina-core";
+import { EVENT_TYPE, SyntaxTree, History, MachineStateValue, IUndoRedoManager, VisualizerLocation, webviewReady, MACHINE_VIEW, DIRECTORY_MAP, SCOPE, ProjectStructureResponse, ProjectStructureArtifactResponse, CodeData, ProjectDiagnosticsResponse, Type } from "@wso2/ballerina-core";
 import { fetchAndCacheLibraryData } from './features/library-browser';
 import { VisualizerWebview } from './views/visualizer/webview';
 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';
-import * as fs from 'fs';
 import { extension } from './BalExtensionContext';
-import { BiDiagramRpcManager } from './rpc-managers/bi-diagram/rpc-manager';
 import { AIStateMachine } from './views/ai-panel/aiMachine';
 import { StateMachinePopup } from './stateMachinePopup';
-import { checkIsBallerina, checkIsBI, fetchScope, getOrgPackageName, UndoRedoManager } from './utils';
+import { checkIsBallerinaPackage, checkIsBI, fetchScope, getOrgPackageName, UndoRedoManager, getProjectTomlValues } from './utils';
 import { buildProjectArtifactsStructure } from './utils/project-artifacts';
 
 interface MachineContext extends VisualizerLocation {
@@ -26,6 +24,7 @@ interface MachineContext extends VisualizerLocation {
 
 export let history: History;
 export let undoRedoManager: IUndoRedoManager;
+let pendingProjectRootUpdateResolvers: Array<() => void> = [];
 
 const stateMachine = createMachine<MachineContext>(
     {
@@ -57,6 +56,19 @@ const stateMachine = createMachine<MachineContext>(
                     }
                 ]
             },
+            UPDATE_PROJECT_ROOT: {
+                actions: [
+                    assign({
+                        projectUri: (context, event) => event.projectPath
+                    }),
+                    async (context, event) => {
+                        await buildProjectArtifactsStructure(event.projectPath, StateMachine.langClient(), true);
+                        notifyCurrentWebview();
+                        // Resolve the next pending promise waiting for project root update completion
+                        pendingProjectRootUpdateResolvers.shift()?.();
+                    }
+                ]
+            },
             UPDATE_PROJECT_LOCATION: {
                 actions: [
                     assign({
@@ -192,8 +204,9 @@ const stateMachine = createMachine<MachineContext>(
                             isGraphql: (context, event) => event.viewLocation?.isGraphql,
                             metadata: (context, event) => event.viewLocation?.metadata,
                             addType: (context, event) => event.viewLocation?.addType,
-                            rootDiagramId: (context, event) => event.viewLocation?.rootDiagramId,
-                            dataMapperMetadata: (context, event) => event.viewLocation?.dataMapperMetadata
+                            dataMapperMetadata: (context, event) => event.viewLocation?.dataMapperMetadata,
+                            artifactInfo: (context, event) => event.viewLocation?.artifactInfo,
+                            rootDiagramId: (context, event) => event.viewLocation?.rootDiagramId
                         })
                     }
                 }
@@ -261,12 +274,15 @@ const stateMachine = createMachine<MachineContext>(
                                     position: (context, event) => event.viewLocation.position,
                                     identifier: (context, event) => event.viewLocation.identifier,
                                     serviceType: (context, event) => event.viewLocation.serviceType,
+                                    projectUri: (context, event) => event.viewLocation?.projectUri || context?.projectUri,
+                                    package: (context, event) => event.viewLocation?.package || context?.package,
                                     type: (context, event) => event.viewLocation?.type,
                                     isGraphql: (context, event) => event.viewLocation?.isGraphql,
                                     metadata: (context, event) => event.viewLocation?.metadata,
                                     addType: (context, event) => event.viewLocation?.addType,
-                                    rootDiagramId: (context, event) => event.viewLocation?.rootDiagramId,
-                                    dataMapperMetadata: (context, event) => event.viewLocation?.dataMapperMetadata
+                                    dataMapperMetadata: (context, event) => event.viewLocation?.dataMapperMetadata,
+                                    artifactInfo: (context, event) => event.viewLocation?.artifactInfo,
+                                    rootDiagramId: (context, event) => event.viewLocation?.rootDiagramId
                                 })
                             },
                             VIEW_UPDATE: {
@@ -321,13 +337,13 @@ const stateMachine = createMachine<MachineContext>(
         registerProjectArtifactsStructure: (context, event) => {
             return new Promise(async (resolve, reject) => {
                 try {
+                    // Register the event driven listener to get the artifact changes
+                    context.langClient.registerPublishArtifacts();
                     // If the project uri is not set, we don't need to build the project structure
                     if (context.projectUri) {
 
                         // Add a 2 second delay before registering artifacts
                         await new Promise(resolve => setTimeout(resolve, 1000));
-                        // Register the event driven listener to get the artifact changes
-                        context.langClient.registerPublishArtifacts();
                         // Initial Project Structure
                         const projectStructure = await buildProjectArtifactsStructure(context.projectUri, context.langClient);
                         resolve({ projectStructure });
@@ -401,7 +417,8 @@ const stateMachine = createMachine<MachineContext>(
                         buildCommand = path.join(ballerinaHome, 'bin', buildCommand);
                     }
 
-                    const execution = new ShellExecution(buildCommand);
+                    // Use the current process environment which should have the updated PATH
+                    const execution = new ShellExecution(buildCommand, { env: process.env as { [key: string]: string } });
 
                     if (!workspace.workspaceFolders || workspace.workspaceFolders.length === 0) {
                         resolve(true);
@@ -446,12 +463,21 @@ const stateMachine = createMachine<MachineContext>(
         },
         findView(context, event): Promise<void> {
             return new Promise(async (resolve, reject) => {
+                const projectTomlValues = await getProjectTomlValues(context.projectUri);
+                const packageName = projectTomlValues?.package?.name;
                 if (!context.view && context.langClient) {
                     if (!context.position || ("groupId" in context.position)) {
-                        history.push({ location: { view: MACHINE_VIEW.Overview, documentUri: context.documentUri } });
+                        history.push({
+                            location: {
+                                view: MACHINE_VIEW.Overview,
+                                documentUri: context.documentUri,
+                                package: packageName || context.package
+                            }
+                        });
                         return resolve();
                     }
                     const view = await getView(context.documentUri, context.position, context?.projectUri);
+                    view.location.package = packageName || context.package;
                     history.push(view);
                     return resolve();
                 } else {
@@ -461,6 +487,7 @@ const stateMachine = createMachine<MachineContext>(
                             documentUri: context.documentUri,
                             position: context.position,
                             identifier: context.identifier,
+                            package: packageName || context.package,
                             type: context?.type,
                             isGraphql: context?.isGraphql,
                             addType: context?.addType,
@@ -613,6 +640,12 @@ export const StateMachine = {
     },
     sendEvent: (eventType: EVENT_TYPE) => { stateService.send({ type: eventType }); },
     updateProjectStructure: (payload: ProjectStructureResponse) => { stateService.send({ type: "UPDATE_PROJECT_STRUCTURE", payload }); },
+    updateProjectRoot: (projectPath: string): Promise<void> => {
+        return new Promise<void>((resolve) => {
+            pendingProjectRootUpdateResolvers.push(resolve);
+            stateService.send({ type: "UPDATE_PROJECT_ROOT", projectPath });
+        });
+    },
     resetToExtensionReady: () => {
         stateService.send({ type: 'RESET_TO_EXTENSION_READY' });
     },
@@ -637,6 +670,7 @@ export function updateView(refreshTreeView?: boolean, projectUri?: string) {
     }
 
     let newLocation: VisualizerLocation = lastView?.location;
+    let newLocationFound = false;
     if (lastView && lastView.location?.artifactType && lastView.location?.identifier) {
         newLocation = { ...lastView.location };
         const currentIdentifier = lastView.location?.identifier;
@@ -669,6 +703,36 @@ export function updateView(refreshTreeView?: boolean, projectUri?: string) {
             ...lastView,
             location: newLocation
         });
+        newLocationFound = true;
+    }
+
+    // Check for service class model in the new location
+    if (!newLocationFound && lastView?.location?.type) {
+        let currentArtifact: ProjectStructureArtifactResponse;
+        StateMachine.context().projectStructure.directoryMap[DIRECTORY_MAP.TYPE].forEach((artifact) => {
+            if (artifact.id === lastView.location.type.name || artifact.name === lastView.location.type.name) {
+                currentArtifact = artifact;
+            }
+        });
+        const newPosition = currentArtifact?.position || lastView.location.position;
+        const updatedType: Type = {
+            ...lastView.location.type,
+            codedata: {
+                ...lastView.location.type.codedata,
+                lineRange: {
+                    ...lastView.location.type.codedata.lineRange,
+                    startLine: { line: newPosition.startLine, offset: newPosition.startColumn },
+                    endLine: { line: newPosition.endLine, offset: newPosition.endColumn }
+                }
+            }
+        };
+
+        newLocation = { ...lastView.location, position: newPosition, type: updatedType };
+        history.updateCurrentEntry({
+            ...lastView,
+            location: newLocation
+        });
+
     }
 
 
@@ -724,9 +788,17 @@ async function checkForProjects(): Promise<{ isBI: boolean, projectPath: string,
 }
 
 async function handleMultipleWorkspaces(workspaceFolders: readonly WorkspaceFolder[]) {
-    const balProjects = workspaceFolders.filter(folder => checkIsBallerina(folder.uri));
-
-    if (balProjects.length > 1) {
+    const balProjectChecks = await Promise.all(
+        workspaceFolders.map(async folder => ({
+            folder,
+            isBallerinaPackage: await checkIsBallerinaPackage(folder.uri)
+        }))
+    );
+    const balProjects = balProjectChecks
+        .filter(result => result.isBallerinaPackage)
+        .map(result => result.folder);
+
+    if (balProjects.length > 1 && workspace.workspaceFile?.scheme === "file") {
         const projectPaths = balProjects.map(folder => folder.uri.fsPath);
         let selectedProject = await window.showQuickPick(projectPaths, {
             placeHolder: 'Select a project to load the WSO2 Integrator'
@@ -754,7 +826,7 @@ async function handleMultipleWorkspaces(workspaceFolders: readonly WorkspaceFold
 }
 
 async function handleSingleWorkspace(workspaceURI: any) {
-    const isBallerina = checkIsBallerina(workspaceURI);
+    const isBallerina = await checkIsBallerinaPackage(workspaceURI);
     const isBI = isBallerina && checkIsBI(workspaceURI);
     const scope = fetchScope(workspaceURI);
     const projectPath = isBallerina ? workspaceURI.fsPath : "";
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/config.ts b/workspaces/ballerina/ballerina-extension/src/utils/config.ts
index 53073684086..9329f3591fa 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/config.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/config.ts
@@ -16,11 +16,12 @@
  * under the License.
  */
 
-import { SCOPE } from '@wso2/ballerina-core';
+import { SCOPE, PackageTomlValues, WorkspaceTomlValues } from '@wso2/ballerina-core';
 import { BallerinaExtension } from '../core';
-import { WorkspaceConfiguration, workspace, Uri } from 'vscode';
+import { WorkspaceConfiguration, workspace, Uri, RelativePattern } from 'vscode';
 import * as fs from 'fs';
 import * as path from 'path';
+import { parse } from 'toml';
 
 export enum VERSION {
     BETA = 'beta',
@@ -126,9 +127,81 @@ export function checkIsBI(uri: Uri): boolean {
     return false; // Return false if isBI is not set
 }
 
-export function checkIsBallerina(uri: Uri): boolean {
+export async function checkIsBallerinaPackage(uri: Uri): Promise<boolean> {
     const ballerinaTomlPath = path.join(uri.fsPath, 'Ballerina.toml');
-    return fs.existsSync(ballerinaTomlPath);
+
+    // First check if the file exists
+    if (!fs.existsSync(ballerinaTomlPath)) {
+        return false;
+    }
+
+    try {
+        const tomlValues = await getProjectTomlValues(uri.fsPath);
+        return tomlValues?.package !== undefined;
+    } catch (error) {
+        // If there's an error reading the file, it's not a valid Ballerina project
+        console.error(`Error reading package Ballerina.toml: ${error}`);
+        return false;
+    }
+}
+
+
+export async function checkIsBallerinaWorkspace(uri: Uri): Promise<boolean> {
+    const ballerinaTomlPath = path.join(uri.fsPath, 'Ballerina.toml');
+
+    // First check if the file exists
+    if (!fs.existsSync(ballerinaTomlPath)) {
+        return false;
+    }
+
+    try {
+        const tomlValues = await getWorkspaceTomlValues(uri.fsPath);
+        return tomlValues?.workspace !== undefined;
+    } catch (error) {
+        // If there's an error reading the file, it's not a valid Ballerina workspace
+        console.error(`Error reading workspace Ballerina.toml: ${error}`);
+        return false;
+    }
+}
+
+export async function hasMultipleBallerinaPackages(uri: Uri): Promise<boolean> {
+    const packages = await getBallerinaPackages(uri);
+    return packages.length > 1;
+}
+
+export async function getBallerinaPackages(uri: Uri): Promise<string[]> {
+    try {
+        const ballerinaTomlPattern = `**${path.sep}Ballerina.toml`;
+        const tomls = await workspace.findFiles(
+            new RelativePattern(uri.fsPath, ballerinaTomlPattern)
+        );
+
+        if (tomls.length === 0) {
+            return [];
+        }
+
+        // Collect valid package paths (Ballerina.toml files with [package] section)
+        const packagePaths: string[] = [];
+
+        for (const toml of tomls) {
+            const projectRoot = path.dirname(toml.fsPath);
+            try {
+                const tomlValues = await getProjectTomlValues(projectRoot);
+                // Only count as a package if it has a package section
+                if (tomlValues?.package !== undefined) {
+                    packagePaths.push(projectRoot);
+                }
+            } catch (error) {
+                // Skip invalid TOML files
+                console.error(`Error reading Ballerina.toml at ${toml.fsPath}: ${error}`);
+            }
+        }
+
+        return packagePaths;
+    } catch (error) {
+        console.error(`Error checking for multiple Ballerina packages: ${error}`);
+        return [];
+    }
 }
 
 export function getOrgPackageName(projectPath: string): { orgName: string, packageName: string } {
@@ -183,3 +256,29 @@ export function setupBIFiles(projectDir: string): void {
         }
     });
 }
+
+export async function getProjectTomlValues(projectPath: string): Promise<PackageTomlValues> {
+    const ballerinaTomlPath = path.join(projectPath, '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 for project at path: ", projectPath, error);
+            return;
+        }
+    }
+}
+
+export async function getWorkspaceTomlValues(workspacePath: string): Promise<WorkspaceTomlValues> {
+    const ballerinaTomlPath = path.join(workspacePath, '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 for workspace at path: ", workspacePath, error);
+            return;
+        }
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/file-utils.ts b/workspaces/ballerina/ballerina-extension/src/utils/file-utils.ts
index 9bc57e70ffa..2831400ca3a 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/file-utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/file-utils.ts
@@ -514,6 +514,14 @@ function urlToUniqueID(url) {
     return hash.digest('hex');
 }
 
+export function getProjectWorkingDirectory(projectPath: string): string {
+    try {
+        return fs.statSync(projectPath).isFile() ? path.dirname(projectPath) : projectPath;
+    } catch (error) {
+        throw error;
+    }
+}
+
 export async function goToSource(nodePosition: NodePosition, documentUri: string) {
     const { startLine, startColumn, endLine, endColumn } = nodePosition;
     if (!existsSync(documentUri)) {
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/project-artifacts.ts b/workspaces/ballerina/ballerina-extension/src/utils/project-artifacts.ts
index c9638370f2d..a7e0a1e7513 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/project-artifacts.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/project-artifacts.ts
@@ -19,12 +19,7 @@ import * as vscode from "vscode";
 import { URI, Utils } from "vscode-uri";
 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 } from "./source-utils";
 import { ArtifactsUpdated, ArtifactNotificationHandler } from "./project-artifacts-handler";
 import { CommonRpcManager } from "../rpc-managers/common/rpc-manager";
 
@@ -57,8 +52,8 @@ export async function buildProjectArtifactsStructure(projectDir: string, langCli
     // 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;
+    if (tomlValues) {
+        projectName = tomlValues.package?.title || tomlValues.package?.name;
     }
     result.projectName = projectName;
 
@@ -199,54 +194,6 @@ async function getEntryValue(artifact: BaseArtifact, icon: string, moduleName?:
     return entryValue;
 }
 
-// This is a hack to inject the AI agent code into the chat service function
-// This has to be replaced once we have a proper design for AI Agent Chat Service
-async function injectAIAgent(serviceArtifact: BaseArtifact) {
-    // Fetch the organization name for importing the AI package
-    const aiModuleOrg = await new AiAgentRpcManager().getAiModuleOrg({ projectPath: StateMachine.context().projectUri });
-
-    //get AgentName
-    const agentName = serviceArtifact.name.split('-')[1].trim().replace(/\//g, '');
-
-    // Retrieve the service model
-    const targetFile = Utils.joinPath(URI.file(StateMachine.context().projectUri), serviceArtifact.location.fileName).fsPath;
-    const updatedService = await new ServiceDesignerRpcManager().getServiceModelFromCode({
-        filePath: targetFile,
-        codedata: {
-            lineRange: {
-                startLine: { line: serviceArtifact.location.startLine.line, offset: serviceArtifact.location.startLine.offset },
-                endLine: { line: serviceArtifact.location.endLine.line, offset: serviceArtifact.location.endLine.offset }
-            }
-        }
-    });
-    if (!updatedService?.service?.functions?.[0]?.codedata?.lineRange?.endLine) {
-        console.error('Unable to determine injection position: Invalid service structure');
-        return;
-    }
-    const injectionPosition = updatedService.service.functions[0].codedata.lineRange.endLine;
-    const serviceFile = path.join(StateMachine.context().projectUri, `main.bal`);
-    ensureFileExists(serviceFile);
-    await injectAgentCode(agentName, serviceFile, injectionPosition, aiModuleOrg.orgName);
-    const functionPosition: NodePosition = {
-        startLine: updatedService.service.functions[0].codedata.lineRange.startLine.line,
-        startColumn: updatedService.service.functions[0].codedata.lineRange.startLine.offset,
-        endLine: updatedService.service.functions[0].codedata.lineRange.endLine.line + 2,
-        endColumn: updatedService.service.functions[0].codedata.lineRange.endLine.offset
-    };
-    return {
-        position: functionPosition
-    };
-}
-
-function ensureFileExists(targetFile: string) {
-    // Check if the file exists
-    if (!fs.existsSync(targetFile)) {
-        // Create the file if it does not exist
-        fs.writeFileSync(targetFile, "");
-        console.log(`>>> Created file at ${targetFile}`);
-    }
-}
-
 /**
  * Maps an ARTIFACT_TYPE category key and a specific artifact to the corresponding DIRECTORY_MAP key and a default icon.
  * Note: The icon returned here is a base icon; `getEntryValue` might assign a more specific icon later based on the module.
@@ -334,20 +281,6 @@ async function processAddition(artifact: BaseArtifact, artifactCategoryKey: stri
                 projectStructure.directoryMap[mapping.mapKey] = [];
             }
             entryValue.isNew = true; // This is a flag to identify the new artifact
-
-            // Hack to handle AI services --------------------------------->
-            // Inject the AI agent code into the service when new service is created
-            if (artifact.module === "ai" && artifact.type === DIRECTORY_MAP.SERVICE) {
-                const aiResourceLocation = Object.values(artifact.children).find(child => child.type === DIRECTORY_MAP.RESOURCE)?.location;
-                const startLine = aiResourceLocation.startLine.line;
-                const endLine = aiResourceLocation.endLine.line;
-                const isEmptyResource = endLine - startLine === 1;
-                if (isEmptyResource) {
-                    const injectedResult = await injectAIAgent(artifact);
-                    entryValue.position = injectedResult.position;
-                }
-            }
-            // <-------------------------------------------------------------
             projectStructure.directoryMap[mapping.mapKey]?.push(entryValue);
             return entryValue;
         } catch (error) {
@@ -493,6 +426,10 @@ function getCustomEntryNodeIcon(type: string) {
             return "bi-ftp";
         case "file":
             return "bi-file";
+        case "mcp":
+            return "bi-mcp";
+        case "solace":
+            return "bi-solace";
         default:
             return "bi-globe";
     }
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/project-utils.ts b/workspaces/ballerina/ballerina-extension/src/utils/project-utils.ts
index 55bf802e4b1..9d97e793900 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/project-utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/project-utils.ts
@@ -17,10 +17,28 @@
  */
 
 import { extension } from "../BalExtensionContext";
-import { Uri, window, workspace } from "vscode";
+import { Uri, window, workspace, RelativePattern, WorkspaceFolder } from "vscode";
 import * as path from 'path';
 import { isSupportedVersion, VERSION } from "./config";
 import { BallerinaProject } from "@wso2/ballerina-core";
+import { readFileSync } from 'fs';
+import { dirname, sep } from 'path';
+import { parseTomlToConfig } from '../features/config-generator/utils';
+
+const BALLERINA_TOML_REGEX = `**${sep}Ballerina.toml`;
+const BALLERINA_FILE_REGEX = `**${sep}*.bal`;
+
+export interface BALLERINA_TOML {
+    package: PACKAGE;
+    "build-options": any;
+}
+
+export interface PACKAGE {
+    org: string;
+    name: string;
+    version: string;
+    distribution: string;
+}
 
 function getCurrentBallerinaProject(file?: string): Promise<BallerinaProject> {
     return new Promise((resolve, reject) => {
@@ -78,4 +96,45 @@ function addToWorkspace(url: string) {
     workspace.updateWorkspaceFolders(workspace.workspaceFolders ? workspace.workspaceFolders.length : 0, null, { uri: Uri.parse(url) });
 }
 
-export { addToWorkspace, getCurrentBallerinaProject, getCurrentBallerinaFile, getCurrenDirectoryPath };
+async function selectBallerinaProjectForDebugging(workspaceFolder?: WorkspaceFolder): Promise<string> {
+    const tomls = await workspace.findFiles(workspaceFolder ? new RelativePattern(workspaceFolder, BALLERINA_TOML_REGEX) : BALLERINA_TOML_REGEX);
+    const projects: { project: BallerinaProject; balFile: Uri; relativePath: string }[] = [];
+
+    for (const toml of tomls) {
+        const projectRoot = dirname(toml.fsPath);
+        const balFiles = await workspace.findFiles(new RelativePattern(projectRoot, BALLERINA_FILE_REGEX), undefined, 1);
+        if (balFiles.length > 0) {
+            const tomlContent: string = readFileSync(toml.fsPath, 'utf8');
+            const tomlObj: BALLERINA_TOML = parseTomlToConfig(tomlContent) as BALLERINA_TOML;
+            const relativePath = workspace.asRelativePath(projectRoot);
+            // Add only if package name is present in Ballerina.toml (this is to exclude workspace projects)
+            if (tomlObj.package && tomlObj.package.name) {
+                projects.push({ project: { packageName: tomlObj.package.name }, balFile: balFiles[0], relativePath });
+            }
+        }
+    }
+
+    if (projects.length === 1) {
+        return projects[0].balFile.fsPath;
+    } else if (projects.length > 1) {
+        const selectedProject = await window.showQuickPick(projects.map((project) => {
+            return {
+                label: project.project.packageName,
+                description: project.relativePath
+            };
+        }), { placeHolder: "Detected multiple Ballerina projects within the workspace. Select one to debug.", canPickMany: false });
+
+        if (selectedProject) {
+            const foundProject = projects.find((project) => project.project.packageName === selectedProject.label);
+            if (foundProject) {
+                return foundProject.balFile.fsPath;
+            }
+        }
+        throw new Error("Project selection cancelled");
+    } else {
+        extension.ballerinaExtInstance.showMessageInvalidProject();
+        throw new Error("No valid Ballerina projects found");
+    }
+}
+
+export { addToWorkspace, getCurrentBallerinaProject, getCurrentBallerinaFile, getCurrenDirectoryPath, selectBallerinaProjectForDebugging };
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/source-utils.ts b/workspaces/ballerina/ballerina-extension/src/utils/source-utils.ts
index c0878ba5231..95cd3203957 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/source-utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/source-utils.ts
@@ -19,9 +19,8 @@
 import * as vscode from 'vscode';
 import * as fs from 'fs';
 import { workspace } from 'vscode';
-import { Uri, Position } from 'vscode';
-import { ArtifactData, EVENT_TYPE, LinePosition, MACHINE_VIEW, ProjectStructureArtifactResponse, STModification, SyntaxTree, TextEdit } from '@wso2/ballerina-core';
-import path from 'path';
+import { Uri } from 'vscode';
+import { ArtifactData, EVENT_TYPE, MACHINE_VIEW, ProjectStructureArtifactResponse, STModification, TextEdit } from '@wso2/ballerina-core';
 import { openView, StateMachine, undoRedoManager } from '../stateMachine';
 import { ArtifactsUpdated, ArtifactNotificationHandler } from './project-artifacts-handler';
 import { existsSync, writeFileSync } from 'fs';
@@ -33,13 +32,18 @@ export interface UpdateSourceCodeRequest {
         [key: string]: TextEdit[];
     };
     resolveMissingDependencies?: boolean;
+    artifactData?: ArtifactData;
+    description?: string;
+    identifier?: string;
+    skipPayloadCheck?: boolean; // This is used to skip the payload check because the payload data might become empty as a result of a change. Example: Deleting a component.
+    isRenameOperation?: boolean; // This is used to identify if the update is a rename operation.
 }
 
-export async function updateSourceCode(updateSourceCodeRequest: UpdateSourceCodeRequest, artifactData?: ArtifactData, description?: string): Promise<ProjectStructureArtifactResponse[]> {
+export async function updateSourceCode(updateSourceCodeRequest: UpdateSourceCodeRequest): Promise<ProjectStructureArtifactResponse[]> {
     try {
         let tomlFilesUpdated = false;
         StateMachine.setEditMode();
-        undoRedoManager.startBatchOperation();
+        undoRedoManager?.startBatchOperation();
         const modificationRequests: Record<string, { filePath: string; modifications: STModification[] }> = {};
         for (const [key, value] of Object.entries(updateSourceCodeRequest.textEdits)) {
             const fileUri = key.startsWith("file:") ? Uri.parse(key) : Uri.file(key);
@@ -70,7 +74,7 @@ export async function updateSourceCode(updateSourceCodeRequest: UpdateSourceCode
             // Get the before content of the file by using the workspace api
             const document = await workspace.openTextDocument(fileUri);
             const beforeContent = document.getText();
-            undoRedoManager.addFileToBatch(fileUri.fsPath, beforeContent, beforeContent);
+            undoRedoManager?.addFileToBatch(fileUri.fsPath, beforeContent, beforeContent);
 
             if (edits && edits.length > 0) {
                 const modificationList: STModification[] = [];
@@ -140,10 +144,10 @@ export async function updateSourceCode(updateSourceCodeRequest: UpdateSourceCode
                         ),
                         formattedSource.newText
                     );
-                    undoRedoManager.addFileToBatch(fileUri.fsPath, formattedSource.newText, formattedSource.newText);
+                    undoRedoManager?.addFileToBatch(fileUri.fsPath, formattedSource.newText, formattedSource.newText);
                 }
             }
-            undoRedoManager.commitBatchOperation(description ? description : (artifactData ? `Change in ${artifactData?.artifactType} ${artifactData?.identifier}` : "Update Source Code"));
+            undoRedoManager?.commitBatchOperation(updateSourceCodeRequest.description ? updateSourceCodeRequest.description : (updateSourceCodeRequest.artifactData ? `Change in ${updateSourceCodeRequest.artifactData?.artifactType} ${updateSourceCodeRequest.artifactData?.identifier}` : "Update Source Code"));
 
             // Apply all formatted changes at once
             await workspace.applyEdit(formattedWorkspaceEdit);
@@ -166,13 +170,15 @@ export async function updateSourceCode(updateSourceCodeRequest: UpdateSourceCode
                 // Get the artifact notification handler instance
                 const notificationHandler = ArtifactNotificationHandler.getInstance();
                 // Subscribe to artifact updated notifications
-                let unsubscribe = notificationHandler.subscribe(ArtifactsUpdated.method, artifactData, async (payload) => {
-                    console.log("Received notification:", payload);
-                    clearTimeout(timeoutId);
-                    resolve(payload.data);
-                    StateMachine.setReadyMode();
-                    checkAndNotifyWebview(payload.data);
-                    unsubscribe();
+                let unsubscribe = notificationHandler.subscribe(ArtifactsUpdated.method, updateSourceCodeRequest.artifactData, async (payload) => {
+                    if ((payload.data && payload.data.length > 0) || updateSourceCodeRequest.skipPayloadCheck) {
+                        console.log("Received notification:", payload);
+                        clearTimeout(timeoutId);
+                        resolve(payload.data);
+                        StateMachine.setReadyMode();
+                        checkAndNotifyWebview(payload.data, updateSourceCodeRequest);
+                        unsubscribe();
+                    }
                 });
 
                 // Set a timeout to reject if no notification is received within 10 seconds
@@ -198,7 +204,7 @@ export async function updateSourceCode(updateSourceCodeRequest: UpdateSourceCode
         }
     } catch (error) {
         StateMachine.setReadyMode();
-        undoRedoManager.cancelBatchOperation();
+        undoRedoManager?.cancelBatchOperation();
         console.log(">>> error updating source", error);
         throw error;
     }
@@ -208,10 +214,17 @@ export async function updateSourceCode(updateSourceCodeRequest: UpdateSourceCode
 //** 
 // Notify webview unless a new TYPE artifact is created outside the type diagram view
 // */
-function checkAndNotifyWebview(response: ProjectStructureArtifactResponse[]) {
+function checkAndNotifyWebview(response: ProjectStructureArtifactResponse[], request: UpdateSourceCodeRequest) {
     const newArtifact = response.find(artifact => artifact.isNew);
+    const selectedArtifact = response.find(artifact => artifact.id === request.identifier);
     const stateContext = StateMachine.context().view;
-    if (newArtifact.type === "TYPE" && stateContext !== MACHINE_VIEW.TypeDiagram) {
+
+    if (request.isRenameOperation) {
+        notifyCurrentWebview();
+        return;
+    }
+
+    if ((selectedArtifact?.type === "TYPE " || newArtifact?.type === "TYPE") && stateContext !== MACHINE_VIEW.TypeDiagram) {
         return;
     } else {
         notifyCurrentWebview();
@@ -228,20 +241,3 @@ export async function injectImportIfMissing(importStatement: string, filePath: s
     }
 }
 
-export async function injectAgentCode(name: string, serviceFile: string, injectionPosition: LinePosition, orgName: string) {
-    // Update the service function code 
-    const serviceEdit = new vscode.WorkspaceEdit();
-    // Choose agent invocation code based on orgName
-    const serviceSourceCode =
-        orgName === "ballerina"
-            ?
-            `            string stringResult = check _${name}Agent.run(request.message, request.sessionId); 
-            return {message: stringResult};
-`
-            :
-            `        string stringResult = check _${name}Agent->run(request.message, request.sessionId);
-        return {message: stringResult};
-`;
-    serviceEdit.insert(Uri.file(serviceFile), new Position(injectionPosition.line, 0), serviceSourceCode);
-    await workspace.applyEdit(serviceEdit);
-}
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 6a7ed14191d..a519d4da8a2 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/state-machine-utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/state-machine-utils.ts
@@ -196,7 +196,24 @@ async function getViewBySTRange(documentUri: string, position: NodePosition, pro
                     view: MACHINE_VIEW.DataMapper,
                     identifier: node.syntaxTree.functionName.value,
                     documentUri: documentUri,
-                    position: position
+                    position: position,
+                    artifactType: DIRECTORY_MAP.DATA_MAPPER,
+                    dataMapperMetadata: {
+                        name: node.syntaxTree.functionName.value,
+                        codeData: {
+                            lineRange: {
+                                fileName: documentUri,
+                                startLine: {
+                                    line: position.startLine,
+                                    offset: position.startColumn
+                                },
+                                endLine: {
+                                    line: position.endLine,
+                                    offset: position.endColumn
+                                }
+                            }
+                        }
+                    },
                 },
                 dataMapperDepth: 0
             };
@@ -483,52 +500,3 @@ function getSTByRangeReq(documentUri: string, position: NodePosition) {
         }
     };
 }
-
-export async function updateCurrentArtifactLocation(artifacts: UpdatedArtifactsResponse) {
-    if (artifacts.artifacts.length === 0) {
-        return;
-    }
-    console.log(">>> Updating current artifact location", { artifacts });
-    // Get the updated component and update the location
-    const currentIdentifier = StateMachine.context().identifier;
-    const currentType = StateMachine.context().type;
-
-    // Find the correct artifact by currentIdentifier (id)
-    let currentArtifact = undefined;
-    for (const artifact of artifacts.artifacts) {
-        if (currentType && currentType.codedata.node === "CLASS" && currentType.name === artifact.name) {
-            currentArtifact = artifact;
-            if (artifact.resources && artifact.resources.length > 0) {
-                const resource = artifact.resources.find(
-                    (resource) => resource.id === currentIdentifier || resource.name === currentIdentifier
-                );
-                if (resource) {
-                    currentArtifact = resource;
-                    break;
-                }
-            }
-
-        } else if (artifact.id === currentIdentifier || artifact.name === currentIdentifier) {
-            currentArtifact = artifact;
-        }
-
-        // Check if artifact has resources and find within those
-        if (artifact.resources && artifact.resources.length > 0) {
-            const resource = artifact.resources.find(
-                (resource) => resource.id === currentIdentifier || resource.name === currentIdentifier
-            );
-            if (resource) {
-                currentArtifact = resource;
-            }
-        }
-    }
-
-    if (currentArtifact) {
-        openView(EVENT_TYPE.UPDATE_PROJECT_LOCATION, {
-            documentUri: currentArtifact.path,
-            position: currentArtifact.position,
-            identifier: currentIdentifier,
-        });
-    }
-}
-
diff --git a/workspaces/ballerina/ballerina-extension/src/views/ai-panel/errorCodes.ts b/workspaces/ballerina/ballerina-extension/src/views/ai-panel/errorCodes.ts
index 6f92cf085eb..aeb3a090703 100644
--- a/workspaces/ballerina/ballerina-extension/src/views/ai-panel/errorCodes.ts
+++ b/workspaces/ballerina/ballerina-extension/src/views/ai-panel/errorCodes.ts
@@ -77,3 +77,8 @@ export const INVALID_RECORD_UNION_TYPE: ErrorCode = {
     code: 14,
     message: "AI data mapper does not support input or output as a union of records."
 };
+
+export const INVALID_RECORD_REFERENCE: ErrorCode = {
+    code: 15,
+    message: "Invalid record reference. Follow <org-name>/<package-name>:<record-name> format when referencing to record in another package."
+};
diff --git a/workspaces/ballerina/ballerina-extension/src/views/visualizer/activate.ts b/workspaces/ballerina/ballerina-extension/src/views/visualizer/activate.ts
index e0894d64d09..1d8ce9af830 100644
--- a/workspaces/ballerina/ballerina-extension/src/views/visualizer/activate.ts
+++ b/workspaces/ballerina/ballerina-extension/src/views/visualizer/activate.ts
@@ -21,7 +21,7 @@ import { PALETTE_COMMANDS } from '../../features/project/cmds/cmd-runner';
 import { StateMachine, openView } from '../../stateMachine';
 import { extension } from '../../BalExtensionContext';
 import { BI_COMMANDS, EVENT_TYPE, MACHINE_VIEW, NodePosition, SHARED_COMMANDS } from '@wso2/ballerina-core';
-import { ViewColumn } from 'vscode';
+import { findBallerinaProjectRoot } from '../../features/ai/utils';
 import { buildProjectArtifactsStructure } from '../../utils/project-artifacts';
 
 export function activateSubscriptions() {
@@ -32,7 +32,7 @@ export function activateSubscriptions() {
             if (!path) {
                 return;
             }
-            vscode.window.showTextDocument(vscode.Uri.file(path), { viewColumn: ViewColumn.Beside });
+            vscode.window.showTextDocument(vscode.Uri.file(path), { viewColumn: vscode.ViewColumn.Beside });
         })
     );
 
@@ -45,7 +45,7 @@ export function activateSubscriptions() {
 
     // <------------- Shared Commands ------------>
     context.subscriptions.push(
-        vscode.commands.registerCommand(SHARED_COMMANDS.SHOW_VISUALIZER, (path: string | vscode.Uri, position, resetHistory = false) => {
+        vscode.commands.registerCommand(SHARED_COMMANDS.SHOW_VISUALIZER, async (path: string | vscode.Uri, position, resetHistory = false) => {
             // Check if position is a LineRange object (has 'start' and 'end' keys)
             let nodePosition: NodePosition = position;
             if (position && typeof position === "object" && "start" in position && "end" in position) {
@@ -69,6 +69,18 @@ export function activateSubscriptions() {
                     documentPath = path.fsPath;
                 }
             }
+
+            const projectPath = StateMachine.context()?.projectUri;
+            const projectRoot = await findBallerinaProjectRoot(documentPath);
+
+            if (!projectPath || projectPath !== projectRoot) {
+                // Initialize project structure if not already set by finding and loading the Ballerina project root
+                // Can happen when the user opens a directory containing multiple Ballerina projects
+                if (projectRoot) {
+                    await StateMachine.updateProjectRoot(projectRoot);
+                }
+            }
+            
             if (StateMachine.langClient() && StateMachine.context().isBISupported) { // This is added since we can't fetch new diagram data without bi supported ballerina version
                 openView(EVENT_TYPE.OPEN_VIEW, { documentUri: documentPath || vscode.window.activeTextEditor?.document.uri.fsPath, position: nodePosition }, resetHistory);
             } else {
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/datamapper.test.ts b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/datamapper.test.ts
deleted file mode 100644
index 10a6e7a6d44..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/datamapper.test.ts
+++ /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 * as path from 'path';
-import { generateBallerinaCode } from '../../../src/rpc-managers/ai-panel/utils';
-import * as assert from 'assert';
-import * as fs from 'fs';
-
-const RESOURCES_PATH = path.resolve(__dirname, '../../../../test/ai/datamapper/resources');
-
-function getTestFolders(dirPath: string): string[] {
-    return fs.readdirSync(dirPath)
-        .filter((file) => fs.lstatSync(path.join(dirPath, file)).isDirectory());
-}
-
-suite("AI Datamapper Tests Suite", () => {
-    setup(done => {
-        done();
-    });
-
-    function runTests(basePath: string) {
-        const testFolders = getTestFolders(basePath);
-
-        testFolders.forEach((folder) => {
-            const folderPath = path.join(basePath, folder);
-
-            suite(`Group: ${folder}`, () => {
-                const subFolders = getTestFolders(folderPath);
-
-                if (subFolders.length > 0) {
-                    // Recursively process subdirectories
-                    runTests(folderPath);
-                } else {
-                    test(`Datamapper Test - ${folder}`, async () => {
-                        const mappingFile = path.join(folderPath, 'mapping.json');
-                        const paramDefFile = path.join(folderPath, 'param_def.json');
-                        const expectedFile = path.join(folderPath, 'expected.json');
-
-                        assert.ok(fs.existsSync(mappingFile), `Missing mapping.json in ${folder}`);
-                        assert.ok(fs.existsSync(paramDefFile), `Missing param_def.json in ${folder}`);
-                        assert.ok(fs.existsSync(expectedFile), `Missing expected.json in ${folder}`);
-
-                        const mapping = JSON.parse(fs.readFileSync(mappingFile, 'utf8'));
-                        const paramDef = JSON.parse(fs.readFileSync(paramDefFile, 'utf8'));
-                        const expected = JSON.parse(fs.readFileSync(expectedFile, 'utf8'));
-                        const resp = await generateBallerinaCode(mapping, paramDef, "", []);
-                        assert.deepStrictEqual(resp, expected);            
-                    });
-                }
-            });
-        });
-    }
-    runTests(RESOURCES_PATH);
-});
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_1/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_1/expected.json
deleted file mode 100644
index 34520486cfe..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_1/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"person.id","name":"person.name"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_1/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_1/mapping.json
deleted file mode 100644
index b186fe40e00..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_1/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_1/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_1/param_def.json
deleted file mode 100644
index bf98e66267c..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_1/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""}}},"output":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_10/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_10/expected.json
deleted file mode 100644
index 3dad5e12a43..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_10/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":"person.personId","name":"person.fullName"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_10/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_10/mapping.json
deleted file mode 100644
index f84fc9352a4..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_10/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":{"operation":"DIRECT","targetType":"string","parameters":["person.personId"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.fullName"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_10/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_10/param_def.json
deleted file mode 100644
index bd31a53f43b..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_10/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"personId":{"type":"string","comment":""},"fullName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"address":{"type":"string","comment":""},"phone":{"type":"string","comment":""},"email":{"type":"string","comment":""},"gender":{"type":"string","comment":""}}},"output":{"studentId":{"type":"string","comment":""},"name":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"personId":{"typeName":"string","type":"string","typeInstance":"personId","nullable":false,"optional":false},"fullName":{"typeName":"string","type":"string","typeInstance":"fullName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false},"phone":{"typeName":"string","type":"string","typeInstance":"phone","nullable":false,"optional":false},"email":{"typeName":"string","type":"string","typeInstance":"email","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false}}}},"outputMetadata":{"studentId":{"typeName":"string","type":"string","typeInstance":"studentId","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_11/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_11/expected.json
deleted file mode 100644
index 3dad5e12a43..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_11/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":"person.personId","name":"person.fullName"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_11/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_11/mapping.json
deleted file mode 100644
index f84fc9352a4..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_11/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":{"operation":"DIRECT","targetType":"string","parameters":["person.personId"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.fullName"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_11/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_11/param_def.json
deleted file mode 100644
index 4823c5a4e2d..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_11/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"personId":{"type":"string","comment":""},"fullName":{"type":"string","comment":""}}},"output":{"studentId":{"type":"string","comment":""},"name":{"type":"string","comment":""},"courseName":{"type":"string","comment":""},"currentYear":{"type":"int","comment":""},"advisorName":{"type":"string","comment":""},"departmentName":{"type":"string","comment":""},"gpaScore":{"type":"float","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"personId":{"typeName":"string","type":"string","typeInstance":"personId","nullable":false,"optional":false},"fullName":{"typeName":"string","type":"string","typeInstance":"fullName","nullable":false,"optional":false}}}},"outputMetadata":{"studentId":{"typeName":"string","type":"string","typeInstance":"studentId","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false},"currentYear":{"typeName":"int","type":"int","typeInstance":"currentYear","nullable":false,"optional":false},"advisorName":{"typeName":"string","type":"string","typeInstance":"advisorName","nullable":false,"optional":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false},"gpaScore":{"typeName":"float","type":"float","typeInstance":"gpaScore","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_12/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_12/expected.json
deleted file mode 100644
index 7e600dd7b51..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_12/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":"person.personId","name":"person.fullName","currentYear":"person.age"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_12/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_12/mapping.json
deleted file mode 100644
index 9c04289cbbc..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_12/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":{"operation":"DIRECT","targetType":"string","parameters":["person.personId"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.fullName"]},"currentYear":{"operation":"DIRECT","targetType":"int","parameters":["person.age"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_12/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_12/param_def.json
deleted file mode 100644
index 81eb5d02410..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_12/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"personId":{"type":"string","comment":""},"fullName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"address":{"type":"string","comment":""},"phone":{"type":"string","comment":""},"email":{"type":"string","comment":""},"gender":{"type":"string","comment":""}}},"output":{"studentId":{"type":"string","comment":""},"name":{"type":"string","comment":""},"courseName":{"type":"string","comment":""},"currentYear":{"type":"int","comment":""},"advisorName":{"type":"string","comment":""},"departmentName":{"type":"string","comment":""},"gpaScore":{"type":"float","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"personId":{"typeName":"string","type":"string","typeInstance":"personId","nullable":false,"optional":false},"fullName":{"typeName":"string","type":"string","typeInstance":"fullName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false},"phone":{"typeName":"string","type":"string","typeInstance":"phone","nullable":false,"optional":false},"email":{"typeName":"string","type":"string","typeInstance":"email","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false}}}},"outputMetadata":{"studentId":{"typeName":"string","type":"string","typeInstance":"studentId","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false},"currentYear":{"typeName":"int","type":"int","typeInstance":"currentYear","nullable":false,"optional":false},"advisorName":{"typeName":"string","type":"string","typeInstance":"advisorName","nullable":false,"optional":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false},"gpaScore":{"typeName":"float","type":"float","typeInstance":"gpaScore","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_13/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_13/expected.json
deleted file mode 100644
index 2edee4421ff..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_13/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":"person.personId","name":"person.fullName","course":"{\n courseTitle: person.courseName \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_13/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_13/mapping.json
deleted file mode 100644
index faa89ada9dd..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_13/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":{"operation":"DIRECT","targetType":"string","parameters":["person.personId"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.fullName"]},"course":{"courseTitle":{"operation":"DIRECT","targetType":"string","parameters":["person.courseName"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_13/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_13/param_def.json
deleted file mode 100644
index 76135b63048..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_13/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"personId":{"type":"string","comment":""},"fullName":{"type":"string","comment":""},"courseName":{"type":"string","comment":""}}},"output":{"studentId":{"type":"string","comment":""},"name":{"type":"string","comment":""},"course":{"courseTitle":{"type":"string","comment":""},"courseCredits":{"type":"int","comment":""}}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"personId":{"typeName":"string","type":"string","typeInstance":"personId","nullable":false,"optional":false},"fullName":{"typeName":"string","type":"string","typeInstance":"fullName","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false}}}},"outputMetadata":{"studentId":{"typeName":"string","type":"string","typeInstance":"studentId","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"courseTitle":{"typeName":"string","type":"string","typeInstance":"courseTitle","nullable":false,"optional":false},"courseCredits":{"typeName":"int","type":"int","typeInstance":"courseCredits","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_14/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_14/expected.json
deleted file mode 100644
index c5f544e61b7..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_14/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":"person.personId","name":"person.fullName","courseName":"person.course.courseTitle"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_14/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_14/mapping.json
deleted file mode 100644
index d467f76607e..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_14/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":{"operation":"DIRECT","targetType":"string","parameters":["person.personId"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.fullName"]},"courseName":{"operation":"DIRECT","targetType":"string","parameters":["person.course.courseTitle"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_14/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_14/param_def.json
deleted file mode 100644
index f656815b383..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_14/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"personId":{"type":"string","comment":""},"fullName":{"type":"string","comment":""},"course":{"courseCredits":{"type":"int","comment":""},"courseTitle":{"type":"string","comment":""}}}},"output":{"studentId":{"type":"string","comment":""},"name":{"type":"string","comment":""},"courseName":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"personId":{"typeName":"string","type":"string","typeInstance":"personId","nullable":false,"optional":false},"fullName":{"typeName":"string","type":"string","typeInstance":"fullName","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"courseCredits":{"typeName":"int","type":"int","typeInstance":"courseCredits","nullable":false,"optional":false},"courseTitle":{"typeName":"string","type":"string","typeInstance":"courseTitle","nullable":false,"optional":false}}}}}},"outputMetadata":{"studentId":{"typeName":"string","type":"string","typeInstance":"studentId","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_15/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_15/expected.json
deleted file mode 100644
index 246589af3de..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_15/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":"person.personId","name":"person.fullName","courseDetails":"{\n courseCode: person.course.courseCode,\ncourseTitle: person.course.courseTitle \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_15/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_15/mapping.json
deleted file mode 100644
index 47118eb7fcb..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_15/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":{"operation":"DIRECT","targetType":"string","parameters":["person.personId"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.fullName"]},"courseDetails":{"courseCode":{"operation":"DIRECT","targetType":"string","parameters":["person.course.courseCode"]},"courseTitle":{"operation":"DIRECT","targetType":"string","parameters":["person.course.courseTitle"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_15/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_15/param_def.json
deleted file mode 100644
index e9a52e1cdfb..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_15/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"personId":{"type":"string","comment":""},"fullName":{"type":"string","comment":""},"course":{"courseCode":{"type":"string","comment":""},"courseTitle":{"type":"string","comment":""}}}},"output":{"studentId":{"type":"string","comment":""},"name":{"type":"string","comment":""},"courseDetails":{"courseCode":{"type":"string","comment":""},"courseTitle":{"type":"string","comment":""}}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"personId":{"typeName":"string","type":"string","typeInstance":"personId","nullable":false,"optional":false},"fullName":{"typeName":"string","type":"string","typeInstance":"fullName","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"courseCode":{"typeName":"string","type":"string","typeInstance":"courseCode","nullable":false,"optional":false},"courseTitle":{"typeName":"string","type":"string","typeInstance":"courseTitle","nullable":false,"optional":false}}}}}},"outputMetadata":{"studentId":{"typeName":"string","type":"string","typeInstance":"studentId","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"courseDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"courseDetails","typeName":"record","fields":{"courseCode":{"typeName":"string","type":"string","typeInstance":"courseCode","nullable":false,"optional":false},"courseTitle":{"typeName":"string","type":"string","typeInstance":"courseTitle","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_16/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_16/expected.json
deleted file mode 100644
index 6a6e35c6dcf..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_16/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":"person.personId","name":"person.fullName","credits":"course.courseCredits","courseName":"course.courseTitle"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_16/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_16/mapping.json
deleted file mode 100644
index 46475facca6..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_16/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":{"operation":"DIRECT","targetType":"string","parameters":["person.personId"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.fullName"]},"credits":{"operation":"DIRECT","targetType":"int","parameters":["course.courseCredits"]},"courseName":{"operation":"DIRECT","targetType":"string","parameters":["course.courseTitle"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_16/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_16/param_def.json
deleted file mode 100644
index e227e2388e8..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_16/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"personId":{"type":"string","comment":""},"fullName":{"type":"string","comment":""}},"course":{"courseCredits":{"type":"int","comment":""},"courseTitle":{"type":"string","comment":""}}},"output":{"studentId":{"type":"string","comment":""},"name":{"type":"string","comment":""},"credits":{"type":"int","comment":""},"courseName":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"personId":{"typeName":"string","type":"string","typeInstance":"personId","nullable":false,"optional":false},"fullName":{"typeName":"string","type":"string","typeInstance":"fullName","nullable":false,"optional":false}}},"course":{"isArrayType":false,"parameterName":"course","parameterType":"CourseDetails","type":"record","fields":{"courseCredits":{"typeName":"int","type":"int","typeInstance":"courseCredits","nullable":false,"optional":false},"courseTitle":{"typeName":"string","type":"string","typeInstance":"courseTitle","nullable":false,"optional":false}}}},"outputMetadata":{"studentId":{"typeName":"string","type":"string","typeInstance":"studentId","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"credits":{"typeName":"int","type":"int","typeInstance":"credits","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_17/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_17/expected.json
deleted file mode 100644
index aa78cdeca38..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_17/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"(person.id).toString()","name":"person.name"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_17/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_17/mapping.json
deleted file mode 100644
index b186fe40e00..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_17/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_17/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_17/param_def.json
deleted file mode 100644
index 506175e0b12..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_17/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"int","comment":""},"name":{"type":"string","comment":""}}},"output":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_18/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_18/expected.json
deleted file mode 100644
index 1109b26ab3e..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_18/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"age":"check (person.age).ensureType()","salary":"check (person.salary).ensureType()","isActive":"(person.isActive).toString()"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_18/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_18/mapping.json
deleted file mode 100644
index 1e49984e5f5..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_18/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"age":{"operation":"DIRECT","targetType":"int","parameters":["person.age"]},"salary":{"operation":"DIRECT","targetType":"float","parameters":["person.salary"]},"isActive":{"operation":"DIRECT","targetType":"string","parameters":["person.isActive"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_18/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_18/param_def.json
deleted file mode 100644
index 7d4c3a1abd1..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_18/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"int","comment":""},"name":{"type":"string","comment":""},"age":{"type":"float","comment":""},"isActive":{"type":"boolean","comment":""},"salary":{"type":"decimal","comment":""},"email":{"type":"string","comment":""},"phone":{"type":"string","comment":""}}},"output":{"age":{"type":"int","comment":""},"salary":{"type":"float","comment":""},"isActive":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"age":{"typeName":"float","type":"float","typeInstance":"age","nullable":false,"optional":false},"isActive":{"typeName":"boolean","type":"boolean","typeInstance":"isActive","nullable":false,"optional":false},"salary":{"typeName":"decimal","type":"decimal","typeInstance":"salary","nullable":false,"optional":false},"email":{"typeName":"string","type":"string","typeInstance":"email","nullable":false,"optional":false},"phone":{"typeName":"string","type":"string","typeInstance":"phone","nullable":false,"optional":false}}}},"outputMetadata":{"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"salary":{"typeName":"float","type":"float","typeInstance":"salary","nullable":false,"optional":false},"isActive":{"typeName":"string","type":"string","typeInstance":"isActive","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_19/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_19/expected.json
deleted file mode 100644
index 6c8630f80ee..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_19/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"check int:fromString(person.id)","age":"check (person.age).ensureType()","grade":"check (person.grade).ensureType()"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_19/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_19/mapping.json
deleted file mode 100644
index 00dcce94ee2..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_19/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["person.id"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["person.age"]},"grade":{"operation":"DIRECT","targetType":"float","parameters":["person.grade"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_19/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_19/param_def.json
deleted file mode 100644
index 5d01adfd2f9..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_19/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string","comment":""},"age":{"type":"float","comment":""},"grade":{"type":"decimal","comment":""}}},"output":{"id":{"type":"int","comment":""},"name":{"type":"string","comment":""},"age":{"type":"int","comment":""},"isActive":{"type":"boolean","comment":""},"grade":{"type":"float","comment":""},"tuition":{"type":"decimal","comment":""},"phoneNumber":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"age":{"typeName":"float","type":"float","typeInstance":"age","nullable":false,"optional":false},"grade":{"typeName":"decimal","type":"decimal","typeInstance":"grade","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"isActive":{"typeName":"boolean","type":"boolean","typeInstance":"isActive","nullable":false,"optional":false},"grade":{"typeName":"float","type":"float","typeInstance":"grade","nullable":false,"optional":false},"tuition":{"typeName":"decimal","type":"decimal","typeInstance":"tuition","nullable":false,"optional":false},"phoneNumber":{"typeName":"string","type":"string","typeInstance":"phoneNumber","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_2/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_2/expected.json
deleted file mode 100644
index 34520486cfe..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_2/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"person.id","name":"person.name"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_2/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_2/mapping.json
deleted file mode 100644
index b186fe40e00..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_2/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_2/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_2/param_def.json
deleted file mode 100644
index 0b2a5785c5e..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_2/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"age":{"type":"int","comment":""},"address":{"type":"string","comment":""},"phone":{"type":"string","comment":""},"email":{"type":"string","comment":""},"gender":{"type":"string","comment":""}}},"output":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false},"phone":{"typeName":"string","type":"string","typeInstance":"phone","nullable":false,"optional":false},"email":{"typeName":"string","type":"string","typeInstance":"email","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_20/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_20/expected.json
deleted file mode 100644
index 8f80730793b..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_20/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"check int:fromString(person.id)","name":"person.name","age":"check (person.age).ensureType()","isActive":"(person.isActive).toString()","phoneNumber":"person.phone"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_20/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_20/mapping.json
deleted file mode 100644
index 38abc98967d..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_20/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]},"age":{"operation":"DIRECT","targetType":"float","parameters":["person.age"]},"isActive":{"operation":"DIRECT","targetType":"string","parameters":["person.isActive"]},"phoneNumber":{"operation":"DIRECT","targetType":"string","parameters":["person.phone"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_20/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_20/param_def.json
deleted file mode 100644
index a6067571336..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_20/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"age":{"type":"int","comment":""},"isActive":{"type":"boolean","comment":""},"salary":{"type":"decimal","comment":""},"email":{"type":"string","comment":""},"phone":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"name":{"type":"string","comment":""},"age":{"type":"float","comment":""},"isActive":{"type":"string","comment":""},"grade":{"type":"float","comment":""},"tuition":{"type":"decimal","comment":""},"phoneNumber":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"isActive":{"typeName":"boolean","type":"boolean","typeInstance":"isActive","nullable":false,"optional":false},"salary":{"typeName":"decimal","type":"decimal","typeInstance":"salary","nullable":false,"optional":false},"email":{"typeName":"string","type":"string","typeInstance":"email","nullable":false,"optional":false},"phone":{"typeName":"string","type":"string","typeInstance":"phone","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"age":{"typeName":"float","type":"float","typeInstance":"age","nullable":false,"optional":false},"isActive":{"typeName":"string","type":"string","typeInstance":"isActive","nullable":false,"optional":false},"grade":{"typeName":"float","type":"float","typeInstance":"grade","nullable":false,"optional":false},"tuition":{"typeName":"decimal","type":"decimal","typeInstance":"tuition","nullable":false,"optional":false},"phoneNumber":{"typeName":"string","type":"string","typeInstance":"phoneNumber","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_21/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_21/expected.json
deleted file mode 100644
index 66a86acea4c..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_21/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"(person.id).toString()","name":"person.name","course":"{\n courseId: check (person.courseId).ensureType(),\ntitle: (person.courseId).toString() \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_21/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_21/mapping.json
deleted file mode 100644
index de5724bfb10..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_21/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]},"course":{"courseId":{"operation":"DIRECT","targetType":"decimal","parameters":["person.courseId"]},"title":{"operation":"DIRECT","targetType":"string","parameters":["person.courseId"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_21/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_21/param_def.json
deleted file mode 100644
index 6f1748f3ae2..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_21/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"int","comment":""},"name":{"type":"string","comment":""},"courseId":{"type":"int","comment":""}}},"output":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"course":{"courseId":{"type":"decimal","comment":""},"title":{"type":"string","comment":""}}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"courseId":{"typeName":"int","type":"int","typeInstance":"courseId","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"courseId":{"typeName":"decimal","type":"decimal","typeInstance":"courseId","nullable":false,"optional":false},"title":{"typeName":"string","type":"string","typeInstance":"title","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_22/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_22/expected.json
deleted file mode 100644
index 065d407c731..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_22/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"(person.id).toString()","age":"check (person.age).ensureType()","courseCredits":"check float:fromString(person.course.courseCredits)"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_22/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_22/mapping.json
deleted file mode 100644
index abf38b42ee0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_22/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["person.age"]},"courseCredits":{"operation":"DIRECT","targetType":"float","parameters":["person.course.courseCredits"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_22/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_22/param_def.json
deleted file mode 100644
index 38f1f03de2b..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_22/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"int","comment":""},"age":{"type":"float","comment":""},"course":{"id":{"type":"int","comment":""},"courseCredits":{"type":"string","comment":""}}}},"output":{"id":{"type":"string","comment":""},"age":{"type":"int","comment":""},"courseCredits":{"type":"float","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"age":{"typeName":"float","type":"float","typeInstance":"age","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"courseCredits":{"typeName":"string","type":"string","typeInstance":"courseCredits","nullable":false,"optional":false}}}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"courseCredits":{"typeName":"float","type":"float","typeInstance":"courseCredits","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_23/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_23/expected.json
deleted file mode 100644
index 65cf6f38f4c..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_23/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"(person.id).toString()","age":"check int:fromString(person.age)","name":"person.name","course":"{\n id: person.course.id,\ntitle: person.course.title \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_23/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_23/mapping.json
deleted file mode 100644
index e5102f8e836..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_23/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["person.age"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]},"course":{"id":{"operation":"DIRECT","targetType":"int","parameters":["person.course.id"]},"title":{"operation":"DIRECT","targetType":"string","parameters":["person.course.title"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_23/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_23/param_def.json
deleted file mode 100644
index 7aed558ec2d..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_23/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"int","comment":""},"age":{"type":"string","comment":""},"name":{"type":"string","comment":""},"course":{"id":{"type":"int","comment":""},"title":{"type":"string","comment":""}}}},"output":{"id":{"type":"string","comment":""},"age":{"type":"int","comment":""},"name":{"type":"string","comment":""},"course":{"id":{"type":"int","comment":""},"title":{"type":"string","comment":""}}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"age":{"typeName":"string","type":"string","typeInstance":"age","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"title":{"typeName":"string","type":"string","typeInstance":"title","nullable":false,"optional":false}}}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"title":{"typeName":"string","type":"string","typeInstance":"title","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_24/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_24/expected.json
deleted file mode 100644
index 89a062492be..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_24/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"(person.id).toString()","name":"check int:fromString(person.age)","courseId":"(course.id).toString()","courseTitle":"course.title"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_24/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_24/mapping.json
deleted file mode 100644
index 1f586c2b06c..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_24/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"int","parameters":["person.age"]},"courseId":{"operation":"DIRECT","targetType":"string","parameters":["course.id"]},"courseTitle":{"operation":"DIRECT","targetType":"string","parameters":["course.title"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_24/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_24/param_def.json
deleted file mode 100644
index a4dd71cc6ba..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_24/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"int","comment":""},"age":{"type":"string","comment":""}},"course":{"id":{"type":"float","comment":""},"title":{"type":"string","comment":""}}},"output":{"id":{"type":"string","comment":""},"name":{"type":"int","comment":""},"courseId":{"type":"string","comment":""},"courseTitle":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"age":{"typeName":"string","type":"string","typeInstance":"age","nullable":false,"optional":false}}},"course":{"isArrayType":false,"parameterName":"course","parameterType":"Course","type":"record","fields":{"id":{"typeName":"float","type":"float","typeInstance":"id","nullable":false,"optional":false},"title":{"typeName":"string","type":"string","typeInstance":"title","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"int","type":"int","typeInstance":"name","nullable":false,"optional":false},"courseId":{"typeName":"string","type":"string","typeInstance":"courseId","nullable":false,"optional":false},"courseTitle":{"typeName":"string","type":"string","typeInstance":"courseTitle","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_25/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_25/expected.json
deleted file mode 100644
index 4caf87a1745..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_25/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"(person.id).toString()","firstName":"person.firstName","age":"check int:fromString(person.age)","weight":"check float:fromString(person.weight)","totalCredits":"check (person.totalCredits).ensureType()","isRegistered":"(person.isRegistered).toString()","course":"{\n id: (person.courseId).toString(),\nname: person.courseName \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_25/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_25/mapping.json
deleted file mode 100644
index e701043993c..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_25/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["person.firstName"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["person.age"]},"weight":{"operation":"DIRECT","targetType":"float","parameters":["person.weight"]},"totalCredits":{"operation":"DIRECT","targetType":"float","parameters":["person.totalCredits"]},"isRegistered":{"operation":"DIRECT","targetType":"string","parameters":["person.isRegistered"]},"course":{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.courseId"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.courseName"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_25/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_25/param_def.json
deleted file mode 100644
index 5a6584e1551..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_25/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"int","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string","comment":""},"age":{"type":"string","comment":""},"country":{"type":"string","comment":""},"visaType":{"type":"string","comment":""},"totalCredits":{"type":"int","comment":""},"isRegistered":{"type":"boolean","comment":""},"courseId":{"type":"int","comment":""},"courseName":{"type":"string","comment":""},"weight":{"type":"string","comment":""}}},"output":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"weight":{"type":"float","comment":""},"totalCredits":{"type":"float","comment":""},"salary":{"type":"decimal","comment":""},"isRegistered":{"type":"string","comment":""},"course":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""}}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"typeName":"string","type":"string","typeInstance":"lastName","nullable":false,"optional":false},"age":{"typeName":"string","type":"string","typeInstance":"age","nullable":false,"optional":false},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"visaType":{"typeName":"string","type":"string","typeInstance":"visaType","nullable":false,"optional":false},"totalCredits":{"typeName":"int","type":"int","typeInstance":"totalCredits","nullable":false,"optional":false},"isRegistered":{"typeName":"boolean","type":"boolean","typeInstance":"isRegistered","nullable":false,"optional":false},"courseId":{"typeName":"int","type":"int","typeInstance":"courseId","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false},"weight":{"typeName":"string","type":"string","typeInstance":"weight","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"weight":{"typeName":"float","type":"float","typeInstance":"weight","nullable":false,"optional":false},"totalCredits":{"typeName":"float","type":"float","typeInstance":"totalCredits","nullable":false,"optional":false},"salary":{"typeName":"decimal","type":"decimal","typeInstance":"salary","nullable":false,"optional":false},"isRegistered":{"typeName":"string","type":"string","typeInstance":"isRegistered","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_3/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_3/expected.json
deleted file mode 100644
index 34520486cfe..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_3/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"person.id","name":"person.name"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_3/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_3/mapping.json
deleted file mode 100644
index b186fe40e00..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_3/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_3/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_3/param_def.json
deleted file mode 100644
index 5edc9322f62..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_3/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""}}},"output":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"course":{"type":"string","comment":""},"year":{"type":"int","comment":""},"advisor":{"type":"string","comment":""},"department":{"type":"string","comment":""},"gpa":{"type":"float","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"course":{"typeName":"string","type":"string","typeInstance":"course","nullable":false,"optional":false},"year":{"typeName":"int","type":"int","typeInstance":"year","nullable":false,"optional":false},"advisor":{"typeName":"string","type":"string","typeInstance":"advisor","nullable":false,"optional":false},"department":{"typeName":"string","type":"string","typeInstance":"department","nullable":false,"optional":false},"gpa":{"typeName":"float","type":"float","typeInstance":"gpa","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_4/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_4/expected.json
deleted file mode 100644
index 34520486cfe..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_4/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"person.id","name":"person.name"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_4/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_4/mapping.json
deleted file mode 100644
index b186fe40e00..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_4/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_4/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_4/param_def.json
deleted file mode 100644
index 5edc9322f62..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_4/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""}}},"output":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"course":{"type":"string","comment":""},"year":{"type":"int","comment":""},"advisor":{"type":"string","comment":""},"department":{"type":"string","comment":""},"gpa":{"type":"float","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"course":{"typeName":"string","type":"string","typeInstance":"course","nullable":false,"optional":false},"year":{"typeName":"int","type":"int","typeInstance":"year","nullable":false,"optional":false},"advisor":{"typeName":"string","type":"string","typeInstance":"advisor","nullable":false,"optional":false},"department":{"typeName":"string","type":"string","typeInstance":"department","nullable":false,"optional":false},"gpa":{"typeName":"float","type":"float","typeInstance":"gpa","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_5/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_5/expected.json
deleted file mode 100644
index 5070c5cc52a..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_5/expected.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-    "id": "person.id",
-    "name": "person.name",
-    "course": "{\n courseId: person.courseId \n}"
-}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_5/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_5/mapping.json
deleted file mode 100644
index 7fccf9f8d37..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_5/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]},"course":{"courseId":{"operation":"DIRECT","targetType":"string","parameters":["person.courseId"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_5/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_5/param_def.json
deleted file mode 100644
index 6571aaa52bd..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_5/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"courseId":{"type":"string","comment":""}}},"output":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"course":{"courseId":{"type":"string","comment":""},"courseName":{"type":"string","comment":""}}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"courseId":{"typeName":"string","type":"string","typeInstance":"courseId","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"courseId":{"typeName":"string","type":"string","typeInstance":"courseId","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_6/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_6/expected.json
deleted file mode 100644
index b63f397582b..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_6/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"person.id","name":"person.name","courseName":"person.course.courseName"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_6/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_6/mapping.json
deleted file mode 100644
index 3406f226f6a..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_6/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]},"courseName":{"operation":"DIRECT","targetType":"string","parameters":["person.course.courseName"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_6/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_6/param_def.json
deleted file mode 100644
index 9340319d678..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_6/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"course":{"courseId":{"type":"string","comment":""},"courseName":{"type":"string","comment":""}}}},"output":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"courseName":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"courseId":{"typeName":"string","type":"string","typeInstance":"courseId","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false}}}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_7/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_7/expected.json
deleted file mode 100644
index b63f397582b..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_7/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"person.id","name":"person.name","courseName":"person.course.courseName"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_7/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_7/mapping.json
deleted file mode 100644
index 3406f226f6a..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_7/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]},"courseName":{"operation":"DIRECT","targetType":"string","parameters":["person.course.courseName"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_7/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_7/param_def.json
deleted file mode 100644
index 9340319d678..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_7/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"course":{"courseId":{"type":"string","comment":""},"courseName":{"type":"string","comment":""}}}},"output":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"courseName":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"courseId":{"typeName":"string","type":"string","typeInstance":"courseId","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false}}}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_8/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_8/expected.json
deleted file mode 100644
index b63f397582b..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_8/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"person.id","name":"person.name","courseName":"person.course.courseName"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_8/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_8/mapping.json
deleted file mode 100644
index 3406f226f6a..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_8/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string","parameters":["person.id"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.name"]},"courseName":{"operation":"DIRECT","targetType":"string","parameters":["person.course.courseName"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_8/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_8/param_def.json
deleted file mode 100644
index 9340319d678..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_8/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"course":{"courseId":{"type":"string","comment":""},"courseName":{"type":"string","comment":""}}}},"output":{"id":{"type":"string","comment":""},"name":{"type":"string","comment":""},"courseName":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"course":{"nullable":false,"optional":false,"type":"record","typeInstance":"course","typeName":"record","fields":{"courseId":{"typeName":"string","type":"string","typeInstance":"courseId","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false}}}}}},"outputMetadata":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"courseName":{"typeName":"string","type":"string","typeInstance":"courseName","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_9/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_9/expected.json
deleted file mode 100644
index 3dad5e12a43..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_9/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":"person.personId","name":"person.fullName"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_9/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_9/mapping.json
deleted file mode 100644
index f84fc9352a4..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_9/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"studentId":{"operation":"DIRECT","targetType":"string","parameters":["person.personId"]},"name":{"operation":"DIRECT","targetType":"string","parameters":["person.fullName"]}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_9/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_9/param_def.json
deleted file mode 100644
index c6bb3c3267c..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/direct_operation/primitive/case_9/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"personId":{"type":"string","comment":""},"fullName":{"type":"string","comment":""}}},"output":{"studentId":{"type":"string","comment":""},"name":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"personId":{"typeName":"string","type":"string","typeInstance":"personId","nullable":false,"optional":false},"fullName":{"typeName":"string","type":"string","typeInstance":"fullName","nullable":false,"optional":false}}}},"outputMetadata":{"studentId":{"typeName":"string","type":"string","typeInstance":"studentId","nullable":false,"optional":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_1/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_1/expected.json
deleted file mode 100644
index cace6ce847a..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_1/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"student.id","bio":"{\n name: student.studentName,\ngender: student.gender,\nage: student.age \n}","academicRecord":"{\n major: student.academicMajor,\nsemesterGPA: student.semesterGPA \n}","accommodationDetails":"{\n numberOfRoomates: (student.roommates).length(),\naddress: student.address \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_1/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_1/mapping.json
deleted file mode 100644
index ac1d601fdb0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_1/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["student.id"]},"bio":{"name":{"operation":"DIRECT","targetType":"string","parameters":["student.studentName"]},"gender":{"operation":"DIRECT","targetType":"string","parameters":["student.gender"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["student.age"]}},"academicRecord":{"major":{"operation":"DIRECT","targetType":"string","parameters":["student.academicMajor"]},"semesterGPA":{"operation":"DIRECT","targetType":"string[]","parameters":["student.semesterGPA"]}},"accommodationDetails":{"numberOfRoomates":{"operation":"LENGTH","targetType":"int","parameters":["student.roommates"]},"address":{"operation":"DIRECT","targetType":"string","parameters":["student.address"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_1/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_1/param_def.json
deleted file mode 100644
index ec1c7cf554e..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_1/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"student":{"id":{"type":"int","comment":""},"studentName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"gender":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""},"academicMajor":{"type":"string","comment":""},"roommates":{"type":"record[]","comment":""},"address":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"bio":{"name":{"type":"string","comment":""},"gender":{"type":"string","comment":""},"age":{"type":"int","comment":""}},"academicRecord":{"major":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""}},"accommodationDetails":{"numberOfRoomates":{"type":"int","comment":""},"address":{"type":"string","comment":""}}},"inputMetadata":{"student":{"isArrayType":false,"parameterName":"student","parameterType":"Student","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"studentName":{"typeName":"string","type":"string","typeInstance":"studentName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false},"academicMajor":{"typeName":"string","type":"string","typeInstance":"academicMajor","nullable":false,"optional":false},"roommates":{"typeName":"record[]","type":"record[]","typeInstance":"roommates","nullable":false,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"bio":{"nullable":false,"optional":false,"type":"record","typeInstance":"bio","typeName":"record","fields":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false}}},"academicRecord":{"nullable":false,"optional":false,"type":"record","typeInstance":"academicRecord","typeName":"record","fields":{"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false}}},"accommodationDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"accommodationDetails","typeName":"record","fields":{"numberOfRoomates":{"typeName":"int","type":"int","typeInstance":"numberOfRoomates","nullable":false,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_2/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_2/expected.json
deleted file mode 100644
index cace6ce847a..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_2/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"student.id","bio":"{\n name: student.studentName,\ngender: student.gender,\nage: student.age \n}","academicRecord":"{\n major: student.academicMajor,\nsemesterGPA: student.semesterGPA \n}","accommodationDetails":"{\n numberOfRoomates: (student.roommates).length(),\naddress: student.address \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_2/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_2/mapping.json
deleted file mode 100644
index ac1d601fdb0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_2/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["student.id"]},"bio":{"name":{"operation":"DIRECT","targetType":"string","parameters":["student.studentName"]},"gender":{"operation":"DIRECT","targetType":"string","parameters":["student.gender"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["student.age"]}},"academicRecord":{"major":{"operation":"DIRECT","targetType":"string","parameters":["student.academicMajor"]},"semesterGPA":{"operation":"DIRECT","targetType":"string[]","parameters":["student.semesterGPA"]}},"accommodationDetails":{"numberOfRoomates":{"operation":"LENGTH","targetType":"int","parameters":["student.roommates"]},"address":{"operation":"DIRECT","targetType":"string","parameters":["student.address"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_2/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_2/param_def.json
deleted file mode 100644
index 78987006e67..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_2/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"student":{"id":{"type":"int","comment":""},"studentName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"gender":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""},"academicMajor":{"type":"string","comment":""},"roommates":{"type":"record[]","comment":""},"address":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"bio":{"name":{"type":"string","comment":""},"gender":{"type":"string","comment":""},"age":{"type":"int","comment":""}},"academicRecord":{"major":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""}},"accommodationDetails":{"numberOfRoomates":{"type":"int","comment":""},"address":{"type":"string","comment":""}}},"inputMetadata":{"student":{"isArrayType":false,"parameterName":"student","parameterType":"Student","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"studentName":{"typeName":"string","type":"string","typeInstance":"studentName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false},"academicMajor":{"typeName":"string","type":"string","typeInstance":"academicMajor","nullable":false,"optional":false},"roommates":{"typeName":"record[]","type":"record[]","typeInstance":"roommates","nullable":false,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"bio":{"nullable":false,"optional":false,"type":"record","typeInstance":"bio","typeName":"record","fields":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false}}},"academicRecord":{"nullable":false,"optional":false,"type":"record","typeInstance":"academicRecord","typeName":"record","fields":{"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false}}},"accommodationDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"accommodationDetails","typeName":"record","fields":{"numberOfRoomates":{"typeName":"int","type":"int","typeInstance":"numberOfRoomates","nullable":true,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_3/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_3/expected.json
deleted file mode 100644
index cace6ce847a..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_3/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"student.id","bio":"{\n name: student.studentName,\ngender: student.gender,\nage: student.age \n}","academicRecord":"{\n major: student.academicMajor,\nsemesterGPA: student.semesterGPA \n}","accommodationDetails":"{\n numberOfRoomates: (student.roommates).length(),\naddress: student.address \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_3/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_3/mapping.json
deleted file mode 100644
index ac1d601fdb0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_3/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["student.id"]},"bio":{"name":{"operation":"DIRECT","targetType":"string","parameters":["student.studentName"]},"gender":{"operation":"DIRECT","targetType":"string","parameters":["student.gender"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["student.age"]}},"academicRecord":{"major":{"operation":"DIRECT","targetType":"string","parameters":["student.academicMajor"]},"semesterGPA":{"operation":"DIRECT","targetType":"string[]","parameters":["student.semesterGPA"]}},"accommodationDetails":{"numberOfRoomates":{"operation":"LENGTH","targetType":"int","parameters":["student.roommates"]},"address":{"operation":"DIRECT","targetType":"string","parameters":["student.address"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_3/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_3/param_def.json
deleted file mode 100644
index 90aed10773f..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_3/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"student":{"id":{"type":"int","comment":""},"studentName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"gender":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""},"academicMajor":{"type":"string","comment":""},"roommates":{"type":"record[]","comment":""},"address":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"bio":{"name":{"type":"string","comment":""},"gender":{"type":"string","comment":""},"age":{"type":"int","comment":""}},"academicRecord":{"major":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""}},"accommodationDetails":{"numberOfRoomates":{"type":"int","comment":""},"address":{"type":"string","comment":""}}},"inputMetadata":{"student":{"isArrayType":false,"parameterName":"student","parameterType":"Student","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"studentName":{"typeName":"string","type":"string","typeInstance":"studentName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false},"academicMajor":{"typeName":"string","type":"string","typeInstance":"academicMajor","nullable":false,"optional":false},"roommates":{"typeName":"record[]","type":"record[]","typeInstance":"roommates","nullable":false,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"bio":{"nullable":false,"optional":false,"type":"record","typeInstance":"bio","typeName":"record","fields":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false}}},"academicRecord":{"nullable":false,"optional":false,"type":"record","typeInstance":"academicRecord","typeName":"record","fields":{"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false}}},"accommodationDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"accommodationDetails","typeName":"record","fields":{"numberOfRoomates":{"typeName":"int","type":"int","typeInstance":"numberOfRoomates","nullable":true,"optional":true},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_4/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_4/expected.json
deleted file mode 100644
index de8208c0b37..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_4/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"student.id","bio":"{\n name: student.studentName,\ngender: student.gender,\nage: student.age \n}","academicRecord":"{\n major: student.academicMajor,\nsemesterGPA: student.semesterGPA \n}","accommodationDetails":"{\n numberOfRoomates: (student.roommates?:[]).length(),\naddress: student.address \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_4/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_4/mapping.json
deleted file mode 100644
index ac1d601fdb0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_4/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["student.id"]},"bio":{"name":{"operation":"DIRECT","targetType":"string","parameters":["student.studentName"]},"gender":{"operation":"DIRECT","targetType":"string","parameters":["student.gender"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["student.age"]}},"academicRecord":{"major":{"operation":"DIRECT","targetType":"string","parameters":["student.academicMajor"]},"semesterGPA":{"operation":"DIRECT","targetType":"string[]","parameters":["student.semesterGPA"]}},"accommodationDetails":{"numberOfRoomates":{"operation":"LENGTH","targetType":"int","parameters":["student.roommates"]},"address":{"operation":"DIRECT","targetType":"string","parameters":["student.address"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_4/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_4/param_def.json
deleted file mode 100644
index 9a223df332d..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_4/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"student":{"id":{"type":"int","comment":""},"studentName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"gender":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""},"academicMajor":{"type":"string","comment":""},"roommates":{"type":"record[]","comment":""},"address":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"bio":{"name":{"type":"string","comment":""},"gender":{"type":"string","comment":""},"age":{"type":"int","comment":""}},"academicRecord":{"major":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""}},"accommodationDetails":{"numberOfRoomates":{"type":"int","comment":""},"address":{"type":"string","comment":""}}},"inputMetadata":{"student":{"isArrayType":false,"parameterName":"student","parameterType":"Student","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"studentName":{"typeName":"string","type":"string","typeInstance":"studentName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false},"academicMajor":{"typeName":"string","type":"string","typeInstance":"academicMajor","nullable":false,"optional":false},"roommates":{"typeName":"record[]","type":"record[]","typeInstance":"roommates","nullable":false,"optional":true},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"bio":{"nullable":false,"optional":false,"type":"record","typeInstance":"bio","typeName":"record","fields":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false}}},"academicRecord":{"nullable":false,"optional":false,"type":"record","typeInstance":"academicRecord","typeName":"record","fields":{"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false}}},"accommodationDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"accommodationDetails","typeName":"record","fields":{"numberOfRoomates":{"typeName":"int","type":"int","typeInstance":"numberOfRoomates","nullable":false,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_5/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_5/expected.json
deleted file mode 100644
index de8208c0b37..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_5/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"student.id","bio":"{\n name: student.studentName,\ngender: student.gender,\nage: student.age \n}","academicRecord":"{\n major: student.academicMajor,\nsemesterGPA: student.semesterGPA \n}","accommodationDetails":"{\n numberOfRoomates: (student.roommates?:[]).length(),\naddress: student.address \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_5/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_5/mapping.json
deleted file mode 100644
index ac1d601fdb0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_5/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["student.id"]},"bio":{"name":{"operation":"DIRECT","targetType":"string","parameters":["student.studentName"]},"gender":{"operation":"DIRECT","targetType":"string","parameters":["student.gender"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["student.age"]}},"academicRecord":{"major":{"operation":"DIRECT","targetType":"string","parameters":["student.academicMajor"]},"semesterGPA":{"operation":"DIRECT","targetType":"string[]","parameters":["student.semesterGPA"]}},"accommodationDetails":{"numberOfRoomates":{"operation":"LENGTH","targetType":"int","parameters":["student.roommates"]},"address":{"operation":"DIRECT","targetType":"string","parameters":["student.address"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_5/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_5/param_def.json
deleted file mode 100644
index b2af9266230..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_5/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"student":{"id":{"type":"int","comment":""},"studentName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"gender":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""},"academicMajor":{"type":"string","comment":""},"roommates":{"type":"Student[]|()","comment":""},"address":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"bio":{"name":{"type":"string","comment":""},"gender":{"type":"string","comment":""},"age":{"type":"int","comment":""}},"academicRecord":{"major":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""}},"accommodationDetails":{"numberOfRoomates":{"type":"int","comment":""},"address":{"type":"string","comment":""}}},"inputMetadata":{"student":{"isArrayType":false,"parameterName":"student","parameterType":"Student","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"studentName":{"typeName":"string","type":"string","typeInstance":"studentName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false},"academicMajor":{"typeName":"string","type":"string","typeInstance":"academicMajor","nullable":false,"optional":false},"roommates":{"optional":false,"typeName":"Student[]|()","type":"union[]|()","typeInstance":"roommates","nullableArray":false,"nullable":true},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"bio":{"nullable":false,"optional":false,"type":"record","typeInstance":"bio","typeName":"record","fields":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false}}},"academicRecord":{"nullable":false,"optional":false,"type":"record","typeInstance":"academicRecord","typeName":"record","fields":{"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false}}},"accommodationDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"accommodationDetails","typeName":"record","fields":{"numberOfRoomates":{"typeName":"int","type":"int","typeInstance":"numberOfRoomates","nullable":false,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_6/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_6/expected.json
deleted file mode 100644
index de8208c0b37..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_6/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"student.id","bio":"{\n name: student.studentName,\ngender: student.gender,\nage: student.age \n}","academicRecord":"{\n major: student.academicMajor,\nsemesterGPA: student.semesterGPA \n}","accommodationDetails":"{\n numberOfRoomates: (student.roommates?:[]).length(),\naddress: student.address \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_6/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_6/mapping.json
deleted file mode 100644
index ac1d601fdb0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_6/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["student.id"]},"bio":{"name":{"operation":"DIRECT","targetType":"string","parameters":["student.studentName"]},"gender":{"operation":"DIRECT","targetType":"string","parameters":["student.gender"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["student.age"]}},"academicRecord":{"major":{"operation":"DIRECT","targetType":"string","parameters":["student.academicMajor"]},"semesterGPA":{"operation":"DIRECT","targetType":"string[]","parameters":["student.semesterGPA"]}},"accommodationDetails":{"numberOfRoomates":{"operation":"LENGTH","targetType":"int","parameters":["student.roommates"]},"address":{"operation":"DIRECT","targetType":"string","parameters":["student.address"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_6/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_6/param_def.json
deleted file mode 100644
index fca0a743172..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_6/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"student":{"id":{"type":"int","comment":""},"studentName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"gender":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""},"academicMajor":{"type":"string","comment":""},"roommates":{"type":"record[]","comment":""},"address":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"bio":{"name":{"type":"string","comment":""},"gender":{"type":"string","comment":""},"age":{"type":"int","comment":""}},"academicRecord":{"major":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""}},"accommodationDetails":{"numberOfRoomates":{"type":"int","comment":""},"address":{"type":"string","comment":""}}},"inputMetadata":{"student":{"isArrayType":false,"parameterName":"student","parameterType":"Student","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"studentName":{"typeName":"string","type":"string","typeInstance":"studentName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false},"academicMajor":{"typeName":"string","type":"string","typeInstance":"academicMajor","nullable":false,"optional":false},"roommates":{"typeName":"record[]","type":"record[]","typeInstance":"roommates","nullable":false,"optional":true},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"bio":{"nullable":false,"optional":false,"type":"record","typeInstance":"bio","typeName":"record","fields":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false}}},"academicRecord":{"nullable":false,"optional":false,"type":"record","typeInstance":"academicRecord","typeName":"record","fields":{"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false}}},"accommodationDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"accommodationDetails","typeName":"record","fields":{"numberOfRoomates":{"typeName":"int","type":"int","typeInstance":"numberOfRoomates","nullable":false,"optional":true},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_7/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_7/expected.json
deleted file mode 100644
index de8208c0b37..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_7/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"student.id","bio":"{\n name: student.studentName,\ngender: student.gender,\nage: student.age \n}","academicRecord":"{\n major: student.academicMajor,\nsemesterGPA: student.semesterGPA \n}","accommodationDetails":"{\n numberOfRoomates: (student.roommates?:[]).length(),\naddress: student.address \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_7/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_7/mapping.json
deleted file mode 100644
index 7ff5a647111..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_7/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["student.id"]},"bio":{"name":{"operation":"DIRECT","targetType":"string","parameters":["student.studentName"]},"gender":{"operation":"DIRECT","targetType":"string","parameters":["student.gender"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["student.age"]}},"academicRecord":{"major":{"operation":"DIRECT","targetType":"string","parameters":["student.academicMajor"]},"semesterGPA":{"operation":"DIRECT","targetType":"string[]","parameters":["student.semesterGPA"]}},"accommodationDetails":{"numberOfRoomates":{"operation":"LENGTH","targetType":"int|()","parameters":["student.roommates"]},"address":{"operation":"DIRECT","targetType":"string","parameters":["student.address"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_7/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_7/param_def.json
deleted file mode 100644
index cf6d1bd799f..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_7/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"student":{"id":{"type":"int","comment":""},"studentName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"gender":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""},"academicMajor":{"type":"string","comment":""},"roommates":{"type":"record[]","comment":""},"address":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"bio":{"name":{"type":"string","comment":""},"gender":{"type":"string","comment":""},"age":{"type":"int","comment":""}},"academicRecord":{"major":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""}},"accommodationDetails":{"numberOfRoomates":{"type":"int|()","comment":""},"address":{"type":"string","comment":""}}},"inputMetadata":{"student":{"isArrayType":false,"parameterName":"student","parameterType":"Student","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"studentName":{"typeName":"string","type":"string","typeInstance":"studentName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false},"academicMajor":{"typeName":"string","type":"string","typeInstance":"academicMajor","nullable":false,"optional":false},"roommates":{"typeName":"record[]","type":"record[]","typeInstance":"roommates","nullable":false,"optional":true},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"bio":{"nullable":false,"optional":false,"type":"record","typeInstance":"bio","typeName":"record","fields":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false}}},"academicRecord":{"nullable":false,"optional":false,"type":"record","typeInstance":"academicRecord","typeName":"record","fields":{"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false}}},"accommodationDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"accommodationDetails","typeName":"record","fields":{"numberOfRoomates":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"numberOfRoomates","nullable":true},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_8/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_8/expected.json
deleted file mode 100644
index de8208c0b37..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_8/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"student.id","bio":"{\n name: student.studentName,\ngender: student.gender,\nage: student.age \n}","academicRecord":"{\n major: student.academicMajor,\nsemesterGPA: student.semesterGPA \n}","accommodationDetails":"{\n numberOfRoomates: (student.roommates?:[]).length(),\naddress: student.address \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_8/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_8/mapping.json
deleted file mode 100644
index ac1d601fdb0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_8/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["student.id"]},"bio":{"name":{"operation":"DIRECT","targetType":"string","parameters":["student.studentName"]},"gender":{"operation":"DIRECT","targetType":"string","parameters":["student.gender"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["student.age"]}},"academicRecord":{"major":{"operation":"DIRECT","targetType":"string","parameters":["student.academicMajor"]},"semesterGPA":{"operation":"DIRECT","targetType":"string[]","parameters":["student.semesterGPA"]}},"accommodationDetails":{"numberOfRoomates":{"operation":"LENGTH","targetType":"int","parameters":["student.roommates"]},"address":{"operation":"DIRECT","targetType":"string","parameters":["student.address"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_8/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_8/param_def.json
deleted file mode 100644
index e8a8ffe29a2..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_8/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"student":{"id":{"type":"int","comment":""},"studentName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"gender":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""},"academicMajor":{"type":"string","comment":""},"roommates":{"type":"record[]","comment":""},"address":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"bio":{"name":{"type":"string","comment":""},"gender":{"type":"string","comment":""},"age":{"type":"int","comment":""}},"academicRecord":{"major":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""}},"accommodationDetails":{"numberOfRoomates":{"type":"int|()","comment":""},"address":{"type":"string","comment":""}}},"inputMetadata":{"student":{"isArrayType":false,"parameterName":"student","parameterType":"Student","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"studentName":{"typeName":"string","type":"string","typeInstance":"studentName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false},"academicMajor":{"typeName":"string","type":"string","typeInstance":"academicMajor","nullable":false,"optional":false},"roommates":{"typeName":"record[]","type":"record[]","typeInstance":"roommates","nullable":false,"optional":true},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"bio":{"nullable":false,"optional":false,"type":"record","typeInstance":"bio","typeName":"record","fields":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false}}},"academicRecord":{"nullable":false,"optional":false,"type":"record","typeInstance":"academicRecord","typeName":"record","fields":{"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false}}},"accommodationDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"accommodationDetails","typeName":"record","fields":{"numberOfRoomates":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"numberOfRoomates","nullable":true},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_9/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_9/expected.json
deleted file mode 100644
index cace6ce847a..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_9/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"student.id","bio":"{\n name: student.studentName,\ngender: student.gender,\nage: student.age \n}","academicRecord":"{\n major: student.academicMajor,\nsemesterGPA: student.semesterGPA \n}","accommodationDetails":"{\n numberOfRoomates: (student.roommates).length(),\naddress: student.address \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_9/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_9/mapping.json
deleted file mode 100644
index ac1d601fdb0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_9/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["student.id"]},"bio":{"name":{"operation":"DIRECT","targetType":"string","parameters":["student.studentName"]},"gender":{"operation":"DIRECT","targetType":"string","parameters":["student.gender"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["student.age"]}},"academicRecord":{"major":{"operation":"DIRECT","targetType":"string","parameters":["student.academicMajor"]},"semesterGPA":{"operation":"DIRECT","targetType":"string[]","parameters":["student.semesterGPA"]}},"accommodationDetails":{"numberOfRoomates":{"operation":"LENGTH","targetType":"int","parameters":["student.roommates"]},"address":{"operation":"DIRECT","targetType":"string","parameters":["student.address"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_9/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_9/param_def.json
deleted file mode 100644
index d06ed626089..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/length_operation/case_9/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"student":{"id":{"type":"int","comment":""},"studentName":{"type":"string","comment":""},"age":{"type":"int","comment":""},"gender":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""},"academicMajor":{"type":"string","comment":""},"roommates":{"type":"record[]","comment":""},"address":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"bio":{"name":{"type":"string","comment":""},"gender":{"type":"string","comment":""},"age":{"type":"int","comment":""}},"academicRecord":{"major":{"type":"string","comment":""},"semesterGPA":{"type":"string[]","comment":""}},"accommodationDetails":{"numberOfRoomates":{"type":"int","comment":""},"address":{"type":"string","comment":""}}},"inputMetadata":{"student":{"isArrayType":false,"parameterName":"student","parameterType":"Student","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"studentName":{"typeName":"string","type":"string","typeInstance":"studentName","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false},"academicMajor":{"typeName":"string","type":"string","typeInstance":"academicMajor","nullable":false,"optional":false},"roommates":{"typeName":"record[]","type":"record[]","typeInstance":"roommates","nullable":false,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"bio":{"nullable":false,"optional":false,"type":"record","typeInstance":"bio","typeName":"record","fields":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"gender":{"typeName":"string","type":"string","typeInstance":"gender","nullable":false,"optional":false},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":false}}},"academicRecord":{"nullable":false,"optional":false,"type":"record","typeInstance":"academicRecord","typeName":"record","fields":{"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":false},"semesterGPA":{"typeName":"string[]","type":"string[]","typeInstance":"semesterGPA","nullable":false,"optional":false}}},"accommodationDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"accommodationDetails","typeName":"record","fields":{"numberOfRoomates":{"typeName":"int","type":"int","typeInstance":"numberOfRoomates","nullable":false,"optional":true},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_array_input_output/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_array_input_output/expected.json
deleted file mode 100644
index c1047564969..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_array_input_output/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"postItem.id","description":"postItem.description","author":"author","meta":"{\n tags: re `,`.split(postItem.tags),\ncategory: postItem.category,\ncreatedTimeStamp: {\n utcOffset: {\n hours: postItem.createdTimeStamp.utcOffset?.hours?:0,\nminutes: postItem.createdTimeStamp.utcOffset?.minutes?:0,\nseconds: postItem.createdTimeStamp.utcOffset?.seconds \n},\ntimeAbbrev: postItem.createdTimeStamp.timeAbbrev,\nwhich: postItem.createdTimeStamp.which,\ndayOfWeek: postItem.createdTimeStamp.dayOfWeek,\nyear: postItem.createdTimeStamp.year,\nmonth: postItem.createdTimeStamp.month,\nday: postItem.createdTimeStamp.day,\nhour: postItem.createdTimeStamp.hour,\nminute: postItem.createdTimeStamp.minute,\nsecond: postItem.createdTimeStamp.second \n} \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_array_input_output/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_array_input_output/mapping.json
deleted file mode 100644
index 88a9f3cf588..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_array_input_output/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["postItem.id"]},"description":{"operation":"DIRECT","targetType":"string","parameters":["postItem.description"]},"author":{"operation":"DIRECT","targetType":"string","parameters":["author.author"]},"meta":{"tags":{"operation":"SPLIT","targetType":"string[]","parameters":["postItem.tags",","]},"category":{"operation":"DIRECT","targetType":"string","parameters":["postItem.category"]},"createdTimeStamp":{"utcOffset":{"hours":{"operation":"DIRECT","targetType":"int","parameters":["postItem.createdTimeStamp.utcOffset.hours"]},"minutes":{"operation":"DIRECT","targetType":"int","parameters":["postItem.createdTimeStamp.utcOffset.minutes"]},"seconds":{"operation":"DIRECT","targetType":"decimal","parameters":["postItem.createdTimeStamp.utcOffset.seconds"]}},"timeAbbrev":{"operation":"DIRECT","targetType":"string","parameters":["postItem.createdTimeStamp.timeAbbrev"]},"which":{"operation":"DIRECT","targetType":"0|1","parameters":["postItem.createdTimeStamp.which"]},"dayOfWeek":{"operation":"DIRECT","targetType":"0|1|2|3|4|5|6","parameters":["postItem.createdTimeStamp.dayOfWeek"]},"year":{"operation":"DIRECT","targetType":"int","parameters":["postItem.createdTimeStamp.year"]},"month":{"operation":"DIRECT","targetType":"int","parameters":["postItem.createdTimeStamp.month"]},"day":{"operation":"DIRECT","targetType":"int","parameters":["postItem.createdTimeStamp.day"]},"hour":{"operation":"DIRECT","targetType":"int","parameters":["postItem.createdTimeStamp.hour"]},"minute":{"operation":"DIRECT","targetType":"int","parameters":["postItem.createdTimeStamp.minute"]},"second":{"operation":"DIRECT","targetType":"decimal","parameters":["postItem.createdTimeStamp.second"]}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_array_input_output/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_array_input_output/param_def.json
deleted file mode 100644
index dd62ceac8cd..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_array_input_output/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"postItem":{"id":{"type":"int","comment":""},"description":{"type":"string","comment":""},"tags":{"type":"string","comment":""},"category":{"type":"string","comment":""},"createdTimeStamp":{"utcOffset":{"hours":{"type":"int","comment":""},"minutes":{"type":"int","comment":""},"seconds":{"type":"decimal","comment":""}},"timeAbbrev":{"type":"string","comment":""},"which":{"type":"0|1","comment":""},"dayOfWeek":{"type":"0|1|2|3|4|5|6","comment":""},"year":{"type":"int","comment":""},"month":{"type":"int","comment":""},"day":{"type":"int","comment":""},"hour":{"type":"int","comment":""},"minute":{"type":"int","comment":""},"second":{"type":"decimal","comment":""}}},"author":{"author":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"description":{"type":"string","comment":""},"author":{"type":"string","comment":""},"meta":{"tags":{"type":"string[]","comment":""},"category":{"type":"string","comment":""},"createdTimeStamp":{"utcOffset":{"hours":{"type":"int","comment":""},"minutes":{"type":"int","comment":""},"seconds":{"type":"decimal","comment":""}},"timeAbbrev":{"type":"string","comment":""},"which":{"type":"0|1","comment":""},"dayOfWeek":{"type":"0|1|2|3|4|5|6","comment":""},"year":{"type":"int","comment":""},"month":{"type":"int","comment":""},"day":{"type":"int","comment":""},"hour":{"type":"int","comment":""},"minute":{"type":"int","comment":""},"second":{"type":"decimal","comment":""}}}},"inputMetadata":{"postItem":{"isArrayType":true,"parameterName":"postItem","parameterType":"Post[] ","type":"record[]","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"description":{"typeName":"string","type":"string","typeInstance":"description","nullable":false,"optional":false},"tags":{"typeName":"string","type":"string","typeInstance":"tags","nullable":false,"optional":false},"category":{"typeName":"string","type":"string","typeInstance":"category","nullable":false,"optional":false},"createdTimeStamp":{"nullable":false,"optional":false,"type":"record","typeInstance":"createdTimeStamp","typeName":"record","fields":{"utcOffset":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"utcOffset","members":{"hours":{"typeName":"int","type":"int","typeInstance":"hours","nullable":false,"optional":false},"minutes":{"typeName":"int","type":"int","typeInstance":"minutes","nullable":false,"optional":false},"seconds":{"typeName":"decimal","type":"decimal","typeInstance":"seconds","nullable":false,"optional":true}},"nullable":false},"timeAbbrev":{"typeName":"string","type":"string","typeInstance":"timeAbbrev","nullable":false,"optional":true},"which":{"optional":true,"typeName":"0|1","type":"union","typeInstance":"which","members":{"0":{"typeName":"0","type":"0","typeInstance":"0","nullable":false,"optional":false},"1":{"typeName":"1","type":"1","typeInstance":"1","nullable":false,"optional":false}},"nullable":false},"dayOfWeek":{"optional":true,"typeName":"0|1|2|3|4|5|6","type":"union","typeInstance":"dayOfWeek","members":{"0":{"typeName":"0","type":"0","typeInstance":"0","nullable":false,"optional":false},"1":{"typeName":"1","type":"1","typeInstance":"1","nullable":false,"optional":false},"2":{"typeName":"2","type":"2","typeInstance":"2","nullable":false,"optional":false},"3":{"typeName":"3","type":"3","typeInstance":"3","nullable":false,"optional":false},"4":{"typeName":"4","type":"4","typeInstance":"4","nullable":false,"optional":false},"5":{"typeName":"5","type":"5","typeInstance":"5","nullable":false,"optional":false},"6":{"typeName":"6","type":"6","typeInstance":"6","nullable":false,"optional":false}},"nullable":false},"year":{"typeName":"int","type":"int","typeInstance":"year","nullable":false,"optional":false},"month":{"typeName":"int","type":"int","typeInstance":"month","nullable":false,"optional":false},"day":{"typeName":"int","type":"int","typeInstance":"day","nullable":false,"optional":false},"hour":{"typeName":"int","type":"int","typeInstance":"hour","nullable":false,"optional":false},"minute":{"typeName":"int","type":"int","typeInstance":"minute","nullable":false,"optional":false},"second":{"typeName":"decimal","type":"decimal","typeInstance":"second","nullable":false,"optional":true}}}}},"author":{"isArrayType":false,"parameterName":"author","parameterType":"string ","type":"record","fields":{"author":{"typeName":"string","type":"string","typeInstance":"author","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"description":{"typeName":"string","type":"string","typeInstance":"description","nullable":false,"optional":false},"author":{"typeName":"string","type":"string","typeInstance":"author","nullable":false,"optional":false},"meta":{"nullable":false,"optional":false,"type":"record","typeInstance":"meta","typeName":"record","fields":{"tags":{"typeName":"string[]","type":"string[]","typeInstance":"tags","nullable":false,"optional":false},"category":{"typeName":"string","type":"string","typeInstance":"category","nullable":false,"optional":false},"createdTimeStamp":{"nullable":false,"optional":false,"type":"record","typeInstance":"createdTimeStamp","typeName":"record","fields":{"utcOffset":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"utcOffset","members":{"hours":{"typeName":"int","type":"int","typeInstance":"hours","nullable":false,"optional":false},"minutes":{"typeName":"int","type":"int","typeInstance":"minutes","nullable":false,"optional":false},"seconds":{"typeName":"decimal","type":"decimal","typeInstance":"seconds","nullable":false,"optional":true}},"nullable":false},"timeAbbrev":{"typeName":"string","type":"string","typeInstance":"timeAbbrev","nullable":false,"optional":true},"which":{"optional":true,"typeName":"0|1","type":"union","typeInstance":"which","members":{"0":{"typeName":"0","type":"0","typeInstance":"0","nullable":false,"optional":false},"1":{"typeName":"1","type":"1","typeInstance":"1","nullable":false,"optional":false}},"nullable":false},"dayOfWeek":{"optional":true,"typeName":"0|1|2|3|4|5|6","type":"union","typeInstance":"dayOfWeek","members":{"0":{"typeName":"0","type":"0","typeInstance":"0","nullable":false,"optional":false},"1":{"typeName":"1","type":"1","typeInstance":"1","nullable":false,"optional":false},"2":{"typeName":"2","type":"2","typeInstance":"2","nullable":false,"optional":false},"3":{"typeName":"3","type":"3","typeInstance":"3","nullable":false,"optional":false},"4":{"typeName":"4","type":"4","typeInstance":"4","nullable":false,"optional":false},"5":{"typeName":"5","type":"5","typeInstance":"5","nullable":false,"optional":false},"6":{"typeName":"6","type":"6","typeInstance":"6","nullable":false,"optional":false}},"nullable":false},"year":{"typeName":"int","type":"int","typeInstance":"year","nullable":false,"optional":false},"month":{"typeName":"int","type":"int","typeInstance":"month","nullable":false,"optional":false},"day":{"typeName":"int","type":"int","typeInstance":"day","nullable":false,"optional":false},"hour":{"typeName":"int","type":"int","typeInstance":"hour","nullable":false,"optional":false},"minute":{"typeName":"int","type":"int","typeInstance":"minute","nullable":false,"optional":false},"second":{"typeName":"decimal","type":"decimal","typeInstance":"second","nullable":false,"optional":true}}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_input_output/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_input_output/expected.json
deleted file mode 100644
index 4128541717b..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_input_output/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"post.id","description":"post.description","author":"author","meta":"{\n tags: re `,`.split(post.tags),\ncategory: post.category,\ncreatedTimeStamp: {\n utcOffset: {\n hours: post.createdTimeStamp.utcOffset?.hours?:0,\nminutes: post.createdTimeStamp.utcOffset?.minutes?:0,\nseconds: post.createdTimeStamp.utcOffset?.seconds \n},\ntimeAbbrev: post.createdTimeStamp.timeAbbrev,\nwhich: post.createdTimeStamp.which,\ndayOfWeek: post.createdTimeStamp.dayOfWeek,\nyear: post.createdTimeStamp.year,\nmonth: post.createdTimeStamp.month,\nday: post.createdTimeStamp.day,\nhour: post.createdTimeStamp.hour,\nminute: post.createdTimeStamp.minute,\nsecond: post.createdTimeStamp.second \n} \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_input_output/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_input_output/mapping.json
deleted file mode 100644
index 7b383c2dc72..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_input_output/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["post.id"]},"description":{"operation":"DIRECT","targetType":"string","parameters":["post.description"]},"author":{"operation":"DIRECT","targetType":"string","parameters":["author.author"]},"meta":{"tags":{"operation":"SPLIT","targetType":"string[]","parameters":["post.tags",","]},"category":{"operation":"DIRECT","targetType":"string","parameters":["post.category"]},"createdTimeStamp":{"utcOffset":{"hours":{"operation":"DIRECT","targetType":"int","parameters":["post.createdTimeStamp.utcOffset.hours"]},"minutes":{"operation":"DIRECT","targetType":"int","parameters":["post.createdTimeStamp.utcOffset.minutes"]},"seconds":{"operation":"DIRECT","targetType":"decimal","parameters":["post.createdTimeStamp.utcOffset.seconds"]}},"timeAbbrev":{"operation":"DIRECT","targetType":"string","parameters":["post.createdTimeStamp.timeAbbrev"]},"which":{"operation":"DIRECT","targetType":"0|1","parameters":["post.createdTimeStamp.which"]},"dayOfWeek":{"operation":"DIRECT","targetType":"0|1|2|3|4|5|6","parameters":["post.createdTimeStamp.dayOfWeek"]},"year":{"operation":"DIRECT","targetType":"int","parameters":["post.createdTimeStamp.year"]},"month":{"operation":"DIRECT","targetType":"int","parameters":["post.createdTimeStamp.month"]},"day":{"operation":"DIRECT","targetType":"int","parameters":["post.createdTimeStamp.day"]},"hour":{"operation":"DIRECT","targetType":"int","parameters":["post.createdTimeStamp.hour"]},"minute":{"operation":"DIRECT","targetType":"int","parameters":["post.createdTimeStamp.minute"]},"second":{"operation":"DIRECT","targetType":"decimal","parameters":["post.createdTimeStamp.second"]}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_input_output/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_input_output/param_def.json
deleted file mode 100644
index 4064beab46a..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Basic/split_operation/record_input_output/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"post":{"id":{"type":"int","comment":""},"description":{"type":"string","comment":""},"tags":{"type":"string","comment":""},"category":{"type":"string","comment":""},"createdTimeStamp":{"utcOffset":{"hours":{"type":"int","comment":""},"minutes":{"type":"int","comment":""},"seconds":{"type":"decimal","comment":""}},"timeAbbrev":{"type":"string","comment":""},"which":{"type":"0|1","comment":""},"dayOfWeek":{"type":"0|1|2|3|4|5|6","comment":""},"year":{"type":"int","comment":""},"month":{"type":"int","comment":""},"day":{"type":"int","comment":""},"hour":{"type":"int","comment":""},"minute":{"type":"int","comment":""},"second":{"type":"decimal","comment":""}}},"author":{"author":{"type":"string","comment":""}}},"output":{"id":{"type":"int","comment":""},"description":{"type":"string","comment":""},"author":{"type":"string","comment":""},"meta":{"tags":{"type":"string[]","comment":""},"category":{"type":"string","comment":""},"createdTimeStamp":{"utcOffset":{"hours":{"type":"int","comment":""},"minutes":{"type":"int","comment":""},"seconds":{"type":"decimal","comment":""}},"timeAbbrev":{"type":"string","comment":""},"which":{"type":"0|1","comment":""},"dayOfWeek":{"type":"0|1|2|3|4|5|6","comment":""},"year":{"type":"int","comment":""},"month":{"type":"int","comment":""},"day":{"type":"int","comment":""},"hour":{"type":"int","comment":""},"minute":{"type":"int","comment":""},"second":{"type":"decimal","comment":""}}}},"inputMetadata":{"post":{"isArrayType":false,"parameterName":"post","parameterType":"Post","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"description":{"typeName":"string","type":"string","typeInstance":"description","nullable":false,"optional":false},"tags":{"typeName":"string","type":"string","typeInstance":"tags","nullable":false,"optional":false},"category":{"typeName":"string","type":"string","typeInstance":"category","nullable":false,"optional":false},"createdTimeStamp":{"nullable":false,"optional":false,"type":"record","typeInstance":"createdTimeStamp","typeName":"record","fields":{"utcOffset":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"utcOffset","members":{"hours":{"typeName":"int","type":"int","typeInstance":"hours","nullable":false,"optional":false},"minutes":{"typeName":"int","type":"int","typeInstance":"minutes","nullable":false,"optional":false},"seconds":{"typeName":"decimal","type":"decimal","typeInstance":"seconds","nullable":false,"optional":true}},"nullable":false},"timeAbbrev":{"typeName":"string","type":"string","typeInstance":"timeAbbrev","nullable":false,"optional":true},"which":{"optional":true,"typeName":"0|1","type":"union","typeInstance":"which","members":{"0":{"typeName":"0","type":"0","typeInstance":"0","nullable":false,"optional":false},"1":{"typeName":"1","type":"1","typeInstance":"1","nullable":false,"optional":false}},"nullable":false},"dayOfWeek":{"optional":true,"typeName":"0|1|2|3|4|5|6","type":"union","typeInstance":"dayOfWeek","members":{"0":{"typeName":"0","type":"0","typeInstance":"0","nullable":false,"optional":false},"1":{"typeName":"1","type":"1","typeInstance":"1","nullable":false,"optional":false},"2":{"typeName":"2","type":"2","typeInstance":"2","nullable":false,"optional":false},"3":{"typeName":"3","type":"3","typeInstance":"3","nullable":false,"optional":false},"4":{"typeName":"4","type":"4","typeInstance":"4","nullable":false,"optional":false},"5":{"typeName":"5","type":"5","typeInstance":"5","nullable":false,"optional":false},"6":{"typeName":"6","type":"6","typeInstance":"6","nullable":false,"optional":false}},"nullable":false},"year":{"typeName":"int","type":"int","typeInstance":"year","nullable":false,"optional":false},"month":{"typeName":"int","type":"int","typeInstance":"month","nullable":false,"optional":false},"day":{"typeName":"int","type":"int","typeInstance":"day","nullable":false,"optional":false},"hour":{"typeName":"int","type":"int","typeInstance":"hour","nullable":false,"optional":false},"minute":{"typeName":"int","type":"int","typeInstance":"minute","nullable":false,"optional":false},"second":{"typeName":"decimal","type":"decimal","typeInstance":"second","nullable":false,"optional":true}}}}},"author":{"isArrayType":false,"parameterName":"author","parameterType":"string ","type":"record","fields":{"author":{"typeName":"string","type":"string","typeInstance":"author","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"description":{"typeName":"string","type":"string","typeInstance":"description","nullable":false,"optional":false},"author":{"typeName":"string","type":"string","typeInstance":"author","nullable":false,"optional":false},"meta":{"nullable":false,"optional":false,"type":"record","typeInstance":"meta","typeName":"record","fields":{"tags":{"typeName":"string[]","type":"string[]","typeInstance":"tags","nullable":false,"optional":false},"category":{"typeName":"string","type":"string","typeInstance":"category","nullable":false,"optional":false},"createdTimeStamp":{"nullable":false,"optional":false,"type":"record","typeInstance":"createdTimeStamp","typeName":"record","fields":{"utcOffset":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"utcOffset","members":{"hours":{"typeName":"int","type":"int","typeInstance":"hours","nullable":false,"optional":false},"minutes":{"typeName":"int","type":"int","typeInstance":"minutes","nullable":false,"optional":false},"seconds":{"typeName":"decimal","type":"decimal","typeInstance":"seconds","nullable":false,"optional":true}},"nullable":false},"timeAbbrev":{"typeName":"string","type":"string","typeInstance":"timeAbbrev","nullable":false,"optional":true},"which":{"optional":true,"typeName":"0|1","type":"union","typeInstance":"which","members":{"0":{"typeName":"0","type":"0","typeInstance":"0","nullable":false,"optional":false},"1":{"typeName":"1","type":"1","typeInstance":"1","nullable":false,"optional":false}},"nullable":false},"dayOfWeek":{"optional":true,"typeName":"0|1|2|3|4|5|6","type":"union","typeInstance":"dayOfWeek","members":{"0":{"typeName":"0","type":"0","typeInstance":"0","nullable":false,"optional":false},"1":{"typeName":"1","type":"1","typeInstance":"1","nullable":false,"optional":false},"2":{"typeName":"2","type":"2","typeInstance":"2","nullable":false,"optional":false},"3":{"typeName":"3","type":"3","typeInstance":"3","nullable":false,"optional":false},"4":{"typeName":"4","type":"4","typeInstance":"4","nullable":false,"optional":false},"5":{"typeName":"5","type":"5","typeInstance":"5","nullable":false,"optional":false},"6":{"typeName":"6","type":"6","typeInstance":"6","nullable":false,"optional":false}},"nullable":false},"year":{"typeName":"int","type":"int","typeInstance":"year","nullable":false,"optional":false},"month":{"typeName":"int","type":"int","typeInstance":"month","nullable":false,"optional":false},"day":{"typeName":"int","type":"int","typeInstance":"day","nullable":false,"optional":false},"hour":{"typeName":"int","type":"int","typeInstance":"hour","nullable":false,"optional":false},"minute":{"typeName":"int","type":"int","typeInstance":"minute","nullable":false,"optional":false},"second":{"typeName":"decimal","type":"decimal","typeInstance":"second","nullable":false,"optional":true}}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_1/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_1/expected.json
deleted file mode 100644
index e679069a14f..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_1/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: check (personItem.age).ensureType(),\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n id: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem?.credits).ensureType(),\naddress: {\n city: coursesItem?.address?.city,\nstreet: coursesItem?.address?.street?:\"\",\nzipcode: coursesItem?.address?.zipcode?:\"\" \n},\nprofessor: from var professorItem in coursesItem?.professor ?: []\n select {\n id: professorItem?.id,\nfirstName: professorItem?.firstName,\ndepartment: from var departmentItem in professorItem?.department ?: []\n select {\n departmentName: departmentItem?.departmentName?:\"\"\n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_1/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_1/mapping.json
deleted file mode 100644
index 2843b5ffec0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_1/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"courses":{"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"professor":{"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"department":{"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_1/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_1/param_def.json
deleted file mode 100644
index 2d71dcf27ea..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_1/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"college":{"courses":{"id":{"type":"string","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"courses":{"id":{"type":"int","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"person","fields":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":true,"typeName":"(record|())[]","type":"union[]","typeInstance":"courses","members":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":true,"typeName":"(record|())[]|()","type":"union[]|()","typeInstance":"professor","members":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"(record|())[]","type":"union[]","typeInstance":"department","members":{"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullableArray":true,"nullable":false}},"nullableArray":true,"nullable":true}},"nullableArray":true,"nullable":false}},"nullable":true}},"nullableArray":false,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"(record|())[]","type":"union[]","typeInstance":"professor","members":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"(record|())[]","type":"union[]","typeInstance":"department","members":{"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullableArray":true,"nullable":false}},"nullableArray":true,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_10/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_10/expected.json
deleted file mode 100644
index a4c3b8738ce..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_10/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person ?: []\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: check (personItem.age).ensureType(),\ntypes_new: personItem?.types_new,\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n colors: coursesItem.colors?:[],\nid: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem.credits).ensureType(),\naddress: {\n city: coursesItem.address?.city,\nstreet: coursesItem.address?.street?:\"\",\nzipcode: coursesItem.address?.zipcode?:\"\" \n},\nprofessor: from var professorItem in coursesItem?.professor ?: []\n select {\n types: professorItem.types,\nid: professorItem.id,\nfirstName: professorItem.firstName,\ndepartment: {\n color: professorItem.department?.color,\ndepartmentName: professorItem.department?.departmentName?:\"\" \n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_10/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_10/mapping.json
deleted file mode 100644
index dfa4c87968e..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_10/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"types_new":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["A.person.types_new"]},"courses":{"colors":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED)[]","parameters":["A.person.college.courses.colors"]},"id":{"operation":"DIRECT","targetType":"int|()","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"professor":{"types":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.college.courses.professor.types"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"department":{"color":{"operation":"DIRECT","targetType":"BLUE|GREEN|RED","parameters":["A.person.college.courses.professor.department.color"]},"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_10/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_10/param_def.json
deleted file mode 100644
index 0cd22c7e4e3..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_10/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"types_new":{"type":"(string|int)[]|()","comment":""},"college":{"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]|()","comment":""},"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]","comment":""},"id":{"type":"int|()","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"person","fields":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"types_new":{"optional":true,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types_new","nullableArray":false,"nullable":true},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]|()","type":"union[]|()","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"optional":false,"typeName":"record|()","type":"union","typeInstance":"address","members":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}},"nullable":true},"professor":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professor","members":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"color":{"optional":true,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":false}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullable":true}},"nullableArray":false,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]","type":"enum[]","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"id":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"professor","fields":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"color":{"optional":true,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_11/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_11/expected.json
deleted file mode 100644
index 9021204e63b..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_11/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem?.firstName?:\"\",\nlastName: personItem?.lastName,\nage: check (personItem?.age).ensureType(),\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n id: check int:fromString(coursesItem?.id),\ncredits: check (coursesItem?.credits).ensureType(),\naddress: {\n city: coursesItem?.address?.city,\nstreet: coursesItem?.address.street,\nzipcode: coursesItem?.address.zipcode \n},\nprofessor: from var professorItem in coursesItem?.professor ?: []\n select {\n id: professorItem?.id,\nfirstName: professorItem?.firstName,\ndepartment: from var departmentItem in professorItem?.department ?: []\n select {\n departmentName: departmentItem?.departmentName?:\"\"\n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_11/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_11/mapping.json
deleted file mode 100644
index 2843b5ffec0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_11/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"courses":{"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"professor":{"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"department":{"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_11/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_11/param_def.json
deleted file mode 100644
index c6cfc13ec07..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_11/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"college":{"courses":{"id":{"type":"string","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"courses":{"id":{"type":"int","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":false,"typeName":"(record|())[]","type":"union[]","typeInstance":"person","members":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":true,"typeName":"(record|())[]|()","type":"union[]|()","typeInstance":"professor","members":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":false,"typeName":"(record|())[]","type":"union[]","typeInstance":"department","members":{"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullableArray":true,"nullable":false}},"nullableArray":true,"nullable":true}},"nullableArray":false,"nullable":false}},"nullable":true}},"nullableArray":true,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professor","members":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":false,"typeName":"(record|())[]","type":"union[]","typeInstance":"department","members":{"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullableArray":true,"nullable":false}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_12/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_12/expected.json
deleted file mode 100644
index 1a3cac1924a..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_12/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person ?: []\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: check (personItem.age).ensureType(),\ntypes_new: personItem?.types_new?:[],\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n id: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem.credits).ensureType(),\naddress: {\n city: coursesItem.address?.city,\nstreet: coursesItem.address?.street?:\"\",\nzipcode: coursesItem.address?.zipcode?:\"\" \n},\ncolors: check (coursesItem.courseColors).cloneWithType(),\nprofessor: from var professorItem in coursesItem.professor ?: []\n select {\n id: professorItem?.id,\nfirstName: professorItem?.firstName,\ntypes: professorItem?.types,\ndepartment: {\n departmentName: professorItem?.department?.departmentName?:\"\",\ncolor: professorItem?.department?.color \n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_12/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_12/mapping.json
deleted file mode 100644
index 50e845ee21d..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_12/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"types_new":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["A.person.types_new"]},"courses":{"id":{"operation":"DIRECT","targetType":"int|()","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"colors":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED)[]","parameters":["A.person.college.courses.courseColors"]},"professor":{"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"types":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.college.courses.professor.types"]},"department":{"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]},"color":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED|())[]|()","parameters":["A.person.college.courses.professor.department.color"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_12/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_12/param_def.json
deleted file mode 100644
index 4ba539d6c0c..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_12/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"types_new":{"type":"(string|int)[]|()","comment":""},"college":{"courses":{"courseColors":{"type":"(BLUE|GREEN|RED|())[]","comment":""},"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"(BLUE|GREEN|RED|())[]|()","comment":""},"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]","comment":""},"id":{"type":"int|()","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"(BLUE|GREEN|RED|())[]|()","comment":""},"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"person","fields":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"types_new":{"optional":true,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types_new","nullableArray":false,"nullable":true},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"courseColors":{"optional":false,"typeName":"(BLUE|GREEN|RED|())[]","type":"union[]","typeInstance":"courseColors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":true,"nullable":false},"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"optional":false,"typeName":"record|()","type":"union","typeInstance":"address","members":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}},"nullable":true},"professor":{"optional":true,"typeName":"(record|())[]","type":"union[]","typeInstance":"professor","members":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"color":{"optional":true,"typeName":"(BLUE|GREEN|RED|())[]|()","type":"union[]|()","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":true,"nullable":true},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":false}},"nullableArray":true,"nullable":false}},"nullableArray":false,"nullable":false}},"nullable":true}},"nullableArray":false,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"types_new":{"optional":false,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]","type":"enum[]","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"id":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"professor","fields":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"color":{"optional":true,"typeName":"(BLUE|GREEN|RED|())[]|()","type":"union[]|()","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":true,"nullable":true},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_13/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_13/expected.json
deleted file mode 100644
index 225012f750f..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_13/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person ?: []\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem?.firstName?:\"\",\nlastName: personItem?.lastName,\nage: check (personItem?.age).ensureType(),\ntypes_new: personItem?.types_new,\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n id: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem?.credits).ensureType(),\naddress: {\n city: coursesItem?.address?.city,\nstreet: coursesItem?.address?.street?:\"\",\nzipcode: coursesItem?.address?.zipcode?:\"\" \n},\ncolors: check (coursesItem?.courseColors).cloneWithType(),\nprofessor: from var professorItem in coursesItem?.professor ?: []\n select {\n id: professorItem?.id,\nfirstName: professorItem?.firstName,\ntypes: professorItem?.types,\ndepartment: {\n departmentName: professorItem?.department?.departmentName?:\"\",\ncolor: professorItem?.department?.color \n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_13/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_13/mapping.json
deleted file mode 100644
index b8e04ab609c..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_13/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"types_new":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.types_new"]},"courses":{"id":{"operation":"DIRECT","targetType":"int|()","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"colors":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED)[]","parameters":["A.person.college.courses.courseColors"]},"professor":{"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"types":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.college.courses.professor.types"]},"department":{"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]},"color":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED|())[]|()","parameters":["A.person.college.courses.professor.department.color"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_13/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_13/param_def.json
deleted file mode 100644
index 49dd312fe25..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_13/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"types_new":{"type":"(string|int)[]|()","comment":""},"college":{"courses":{"courseColors":{"type":"(BLUE|GREEN|RED|())[]","comment":""},"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"(BLUE|GREEN|RED|())[]|()","comment":""},"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"types_new":{"type":"(string|int)[]|()","comment":""},"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]","comment":""},"id":{"type":"int|()","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"(BLUE|GREEN|RED|())[]|()","comment":""},"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":true,"typeName":"(record|())[]","type":"union[]","typeInstance":"person","members":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"types_new":{"optional":true,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types_new","nullableArray":false,"nullable":true},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"(record|())[]","type":"union[]","typeInstance":"courses","members":{"courseColors":{"optional":false,"typeName":"(BLUE|GREEN|RED|())[]","type":"union[]","typeInstance":"courseColors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":true,"nullable":false},"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"optional":false,"typeName":"record|()","type":"union","typeInstance":"address","members":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}},"nullable":true},"professor":{"optional":true,"typeName":"(record|())[]","type":"union[]","typeInstance":"professor","members":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"color":{"optional":true,"typeName":"(BLUE|GREEN|RED|())[]|()","type":"union[]|()","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":true,"nullable":true},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":false}},"nullableArray":true,"nullable":false}},"nullableArray":true,"nullable":false}},"nullable":true}},"nullableArray":true,"nullable":false}}}},"outputMetadata":{"student":{"optional":true,"typeName":"(record|())[]","type":"union[]","typeInstance":"student","members":{"id":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"types_new":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types_new","nullableArray":false,"nullable":true},"courses":{"optional":false,"typeName":"record[]|()","type":"union[]|()","typeInstance":"courses","members":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]","type":"enum[]","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"id":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"optional":false,"typeName":"record|()","type":"union","typeInstance":"address","members":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}},"nullable":true},"professor":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"professor","fields":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"color":{"optional":true,"typeName":"(BLUE|GREEN|RED|())[]|()","type":"union[]|()","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":true,"nullable":true},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":true}},"nullableArray":true,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_14/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_14/expected.json
deleted file mode 100644
index 9292fafed75..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_14/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"student.id","bio":"{\n name: student.studentName?:\"\",\ngender: student.gender,\nage: student.age \n}","academicRecord":"{\n major: student.academicMajor?:\"\",\nsemesterGPA: check (student.semesterGPA).cloneWithType() \n}","accommodationDetails":"{\n numberOfRoomates: (student.roommates?:[]).length(),\naddress: student.address \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_14/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_14/mapping.json
deleted file mode 100644
index 606b70d8be6..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_14/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"int","parameters":["student.id"]},"bio":{"name":{"operation":"DIRECT","targetType":"string","parameters":["student.studentName"]},"gender":{"operation":"DIRECT","targetType":"string|()","parameters":["student.gender"]},"age":{"operation":"DIRECT","targetType":"int","parameters":["student.age"]}},"academicRecord":{"major":{"operation":"DIRECT","targetType":"string","parameters":["student.academicMajor"]},"semesterGPA":{"operation":"DIRECT","targetType":"string[]|()","parameters":["student.semesterGPA"]}},"accommodationDetails":{"numberOfRoomates":{"operation":"LENGTH","targetType":"int|()","parameters":["student.roommates"]},"address":{"operation":"DIRECT","targetType":"string","parameters":["student.address"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_14/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_14/param_def.json
deleted file mode 100644
index 76f29da06aa..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_14/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"student":{"id":{"type":"int","comment":""},"studentName":{"type":"string|()","comment":""},"age":{"type":"int","comment":""},"gender":{"type":"string|()","comment":""},"semesterGPA":{"type":"(string|())[]","comment":""},"academicMajor":{"type":"string","comment":""},"roommates":{"type":"(Student|())[]","comment":""},"address":{"type":"string|()","comment":""}}},"output":{"id":{"type":"int","comment":""},"bio":{"name":{"type":"string","comment":""},"gender":{"type":"string|()","comment":""},"age":{"type":"int","comment":""}},"academicRecord":{"major":{"type":"string","comment":""},"semesterGPA":{"type":"string[]|()","comment":""}},"accommodationDetails":{"numberOfRoomates":{"type":"int|()","comment":""},"address":{"type":"string","comment":""}}},"inputMetadata":{"student":{"isArrayType":false,"parameterName":"student","parameterType":"Student","type":"record","fields":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"studentName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"studentName","nullable":true},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":true},"gender":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"gender","nullable":true},"semesterGPA":{"optional":false,"typeName":"(string|())[]","type":"union[]","typeInstance":"semesterGPA","nullableArray":true,"nullable":false},"academicMajor":{"typeName":"string","type":"string","typeInstance":"academicMajor","nullable":false,"optional":true},"roommates":{"optional":true,"typeName":"(Student|())[]","type":"union[]","typeInstance":"roommates","nullableArray":true,"nullable":false},"address":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"address","nullable":true}}}},"outputMetadata":{"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"bio":{"optional":false,"typeName":"record|()","type":"union","typeInstance":"bio","members":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"gender":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"gender","nullable":true},"age":{"typeName":"int","type":"int","typeInstance":"age","nullable":false,"optional":true}},"nullable":true},"academicRecord":{"nullable":false,"optional":true,"type":"record","typeInstance":"academicRecord","typeName":"record","fields":{"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":false},"semesterGPA":{"optional":false,"typeName":"string[]|()","type":"union[]|()","typeInstance":"semesterGPA","nullableArray":false,"nullable":true}}},"accommodationDetails":{"optional":false,"typeName":"record|()","type":"union","typeInstance":"accommodationDetails","members":{"numberOfRoomates":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"numberOfRoomates","nullable":true},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":true}},"nullable":true}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_15_100_fields/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_15_100_fields/expected.json
deleted file mode 100644
index 7e8eb8a36c5..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_15_100_fields/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"employeeId":"employee.employeeId","firstName":"employee.firstName","middleName":"employee?.middleName","age":"employee.dateOfBirth","gender":"employee.gender","spokenLanguages":"employee.languages","emailAddresses":"{\n primary: employee?.email,\nsecondary: employee?.alternateEmail \n}","phoneNumbers":"{\n primary: check int:fromString(employee.phoneNumber),\ntotalEmergencyContacts: (employee.emergencyContacts).length() \n}","address":"{\n street: employee.address?.street,\ncity: employee.address.city,\nstate: employee.address.state,\ncountry: employee.address?.country,\npostalCode: employee.address.postalCode \n}","currentStatus":"employee.status","currentDepartment":"employee.department","position":"{\n title: employee.designation?:\"\" \n}","compensation":"{\n base: employee.salary?:0.0,\nbonus: employee.salary \n}","skillSet":"{\n technical: from var skillsItem in employee.skills\n select {\n name: skillsItem?.name,\nlevel: skillsItem?.level,\nyearsOfExperience: skillsItem?.yearsOfExperience,\nisCertified: skillsItem?.isCertified\n} \n}","qualifications":"{\n academic: from var educationItem in employee.education ?: []\n select {\n degree: educationItem.degree,\ninstitution: educationItem.institution,\ngraduationYear: educationItem.graduationYear,\ngpa: educationItem?.gpa,\nisVerified: educationItem.isVerified\n},\nprofessional: from var certificationsItem in employee?.certifications ?: []\n select {\n name: certificationsItem?.name?:\"\",\nissuingAuthority: certificationsItem?.issuingAuthority?:\"\",\nissueDate: certificationsItem?.issueDate,\nexpiryDate: certificationsItem?.expiryDate,\ncertificationId: certificationsItem?.certificationId\n} \n}","projectDetails":"{\n active: from var currentProjectsItem in employee.currentProjects ?: []\n select {\n name: currentProjectsItem?.name?:\"\",\ndescription: currentProjectsItem?.description,\nstartDate: currentProjectsItem?.startDate,\nendDate: currentProjectsItem?.endDate,\nrole: currentProjectsItem?.role,\ntechnologies: from var technologiesItem in currentProjectsItem?.technologies ?: []\n select {\n name: technologiesItem?.name,\nversion: technologiesItem?.version,\nisMainTechnology: technologiesItem?.isMainTechnology\n}\n},\ncompleted: from var completedProjectsItem in employee?.completedProjects ?: []\n select {\n name: completedProjectsItem.name,\ndescription: completedProjectsItem.description,\nstartDate: completedProjectsItem.startDate,\nendDate: completedProjectsItem.endDate,\nrole: completedProjectsItem.role,\ntechnologies: from var technologiesItem in completedProjectsItem.technologies\n select {\n name: technologiesItem.name,\nversion: technologiesItem.version,\nisMainTechnology: technologiesItem.isMainTechnology\n}\n} \n}","performance":"{\n history: from var ratingsItem in employee.ratings ?: []\n select {\n period: ratingsItem?.period,\nscore: ratingsItem?.score,\nfeedback: ratingsItem?.feedback,\nevaluator: ratingsItem?.evaluator\n} \n}","benefits":"{\n health: employee.insuranceType,\nadditional: {\n dental: employee.dental,\nvision: employee.vision \n},\nleaves: {\n total: employee.vacationDays?:0,\nused: employee.sickLeaveBalance?:0 \n} \n}","payrollInfo":"{\n bankName: employee.bankDetails.bankName,\nmaskedAccountNumber: employee.bankDetails.accountNumber?:\"\",\naccountType: employee.bankDetails.accountType \n}","documentation":"{\n status: employee.documentStatus?:[],\npendingDocuments: check (employee.documentIds).cloneWithType() \n}","systemInfo":"{\n lastModified: employee?.lastUpdated?:\"\",\nmodifiedBy: employee.updatedBy?:\"\",\nisActiveEmployee: employee.isActive?:false \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_15_100_fields/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_15_100_fields/mapping.json
deleted file mode 100644
index c4afc57bd2a..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_15_100_fields/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"employeeId":{"operation":"DIRECT","targetType":"string","parameters":["employee.employeeId"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.firstName"]},"middleName":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.middleName"]},"age":{"operation":"DIRECT","targetType":"string","parameters":["employee.dateOfBirth"]},"gender":{"operation":"DIRECT","targetType":"PREFER_NOT_TO_SAY|OTHER|FEMALE|MALE","parameters":["employee.gender"]},"spokenLanguages":{"operation":"DIRECT","targetType":"(string|())[]","parameters":["employee.languages"]},"emailAddresses":{"primary":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.email"]},"secondary":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.alternateEmail"]}},"phoneNumbers":{"primary":{"operation":"DIRECT","targetType":"int","parameters":["employee.phoneNumber"]},"totalEmergencyContacts":{"operation":"LENGTH","targetType":"int","parameters":["employee.emergencyContacts"]}},"address":{"street":{"operation":"DIRECT","targetType":"string","parameters":["employee.address.street"]},"city":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.address.city"]},"state":{"operation":"DIRECT","targetType":"string","parameters":["employee.address.state"]},"country":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.address.country"]},"postalCode":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.address.postalCode"]}},"currentStatus":{"operation":"DIRECT","targetType":"TERMINATED|INTERN|CONTRACT|PART_TIME|FULL_TIME","parameters":["employee.status"]},"currentDepartment":{"operation":"DIRECT","targetType":"OPERATIONS|HR|FINANCE|MARKETING|SALES|ENGINEERING|()","parameters":["employee.department"]},"position":{"title":{"operation":"DIRECT","targetType":"string","parameters":["employee.designation"]}},"compensation":{"base":{"operation":"DIRECT","targetType":"decimal","parameters":["employee.salary"]},"bonus":{"operation":"DIRECT","targetType":"decimal|()","parameters":["employee.salary"]}},"skillSet":{"technical":{"name":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.skills.name"]},"level":{"operation":"DIRECT","targetType":"EXPERT|ADVANCED|INTERMEDIATE|BEGINNER|()","parameters":["employee.skills.level"]},"yearsOfExperience":{"operation":"DIRECT","targetType":"int","parameters":["employee.skills.yearsOfExperience"]},"isCertified":{"operation":"DIRECT","targetType":"boolean","parameters":["employee.skills.isCertified"]}}},"qualifications":{"academic":{"degree":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.education.degree"]},"institution":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.education.institution"]},"graduationYear":{"operation":"DIRECT","targetType":"string","parameters":["employee.education.graduationYear"]},"gpa":{"operation":"DIRECT","targetType":"decimal|()","parameters":["employee.education.gpa"]},"isVerified":{"operation":"DIRECT","targetType":"boolean|()","parameters":["employee.education.isVerified"]}},"professional":{"name":{"operation":"DIRECT","targetType":"string","parameters":["employee.certifications.name"]},"issuingAuthority":{"operation":"DIRECT","targetType":"string","parameters":["employee.certifications.issuingAuthority"]},"issueDate":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.certifications.issueDate"]},"expiryDate":{"operation":"DIRECT","targetType":"string","parameters":["employee.certifications.expiryDate"]},"certificationId":{"operation":"DIRECT","targetType":"string","parameters":["employee.certifications.certificationId"]}}},"projectDetails":{"active":{"name":{"operation":"DIRECT","targetType":"string","parameters":["employee.currentProjects.name"]},"description":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.currentProjects.description"]},"startDate":{"operation":"DIRECT","targetType":"string","parameters":["employee.currentProjects.startDate"]},"endDate":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.currentProjects.endDate"]},"role":{"operation":"DIRECT","targetType":"MANAGER|CONSULTANT|MEMBER|LEAD","parameters":["employee.currentProjects.role"]},"technologies":{"name":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.currentProjects.technologies.name"]},"version":{"operation":"DIRECT","targetType":"string","parameters":["employee.currentProjects.technologies.version"]},"isMainTechnology":{"operation":"DIRECT","targetType":"boolean","parameters":["employee.currentProjects.technologies.isMainTechnology"]}}},"completed":{"name":{"operation":"DIRECT","targetType":"string","parameters":["employee.completedProjects.name"]},"description":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.completedProjects.description"]},"startDate":{"operation":"DIRECT","targetType":"string","parameters":["employee.completedProjects.startDate"]},"endDate":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.completedProjects.endDate"]},"role":{"operation":"DIRECT","targetType":"MANAGER|CONSULTANT|MEMBER|LEAD","parameters":["employee.completedProjects.role"]},"technologies":{"name":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.completedProjects.technologies.name"]},"version":{"operation":"DIRECT","targetType":"string","parameters":["employee.completedProjects.technologies.version"]},"isMainTechnology":{"operation":"DIRECT","targetType":"boolean","parameters":["employee.completedProjects.technologies.isMainTechnology"]}}}},"performance":{"history":{"period":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.ratings.period"]},"score":{"operation":"DIRECT","targetType":"decimal","parameters":["employee.ratings.score"]},"feedback":{"operation":"DIRECT","targetType":"string","parameters":["employee.ratings.feedback"]},"evaluator":{"operation":"DIRECT","targetType":"string|()","parameters":["employee.ratings.evaluator"]}}},"benefits":{"health":{"operation":"DIRECT","targetType":"NONE|FAMILY|PREMIUM|BASIC","parameters":["employee.insuranceType"]},"additional":{"dental":{"operation":"DIRECT","targetType":"boolean|()","parameters":["employee.dental"]},"vision":{"operation":"DIRECT","targetType":"boolean","parameters":["employee.vision"]}},"leaves":{"total":{"operation":"DIRECT","targetType":"int","parameters":["employee.vacationDays"]},"used":{"operation":"DIRECT","targetType":"int","parameters":["employee.sickLeaveBalance"]}}},"payrollInfo":{"bankName":{"operation":"DIRECT","targetType":"string","parameters":["employee.bankDetails.bankName"]},"maskedAccountNumber":{"operation":"DIRECT","targetType":"string","parameters":["employee.bankDetails.accountNumber"]},"accountType":{"operation":"DIRECT","targetType":"SAVINGS|CHECKING","parameters":["employee.bankDetails.accountType"]}},"documentation":{"status":{"operation":"DIRECT","targetType":"(REJECTED|EXPIRED|VERIFIED|PENDING)[]","parameters":["employee.documentStatus"]},"pendingDocuments":{"operation":"DIRECT","targetType":"string[]","parameters":["employee.documentIds"]}},"systemInfo":{"lastModified":{"operation":"DIRECT","targetType":"string","parameters":["employee.lastUpdated"]},"modifiedBy":{"operation":"DIRECT","targetType":"string","parameters":["employee.updatedBy"]},"isActiveEmployee":{"operation":"DIRECT","targetType":"boolean","parameters":["employee.isActive"]}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_15_100_fields/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_15_100_fields/param_def.json
deleted file mode 100644
index 423ee28a6ce..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_15_100_fields/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"employee":{"employeeId":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"middleName":{"type":"string|()","comment":""},"lastName":{"type":"string","comment":""},"dateOfBirth":{"type":"string|()","comment":""},"gender":{"type":"PREFER_NOT_TO_SAY|OTHER|FEMALE|MALE|()","comment":""},"languages":{"type":"string[]","comment":""},"email":{"type":"string|()","comment":""},"alternateEmail":{"type":"string|()","comment":""},"phoneNumber":{"type":"string","comment":""},"emergencyContacts":{"type":"(string|())[]","comment":""},"address":{"street":{"type":"string|()","comment":""},"city":{"type":"string","comment":""},"state":{"type":"string|()","comment":""},"country":{"type":"string|()","comment":""},"postalCode":{"type":"string","comment":""}},"status":{"type":"TERMINATED|INTERN|CONTRACT|PART_TIME|FULL_TIME","comment":""},"department":{"type":"OPERATIONS|HR|FINANCE|MARKETING|SALES|ENGINEERING|()","comment":""},"designation":{"type":"string","comment":""},"salary":{"type":"decimal|()","comment":""},"joiningDate":{"type":"string","comment":""},"terminationDate":{"type":"string|()","comment":""},"skills":{"name":{"type":"string|()","comment":""},"level":{"type":"EXPERT|ADVANCED|INTERMEDIATE|BEGINNER|()","comment":""},"yearsOfExperience":{"type":"int","comment":""},"isCertified":{"type":"boolean","comment":""}},"education":{"degree":{"type":"string|()","comment":""},"institution":{"type":"string|()","comment":""},"graduationYear":{"type":"string","comment":""},"gpa":{"type":"decimal|()","comment":""},"isVerified":{"type":"boolean|()","comment":""}},"certifications":{"name":{"type":"string","comment":""},"issuingAuthority":{"type":"string","comment":""},"issueDate":{"type":"string|()","comment":""},"expiryDate":{"type":"string","comment":""},"certificationId":{"type":"string","comment":""}},"currentProjects":{"name":{"type":"string","comment":""},"description":{"type":"string|()","comment":""},"startDate":{"type":"string","comment":""},"endDate":{"type":"string|()","comment":""},"role":{"type":"MANAGER|CONSULTANT|MEMBER|LEAD","comment":""},"technologies":{"name":{"type":"string|()","comment":""},"version":{"type":"string","comment":""},"isMainTechnology":{"type":"boolean","comment":""}}},"completedProjects":{"name":{"type":"string","comment":""},"description":{"type":"string|()","comment":""},"startDate":{"type":"string","comment":""},"endDate":{"type":"string|()","comment":""},"role":{"type":"MANAGER|CONSULTANT|MEMBER|LEAD","comment":""},"technologies":{"name":{"type":"string|()","comment":""},"version":{"type":"string","comment":""},"isMainTechnology":{"type":"boolean","comment":""}}},"performanceScores":{"type":"decimal[]","comment":""},"ratings":{"period":{"type":"string|()","comment":""},"score":{"type":"decimal","comment":""},"feedback":{"type":"string","comment":""},"evaluator":{"type":"string|()","comment":""}},"insuranceType":{"type":"NONE|FAMILY|PREMIUM|BASIC","comment":""},"dental":{"type":"boolean","comment":""},"vision":{"type":"boolean|()","comment":""},"vacationDays":{"type":"int","comment":""},"sickLeaveBalance":{"type":"int|()","comment":""},"bankDetails":{"bankName":{"type":"string","comment":""},"accountNumber":{"type":"string|()","comment":""},"routingNumber":{"type":"string|()","comment":""},"accountType":{"type":"SAVINGS|CHECKING","comment":""}},"documentStatus":{"type":"(REJECTED|EXPIRED|VERIFIED|PENDING)[]|()","comment":""},"documentIds":{"type":"(string|())[]","comment":""},"lastUpdated":{"type":"string|()","comment":""},"updatedBy":{"type":"string|()","comment":""},"isActive":{"type":"boolean","comment":""}}},"output":{"employeeId":{"type":"string","comment":""},"firstName":{"type":"string|()","comment":""},"middleName":{"type":"string|()","comment":""},"age":{"type":"string","comment":""},"gender":{"type":"PREFER_NOT_TO_SAY|OTHER|FEMALE|MALE","comment":""},"spokenLanguages":{"type":"(string|())[]","comment":""},"emailAddresses":{"primary":{"type":"string|()","comment":""},"secondary":{"type":"string|()","comment":""}},"phoneNumbers":{"primary":{"type":"int","comment":""},"totalEmergencyContacts":{"type":"int","comment":""}},"address":{"street":{"type":"string","comment":""},"city":{"type":"string|()","comment":""},"state":{"type":"string","comment":""},"country":{"type":"string|()","comment":""},"postalCode":{"type":"string|()","comment":""}},"currentStatus":{"type":"TERMINATED|INTERN|CONTRACT|PART_TIME|FULL_TIME","comment":""},"currentDepartment":{"type":"OPERATIONS|HR|FINANCE|MARKETING|SALES|ENGINEERING|()","comment":""},"position":{"title":{"type":"string","comment":""}},"compensation":{"base":{"type":"decimal","comment":""},"bonus":{"type":"decimal|()","comment":""}},"skillSet":{"technical":{"name":{"type":"string|()","comment":""},"level":{"type":"EXPERT|ADVANCED|INTERMEDIATE|BEGINNER|()","comment":""},"yearsOfExperience":{"type":"int","comment":""},"isCertified":{"type":"boolean","comment":""}}},"qualifications":{"academic":{"degree":{"type":"string|()","comment":""},"institution":{"type":"string|()","comment":""},"graduationYear":{"type":"string","comment":""},"gpa":{"type":"decimal|()","comment":""},"isVerified":{"type":"boolean|()","comment":""}},"professional":{"name":{"type":"string","comment":""},"issuingAuthority":{"type":"string","comment":""},"issueDate":{"type":"string|()","comment":""},"expiryDate":{"type":"string","comment":""},"certificationId":{"type":"string","comment":""}}},"projectDetails":{"active":{"name":{"type":"string","comment":""},"description":{"type":"string|()","comment":""},"startDate":{"type":"string","comment":""},"endDate":{"type":"string|()","comment":""},"role":{"type":"MANAGER|CONSULTANT|MEMBER|LEAD","comment":""},"technologies":{"name":{"type":"string|()","comment":""},"version":{"type":"string","comment":""},"isMainTechnology":{"type":"boolean","comment":""}}},"completed":{"name":{"type":"string","comment":""},"description":{"type":"string|()","comment":""},"startDate":{"type":"string","comment":""},"endDate":{"type":"string|()","comment":""},"role":{"type":"MANAGER|CONSULTANT|MEMBER|LEAD","comment":""},"technologies":{"name":{"type":"string|()","comment":""},"version":{"type":"string","comment":""},"isMainTechnology":{"type":"boolean","comment":""}}}},"performance":{"history":{"period":{"type":"string|()","comment":""},"score":{"type":"decimal","comment":""},"feedback":{"type":"string","comment":""},"evaluator":{"type":"string|()","comment":""}}},"benefits":{"health":{"type":"NONE|FAMILY|PREMIUM|BASIC","comment":""},"additional":{"dental":{"type":"boolean|()","comment":""},"vision":{"type":"boolean","comment":""}},"leaves":{"total":{"type":"int","comment":""},"used":{"type":"int","comment":""}}},"payrollInfo":{"bankName":{"type":"string","comment":""},"maskedAccountNumber":{"type":"string","comment":""},"accountType":{"type":"SAVINGS|CHECKING","comment":""}},"documentation":{"status":{"type":"(REJECTED|EXPIRED|VERIFIED|PENDING)[]","comment":""},"pendingDocuments":{"type":"string[]","comment":""}},"systemInfo":{"lastModified":{"type":"string","comment":""},"modifiedBy":{"type":"string","comment":""},"isActiveEmployee":{"type":"boolean","comment":""}}},"inputMetadata":{"employee":{"isArrayType":false,"parameterName":"employee","parameterType":"EmployeeInput","type":"record","fields":{"employeeId":{"typeName":"string","type":"string","typeInstance":"employeeId","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"middleName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"middleName","nullable":true},"lastName":{"typeName":"string","type":"string","typeInstance":"lastName","nullable":false,"optional":false},"dateOfBirth":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"dateOfBirth","nullable":true},"gender":{"optional":false,"typeName":"PREFER_NOT_TO_SAY|OTHER|FEMALE|MALE|()","type":"union","typeInstance":"gender","members":{"PREFER_NOT_TO_SAY":{"typeName":"PREFER_NOT_TO_SAY","type":"PREFER_NOT_TO_SAY","typeInstance":"PREFER_NOT_TO_SAY","nullable":false,"optional":false},"OTHER":{"typeName":"OTHER","type":"OTHER","typeInstance":"OTHER","nullable":false,"optional":false},"FEMALE":{"typeName":"FEMALE","type":"FEMALE","typeInstance":"FEMALE","nullable":false,"optional":false},"MALE":{"typeName":"MALE","type":"MALE","typeInstance":"MALE","nullable":false,"optional":false}},"nullable":true},"languages":{"typeName":"string[]","type":"string[]","typeInstance":"languages","nullable":false,"optional":true},"email":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"email","nullable":true},"alternateEmail":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"alternateEmail","nullable":true},"phoneNumber":{"typeName":"string","type":"string","typeInstance":"phoneNumber","nullable":false,"optional":false},"emergencyContacts":{"optional":false,"typeName":"(string|())[]","type":"union[]","typeInstance":"emergencyContacts","nullableArray":true,"nullable":false},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"street":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"street","nullable":true},"city":{"typeName":"string","type":"string","typeInstance":"city","nullable":false,"optional":true},"state":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"state","nullable":true},"country":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"country","nullable":true},"postalCode":{"typeName":"string","type":"string","typeInstance":"postalCode","nullable":false,"optional":false}}},"status":{"optional":false,"typeName":"TERMINATED|INTERN|CONTRACT|PART_TIME|FULL_TIME","type":"enum","typeInstance":"status","members":{"TERMINATED":{"typeName":"TERMINATED","type":"TERMINATED","typeInstance":"TERMINATED","nullable":false,"optional":false},"INTERN":{"typeName":"INTERN","type":"INTERN","typeInstance":"INTERN","nullable":false,"optional":false},"CONTRACT":{"typeName":"CONTRACT","type":"CONTRACT","typeInstance":"CONTRACT","nullable":false,"optional":false},"PART_TIME":{"typeName":"PART_TIME","type":"PART_TIME","typeInstance":"PART_TIME","nullable":false,"optional":false},"FULL_TIME":{"typeName":"FULL_TIME","type":"FULL_TIME","typeInstance":"FULL_TIME","nullable":false,"optional":false}},"nullable":false},"department":{"optional":false,"typeName":"OPERATIONS|HR|FINANCE|MARKETING|SALES|ENGINEERING|()","type":"union","typeInstance":"department","members":{"OPERATIONS":{"typeName":"OPERATIONS","type":"OPERATIONS","typeInstance":"OPERATIONS","nullable":false,"optional":false},"HR":{"typeName":"HR","type":"HR","typeInstance":"HR","nullable":false,"optional":false},"FINANCE":{"typeName":"FINANCE","type":"FINANCE","typeInstance":"FINANCE","nullable":false,"optional":false},"MARKETING":{"typeName":"MARKETING","type":"MARKETING","typeInstance":"MARKETING","nullable":false,"optional":false},"SALES":{"typeName":"SALES","type":"SALES","typeInstance":"SALES","nullable":false,"optional":false},"ENGINEERING":{"typeName":"ENGINEERING","type":"ENGINEERING","typeInstance":"ENGINEERING","nullable":false,"optional":false}},"nullable":true},"designation":{"typeName":"string","type":"string","typeInstance":"designation","nullable":false,"optional":true},"salary":{"optional":false,"typeName":"decimal|()","type":"union","typeInstance":"salary","nullable":true},"joiningDate":{"typeName":"string","type":"string","typeInstance":"joiningDate","nullable":false,"optional":false},"terminationDate":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"terminationDate","nullable":true},"skills":{"optional":false,"typeName":"(record|())[]","type":"union[]","typeInstance":"skills","members":{"name":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"level":{"optional":false,"typeName":"EXPERT|ADVANCED|INTERMEDIATE|BEGINNER|()","type":"union","typeInstance":"level","members":{"EXPERT":{"typeName":"EXPERT","type":"EXPERT","typeInstance":"EXPERT","nullable":false,"optional":false},"ADVANCED":{"typeName":"ADVANCED","type":"ADVANCED","typeInstance":"ADVANCED","nullable":false,"optional":false},"INTERMEDIATE":{"typeName":"INTERMEDIATE","type":"INTERMEDIATE","typeInstance":"INTERMEDIATE","nullable":false,"optional":false},"BEGINNER":{"typeName":"BEGINNER","type":"BEGINNER","typeInstance":"BEGINNER","nullable":false,"optional":false}},"nullable":true},"yearsOfExperience":{"typeName":"int","type":"int","typeInstance":"yearsOfExperience","nullable":false,"optional":true},"isCertified":{"typeName":"boolean","type":"boolean","typeInstance":"isCertified","nullable":false,"optional":true}},"nullableArray":true,"nullable":false},"education":{"optional":false,"typeName":"record[]|()","type":"union[]|()","typeInstance":"education","members":{"degree":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"degree","nullable":true},"institution":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"institution","nullable":true},"graduationYear":{"typeName":"string","type":"string","typeInstance":"graduationYear","nullable":false,"optional":true},"gpa":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"gpa","nullable":true},"isVerified":{"optional":false,"typeName":"boolean|()","type":"union","typeInstance":"isVerified","nullable":true}},"nullableArray":false,"nullable":true},"certifications":{"optional":true,"typeName":"(record|())[]|()","type":"union[]|()","typeInstance":"certifications","members":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"issuingAuthority":{"typeName":"string","type":"string","typeInstance":"issuingAuthority","nullable":false,"optional":false},"issueDate":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"issueDate","nullable":true},"expiryDate":{"typeName":"string","type":"string","typeInstance":"expiryDate","nullable":false,"optional":true},"certificationId":{"typeName":"string","type":"string","typeInstance":"certificationId","nullable":false,"optional":true}},"nullableArray":true,"nullable":true},"currentProjects":{"optional":true,"typeName":"(record|())[]","type":"union[]","typeInstance":"currentProjects","members":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"description":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"description","nullable":true},"startDate":{"typeName":"string","type":"string","typeInstance":"startDate","nullable":false,"optional":true},"endDate":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"endDate","nullable":true},"role":{"optional":true,"typeName":"MANAGER|CONSULTANT|MEMBER|LEAD","type":"enum","typeInstance":"role","members":{"MANAGER":{"typeName":"MANAGER","type":"MANAGER","typeInstance":"MANAGER","nullable":false,"optional":false},"CONSULTANT":{"typeName":"CONSULTANT","type":"CONSULTANT","typeInstance":"CONSULTANT","nullable":false,"optional":false},"MEMBER":{"typeName":"MEMBER","type":"MEMBER","typeInstance":"MEMBER","nullable":false,"optional":false},"LEAD":{"typeName":"LEAD","type":"LEAD","typeInstance":"LEAD","nullable":false,"optional":false}},"nullable":false},"technologies":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"technologies","fields":{"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"version":{"typeName":"string","type":"string","typeInstance":"version","nullable":false,"optional":true},"isMainTechnology":{"typeName":"boolean","type":"boolean","typeInstance":"isMainTechnology","nullable":false,"optional":true}},"nullableArray":false,"nullable":false}},"nullableArray":true,"nullable":false},"completedProjects":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"completedProjects","members":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"description":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"description","nullable":true},"startDate":{"typeName":"string","type":"string","typeInstance":"startDate","nullable":false,"optional":true},"endDate":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"endDate","nullable":true},"role":{"optional":true,"typeName":"MANAGER|CONSULTANT|MEMBER|LEAD","type":"enum","typeInstance":"role","members":{"MANAGER":{"typeName":"MANAGER","type":"MANAGER","typeInstance":"MANAGER","nullable":false,"optional":false},"CONSULTANT":{"typeName":"CONSULTANT","type":"CONSULTANT","typeInstance":"CONSULTANT","nullable":false,"optional":false},"MEMBER":{"typeName":"MEMBER","type":"MEMBER","typeInstance":"MEMBER","nullable":false,"optional":false},"LEAD":{"typeName":"LEAD","type":"LEAD","typeInstance":"LEAD","nullable":false,"optional":false}},"nullable":false},"technologies":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"technologies","fields":{"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"version":{"typeName":"string","type":"string","typeInstance":"version","nullable":false,"optional":true},"isMainTechnology":{"typeName":"boolean","type":"boolean","typeInstance":"isMainTechnology","nullable":false,"optional":true}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":true},"performanceScores":{"typeName":"decimal[]","type":"decimal[]","typeInstance":"performanceScores","nullable":false,"optional":true},"ratings":{"optional":true,"typeName":"(record|())[]","type":"union[]","typeInstance":"ratings","members":{"period":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"period","nullable":true},"score":{"typeName":"decimal","type":"decimal","typeInstance":"score","nullable":false,"optional":true},"feedback":{"typeName":"string","type":"string","typeInstance":"feedback","nullable":false,"optional":true},"evaluator":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"evaluator","nullable":true}},"nullableArray":true,"nullable":false},"insuranceType":{"optional":false,"typeName":"NONE|FAMILY|PREMIUM|BASIC","type":"enum","typeInstance":"insuranceType","members":{"NONE":{"typeName":"NONE","type":"NONE","typeInstance":"NONE","nullable":false,"optional":false},"FAMILY":{"typeName":"FAMILY","type":"FAMILY","typeInstance":"FAMILY","nullable":false,"optional":false},"PREMIUM":{"typeName":"PREMIUM","type":"PREMIUM","typeInstance":"PREMIUM","nullable":false,"optional":false},"BASIC":{"typeName":"BASIC","type":"BASIC","typeInstance":"BASIC","nullable":false,"optional":false}},"nullable":false},"dental":{"typeName":"boolean","type":"boolean","typeInstance":"dental","nullable":false,"optional":false},"vision":{"optional":false,"typeName":"boolean|()","type":"union","typeInstance":"vision","nullable":true},"vacationDays":{"typeName":"int","type":"int","typeInstance":"vacationDays","nullable":false,"optional":true},"sickLeaveBalance":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"sickLeaveBalance","nullable":true},"bankDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"bankDetails","typeName":"record","fields":{"bankName":{"typeName":"string","type":"string","typeInstance":"bankName","nullable":false,"optional":false},"accountNumber":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"accountNumber","nullable":true},"routingNumber":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"routingNumber","nullable":true},"accountType":{"optional":false,"typeName":"SAVINGS|CHECKING","type":"enum","typeInstance":"accountType","members":{"SAVINGS":{"typeName":"SAVINGS","type":"SAVINGS","typeInstance":"SAVINGS","nullable":false,"optional":false},"CHECKING":{"typeName":"CHECKING","type":"CHECKING","typeInstance":"CHECKING","nullable":false,"optional":false}},"nullable":false}}},"documentStatus":{"optional":false,"typeName":"(REJECTED|EXPIRED|VERIFIED|PENDING)[]|()","type":"union[]|()","typeInstance":"documentStatus","members":{"REJECTED":{"typeName":"REJECTED","type":"REJECTED","typeInstance":"REJECTED","nullable":false,"optional":false},"EXPIRED":{"typeName":"EXPIRED","type":"EXPIRED","typeInstance":"EXPIRED","nullable":false,"optional":false},"VERIFIED":{"typeName":"VERIFIED","type":"VERIFIED","typeInstance":"VERIFIED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"documentIds":{"optional":true,"typeName":"(string|())[]","type":"union[]","typeInstance":"documentIds","nullableArray":true,"nullable":false},"lastUpdated":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastUpdated","nullable":true},"updatedBy":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"updatedBy","nullable":true},"isActive":{"typeName":"boolean","type":"boolean","typeInstance":"isActive","nullable":false,"optional":true}}}},"outputMetadata":{"employeeId":{"typeName":"string","type":"string","typeInstance":"employeeId","nullable":false,"optional":false},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"middleName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"middleName","nullable":true},"age":{"typeName":"string","type":"string","typeInstance":"age","nullable":false,"optional":true},"gender":{"optional":true,"typeName":"PREFER_NOT_TO_SAY|OTHER|FEMALE|MALE","type":"enum","typeInstance":"gender","members":{"PREFER_NOT_TO_SAY":{"typeName":"PREFER_NOT_TO_SAY","type":"PREFER_NOT_TO_SAY","typeInstance":"PREFER_NOT_TO_SAY","nullable":false,"optional":false},"OTHER":{"typeName":"OTHER","type":"OTHER","typeInstance":"OTHER","nullable":false,"optional":false},"FEMALE":{"typeName":"FEMALE","type":"FEMALE","typeInstance":"FEMALE","nullable":false,"optional":false},"MALE":{"typeName":"MALE","type":"MALE","typeInstance":"MALE","nullable":false,"optional":false}},"nullable":false},"spokenLanguages":{"optional":true,"typeName":"(string|())[]","type":"union[]","typeInstance":"spokenLanguages","nullableArray":true,"nullable":false},"emailAddresses":{"nullable":false,"optional":false,"type":"record","typeInstance":"emailAddresses","typeName":"record","fields":{"primary":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"primary","nullable":true},"secondary":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"secondary","nullable":true}}},"phoneNumbers":{"nullable":false,"optional":false,"type":"record","typeInstance":"phoneNumbers","typeName":"record","fields":{"primary":{"typeName":"int","type":"int","typeInstance":"primary","nullable":false,"optional":false},"totalEmergencyContacts":{"typeName":"int","type":"int","typeInstance":"totalEmergencyContacts","nullable":false,"optional":false}}},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":true},"city":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"state":{"typeName":"string","type":"string","typeInstance":"state","nullable":false,"optional":true},"country":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"country","nullable":true},"postalCode":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"postalCode","nullable":true}}},"currentStatus":{"optional":true,"typeName":"TERMINATED|INTERN|CONTRACT|PART_TIME|FULL_TIME","type":"enum","typeInstance":"currentStatus","members":{"TERMINATED":{"typeName":"TERMINATED","type":"TERMINATED","typeInstance":"TERMINATED","nullable":false,"optional":false},"INTERN":{"typeName":"INTERN","type":"INTERN","typeInstance":"INTERN","nullable":false,"optional":false},"CONTRACT":{"typeName":"CONTRACT","type":"CONTRACT","typeInstance":"CONTRACT","nullable":false,"optional":false},"PART_TIME":{"typeName":"PART_TIME","type":"PART_TIME","typeInstance":"PART_TIME","nullable":false,"optional":false},"FULL_TIME":{"typeName":"FULL_TIME","type":"FULL_TIME","typeInstance":"FULL_TIME","nullable":false,"optional":false}},"nullable":false},"currentDepartment":{"optional":false,"typeName":"OPERATIONS|HR|FINANCE|MARKETING|SALES|ENGINEERING|()","type":"union","typeInstance":"currentDepartment","members":{"OPERATIONS":{"typeName":"OPERATIONS","type":"OPERATIONS","typeInstance":"OPERATIONS","nullable":false,"optional":false},"HR":{"typeName":"HR","type":"HR","typeInstance":"HR","nullable":false,"optional":false},"FINANCE":{"typeName":"FINANCE","type":"FINANCE","typeInstance":"FINANCE","nullable":false,"optional":false},"MARKETING":{"typeName":"MARKETING","type":"MARKETING","typeInstance":"MARKETING","nullable":false,"optional":false},"SALES":{"typeName":"SALES","type":"SALES","typeInstance":"SALES","nullable":false,"optional":false},"ENGINEERING":{"typeName":"ENGINEERING","type":"ENGINEERING","typeInstance":"ENGINEERING","nullable":false,"optional":false}},"nullable":true},"position":{"nullable":false,"optional":false,"type":"record","typeInstance":"position","typeName":"record","fields":{"title":{"typeName":"string","type":"string","typeInstance":"title","nullable":false,"optional":false}}},"compensation":{"nullable":false,"optional":false,"type":"record","typeInstance":"compensation","typeName":"record","fields":{"base":{"typeName":"decimal","type":"decimal","typeInstance":"base","nullable":false,"optional":false},"bonus":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"bonus","nullable":true}}},"skillSet":{"nullable":false,"optional":false,"type":"record","typeInstance":"skillSet","typeName":"record","fields":{"technical":{"optional":false,"typeName":"(record|())[]","type":"union[]","typeInstance":"technical","members":{"name":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"level":{"optional":false,"typeName":"EXPERT|ADVANCED|INTERMEDIATE|BEGINNER|()","type":"union","typeInstance":"level","members":{"EXPERT":{"typeName":"EXPERT","type":"EXPERT","typeInstance":"EXPERT","nullable":false,"optional":false},"ADVANCED":{"typeName":"ADVANCED","type":"ADVANCED","typeInstance":"ADVANCED","nullable":false,"optional":false},"INTERMEDIATE":{"typeName":"INTERMEDIATE","type":"INTERMEDIATE","typeInstance":"INTERMEDIATE","nullable":false,"optional":false},"BEGINNER":{"typeName":"BEGINNER","type":"BEGINNER","typeInstance":"BEGINNER","nullable":false,"optional":false}},"nullable":true},"yearsOfExperience":{"typeName":"int","type":"int","typeInstance":"yearsOfExperience","nullable":false,"optional":true},"isCertified":{"typeName":"boolean","type":"boolean","typeInstance":"isCertified","nullable":false,"optional":true}},"nullableArray":true,"nullable":false}}},"qualifications":{"nullable":false,"optional":false,"type":"record","typeInstance":"qualifications","typeName":"record","fields":{"academic":{"optional":false,"typeName":"(record|())[]","type":"union[]","typeInstance":"academic","members":{"degree":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"degree","nullable":true},"institution":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"institution","nullable":true},"graduationYear":{"typeName":"string","type":"string","typeInstance":"graduationYear","nullable":false,"optional":true},"gpa":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"gpa","nullable":true},"isVerified":{"optional":false,"typeName":"boolean|()","type":"union","typeInstance":"isVerified","nullable":true}},"nullableArray":true,"nullable":false},"professional":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professional","members":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"issuingAuthority":{"typeName":"string","type":"string","typeInstance":"issuingAuthority","nullable":false,"optional":false},"issueDate":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"issueDate","nullable":true},"expiryDate":{"typeName":"string","type":"string","typeInstance":"expiryDate","nullable":false,"optional":true},"certificationId":{"typeName":"string","type":"string","typeInstance":"certificationId","nullable":false,"optional":true}},"nullableArray":false,"nullable":true}}},"projectDetails":{"nullable":false,"optional":false,"type":"record","typeInstance":"projectDetails","typeName":"record","fields":{"active":{"optional":true,"typeName":"(record|())[]|()","type":"union[]|()","typeInstance":"active","members":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"description":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"description","nullable":true},"startDate":{"typeName":"string","type":"string","typeInstance":"startDate","nullable":false,"optional":true},"endDate":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"endDate","nullable":true},"role":{"optional":true,"typeName":"MANAGER|CONSULTANT|MEMBER|LEAD","type":"enum","typeInstance":"role","members":{"MANAGER":{"typeName":"MANAGER","type":"MANAGER","typeInstance":"MANAGER","nullable":false,"optional":false},"CONSULTANT":{"typeName":"CONSULTANT","type":"CONSULTANT","typeInstance":"CONSULTANT","nullable":false,"optional":false},"MEMBER":{"typeName":"MEMBER","type":"MEMBER","typeInstance":"MEMBER","nullable":false,"optional":false},"LEAD":{"typeName":"LEAD","type":"LEAD","typeInstance":"LEAD","nullable":false,"optional":false}},"nullable":false},"technologies":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"technologies","fields":{"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"version":{"typeName":"string","type":"string","typeInstance":"version","nullable":false,"optional":true},"isMainTechnology":{"typeName":"boolean","type":"boolean","typeInstance":"isMainTechnology","nullable":false,"optional":true}},"nullableArray":false,"nullable":false}},"nullableArray":true,"nullable":true},"completed":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"completed","fields":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"description":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"description","nullable":true},"startDate":{"typeName":"string","type":"string","typeInstance":"startDate","nullable":false,"optional":true},"endDate":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"endDate","nullable":true},"role":{"optional":true,"typeName":"MANAGER|CONSULTANT|MEMBER|LEAD","type":"enum","typeInstance":"role","members":{"MANAGER":{"typeName":"MANAGER","type":"MANAGER","typeInstance":"MANAGER","nullable":false,"optional":false},"CONSULTANT":{"typeName":"CONSULTANT","type":"CONSULTANT","typeInstance":"CONSULTANT","nullable":false,"optional":false},"MEMBER":{"typeName":"MEMBER","type":"MEMBER","typeInstance":"MEMBER","nullable":false,"optional":false},"LEAD":{"typeName":"LEAD","type":"LEAD","typeInstance":"LEAD","nullable":false,"optional":false}},"nullable":false},"technologies":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"technologies","fields":{"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"version":{"typeName":"string","type":"string","typeInstance":"version","nullable":false,"optional":true},"isMainTechnology":{"typeName":"boolean","type":"boolean","typeInstance":"isMainTechnology","nullable":false,"optional":true}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}},"performance":{"nullable":false,"optional":false,"type":"record","typeInstance":"performance","typeName":"record","fields":{"history":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"history","fields":{"period":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"period","nullable":true},"score":{"typeName":"decimal","type":"decimal","typeInstance":"score","nullable":false,"optional":true},"feedback":{"typeName":"string","type":"string","typeInstance":"feedback","nullable":false,"optional":true},"evaluator":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"evaluator","nullable":true}},"nullableArray":false,"nullable":false}}},"benefits":{"nullable":false,"optional":false,"type":"record","typeInstance":"benefits","typeName":"record","fields":{"health":{"optional":false,"typeName":"NONE|FAMILY|PREMIUM|BASIC","type":"enum","typeInstance":"health","members":{"NONE":{"typeName":"NONE","type":"NONE","typeInstance":"NONE","nullable":false,"optional":false},"FAMILY":{"typeName":"FAMILY","type":"FAMILY","typeInstance":"FAMILY","nullable":false,"optional":false},"PREMIUM":{"typeName":"PREMIUM","type":"PREMIUM","typeInstance":"PREMIUM","nullable":false,"optional":false},"BASIC":{"typeName":"BASIC","type":"BASIC","typeInstance":"BASIC","nullable":false,"optional":false}},"nullable":false},"additional":{"nullable":false,"optional":false,"type":"record","typeInstance":"additional","typeName":"record","fields":{"dental":{"optional":false,"typeName":"boolean|()","type":"union","typeInstance":"dental","nullable":true},"vision":{"typeName":"boolean","type":"boolean","typeInstance":"vision","nullable":false,"optional":true}}},"leaves":{"nullable":false,"optional":false,"type":"record","typeInstance":"leaves","typeName":"record","fields":{"total":{"typeName":"int","type":"int","typeInstance":"total","nullable":false,"optional":false},"used":{"typeName":"int","type":"int","typeInstance":"used","nullable":false,"optional":false}}}}},"payrollInfo":{"nullable":false,"optional":false,"type":"record","typeInstance":"payrollInfo","typeName":"record","fields":{"bankName":{"typeName":"string","type":"string","typeInstance":"bankName","nullable":false,"optional":false},"maskedAccountNumber":{"typeName":"string","type":"string","typeInstance":"maskedAccountNumber","nullable":false,"optional":false},"accountType":{"optional":false,"typeName":"SAVINGS|CHECKING","type":"enum","typeInstance":"accountType","members":{"SAVINGS":{"typeName":"SAVINGS","type":"SAVINGS","typeInstance":"SAVINGS","nullable":false,"optional":false},"CHECKING":{"typeName":"CHECKING","type":"CHECKING","typeInstance":"CHECKING","nullable":false,"optional":false}},"nullable":false}}},"documentation":{"nullable":false,"optional":false,"type":"record","typeInstance":"documentation","typeName":"record","fields":{"status":{"optional":false,"typeName":"(REJECTED|EXPIRED|VERIFIED|PENDING)[]","type":"enum[]","typeInstance":"status","members":{"REJECTED":{"typeName":"REJECTED","type":"REJECTED","typeInstance":"REJECTED","nullable":false,"optional":false},"EXPIRED":{"typeName":"EXPIRED","type":"EXPIRED","typeInstance":"EXPIRED","nullable":false,"optional":false},"VERIFIED":{"typeName":"VERIFIED","type":"VERIFIED","typeInstance":"VERIFIED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"pendingDocuments":{"typeName":"string[]","type":"string[]","typeInstance":"pendingDocuments","nullable":false,"optional":true}}},"systemInfo":{"nullable":false,"optional":false,"type":"record","typeInstance":"systemInfo","typeName":"record","fields":{"lastModified":{"typeName":"string","type":"string","typeInstance":"lastModified","nullable":false,"optional":false},"modifiedBy":{"typeName":"string","type":"string","typeInstance":"modifiedBy","nullable":false,"optional":false},"isActiveEmployee":{"typeName":"boolean","type":"boolean","typeInstance":"isActiveEmployee","nullable":false,"optional":false}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_16_100_fields/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_16_100_fields/expected.json
deleted file mode 100644
index 3608643547b..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_16_100_fields/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"person?.id","firstName":"person.firstName","middleName":"person?.middleName","lastName":"person?.lastName","gender":"person.gender","age":"check int:fromString(person?.age?:\"\")","birthDate":"person.dateOfBirth?:\"\"","citizenship":"person.nationality?:\"\"","passport":"(person?.passportNumber).toString()","phones":"person.contactNumbers","email":"person.primaryEmail","backupEmails":"check (person.alternateEmails).cloneWithType()","currentAddress":"{\n streetAddress: person.residentialAddress.street?:\"\",\ncityName: person.residentialAddress?.city,\nstateName: person.residentialAddress.state?:\"\",\ncountryName: person.residentialAddress.country,\npostalCode: (person.residentialAddress.zipCode).toString(),\nlat: check (person.residentialAddress?.latitude).ensureType(),\nlng: check (person.residentialAddress?.longitude).ensureType() \n}","homeAddress":"{\n streetAddress: person?.permanentAddress?.street?:\"\",\ncityName: person?.permanentAddress?.city,\nstateName: person?.permanentAddress?.state?:\"\",\ncountryName: person?.permanentAddress?.country?:\"\",\npostalCode: (person?.permanentAddress?.zipCode?:0).toString(),\nlat: check (person?.permanentAddress?.latitude).ensureType(),\nlng: check (person?.permanentAddress?.longitude).ensureType() \n}","studentDocs":"from var documentsItem in person?.documents ?: []\n select {\n documentType: documentsItem.documentType,\nnumber: documentsItem.documentNumber,\ncountry: documentsItem.issuingCountry,\nvalidUntil: documentsItem.expiryDate\n}","emergency":"{\n contactName: person?.emergencyContact?.name?:\"\",\ncontactDetails: person?.emergencyContact?.contacts?:[],\nrelation: person?.emergencyContact?.relationship?:\"\" \n}","healthRecord":"{\n blood: person?.healthInfo?.bloodGroup?:\"\",\nallergyInfo: person?.healthInfo?.allergies?:[],\ncurrentMedications: person?.healthInfo?.medications,\ninsuranceStatus: person?.healthInfo?.isInsured?:false \n}","finances":"{\n paymentPreference: person?.financialInfo?.preferredPayment?:\"CASH\",\naccountId: person?.financialInfo?.accountNumber,\nbank: person?.financialInfo?.bankName,\nscholarship: person?.financialInfo?.scholarshipAmount \n}","education":"from var academicHistoryItem in person?.academicHistory ?: []\n select {\n school: academicHistoryItem?.institutionName?:\"\",\ngradePoint: academicHistoryItem.gpa?:0.0,\nspecialization: academicHistoryItem.major?:\"\",\ncompletionYear: academicHistoryItem.graduationYear?:0\n}","abilities":"from var skillsItem in person?.skills ?: []\n select {\n skillName: skillsItem.name?:\"\",\nlevel: skillsItem.proficiencyLevel?:0,\nexperiencePeriod: skillsItem?.experience?:\"\"\n}","enrolledCourses":"from var coursesItem in person?.college?.courses ?: []\n select {\n courseId: coursesItem?.id,\ncourseName: coursesItem?.name,\ncode: coursesItem.courseCode,\ndesc: coursesItem?.description,\ncreditHours: coursesItem.credits,\ncourseDuration: coursesItem.duration,\npossibleGrades: check (coursesItem.allowedGrades).cloneWithType(),\nprofessors: from var professorsItem in coursesItem?.professors ?: []\n select {\n id: professorsItem.id,\nfirstName: professorsItem.firstName,\nlastName: professorsItem?.lastName,\nspecializations: professorsItem?.specializations,\ngradesAssigned: professorsItem.gradesAssigned,\ndepartment: {\n departmentName: professorsItem.department?.departmentName?:\"\",\nstatus: professorsItem.department?.status,\nfacultyCount: professorsItem.department?.facultyCount?:0,\nspecializations: professorsItem.department?.specializations?:[],\nbudget: professorsItem.department?.budget?:0.0,\nestablished: professorsItem.department?.established?:\"\" \n},\nevaluationScores: professorsItem.evaluationScores,\nyearsOfExperience: professorsItem.yearsOfExperience,\npublications: professorsItem?.publications,\nresearchAreas: professorsItem.researchAreas\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_16_100_fields/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_16_100_fields/mapping.json
deleted file mode 100644
index a7f306b295c..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_16_100_fields/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string|int|()","parameters":["person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["person.firstName"]},"middleName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.middleName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.lastName"]},"gender":{"operation":"DIRECT","targetType":"OTHER|FEMALE|GREEN|MALE","parameters":["person.gender"]},"age":{"operation":"DIRECT","targetType":"int|()","parameters":["person.age"]},"birthDate":{"operation":"DIRECT","targetType":"string","parameters":["person.dateOfBirth"]},"citizenship":{"operation":"DIRECT","targetType":"string","parameters":["person.nationality"]},"passport":{"operation":"DIRECT","targetType":"string|()","parameters":["person.passportNumber"]},"phones":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["person.contactNumbers"]},"email":{"operation":"DIRECT","targetType":"string","parameters":["person.primaryEmail"]},"backupEmails":{"operation":"DIRECT","targetType":"string[]","parameters":["person.alternateEmails"]},"currentAddress":{"streetAddress":{"operation":"DIRECT","targetType":"string","parameters":["person.residentialAddress.street"]},"cityName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.residentialAddress.city"]},"stateName":{"operation":"DIRECT","targetType":"string","parameters":["person.residentialAddress.state"]},"countryName":{"operation":"DIRECT","targetType":"string","parameters":["person.residentialAddress.country"]},"postalCode":{"operation":"DIRECT","targetType":"string","parameters":["person.residentialAddress.zipCode"]},"lat":{"operation":"DIRECT","targetType":"float|()","parameters":["person.residentialAddress.latitude"]},"lng":{"operation":"DIRECT","targetType":"float|()","parameters":["person.residentialAddress.longitude"]}},"homeAddress":{"streetAddress":{"operation":"DIRECT","targetType":"string","parameters":["person.permanentAddress.street"]},"cityName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.permanentAddress.city"]},"stateName":{"operation":"DIRECT","targetType":"string","parameters":["person.permanentAddress.state"]},"countryName":{"operation":"DIRECT","targetType":"string","parameters":["person.permanentAddress.country"]},"postalCode":{"operation":"DIRECT","targetType":"string","parameters":["person.permanentAddress.zipCode"]},"lat":{"operation":"DIRECT","targetType":"float|()","parameters":["person.permanentAddress.latitude"]},"lng":{"operation":"DIRECT","targetType":"float|()","parameters":["person.permanentAddress.longitude"]}},"studentDocs":{"documentType":{"operation":"DIRECT","targetType":"string","parameters":["person.documents.documentType"]},"number":{"operation":"DIRECT","targetType":"string","parameters":["person.documents.documentNumber"]},"country":{"operation":"DIRECT","targetType":"string","parameters":["person.documents.issuingCountry"]},"validUntil":{"operation":"DIRECT","targetType":"string","parameters":["person.documents.expiryDate"]}},"emergency":{"contactName":{"operation":"DIRECT","targetType":"string","parameters":["person.emergencyContact.name"]},"contactDetails":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["person.emergencyContact.contacts"]},"relation":{"operation":"DIRECT","targetType":"string","parameters":["person.emergencyContact.relationship"]}},"healthRecord":{"blood":{"operation":"DIRECT","targetType":"string","parameters":["person.healthInfo.bloodGroup"]},"allergyInfo":{"operation":"DIRECT","targetType":"(string|())[]","parameters":["person.healthInfo.allergies"]},"currentMedications":{"operation":"DIRECT","targetType":"string[]|()","parameters":["person.healthInfo.medications"]},"insuranceStatus":{"operation":"DIRECT","targetType":"boolean","parameters":["person.healthInfo.isInsured"]}},"finances":{"paymentPreference":{"operation":"DIRECT","targetType":"CASH|BANK_TRANSFER|DEBIT_CARD|CREDIT_CARD","parameters":["person.financialInfo.preferredPayment"]},"accountId":{"operation":"DIRECT","targetType":"string|()","parameters":["person.financialInfo.accountNumber"]},"bank":{"operation":"DIRECT","targetType":"string|()","parameters":["person.financialInfo.bankName"]},"scholarship":{"operation":"DIRECT","targetType":"decimal|()","parameters":["person.financialInfo.scholarshipAmount"]}},"education":{"school":{"operation":"DIRECT","targetType":"string","parameters":["person.academicHistory.institutionName"]},"gradePoint":{"operation":"DIRECT","targetType":"float","parameters":["person.academicHistory.gpa"]},"specialization":{"operation":"DIRECT","targetType":"string","parameters":["person.academicHistory.major"]},"completionYear":{"operation":"DIRECT","targetType":"int","parameters":["person.academicHistory.graduationYear"]}},"abilities":{"skillName":{"operation":"DIRECT","targetType":"string","parameters":["person.skills.name"]},"level":{"operation":"DIRECT","targetType":"int","parameters":["person.skills.proficiencyLevel"]},"experiencePeriod":{"operation":"DIRECT","targetType":"string|int","parameters":["person.skills.experience"]}},"enrolledCourses":{"courseId":{"operation":"DIRECT","targetType":"string|()","parameters":["person.college.courses.id"]},"courseName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.college.courses.name"]},"code":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.courseCode"]},"desc":{"operation":"DIRECT","targetType":"string|()","parameters":["person.college.courses.description"]},"creditHours":{"operation":"DIRECT","targetType":"decimal|()","parameters":["person.college.courses.credits"]},"courseDuration":{"operation":"DIRECT","targetType":"string|int|()","parameters":["person.college.courses.duration"]},"possibleGrades":{"operation":"DIRECT","targetType":"(F|D|C|B|A)[]","parameters":["person.college.courses.allowedGrades"]},"professors":{"id":{"operation":"DIRECT","targetType":"string|int","parameters":["person.college.courses.professors.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.professors.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.college.courses.professors.lastName"]},"specializations":{"operation":"DIRECT","targetType":"string[]|()","parameters":["person.college.courses.professors.specializations"]},"gradesAssigned":{"operation":"DIRECT","targetType":"(F|D|C|B|A|())[]","parameters":["person.college.courses.professors.gradesAssigned"]},"department":{"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.professors.department.departmentName"]},"status":{"operation":"DIRECT","targetType":"SUSPENDED|PENDING|INACTIVE|ACTIVE","parameters":["person.college.courses.professors.department.status"]},"facultyCount":{"operation":"DIRECT","targetType":"int","parameters":["person.college.courses.professors.department.facultyCount"]},"specializations":{"operation":"DIRECT","targetType":"string[]","parameters":["person.college.courses.professors.department.specializations"]},"budget":{"operation":"DIRECT","targetType":"decimal","parameters":["person.college.courses.professors.department.budget"]},"established":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.professors.department.established"]}},"evaluationScores":{"operation":"DIRECT","targetType":"(decimal|float)[]","parameters":["person.college.courses.professors.evaluationScores"]},"yearsOfExperience":{"operation":"DIRECT","targetType":"int","parameters":["person.college.courses.professors.yearsOfExperience"]},"publications":{"operation":"DIRECT","targetType":"string[]|()","parameters":["person.college.courses.professors.publications"]},"researchAreas":{"operation":"DIRECT","targetType":"(string|())[]","parameters":["person.college.courses.professors.researchAreas"]}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_16_100_fields/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_16_100_fields/param_def.json
deleted file mode 100644
index a171736573e..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_16_100_fields/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string|int|()","comment":""},"firstName":{"type":"string","comment":""},"middleName":{"type":"string|()","comment":""},"lastName":{"type":"string|()","comment":""},"gender":{"type":"OTHER|FEMALE|GREEN|MALE","comment":""},"age":{"type":"string|()","comment":""},"dateOfBirth":{"type":"string|()","comment":""},"nationality":{"type":"string","comment":""},"passportNumber":{"type":"int|()","comment":""},"status":{"type":"SUSPENDED|PENDING|INACTIVE|ACTIVE","comment":""},"contactNumbers":{"type":"(string|int)[]","comment":""},"primaryEmail":{"type":"string","comment":""},"alternateEmails":{"type":"(string|())[]","comment":""},"residentialAddress":{"street":{"type":"string","comment":""},"city":{"type":"string|()","comment":""},"state":{"type":"string|()","comment":""},"country":{"type":"string","comment":""},"zipCode":{"type":"int","comment":""},"latitude":{"type":"decimal|()","comment":""},"longitude":{"type":"int|()","comment":""}},"permanentAddress":{"street":{"type":"string","comment":""},"city":{"type":"string|()","comment":""},"state":{"type":"string|()","comment":""},"country":{"type":"string","comment":""},"zipCode":{"type":"int","comment":""},"latitude":{"type":"decimal|()","comment":""},"longitude":{"type":"int|()","comment":""}},"documents":{"documentType":{"type":"string","comment":""},"documentNumber":{"type":"string","comment":""},"issuingCountry":{"type":"string","comment":""},"expiryDate":{"type":"string","comment":""}},"emergencyContact":{"name":{"type":"string","comment":""},"contacts":{"type":"(string|int)[]","comment":""},"relationship":{"type":"string","comment":""}},"healthInfo":{"bloodGroup":{"type":"string","comment":""},"allergies":{"type":"string[]","comment":""},"medications":{"type":"string[]","comment":""},"isInsured":{"type":"boolean","comment":""}},"financialInfo":{"preferredPayment":{"type":"CASH|BANK_TRANSFER|DEBIT_CARD|CREDIT_CARD","comment":""},"accountNumber":{"type":"string|()","comment":""},"bankName":{"type":"string","comment":""},"scholarshipAmount":{"type":"decimal","comment":""}},"academicHistory":{"institutionName":{"type":"string|()","comment":""},"gpa":{"type":"float|()","comment":""},"major":{"type":"string","comment":""},"graduationYear":{"type":"int|()","comment":""}},"skills":{"name":{"type":"string|()","comment":""},"proficiencyLevel":{"type":"int","comment":""},"experience":{"type":"string|int|()","comment":""}},"college":{"courses":{"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"courseCode":{"type":"string","comment":""},"description":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"duration":{"type":"string|int|()","comment":""},"allowedGrades":{"type":"(F|D|C|B|A|())[]","comment":""},"professors":{"id":{"type":"string|int","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"specializations":{"type":"string[]|()","comment":""},"gradesAssigned":{"type":"(F|D|C|B|A|())[]","comment":""},"department":{"departmentName":{"type":"string","comment":""},"status":{"type":"SUSPENDED|PENDING|INACTIVE|ACTIVE","comment":""},"facultyCount":{"type":"int","comment":""},"specializations":{"type":"string[]","comment":""},"budget":{"type":"decimal","comment":""},"established":{"type":"string","comment":""}},"evaluationScores":{"type":"(decimal|float)[]","comment":""},"yearsOfExperience":{"type":"int","comment":""},"publications":{"type":"string[]|()","comment":""},"researchAreas":{"type":"(string|())[]","comment":""}},"prerequisites":{"type":"(string|())[]","comment":""},"objectives":{"type":"string[]","comment":""},"courseLocation":{"street":{"type":"string","comment":""},"city":{"type":"string|()","comment":""},"state":{"type":"string|()","comment":""},"country":{"type":"string","comment":""},"zipCode":{"type":"int","comment":""},"latitude":{"type":"decimal|()","comment":""},"longitude":{"type":"int|()","comment":""}},"term":{"type":"string","comment":""},"maxCapacity":{"type":"int","comment":""},"courseStatus":{"type":"SUSPENDED|PENDING|INACTIVE|ACTIVE","comment":""},"courseTag":{"type":"string","comment":""}},"name":{"type":"string","comment":""},"accreditation":{"type":"string","comment":""},"collegeLocation":{"street":{"type":"string","comment":""},"city":{"type":"string|()","comment":""},"state":{"type":"string|()","comment":""},"country":{"type":"string","comment":""},"zipCode":{"type":"int","comment":""},"latitude":{"type":"decimal|()","comment":""},"longitude":{"type":"int|()","comment":""}},"status":{"type":"SUSPENDED|PENDING|INACTIVE|ACTIVE","comment":""}},"languages":{"type":"string[]|()","comment":""},"isInternational":{"type":"boolean","comment":""},"joinDate":{"type":"string|()","comment":""},"photo":{"type":"byte[]|()","comment":""},"socialMediaHandles":{"type":"(string|())[]|()","comment":""},"student_list":{"type":"record[]","comment":""}}},"output":{"id":{"type":"string|int|()","comment":""},"firstName":{"type":"string","comment":""},"middleName":{"type":"string|()","comment":""},"lastName":{"type":"string|()","comment":""},"gender":{"type":"OTHER|FEMALE|GREEN|MALE","comment":""},"age":{"type":"int|()","comment":""},"birthDate":{"type":"string","comment":""},"citizenship":{"type":"string","comment":""},"passport":{"type":"string|()","comment":""},"phones":{"type":"(string|int)[]","comment":""},"email":{"type":"string","comment":""},"backupEmails":{"type":"string[]","comment":""},"currentAddress":{"streetAddress":{"type":"string","comment":""},"cityName":{"type":"string|()","comment":""},"stateName":{"type":"string","comment":""},"countryName":{"type":"string","comment":""},"postalCode":{"type":"string","comment":""},"lat":{"type":"float|()","comment":""},"lng":{"type":"float|()","comment":""}},"homeAddress":{"streetAddress":{"type":"string","comment":""},"cityName":{"type":"string|()","comment":""},"stateName":{"type":"string","comment":""},"countryName":{"type":"string","comment":""},"postalCode":{"type":"string","comment":""},"lat":{"type":"float|()","comment":""},"lng":{"type":"float|()","comment":""}},"studentDocs":{"documentType":{"type":"string","comment":""},"number":{"type":"string","comment":""},"country":{"type":"string","comment":""},"validUntil":{"type":"string","comment":""}},"emergency":{"contactName":{"type":"string","comment":""},"contactDetails":{"type":"(string|int)[]","comment":""},"relation":{"type":"string","comment":""}},"healthRecord":{"blood":{"type":"string","comment":""},"allergyInfo":{"type":"(string|())[]","comment":""},"currentMedications":{"type":"string[]|()","comment":""},"insuranceStatus":{"type":"boolean","comment":""}},"finances":{"paymentPreference":{"type":"CASH|BANK_TRANSFER|DEBIT_CARD|CREDIT_CARD","comment":""},"accountId":{"type":"string|()","comment":""},"bank":{"type":"string|()","comment":""},"scholarship":{"type":"decimal|()","comment":""}},"education":{"school":{"type":"string","comment":""},"gradePoint":{"type":"float","comment":""},"specialization":{"type":"string","comment":""},"completionYear":{"type":"int","comment":""}},"abilities":{"skillName":{"type":"string","comment":""},"level":{"type":"int","comment":""},"experiencePeriod":{"type":"string|int","comment":""}},"enrolledCourses":{"courseId":{"type":"string|()","comment":""},"courseName":{"type":"string|()","comment":""},"code":{"type":"string","comment":""},"desc":{"type":"string|()","comment":""},"creditHours":{"type":"decimal|()","comment":""},"courseDuration":{"type":"string|int|()","comment":""},"possibleGrades":{"type":"(F|D|C|B|A)[]","comment":""},"professors":{"id":{"type":"string|int","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"specializations":{"type":"string[]|()","comment":""},"gradesAssigned":{"type":"(F|D|C|B|A|())[]","comment":""},"department":{"departmentName":{"type":"string","comment":""},"status":{"type":"SUSPENDED|PENDING|INACTIVE|ACTIVE","comment":""},"facultyCount":{"type":"int","comment":""},"specializations":{"type":"string[]","comment":""},"budget":{"type":"decimal","comment":""},"established":{"type":"string","comment":""}},"evaluationScores":{"type":"(decimal|float)[]","comment":""},"yearsOfExperience":{"type":"int","comment":""},"publications":{"type":"string[]|()","comment":""},"researchAreas":{"type":"(string|())[]","comment":""}},"requirements":{"type":"string[]","comment":""},"learningGoals":{"type":"string[]","comment":""},"address":{"streetAddress":{"type":"string","comment":""},"cityName":{"type":"string|()","comment":""},"stateName":{"type":"string","comment":""},"countryName":{"type":"string","comment":""},"postalCode":{"type":"string","comment":""},"lat":{"type":"float|()","comment":""},"lng":{"type":"float|()","comment":""}}},"spokenLanguages":{"type":"string[]","comment":""},"foreignStudent":{"type":"boolean","comment":""},"profilePicture":{"type":"byte[]|()","comment":""},"socialMedia":{"type":"string[]","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"optional":true,"typeName":"string|int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"middleName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"middleName","nullable":true},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"gender":{"optional":false,"typeName":"OTHER|FEMALE|GREEN|MALE","type":"enum","typeInstance":"gender","members":{"OTHER":{"typeName":"OTHER","type":"OTHER","typeInstance":"OTHER","nullable":false,"optional":false},"FEMALE":{"typeName":"FEMALE","type":"FEMALE","typeInstance":"FEMALE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"MALE":{"typeName":"MALE","type":"MALE","typeInstance":"MALE","nullable":false,"optional":false}},"nullable":false},"age":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"age","nullable":true},"dateOfBirth":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"dateOfBirth","nullable":true},"nationality":{"typeName":"string","type":"string","typeInstance":"nationality","nullable":false,"optional":true},"passportNumber":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"passportNumber","nullable":true},"status":{"optional":false,"typeName":"SUSPENDED|PENDING|INACTIVE|ACTIVE","type":"enum","typeInstance":"status","members":{"SUSPENDED":{"typeName":"SUSPENDED","type":"SUSPENDED","typeInstance":"SUSPENDED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false},"INACTIVE":{"typeName":"INACTIVE","type":"INACTIVE","typeInstance":"INACTIVE","nullable":false,"optional":false},"ACTIVE":{"typeName":"ACTIVE","type":"ACTIVE","typeInstance":"ACTIVE","nullable":false,"optional":false}},"nullable":false},"contactNumbers":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"contactNumbers","nullableArray":false,"nullable":false},"primaryEmail":{"typeName":"string","type":"string","typeInstance":"primaryEmail","nullable":false,"optional":false},"alternateEmails":{"optional":true,"typeName":"(string|())[]","type":"union[]","typeInstance":"alternateEmails","nullableArray":true,"nullable":false},"residentialAddress":{"nullable":false,"optional":false,"type":"record","typeInstance":"residentialAddress","typeName":"record","fields":{"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":true},"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"state":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"state","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"zipCode":{"typeName":"int","type":"int","typeInstance":"zipCode","nullable":false,"optional":false},"latitude":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"latitude","nullable":true},"longitude":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"longitude","nullable":true}}},"permanentAddress":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"permanentAddress","members":{"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":true},"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"state":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"state","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"zipCode":{"typeName":"int","type":"int","typeInstance":"zipCode","nullable":false,"optional":false},"latitude":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"latitude","nullable":true},"longitude":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"longitude","nullable":true}},"nullable":true},"documents":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"documents","members":{"documentType":{"typeName":"string","type":"string","typeInstance":"documentType","nullable":false,"optional":false},"documentNumber":{"typeName":"string","type":"string","typeInstance":"documentNumber","nullable":false,"optional":false},"issuingCountry":{"typeName":"string","type":"string","typeInstance":"issuingCountry","nullable":false,"optional":false},"expiryDate":{"typeName":"string","type":"string","typeInstance":"expiryDate","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"emergencyContact":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"emergencyContact","members":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"contacts":{"optional":false,"typeName":"(string|int)[]","type":"union[]","typeInstance":"contacts","nullableArray":false,"nullable":false},"relationship":{"typeName":"string","type":"string","typeInstance":"relationship","nullable":false,"optional":false}},"nullable":true},"healthInfo":{"optional":true,"typeName":"readonly&record|()","type":"union","typeInstance":"healthInfo","members":{"bloodGroup":{"typeName":"string","type":"string","typeInstance":"bloodGroup","nullable":false,"optional":false},"allergies":{"typeName":"string[]","type":"string[]","typeInstance":"allergies","nullable":false,"optional":false},"medications":{"typeName":"string[]","type":"string[]","typeInstance":"medications","nullable":false,"optional":false},"isInsured":{"typeName":"boolean","type":"boolean","typeInstance":"isInsured","nullable":false,"optional":false}},"nullable":true},"financialInfo":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"financialInfo","members":{"preferredPayment":{"optional":false,"typeName":"CASH|BANK_TRANSFER|DEBIT_CARD|CREDIT_CARD","type":"enum","typeInstance":"preferredPayment","members":{"CASH":{"typeName":"CASH","type":"CASH","typeInstance":"CASH","nullable":false,"optional":false},"BANK_TRANSFER":{"typeName":"BANK_TRANSFER","type":"BANK_TRANSFER","typeInstance":"BANK_TRANSFER","nullable":false,"optional":false},"DEBIT_CARD":{"typeName":"DEBIT_CARD","type":"DEBIT_CARD","typeInstance":"DEBIT_CARD","nullable":false,"optional":false},"CREDIT_CARD":{"typeName":"CREDIT_CARD","type":"CREDIT_CARD","typeInstance":"CREDIT_CARD","nullable":false,"optional":false}},"nullable":false},"accountNumber":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"accountNumber","nullable":true},"bankName":{"typeName":"string","type":"string","typeInstance":"bankName","nullable":false,"optional":true},"scholarshipAmount":{"typeName":"decimal","type":"decimal","typeInstance":"scholarshipAmount","nullable":false,"optional":true}},"nullable":true},"academicHistory":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"academicHistory","members":{"institutionName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"institutionName","nullable":true},"gpa":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"gpa","nullable":true},"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":true},"graduationYear":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"graduationYear","nullable":true}},"nullableArray":false,"nullable":true},"skills":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"skills","members":{"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"proficiencyLevel":{"typeName":"int","type":"int","typeInstance":"proficiencyLevel","nullable":false,"optional":true},"experience":{"optional":true,"typeName":"string|int|()","type":"union","typeInstance":"experience","nullable":true}},"nullableArray":false,"nullable":true},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"courseCode":{"typeName":"string","type":"string","typeInstance":"courseCode","nullable":false,"optional":false},"description":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"description","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"duration":{"optional":false,"typeName":"string|int|()","type":"union","typeInstance":"duration","nullable":true},"allowedGrades":{"optional":true,"typeName":"(F|D|C|B|A|())[]","type":"union[]","typeInstance":"allowedGrades","members":{"F":{"typeName":"F","type":"F","typeInstance":"F","nullable":false,"optional":false},"D":{"typeName":"D","type":"D","typeInstance":"D","nullable":false,"optional":false},"C":{"typeName":"C","type":"C","typeInstance":"C","nullable":false,"optional":false},"B":{"typeName":"B","type":"B","typeInstance":"B","nullable":false,"optional":false},"A":{"typeName":"A","type":"A","typeInstance":"A","nullable":false,"optional":false}},"nullableArray":true,"nullable":false},"professors":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professors","members":{"id":{"optional":true,"typeName":"string|int","type":"union","typeInstance":"id","nullable":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"specializations":{"optional":true,"typeName":"string[]|()","type":"union[]|()","typeInstance":"specializations","nullableArray":false,"nullable":true},"gradesAssigned":{"optional":true,"typeName":"(F|D|C|B|A|())[]","type":"union[]","typeInstance":"gradesAssigned","members":{"F":{"typeName":"F","type":"F","typeInstance":"F","nullable":false,"optional":false},"D":{"typeName":"D","type":"D","typeInstance":"D","nullable":false,"optional":false},"C":{"typeName":"C","type":"C","typeInstance":"C","nullable":false,"optional":false},"B":{"typeName":"B","type":"B","typeInstance":"B","nullable":false,"optional":false},"A":{"typeName":"A","type":"A","typeInstance":"A","nullable":false,"optional":false}},"nullableArray":true,"nullable":false},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false},"status":{"optional":true,"typeName":"SUSPENDED|PENDING|INACTIVE|ACTIVE","type":"enum","typeInstance":"status","members":{"SUSPENDED":{"typeName":"SUSPENDED","type":"SUSPENDED","typeInstance":"SUSPENDED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false},"INACTIVE":{"typeName":"INACTIVE","type":"INACTIVE","typeInstance":"INACTIVE","nullable":false,"optional":false},"ACTIVE":{"typeName":"ACTIVE","type":"ACTIVE","typeInstance":"ACTIVE","nullable":false,"optional":false}},"nullable":false},"facultyCount":{"typeName":"int","type":"int","typeInstance":"facultyCount","nullable":false,"optional":false},"specializations":{"typeName":"string[]","type":"string[]","typeInstance":"specializations","nullable":false,"optional":false},"budget":{"typeName":"decimal","type":"decimal","typeInstance":"budget","nullable":false,"optional":false},"established":{"typeName":"string","type":"string","typeInstance":"established","nullable":false,"optional":false}},"nullable":false},"evaluationScores":{"optional":true,"typeName":"(decimal|float)[]","type":"union[]","typeInstance":"evaluationScores","nullableArray":false,"nullable":false},"yearsOfExperience":{"typeName":"int","type":"int","typeInstance":"yearsOfExperience","nullable":false,"optional":true},"publications":{"optional":true,"typeName":"string[]|()","type":"union[]|()","typeInstance":"publications","nullableArray":false,"nullable":true},"researchAreas":{"optional":true,"typeName":"(string|())[]","type":"union[]","typeInstance":"researchAreas","nullableArray":true,"nullable":false}},"nullableArray":false,"nullable":true},"prerequisites":{"optional":true,"typeName":"(string|())[]","type":"union[]","typeInstance":"prerequisites","nullableArray":true,"nullable":false},"objectives":{"typeName":"string[]","type":"string[]","typeInstance":"objectives","nullable":false,"optional":true},"courseLocation":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"courseLocation","members":{"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":true},"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"state":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"state","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"zipCode":{"typeName":"int","type":"int","typeInstance":"zipCode","nullable":false,"optional":false},"latitude":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"latitude","nullable":true},"longitude":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"longitude","nullable":true}},"nullable":true},"term":{"typeName":"string","type":"string","typeInstance":"term","nullable":false,"optional":false},"maxCapacity":{"typeName":"int","type":"int","typeInstance":"maxCapacity","nullable":false,"optional":false},"courseStatus":{"optional":true,"typeName":"SUSPENDED|PENDING|INACTIVE|ACTIVE","type":"enum","typeInstance":"courseStatus","members":{"SUSPENDED":{"typeName":"SUSPENDED","type":"SUSPENDED","typeInstance":"SUSPENDED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false},"INACTIVE":{"typeName":"INACTIVE","type":"INACTIVE","typeInstance":"INACTIVE","nullable":false,"optional":false},"ACTIVE":{"typeName":"ACTIVE","type":"ACTIVE","typeInstance":"ACTIVE","nullable":false,"optional":false}},"nullable":false},"courseTag":{"typeName":"string","type":"string","typeInstance":"courseTag","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"accreditation":{"typeName":"string","type":"string","typeInstance":"accreditation","nullable":false,"optional":false},"collegeLocation":{"optional":false,"typeName":"record|()","type":"union","typeInstance":"collegeLocation","members":{"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":true},"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"state":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"state","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"zipCode":{"typeName":"int","type":"int","typeInstance":"zipCode","nullable":false,"optional":false},"latitude":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"latitude","nullable":true},"longitude":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"longitude","nullable":true}},"nullable":true},"status":{"optional":false,"typeName":"SUSPENDED|PENDING|INACTIVE|ACTIVE","type":"enum","typeInstance":"status","members":{"SUSPENDED":{"typeName":"SUSPENDED","type":"SUSPENDED","typeInstance":"SUSPENDED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false},"INACTIVE":{"typeName":"INACTIVE","type":"INACTIVE","typeInstance":"INACTIVE","nullable":false,"optional":false},"ACTIVE":{"typeName":"ACTIVE","type":"ACTIVE","typeInstance":"ACTIVE","nullable":false,"optional":false}},"nullable":false}},"nullable":true},"languages":{"optional":true,"typeName":"string[]|()","type":"union[]|()","typeInstance":"languages","nullableArray":false,"nullable":true},"isInternational":{"typeName":"boolean","type":"boolean","typeInstance":"isInternational","nullable":false,"optional":true},"joinDate":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"joinDate","nullable":true},"photo":{"optional":true,"typeName":"byte[]|()","type":"union[]|()","typeInstance":"photo","nullableArray":false,"nullable":true},"socialMediaHandles":{"optional":true,"typeName":"(string|())[]|()","type":"union[]|()","typeInstance":"socialMediaHandles","nullableArray":true,"nullable":true},"student_list":{"typeName":"record[]","type":"record[]","typeInstance":"student_list","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"optional":false,"typeName":"string|int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"middleName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"middleName","nullable":true},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"gender":{"optional":false,"typeName":"OTHER|FEMALE|GREEN|MALE","type":"enum","typeInstance":"gender","members":{"OTHER":{"typeName":"OTHER","type":"OTHER","typeInstance":"OTHER","nullable":false,"optional":false},"FEMALE":{"typeName":"FEMALE","type":"FEMALE","typeInstance":"FEMALE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"MALE":{"typeName":"MALE","type":"MALE","typeInstance":"MALE","nullable":false,"optional":false}},"nullable":false},"age":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"birthDate":{"typeName":"string","type":"string","typeInstance":"birthDate","nullable":false,"optional":false},"citizenship":{"typeName":"string","type":"string","typeInstance":"citizenship","nullable":false,"optional":false},"passport":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"passport","nullable":true},"phones":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"phones","nullableArray":false,"nullable":false},"email":{"typeName":"string","type":"string","typeInstance":"email","nullable":false,"optional":false},"backupEmails":{"typeName":"string[]","type":"string[]","typeInstance":"backupEmails","nullable":false,"optional":true},"currentAddress":{"nullable":false,"optional":false,"type":"record","typeInstance":"currentAddress","typeName":"record","fields":{"streetAddress":{"typeName":"string","type":"string","typeInstance":"streetAddress","nullable":false,"optional":false},"cityName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"cityName","nullable":true},"stateName":{"typeName":"string","type":"string","typeInstance":"stateName","nullable":false,"optional":false},"countryName":{"typeName":"string","type":"string","typeInstance":"countryName","nullable":false,"optional":false},"postalCode":{"typeName":"string","type":"string","typeInstance":"postalCode","nullable":false,"optional":false},"lat":{"optional":true,"typeName":"float|()","type":"union","typeInstance":"lat","nullable":true},"lng":{"optional":true,"typeName":"float|()","type":"union","typeInstance":"lng","nullable":true}}},"homeAddress":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"homeAddress","members":{"streetAddress":{"typeName":"string","type":"string","typeInstance":"streetAddress","nullable":false,"optional":false},"cityName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"cityName","nullable":true},"stateName":{"typeName":"string","type":"string","typeInstance":"stateName","nullable":false,"optional":false},"countryName":{"typeName":"string","type":"string","typeInstance":"countryName","nullable":false,"optional":false},"postalCode":{"typeName":"string","type":"string","typeInstance":"postalCode","nullable":false,"optional":false},"lat":{"optional":true,"typeName":"float|()","type":"union","typeInstance":"lat","nullable":true},"lng":{"optional":true,"typeName":"float|()","type":"union","typeInstance":"lng","nullable":true}},"nullable":true},"studentDocs":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"studentDocs","members":{"documentType":{"typeName":"string","type":"string","typeInstance":"documentType","nullable":false,"optional":false},"number":{"typeName":"string","type":"string","typeInstance":"number","nullable":false,"optional":false},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"validUntil":{"typeName":"string","type":"string","typeInstance":"validUntil","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"emergency":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"emergency","members":{"contactName":{"typeName":"string","type":"string","typeInstance":"contactName","nullable":false,"optional":false},"contactDetails":{"optional":false,"typeName":"(string|int)[]","type":"union[]","typeInstance":"contactDetails","nullableArray":false,"nullable":false},"relation":{"typeName":"string","type":"string","typeInstance":"relation","nullable":false,"optional":false}},"nullable":true},"healthRecord":{"optional":true,"typeName":"readonly&record|()","type":"union","typeInstance":"healthRecord","members":{"blood":{"typeName":"string","type":"string","typeInstance":"blood","nullable":false,"optional":false},"allergyInfo":{"optional":false,"typeName":"(string|())[]","type":"union[]","typeInstance":"allergyInfo","nullableArray":true,"nullable":false},"currentMedications":{"optional":false,"typeName":"string[]|()","type":"union[]|()","typeInstance":"currentMedications","nullableArray":false,"nullable":true},"insuranceStatus":{"typeName":"boolean","type":"boolean","typeInstance":"insuranceStatus","nullable":false,"optional":false}},"nullable":true},"finances":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"finances","members":{"paymentPreference":{"optional":false,"typeName":"CASH|BANK_TRANSFER|DEBIT_CARD|CREDIT_CARD","type":"enum","typeInstance":"paymentPreference","members":{"CASH":{"typeName":"CASH","type":"CASH","typeInstance":"CASH","nullable":false,"optional":false},"BANK_TRANSFER":{"typeName":"BANK_TRANSFER","type":"BANK_TRANSFER","typeInstance":"BANK_TRANSFER","nullable":false,"optional":false},"DEBIT_CARD":{"typeName":"DEBIT_CARD","type":"DEBIT_CARD","typeInstance":"DEBIT_CARD","nullable":false,"optional":false},"CREDIT_CARD":{"typeName":"CREDIT_CARD","type":"CREDIT_CARD","typeInstance":"CREDIT_CARD","nullable":false,"optional":false}},"nullable":false},"accountId":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"accountId","nullable":true},"bank":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"bank","nullable":true},"scholarship":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"scholarship","nullable":true}},"nullable":true},"education":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"education","members":{"school":{"typeName":"string","type":"string","typeInstance":"school","nullable":false,"optional":false},"gradePoint":{"typeName":"float","type":"float","typeInstance":"gradePoint","nullable":false,"optional":false},"specialization":{"typeName":"string","type":"string","typeInstance":"specialization","nullable":false,"optional":false},"completionYear":{"typeName":"int","type":"int","typeInstance":"completionYear","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"abilities":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"abilities","members":{"skillName":{"typeName":"string","type":"string","typeInstance":"skillName","nullable":false,"optional":false},"level":{"typeName":"int","type":"int","typeInstance":"level","nullable":false,"optional":false},"experiencePeriod":{"optional":false,"typeName":"string|int","type":"union","typeInstance":"experiencePeriod","nullable":false}},"nullableArray":false,"nullable":true},"enrolledCourses":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"enrolledCourses","members":{"courseId":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"courseId","nullable":true},"courseName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"courseName","nullable":true},"code":{"typeName":"string","type":"string","typeInstance":"code","nullable":false,"optional":false},"desc":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"desc","nullable":true},"creditHours":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"creditHours","nullable":true},"courseDuration":{"optional":true,"typeName":"string|int|()","type":"union","typeInstance":"courseDuration","nullable":true},"possibleGrades":{"optional":true,"typeName":"(F|D|C|B|A)[]","type":"enum[]","typeInstance":"possibleGrades","members":{"F":{"typeName":"F","type":"F","typeInstance":"F","nullable":false,"optional":false},"D":{"typeName":"D","type":"D","typeInstance":"D","nullable":false,"optional":false},"C":{"typeName":"C","type":"C","typeInstance":"C","nullable":false,"optional":false},"B":{"typeName":"B","type":"B","typeInstance":"B","nullable":false,"optional":false},"A":{"typeName":"A","type":"A","typeInstance":"A","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"professors":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professors","members":{"id":{"optional":true,"typeName":"string|int","type":"union","typeInstance":"id","nullable":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"specializations":{"optional":true,"typeName":"string[]|()","type":"union[]|()","typeInstance":"specializations","nullableArray":false,"nullable":true},"gradesAssigned":{"optional":true,"typeName":"(F|D|C|B|A|())[]","type":"union[]","typeInstance":"gradesAssigned","members":{"F":{"typeName":"F","type":"F","typeInstance":"F","nullable":false,"optional":false},"D":{"typeName":"D","type":"D","typeInstance":"D","nullable":false,"optional":false},"C":{"typeName":"C","type":"C","typeInstance":"C","nullable":false,"optional":false},"B":{"typeName":"B","type":"B","typeInstance":"B","nullable":false,"optional":false},"A":{"typeName":"A","type":"A","typeInstance":"A","nullable":false,"optional":false}},"nullableArray":true,"nullable":false},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false},"status":{"optional":true,"typeName":"SUSPENDED|PENDING|INACTIVE|ACTIVE","type":"enum","typeInstance":"status","members":{"SUSPENDED":{"typeName":"SUSPENDED","type":"SUSPENDED","typeInstance":"SUSPENDED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false},"INACTIVE":{"typeName":"INACTIVE","type":"INACTIVE","typeInstance":"INACTIVE","nullable":false,"optional":false},"ACTIVE":{"typeName":"ACTIVE","type":"ACTIVE","typeInstance":"ACTIVE","nullable":false,"optional":false}},"nullable":false},"facultyCount":{"typeName":"int","type":"int","typeInstance":"facultyCount","nullable":false,"optional":false},"specializations":{"typeName":"string[]","type":"string[]","typeInstance":"specializations","nullable":false,"optional":false},"budget":{"typeName":"decimal","type":"decimal","typeInstance":"budget","nullable":false,"optional":false},"established":{"typeName":"string","type":"string","typeInstance":"established","nullable":false,"optional":false}},"nullable":false},"evaluationScores":{"optional":true,"typeName":"(decimal|float)[]","type":"union[]","typeInstance":"evaluationScores","nullableArray":false,"nullable":false},"yearsOfExperience":{"typeName":"int","type":"int","typeInstance":"yearsOfExperience","nullable":false,"optional":true},"publications":{"optional":true,"typeName":"string[]|()","type":"union[]|()","typeInstance":"publications","nullableArray":false,"nullable":true},"researchAreas":{"optional":true,"typeName":"(string|())[]","type":"union[]","typeInstance":"researchAreas","nullableArray":true,"nullable":false}},"nullableArray":false,"nullable":true},"requirements":{"typeName":"string[]","type":"string[]","typeInstance":"requirements","nullable":false,"optional":true},"learningGoals":{"typeName":"string[]","type":"string[]","typeInstance":"learningGoals","nullable":false,"optional":true},"address":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"address","members":{"streetAddress":{"typeName":"string","type":"string","typeInstance":"streetAddress","nullable":false,"optional":false},"cityName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"cityName","nullable":true},"stateName":{"typeName":"string","type":"string","typeInstance":"stateName","nullable":false,"optional":false},"countryName":{"typeName":"string","type":"string","typeInstance":"countryName","nullable":false,"optional":false},"postalCode":{"typeName":"string","type":"string","typeInstance":"postalCode","nullable":false,"optional":false},"lat":{"optional":true,"typeName":"float|()","type":"union","typeInstance":"lat","nullable":true},"lng":{"optional":true,"typeName":"float|()","type":"union","typeInstance":"lng","nullable":true}},"nullable":true}},"nullableArray":false,"nullable":true},"spokenLanguages":{"typeName":"string[]","type":"string[]","typeInstance":"spokenLanguages","nullable":false,"optional":true},"foreignStudent":{"typeName":"boolean","type":"boolean","typeInstance":"foreignStudent","nullable":false,"optional":true},"profilePicture":{"optional":true,"typeName":"byte[]|()","type":"union[]|()","typeInstance":"profilePicture","nullableArray":false,"nullable":true},"socialMedia":{"typeName":"string[]","type":"string[]","typeInstance":"socialMedia","nullable":false,"optional":true}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_17_100_fields/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_17_100_fields/expected.json
deleted file mode 100644
index 2b1adabe4f6..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_17_100_fields/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"person?.id","firstName":"person.firstName","middleName":"person?.middleName","lastName":"person?.lastName","gender":"person.gender","age":"check int:fromString(person?.age?:\"\")","birthDate":"person.dateOfBirth?:\"\"","citizenship":"person.nationality?:\"\"","passport":"(person?.passportNumber).toString()","phones":"person.contactNumbers","email":"person.primaryEmail","backupEmails":"check (person.alternateEmails).cloneWithType()","currentAddress":"{\n streetAddress: person.residentialAddress.street?:\"\",\ncityName: person.residentialAddress?.city,\nstateName: person.residentialAddress.state?:\"\",\ncountryName: person.residentialAddress.country,\npostalCode: (person.residentialAddress.zipCode).toString(),\nlat: check (person.residentialAddress?.latitude).ensureType(),\nlng: check (person.residentialAddress?.longitude).ensureType(),\nlocationType: person.residentialAddress.addressType?:\"\",\nverified: person.residentialAddress.isVerified?:false,\nupdatedOn: person.residentialAddress.lastUpdated?:\"\",\nlandmarks: person.residentialAddress.nearbyLandmarks?:[],\nmain: person.residentialAddress.isPrimary?:false,\ntimezone: person.residentialAddress.timeZone?:\"\" \n}","homeAddress":"{\n streetAddress: person?.permanentAddress?.street?:\"\",\ncityName: person?.permanentAddress?.city,\nstateName: person?.permanentAddress?.state?:\"\",\ncountryName: person?.permanentAddress?.country?:\"\",\npostalCode: (person?.permanentAddress?.zipCode?:0).toString(),\nlat: check (person?.permanentAddress?.latitude).ensureType(),\nlng: check (person?.permanentAddress?.longitude).ensureType(),\nlocationType: person?.permanentAddress?.addressType?:\"\",\nverified: person?.permanentAddress?.isVerified?:false,\nupdatedOn: person?.permanentAddress?.lastUpdated?:\"\",\nlandmarks: person?.permanentAddress?.nearbyLandmarks?:[],\nmain: person?.permanentAddress?.isPrimary?:false,\ntimezone: person?.permanentAddress?.timeZone?:\"\" \n}","studentDocs":"from var documentsItem in person?.documents ?: []\n select {\n documentType: documentsItem.documentType,\nnumber: documentsItem.documentNumber,\ncountry: documentsItem.issuingCountry,\nvalidUntil: documentsItem.expiryDate,\nissueDate: documentsItem.issueDate?:\"\",\nverified: documentsItem.isVerified?:false,\nverifiedBy: documentsItem.verificationSource?:\"\",\ncomments: documentsItem.remarks?:\"\"\n}","emergency":"{\n contactName: person?.emergencyContact?.name?:\"\",\ncontactDetails: person?.emergencyContact?.contacts?:[],\nrelation: person?.emergencyContact?.relationship?:\"\",\ncontactAddress: person?.emergencyContact?.address?:\"\",\nprimaryContact: person?.emergencyContact?.isPrimary?:false,\nlastContacted: person?.emergencyContact?.lastContactDate?:\"\",\ncontactPersonId: person?.emergencyContact?.contactId?:\"\" \n}","healthRecord":"{\n blood: person?.healthInfo?.bloodGroup?:\"\",\nallergyInfo: person?.healthInfo?.allergies?:[],\ncurrentMedications: person?.healthInfo?.medications,\ninsuranceStatus: person?.healthInfo?.isInsured?:false,\ninsurer: person?.healthInfo?.insuranceProvider?:\"\",\npolicyId: person?.healthInfo?.policyNumber?:\"\",\nconditions: person?.healthInfo?.medicalConditions?:[],\ncheckupDate: person?.healthInfo?.lastCheckupDate?:\"\",\ndoctorName: person?.healthInfo?.primaryPhysician?:\"\",\ndisabilityStatus: person?.healthInfo?.hasDisability?:false,\nspecialNeeds: person?.healthInfo?.accommodationNeeds?:[] \n}","finances":"{\n paymentPreference: person?.financialInfo?.preferredPayment?:\"CASH\",\naccountId: person?.financialInfo?.accountNumber,\nbank: person?.financialInfo?.bankName,\nscholarship: person?.financialInfo?.scholarshipAmount,\ntuition: person?.financialInfo?.tuitionFee?:0.0,\noutstandingAmount: person?.financialInfo?.outstandingBalance?:0.0,\nloanTaken: person?.financialInfo?.hasLoan?:false,\nloanProvider: person?.financialInfo?.loanProvider?:\"\",\nmonthlyPaymentAmount: person?.financialInfo?.monthlyPayment?:0.0,\npayments: person?.financialInfo?.paymentHistory?:[],\nmaxCredit: person?.financialInfo?.creditLimit?:0.0,\npaymentStanding: person?.financialInfo?.paymentStatus?:\"SUSPENDED\" \n}","education":"from var academicHistoryItem in person?.academicHistory ?: []\n select {\n school: academicHistoryItem?.institutionName?:\"\",\ngradePoint: academicHistoryItem.gpa?:0.0,\nspecialization: academicHistoryItem.major?:\"\",\ncompletionYear: academicHistoryItem.graduationYear?:0,\ncompletedCourses: academicHistoryItem.courses?:[],\ncourseGrades: academicHistoryItem.grades?:[],\ndegree: academicHistoryItem.degreeType?:\"\",\ncertificate: academicHistoryItem.certificationType?:\"\",\nverificationStatus: academicHistoryItem.transcriptVerified?:\"\",\nacademicLevel: academicHistoryItem.academicStanding?:\"\",\nachievements: academicHistoryItem.honors?:[],\nextracurriculars: academicHistoryItem.activities?:[]\n}","abilities":"from var skillsItem in person?.skills ?: []\n select {\n skillName: skillsItem.name?:\"\",\nlevel: skillsItem.proficiencyLevel?:0,\nexperiencePeriod: skillsItem?.experience?:\"\",\ncertification: skillsItem.certificationName?:\"\",\nissuer: skillsItem.issuingOrganization?:\"\",\nacquisitionDate: skillsItem.dateAcquired?:\"\",\nexpirationDate: skillsItem.expiryDate?:\"\",\nverified: skillsItem.isVerified?:false,\nprojects: skillsItem.relatedProjects?:[],\ntestimonials: skillsItem.endorsements?:[]\n}","enrolledCourses":"from var coursesItem in person?.college?.courses ?: []\n select {\n courseId: coursesItem?.id,\ncourseName: coursesItem?.name,\ncode: coursesItem.courseCode,\ndesc: coursesItem?.description,\ncreditHours: coursesItem.credits,\ncourseDuration: coursesItem.duration,\npossibleGrades: check (coursesItem.allowedGrades).cloneWithType(),\nprofessors: from var professorsItem in coursesItem?.professors ?: []\n select {\n id: professorsItem.id,\nfirstName: professorsItem.firstName,\nlastName: professorsItem?.lastName,\nspecializations: professorsItem?.specializations,\ngradesAssigned: professorsItem.gradesAssigned,\ndepartment: {\n departmentName: professorsItem.department?.departmentName?:\"\",\nstatus: professorsItem.department?.status,\nfacultyCount: professorsItem.department?.facultyCount?:0,\nspecializations: professorsItem.department?.specializations?:[],\nbudget: professorsItem.department?.budget?:0.0,\nestablished: professorsItem.department?.established?:\"\",\nheadOfDepartment: professorsItem.department?.headOfDepartment,\nprograms: professorsItem.department?.programs,\nbuildingLocation: professorsItem.department?.buildingLocation,\ndepartmentCode: professorsItem.department?.departmentCode,\nstudentCount: professorsItem.department?.studentCount,\nresearchFocus: professorsItem.department?.researchFocus,\nwebsite: professorsItem.department?.website \n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_17_100_fields/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_17_100_fields/mapping.json
deleted file mode 100644
index 59a6dac96b4..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_17_100_fields/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":{"operation":"DIRECT","targetType":"string|int|()","parameters":["person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["person.firstName"]},"middleName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.middleName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.lastName"]},"gender":{"operation":"DIRECT","targetType":"OTHER|FEMALE|GREEN|MALE","parameters":["person.gender"]},"age":{"operation":"DIRECT","targetType":"int|()","parameters":["person.age"]},"birthDate":{"operation":"DIRECT","targetType":"string","parameters":["person.dateOfBirth"]},"citizenship":{"operation":"DIRECT","targetType":"string","parameters":["person.nationality"]},"passport":{"operation":"DIRECT","targetType":"string|()","parameters":["person.passportNumber"]},"phones":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["person.contactNumbers"]},"email":{"operation":"DIRECT","targetType":"string","parameters":["person.primaryEmail"]},"backupEmails":{"operation":"DIRECT","targetType":"string[]","parameters":["person.alternateEmails"]},"currentAddress":{"streetAddress":{"operation":"DIRECT","targetType":"string","parameters":["person.residentialAddress.street"]},"cityName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.residentialAddress.city"]},"stateName":{"operation":"DIRECT","targetType":"string","parameters":["person.residentialAddress.state"]},"countryName":{"operation":"DIRECT","targetType":"string","parameters":["person.residentialAddress.country"]},"postalCode":{"operation":"DIRECT","targetType":"string","parameters":["person.residentialAddress.zipCode"]},"lat":{"operation":"DIRECT","targetType":"float|()","parameters":["person.residentialAddress.latitude"]},"lng":{"operation":"DIRECT","targetType":"float|()","parameters":["person.residentialAddress.longitude"]},"locationType":{"operation":"DIRECT","targetType":"string","parameters":["person.residentialAddress.addressType"]},"verified":{"operation":"DIRECT","targetType":"boolean","parameters":["person.residentialAddress.isVerified"]},"updatedOn":{"operation":"DIRECT","targetType":"string","parameters":["person.residentialAddress.lastUpdated"]},"landmarks":{"operation":"DIRECT","targetType":"string[]","parameters":["person.residentialAddress.nearbyLandmarks"]},"main":{"operation":"DIRECT","targetType":"boolean","parameters":["person.residentialAddress.isPrimary"]},"timezone":{"operation":"DIRECT","targetType":"string","parameters":["person.residentialAddress.timeZone"]}},"homeAddress":{"streetAddress":{"operation":"DIRECT","targetType":"string","parameters":["person.permanentAddress.street"]},"cityName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.permanentAddress.city"]},"stateName":{"operation":"DIRECT","targetType":"string","parameters":["person.permanentAddress.state"]},"countryName":{"operation":"DIRECT","targetType":"string","parameters":["person.permanentAddress.country"]},"postalCode":{"operation":"DIRECT","targetType":"string","parameters":["person.permanentAddress.zipCode"]},"lat":{"operation":"DIRECT","targetType":"float|()","parameters":["person.permanentAddress.latitude"]},"lng":{"operation":"DIRECT","targetType":"float|()","parameters":["person.permanentAddress.longitude"]},"locationType":{"operation":"DIRECT","targetType":"string","parameters":["person.permanentAddress.addressType"]},"verified":{"operation":"DIRECT","targetType":"boolean","parameters":["person.permanentAddress.isVerified"]},"updatedOn":{"operation":"DIRECT","targetType":"string","parameters":["person.permanentAddress.lastUpdated"]},"landmarks":{"operation":"DIRECT","targetType":"string[]","parameters":["person.permanentAddress.nearbyLandmarks"]},"main":{"operation":"DIRECT","targetType":"boolean","parameters":["person.permanentAddress.isPrimary"]},"timezone":{"operation":"DIRECT","targetType":"string","parameters":["person.permanentAddress.timeZone"]}},"studentDocs":{"documentType":{"operation":"DIRECT","targetType":"string","parameters":["person.documents.documentType"]},"number":{"operation":"DIRECT","targetType":"string","parameters":["person.documents.documentNumber"]},"country":{"operation":"DIRECT","targetType":"string","parameters":["person.documents.issuingCountry"]},"validUntil":{"operation":"DIRECT","targetType":"string","parameters":["person.documents.expiryDate"]},"issueDate":{"operation":"DIRECT","targetType":"string","parameters":["person.documents.issueDate"]},"verified":{"operation":"DIRECT","targetType":"boolean","parameters":["person.documents.isVerified"]},"verifiedBy":{"operation":"DIRECT","targetType":"string","parameters":["person.documents.verificationSource"]},"comments":{"operation":"DIRECT","targetType":"string","parameters":["person.documents.remarks"]}},"emergency":{"contactName":{"operation":"DIRECT","targetType":"string","parameters":["person.emergencyContact.name"]},"contactDetails":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["person.emergencyContact.contacts"]},"relation":{"operation":"DIRECT","targetType":"string","parameters":["person.emergencyContact.relationship"]},"contactAddress":{"operation":"DIRECT","targetType":"string","parameters":["person.emergencyContact.address"]},"primaryContact":{"operation":"DIRECT","targetType":"boolean","parameters":["person.emergencyContact.isPrimary"]},"lastContacted":{"operation":"DIRECT","targetType":"string","parameters":["person.emergencyContact.lastContactDate"]},"contactPersonId":{"operation":"DIRECT","targetType":"string|int","parameters":["person.emergencyContact.contactId"]}},"healthRecord":{"blood":{"operation":"DIRECT","targetType":"string","parameters":["person.healthInfo.bloodGroup"]},"allergyInfo":{"operation":"DIRECT","targetType":"(string|())[]","parameters":["person.healthInfo.allergies"]},"currentMedications":{"operation":"DIRECT","targetType":"string[]|()","parameters":["person.healthInfo.medications"]},"insuranceStatus":{"operation":"DIRECT","targetType":"boolean","parameters":["person.healthInfo.isInsured"]},"insurer":{"operation":"DIRECT","targetType":"string","parameters":["person.healthInfo.insuranceProvider"]},"policyId":{"operation":"DIRECT","targetType":"string","parameters":["person.healthInfo.policyNumber"]},"conditions":{"operation":"DIRECT","targetType":"string[]","parameters":["person.healthInfo.medicalConditions"]},"checkupDate":{"operation":"DIRECT","targetType":"string","parameters":["person.healthInfo.lastCheckupDate"]},"doctorName":{"operation":"DIRECT","targetType":"string","parameters":["person.healthInfo.primaryPhysician"]},"disabilityStatus":{"operation":"DIRECT","targetType":"boolean","parameters":["person.healthInfo.hasDisability"]},"specialNeeds":{"operation":"DIRECT","targetType":"string[]","parameters":["person.healthInfo.accommodationNeeds"]}},"finances":{"paymentPreference":{"operation":"DIRECT","targetType":"CASH|BANK_TRANSFER|DEBIT_CARD|CREDIT_CARD","parameters":["person.financialInfo.preferredPayment"]},"accountId":{"operation":"DIRECT","targetType":"string|()","parameters":["person.financialInfo.accountNumber"]},"bank":{"operation":"DIRECT","targetType":"string|()","parameters":["person.financialInfo.bankName"]},"scholarship":{"operation":"DIRECT","targetType":"decimal|()","parameters":["person.financialInfo.scholarshipAmount"]},"tuition":{"operation":"DIRECT","targetType":"decimal","parameters":["person.financialInfo.tuitionFee"]},"outstandingAmount":{"operation":"DIRECT","targetType":"decimal","parameters":["person.financialInfo.outstandingBalance"]},"loanTaken":{"operation":"DIRECT","targetType":"boolean","parameters":["person.financialInfo.hasLoan"]},"loanProvider":{"operation":"DIRECT","targetType":"string","parameters":["person.financialInfo.loanProvider"]},"monthlyPaymentAmount":{"operation":"DIRECT","targetType":"decimal","parameters":["person.financialInfo.monthlyPayment"]},"payments":{"operation":"DIRECT","targetType":"string[]","parameters":["person.financialInfo.paymentHistory"]},"maxCredit":{"operation":"DIRECT","targetType":"decimal","parameters":["person.financialInfo.creditLimit"]},"paymentStanding":{"operation":"DIRECT","targetType":"SUSPENDED|PENDING|INACTIVE|ACTIVE","parameters":["person.financialInfo.paymentStatus"]}},"education":{"school":{"operation":"DIRECT","targetType":"string","parameters":["person.academicHistory.institutionName"]},"gradePoint":{"operation":"DIRECT","targetType":"float","parameters":["person.academicHistory.gpa"]},"specialization":{"operation":"DIRECT","targetType":"string","parameters":["person.academicHistory.major"]},"completionYear":{"operation":"DIRECT","targetType":"int","parameters":["person.academicHistory.graduationYear"]},"completedCourses":{"operation":"DIRECT","targetType":"string[]","parameters":["person.academicHistory.courses"]},"courseGrades":{"operation":"DIRECT","targetType":"(F|D|C|B|A)[]","parameters":["person.academicHistory.grades"]},"degree":{"operation":"DIRECT","targetType":"string","parameters":["person.academicHistory.degreeType"]},"certificate":{"operation":"DIRECT","targetType":"string","parameters":["person.academicHistory.certificationType"]},"verificationStatus":{"operation":"DIRECT","targetType":"string","parameters":["person.academicHistory.transcriptVerified"]},"academicLevel":{"operation":"DIRECT","targetType":"string","parameters":["person.academicHistory.academicStanding"]},"achievements":{"operation":"DIRECT","targetType":"string[]","parameters":["person.academicHistory.honors"]},"extracurriculars":{"operation":"DIRECT","targetType":"string[]","parameters":["person.academicHistory.activities"]}},"abilities":{"skillName":{"operation":"DIRECT","targetType":"string","parameters":["person.skills.name"]},"level":{"operation":"DIRECT","targetType":"int","parameters":["person.skills.proficiencyLevel"]},"experiencePeriod":{"operation":"DIRECT","targetType":"string|int","parameters":["person.skills.experience"]},"certification":{"operation":"DIRECT","targetType":"string","parameters":["person.skills.certificationName"]},"issuer":{"operation":"DIRECT","targetType":"string","parameters":["person.skills.issuingOrganization"]},"acquisitionDate":{"operation":"DIRECT","targetType":"string","parameters":["person.skills.dateAcquired"]},"expirationDate":{"operation":"DIRECT","targetType":"string","parameters":["person.skills.expiryDate"]},"verified":{"operation":"DIRECT","targetType":"boolean","parameters":["person.skills.isVerified"]},"projects":{"operation":"DIRECT","targetType":"string[]","parameters":["person.skills.relatedProjects"]},"testimonials":{"operation":"DIRECT","targetType":"string[]","parameters":["person.skills.endorsements"]}},"enrolledCourses":{"courseId":{"operation":"DIRECT","targetType":"string|()","parameters":["person.college.courses.id"]},"courseName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.college.courses.name"]},"code":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.courseCode"]},"desc":{"operation":"DIRECT","targetType":"string|()","parameters":["person.college.courses.description"]},"creditHours":{"operation":"DIRECT","targetType":"decimal|()","parameters":["person.college.courses.credits"]},"courseDuration":{"operation":"DIRECT","targetType":"string|int|()","parameters":["person.college.courses.duration"]},"possibleGrades":{"operation":"DIRECT","targetType":"(F|D|C|B|A)[]","parameters":["person.college.courses.allowedGrades"]},"professors":{"id":{"operation":"DIRECT","targetType":"string|int","parameters":["person.college.courses.professors.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.professors.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["person.college.courses.professors.lastName"]},"specializations":{"operation":"DIRECT","targetType":"string[]|()","parameters":["person.college.courses.professors.specializations"]},"gradesAssigned":{"operation":"DIRECT","targetType":"(F|D|C|B|A|())[]","parameters":["person.college.courses.professors.gradesAssigned"]},"department":{"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.professors.department.departmentName"]},"status":{"operation":"DIRECT","targetType":"SUSPENDED|PENDING|INACTIVE|ACTIVE","parameters":["person.college.courses.professors.department.status"]},"facultyCount":{"operation":"DIRECT","targetType":"int","parameters":["person.college.courses.professors.department.facultyCount"]},"specializations":{"operation":"DIRECT","targetType":"string[]","parameters":["person.college.courses.professors.department.specializations"]},"budget":{"operation":"DIRECT","targetType":"decimal","parameters":["person.college.courses.professors.department.budget"]},"established":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.professors.department.established"]},"headOfDepartment":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.professors.department.headOfDepartment"]},"programs":{"operation":"DIRECT","targetType":"string[]","parameters":["person.college.courses.professors.department.programs"]},"buildingLocation":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.professors.department.buildingLocation"]},"departmentCode":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.professors.department.departmentCode"]},"studentCount":{"operation":"DIRECT","targetType":"int","parameters":["person.college.courses.professors.department.studentCount"]},"researchFocus":{"operation":"DIRECT","targetType":"string[]","parameters":["person.college.courses.professors.department.researchFocus"]},"website":{"operation":"DIRECT","targetType":"string","parameters":["person.college.courses.professors.department.website"]}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_17_100_fields/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_17_100_fields/param_def.json
deleted file mode 100644
index fb5c55a2b58..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_17_100_fields/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"person":{"id":{"type":"string|int|()","comment":""},"firstName":{"type":"string","comment":""},"middleName":{"type":"string|()","comment":""},"lastName":{"type":"string|()","comment":""},"gender":{"type":"OTHER|FEMALE|GREEN|MALE","comment":""},"age":{"type":"string|()","comment":""},"dateOfBirth":{"type":"string|()","comment":""},"nationality":{"type":"string","comment":""},"passportNumber":{"type":"int|()","comment":""},"status":{"type":"SUSPENDED|PENDING|INACTIVE|ACTIVE","comment":""},"contactNumbers":{"type":"(string|int)[]","comment":""},"primaryEmail":{"type":"string","comment":""},"alternateEmails":{"type":"(string|())[]","comment":""},"residentialAddress":{"street":{"type":"string","comment":""},"city":{"type":"string|()","comment":""},"state":{"type":"string|()","comment":""},"country":{"type":"string","comment":""},"zipCode":{"type":"int","comment":""},"latitude":{"type":"decimal|()","comment":""},"longitude":{"type":"int|()","comment":""},"addressType":{"type":"string","comment":""},"isVerified":{"type":"boolean","comment":""},"lastUpdated":{"type":"string","comment":""},"nearbyLandmarks":{"type":"string[]","comment":""},"isPrimary":{"type":"boolean","comment":""},"timeZone":{"type":"string","comment":""}},"permanentAddress":{"street":{"type":"string","comment":""},"city":{"type":"string|()","comment":""},"state":{"type":"string|()","comment":""},"country":{"type":"string","comment":""},"zipCode":{"type":"int","comment":""},"latitude":{"type":"decimal|()","comment":""},"longitude":{"type":"int|()","comment":""},"addressType":{"type":"string","comment":""},"isVerified":{"type":"boolean","comment":""},"lastUpdated":{"type":"string","comment":""},"nearbyLandmarks":{"type":"string[]","comment":""},"isPrimary":{"type":"boolean","comment":""},"timeZone":{"type":"string","comment":""}},"documents":{"documentType":{"type":"string","comment":""},"documentNumber":{"type":"string","comment":""},"issuingCountry":{"type":"string","comment":""},"expiryDate":{"type":"string","comment":""},"issueDate":{"type":"string","comment":""},"isVerified":{"type":"boolean","comment":""},"verificationSource":{"type":"string","comment":""},"remarks":{"type":"string","comment":""}},"emergencyContact":{"name":{"type":"string","comment":""},"contacts":{"type":"(string|int)[]","comment":""},"relationship":{"type":"string","comment":""},"address":{"type":"string","comment":""},"isPrimary":{"type":"boolean","comment":""},"lastContactDate":{"type":"string","comment":""},"contactId":{"type":"string|int","comment":""}},"healthInfo":{"bloodGroup":{"type":"string","comment":""},"allergies":{"type":"string[]","comment":""},"medications":{"type":"string[]","comment":""},"isInsured":{"type":"boolean","comment":""},"insuranceProvider":{"type":"string","comment":""},"policyNumber":{"type":"string","comment":""},"medicalConditions":{"type":"string[]","comment":""},"lastCheckupDate":{"type":"string","comment":""},"primaryPhysician":{"type":"string","comment":""},"hasDisability":{"type":"boolean","comment":""},"accommodationNeeds":{"type":"string[]","comment":""}},"financialInfo":{"preferredPayment":{"type":"CASH|BANK_TRANSFER|DEBIT_CARD|CREDIT_CARD","comment":""},"accountNumber":{"type":"string|()","comment":""},"bankName":{"type":"string","comment":""},"scholarshipAmount":{"type":"decimal","comment":""},"tuitionFee":{"type":"decimal","comment":""},"outstandingBalance":{"type":"decimal","comment":""},"hasLoan":{"type":"boolean","comment":""},"loanProvider":{"type":"string","comment":""},"monthlyPayment":{"type":"decimal","comment":""},"paymentHistory":{"type":"string[]","comment":""},"creditLimit":{"type":"decimal","comment":""},"paymentStatus":{"type":"SUSPENDED|PENDING|INACTIVE|ACTIVE","comment":""}},"academicHistory":{"institutionName":{"type":"string|()","comment":""},"gpa":{"type":"float|()","comment":""},"major":{"type":"string","comment":""},"graduationYear":{"type":"int|()","comment":""},"courses":{"type":"string[]","comment":""},"grades":{"type":"(F|D|C|B|A)[]","comment":""},"degreeType":{"type":"string","comment":""},"certificationType":{"type":"string","comment":""},"transcriptVerified":{"type":"string","comment":""},"academicStanding":{"type":"string","comment":""},"honors":{"type":"string[]","comment":""},"activities":{"type":"string[]","comment":""}},"skills":{"name":{"type":"string|()","comment":""},"proficiencyLevel":{"type":"int","comment":""},"experience":{"type":"string|int|()","comment":""},"certificationName":{"type":"string","comment":""},"issuingOrganization":{"type":"string","comment":""},"dateAcquired":{"type":"string","comment":""},"expiryDate":{"type":"string","comment":""},"isVerified":{"type":"boolean","comment":""},"relatedProjects":{"type":"string[]","comment":""},"endorsements":{"type":"string[]","comment":""}},"college":{"courses":{"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"courseCode":{"type":"string","comment":""},"description":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"duration":{"type":"string|int|()","comment":""},"allowedGrades":{"type":"(F|D|C|B|A|())[]","comment":""},"professors":{"id":{"type":"string|int","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"specializations":{"type":"string[]|()","comment":""},"gradesAssigned":{"type":"(F|D|C|B|A|())[]","comment":""},"department":{"departmentName":{"type":"string","comment":""},"status":{"type":"SUSPENDED|PENDING|INACTIVE|ACTIVE","comment":""},"facultyCount":{"type":"int","comment":""},"specializations":{"type":"string[]","comment":""},"budget":{"type":"decimal","comment":""},"established":{"type":"string","comment":""},"headOfDepartment":{"type":"string","comment":""},"programs":{"type":"string[]","comment":""},"buildingLocation":{"type":"string","comment":""},"departmentCode":{"type":"string","comment":""},"studentCount":{"type":"int","comment":""},"researchFocus":{"type":"string[]","comment":""},"website":{"type":"string","comment":""}},"evaluationScores":{"type":"(decimal|float)[]","comment":""},"yearsOfExperience":{"type":"int","comment":""},"publications":{"type":"string[]|()","comment":""},"researchAreas":{"type":"(string|())[]","comment":""},"officeHours":{"type":"string","comment":""},"officeLocation":{"type":"string","comment":""},"academicRank":{"type":"string","comment":""},"tenure":{"type":"string","comment":""},"previousPositions":{"companyName":{"type":"string","comment":""},"position":{"type":"string","comment":""},"startDate":{"type":"string","comment":""},"endDate":{"type":"string","comment":""},"responsibilities":{"type":"string","comment":""},"supervisorName":{"type":"string","comment":""},"supervisorContact":{"type":"string|int","comment":""},"isCurrentEmployer":{"type":"boolean","comment":""},"location":{"type":"string","comment":""},"employmentType":{"type":"string","comment":""},"salary":{"type":"decimal","comment":""}},"teachingCourses":{"type":"string[]","comment":""},"awards":{"type":"string[]","comment":""},"highestDegree":{"type":"string","comment":""},"contactInformation":{"type":"(string|int)[]","comment":""}}},"name":{"type":"string","comment":""},"accreditation":{"type":"string","comment":""},"collegeLocation":{"street":{"type":"string","comment":""},"city":{"type":"string|()","comment":""},"state":{"type":"string|()","comment":""},"country":{"type":"string","comment":""},"zipCode":{"type":"int","comment":""},"latitude":{"type":"decimal|()","comment":""},"longitude":{"type":"int|()","comment":""},"addressType":{"type":"string","comment":""},"isVerified":{"type":"boolean","comment":""},"lastUpdated":{"type":"string","comment":""},"nearbyLandmarks":{"type":"string[]","comment":""},"isPrimary":{"type":"boolean","comment":""},"timeZone":{"type":"string","comment":""}},"status":{"type":"SUSPENDED|PENDING|INACTIVE|ACTIVE","comment":""},"establishedYear":{"type":"string","comment":""},"departments":{"type":"string[]","comment":""},"president":{"type":"string","comment":""},"website":{"type":"string","comment":""},"campuses":{"type":"string[]","comment":""},"studentPopulation":{"type":"int","comment":""},"facultyCount":{"type":"int","comment":""},"programs":{"type":"string[]","comment":""},"endowment":{"type":"decimal","comment":""},"mascot":{"type":"string","comment":""},"sportsTeams":{"type":"string[]","comment":""}},"languages":{"type":"string[]|()","comment":""},"isInternational":{"type":"boolean","comment":""},"joinDate":{"type":"string|()","comment":""},"photo":{"type":"byte[]|()","comment":""},"socialMediaHandles":{"type":"(string|())[]|()","comment":""},"maritalStatus":{"type":"string","comment":""},"religion":{"type":"string","comment":""},"ethnicity":{"type":"string","comment":""},"employmentHistory":{"companyName":{"type":"string","comment":""},"position":{"type":"string","comment":""},"startDate":{"type":"string","comment":""},"endDate":{"type":"string","comment":""},"responsibilities":{"type":"string","comment":""},"supervisorName":{"type":"string","comment":""},"supervisorContact":{"type":"string|int","comment":""},"isCurrentEmployer":{"type":"boolean","comment":""},"location":{"type":"string","comment":""},"employmentType":{"type":"string","comment":""},"salary":{"type":"decimal","comment":""}},"referralSource":{"type":"string","comment":""},"interests":{"type":"string[]","comment":""},"achievements":{"type":"string[]","comment":""},"isAlumni":{"type":"boolean","comment":""},"preferredName":{"type":"string","comment":""},"pronoun":{"type":"string","comment":""},"dietaryRestrictions":{"type":"string","comment":""},"registrationStatus":{"type":"string","comment":""},"student_list":{"type":"record[]","comment":""}}},"output":{"id":{"type":"string|int|()","comment":""},"firstName":{"type":"string","comment":""},"middleName":{"type":"string|()","comment":""},"lastName":{"type":"string|()","comment":""},"gender":{"type":"OTHER|FEMALE|GREEN|MALE","comment":""},"age":{"type":"int|()","comment":""},"birthDate":{"type":"string","comment":""},"citizenship":{"type":"string","comment":""},"passport":{"type":"string|()","comment":""},"phones":{"type":"(string|int)[]","comment":""},"email":{"type":"string","comment":""},"backupEmails":{"type":"string[]","comment":""},"currentAddress":{"streetAddress":{"type":"string","comment":""},"cityName":{"type":"string|()","comment":""},"stateName":{"type":"string","comment":""},"countryName":{"type":"string","comment":""},"postalCode":{"type":"string","comment":""},"lat":{"type":"float|()","comment":""},"lng":{"type":"float|()","comment":""},"locationType":{"type":"string","comment":""},"verified":{"type":"boolean","comment":""},"updatedOn":{"type":"string","comment":""},"landmarks":{"type":"string[]","comment":""},"main":{"type":"boolean","comment":""},"timezone":{"type":"string","comment":""}},"homeAddress":{"streetAddress":{"type":"string","comment":""},"cityName":{"type":"string|()","comment":""},"stateName":{"type":"string","comment":""},"countryName":{"type":"string","comment":""},"postalCode":{"type":"string","comment":""},"lat":{"type":"float|()","comment":""},"lng":{"type":"float|()","comment":""},"locationType":{"type":"string","comment":""},"verified":{"type":"boolean","comment":""},"updatedOn":{"type":"string","comment":""},"landmarks":{"type":"string[]","comment":""},"main":{"type":"boolean","comment":""},"timezone":{"type":"string","comment":""}},"studentDocs":{"documentType":{"type":"string","comment":""},"number":{"type":"string","comment":""},"country":{"type":"string","comment":""},"validUntil":{"type":"string","comment":""},"issueDate":{"type":"string","comment":""},"verified":{"type":"boolean","comment":""},"verifiedBy":{"type":"string","comment":""},"comments":{"type":"string","comment":""}},"emergency":{"contactName":{"type":"string","comment":""},"contactDetails":{"type":"(string|int)[]","comment":""},"relation":{"type":"string","comment":""},"contactAddress":{"type":"string","comment":""},"primaryContact":{"type":"boolean","comment":""},"lastContacted":{"type":"string","comment":""},"contactPersonId":{"type":"string|int","comment":""}},"healthRecord":{"blood":{"type":"string","comment":""},"allergyInfo":{"type":"(string|())[]","comment":""},"currentMedications":{"type":"string[]|()","comment":""},"insuranceStatus":{"type":"boolean","comment":""},"insurer":{"type":"string","comment":""},"policyId":{"type":"string","comment":""},"conditions":{"type":"string[]","comment":""},"checkupDate":{"type":"string","comment":""},"doctorName":{"type":"string","comment":""},"disabilityStatus":{"type":"boolean","comment":""},"specialNeeds":{"type":"string[]","comment":""}},"finances":{"paymentPreference":{"type":"CASH|BANK_TRANSFER|DEBIT_CARD|CREDIT_CARD","comment":""},"accountId":{"type":"string|()","comment":""},"bank":{"type":"string|()","comment":""},"scholarship":{"type":"decimal|()","comment":""},"tuition":{"type":"decimal","comment":""},"outstandingAmount":{"type":"decimal","comment":""},"loanTaken":{"type":"boolean","comment":""},"loanProvider":{"type":"string","comment":""},"monthlyPaymentAmount":{"type":"decimal","comment":""},"payments":{"type":"string[]","comment":""},"maxCredit":{"type":"decimal","comment":""},"paymentStanding":{"type":"SUSPENDED|PENDING|INACTIVE|ACTIVE","comment":""}},"education":{"school":{"type":"string","comment":""},"gradePoint":{"type":"float","comment":""},"specialization":{"type":"string","comment":""},"completionYear":{"type":"int","comment":""},"completedCourses":{"type":"string[]","comment":""},"courseGrades":{"type":"(F|D|C|B|A)[]","comment":""},"degree":{"type":"string","comment":""},"certificate":{"type":"string","comment":""},"verificationStatus":{"type":"string","comment":""},"academicLevel":{"type":"string","comment":""},"achievements":{"type":"string[]","comment":""},"extracurriculars":{"type":"string[]","comment":""}},"abilities":{"skillName":{"type":"string","comment":""},"level":{"type":"int","comment":""},"experiencePeriod":{"type":"string|int","comment":""},"certification":{"type":"string","comment":""},"issuer":{"type":"string","comment":""},"acquisitionDate":{"type":"string","comment":""},"expirationDate":{"type":"string","comment":""},"verified":{"type":"boolean","comment":""},"projects":{"type":"string[]","comment":""},"testimonials":{"type":"string[]","comment":""}},"enrolledCourses":{"courseId":{"type":"string|()","comment":""},"courseName":{"type":"string|()","comment":""},"code":{"type":"string","comment":""},"desc":{"type":"string|()","comment":""},"creditHours":{"type":"decimal|()","comment":""},"courseDuration":{"type":"string|int|()","comment":""},"possibleGrades":{"type":"(F|D|C|B|A)[]","comment":""},"professors":{"id":{"type":"string|int","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"specializations":{"type":"string[]|()","comment":""},"gradesAssigned":{"type":"(F|D|C|B|A|())[]","comment":""},"department":{"departmentName":{"type":"string","comment":""},"status":{"type":"SUSPENDED|PENDING|INACTIVE|ACTIVE","comment":""},"facultyCount":{"type":"int","comment":""},"specializations":{"type":"string[]","comment":""},"budget":{"type":"decimal","comment":""},"established":{"type":"string","comment":""},"headOfDepartment":{"type":"string","comment":""},"programs":{"type":"string[]","comment":""},"buildingLocation":{"type":"string","comment":""},"departmentCode":{"type":"string","comment":""},"studentCount":{"type":"int","comment":""},"researchFocus":{"type":"string[]","comment":""},"website":{"type":"string","comment":""}},"evaluationScores":{"type":"(decimal|float)[]","comment":""},"yearsOfExperience":{"type":"int","comment":""},"publications":{"type":"string[]|()","comment":""},"researchAreas":{"type":"(string|())[]","comment":""},"officeHours":{"type":"string","comment":""},"officeLocation":{"type":"string","comment":""},"academicRank":{"type":"string","comment":""},"tenure":{"type":"string","comment":""},"previousPositions":{"companyName":{"type":"string","comment":""},"position":{"type":"string","comment":""},"startDate":{"type":"string","comment":""},"endDate":{"type":"string","comment":""},"responsibilities":{"type":"string","comment":""},"supervisorName":{"type":"string","comment":""},"supervisorContact":{"type":"string|int","comment":""},"isCurrentEmployer":{"type":"boolean","comment":""},"location":{"type":"string","comment":""},"employmentType":{"type":"string","comment":""},"salary":{"type":"decimal","comment":""}},"teachingCourses":{"type":"string[]","comment":""},"awards":{"type":"string[]","comment":""},"highestDegree":{"type":"string","comment":""},"contactInformation":{"type":"(string|int)[]","comment":""}}},"spokenLanguages":{"type":"string[]","comment":""},"foreignStudent":{"type":"boolean","comment":""},"profilePicture":{"type":"byte[]|()","comment":""},"socialMedia":{"type":"string[]","comment":""},"relationshipStatus":{"type":"string","comment":""},"religiousAffiliation":{"type":"string","comment":""},"ethnicBackground":{"type":"string","comment":""},"workHistory":{"employer":{"type":"string","comment":""},"jobTitle":{"type":"string","comment":""},"fromDate":{"type":"string","comment":""},"toDate":{"type":"string","comment":""},"jobDuties":{"type":"string","comment":""},"supervisor":{"type":"string","comment":""},"supervisorContact":{"type":"string|int","comment":""},"currentJob":{"type":"boolean","comment":""},"workLocation":{"type":"string","comment":""},"employmentCategory":{"type":"string","comment":""},"income":{"type":"decimal","comment":""}},"howDiscovered":{"type":"string","comment":""},"personalInterests":{"type":"string[]","comment":""},"accomplishments":{"type":"string[]","comment":""},"alumniStatus":{"type":"boolean","comment":""},"nickName":{"type":"string","comment":""},"preferredPronouns":{"type":"string","comment":""},"foodRestrictions":{"type":"string","comment":""},"enrollmentStatus":{"type":"string","comment":""}},"inputMetadata":{"person":{"isArrayType":false,"parameterName":"person","parameterType":"Person","type":"record","fields":{"id":{"optional":true,"typeName":"string|int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"middleName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"middleName","nullable":true},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"gender":{"optional":false,"typeName":"OTHER|FEMALE|GREEN|MALE","type":"enum","typeInstance":"gender","members":{"OTHER":{"typeName":"OTHER","type":"OTHER","typeInstance":"OTHER","nullable":false,"optional":false},"FEMALE":{"typeName":"FEMALE","type":"FEMALE","typeInstance":"FEMALE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"MALE":{"typeName":"MALE","type":"MALE","typeInstance":"MALE","nullable":false,"optional":false}},"nullable":false},"age":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"age","nullable":true},"dateOfBirth":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"dateOfBirth","nullable":true},"nationality":{"typeName":"string","type":"string","typeInstance":"nationality","nullable":false,"optional":true},"passportNumber":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"passportNumber","nullable":true},"status":{"optional":false,"typeName":"SUSPENDED|PENDING|INACTIVE|ACTIVE","type":"enum","typeInstance":"status","members":{"SUSPENDED":{"typeName":"SUSPENDED","type":"SUSPENDED","typeInstance":"SUSPENDED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false},"INACTIVE":{"typeName":"INACTIVE","type":"INACTIVE","typeInstance":"INACTIVE","nullable":false,"optional":false},"ACTIVE":{"typeName":"ACTIVE","type":"ACTIVE","typeInstance":"ACTIVE","nullable":false,"optional":false}},"nullable":false},"contactNumbers":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"contactNumbers","nullableArray":false,"nullable":false},"primaryEmail":{"typeName":"string","type":"string","typeInstance":"primaryEmail","nullable":false,"optional":false},"alternateEmails":{"optional":true,"typeName":"(string|())[]","type":"union[]","typeInstance":"alternateEmails","nullableArray":true,"nullable":false},"residentialAddress":{"nullable":false,"optional":false,"type":"record","typeInstance":"residentialAddress","typeName":"record","fields":{"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":true},"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"state":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"state","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"zipCode":{"typeName":"int","type":"int","typeInstance":"zipCode","nullable":false,"optional":false},"latitude":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"latitude","nullable":true},"longitude":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"longitude","nullable":true},"addressType":{"typeName":"string","type":"string","typeInstance":"addressType","nullable":false,"optional":true},"isVerified":{"typeName":"boolean","type":"boolean","typeInstance":"isVerified","nullable":false,"optional":true},"lastUpdated":{"typeName":"string","type":"string","typeInstance":"lastUpdated","nullable":false,"optional":true},"nearbyLandmarks":{"typeName":"string[]","type":"string[]","typeInstance":"nearbyLandmarks","nullable":false,"optional":true},"isPrimary":{"typeName":"boolean","type":"boolean","typeInstance":"isPrimary","nullable":false,"optional":true},"timeZone":{"typeName":"string","type":"string","typeInstance":"timeZone","nullable":false,"optional":true}}},"permanentAddress":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"permanentAddress","members":{"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":true},"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"state":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"state","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"zipCode":{"typeName":"int","type":"int","typeInstance":"zipCode","nullable":false,"optional":false},"latitude":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"latitude","nullable":true},"longitude":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"longitude","nullable":true},"addressType":{"typeName":"string","type":"string","typeInstance":"addressType","nullable":false,"optional":true},"isVerified":{"typeName":"boolean","type":"boolean","typeInstance":"isVerified","nullable":false,"optional":true},"lastUpdated":{"typeName":"string","type":"string","typeInstance":"lastUpdated","nullable":false,"optional":true},"nearbyLandmarks":{"typeName":"string[]","type":"string[]","typeInstance":"nearbyLandmarks","nullable":false,"optional":true},"isPrimary":{"typeName":"boolean","type":"boolean","typeInstance":"isPrimary","nullable":false,"optional":true},"timeZone":{"typeName":"string","type":"string","typeInstance":"timeZone","nullable":false,"optional":true}},"nullable":true},"documents":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"documents","members":{"documentType":{"typeName":"string","type":"string","typeInstance":"documentType","nullable":false,"optional":false},"documentNumber":{"typeName":"string","type":"string","typeInstance":"documentNumber","nullable":false,"optional":false},"issuingCountry":{"typeName":"string","type":"string","typeInstance":"issuingCountry","nullable":false,"optional":false},"expiryDate":{"typeName":"string","type":"string","typeInstance":"expiryDate","nullable":false,"optional":false},"issueDate":{"typeName":"string","type":"string","typeInstance":"issueDate","nullable":false,"optional":true},"isVerified":{"typeName":"boolean","type":"boolean","typeInstance":"isVerified","nullable":false,"optional":true},"verificationSource":{"typeName":"string","type":"string","typeInstance":"verificationSource","nullable":false,"optional":true},"remarks":{"typeName":"string","type":"string","typeInstance":"remarks","nullable":false,"optional":true}},"nullableArray":false,"nullable":true},"emergencyContact":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"emergencyContact","members":{"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"contacts":{"optional":false,"typeName":"(string|int)[]","type":"union[]","typeInstance":"contacts","nullableArray":false,"nullable":false},"relationship":{"typeName":"string","type":"string","typeInstance":"relationship","nullable":false,"optional":false},"address":{"typeName":"string","type":"string","typeInstance":"address","nullable":false,"optional":true},"isPrimary":{"typeName":"boolean","type":"boolean","typeInstance":"isPrimary","nullable":false,"optional":true},"lastContactDate":{"typeName":"string","type":"string","typeInstance":"lastContactDate","nullable":false,"optional":true},"contactId":{"optional":true,"typeName":"string|int","type":"union","typeInstance":"contactId","nullable":false}},"nullable":true},"healthInfo":{"optional":true,"typeName":"readonly&record|()","type":"union","typeInstance":"healthInfo","members":{"bloodGroup":{"typeName":"string","type":"string","typeInstance":"bloodGroup","nullable":false,"optional":false},"allergies":{"typeName":"string[]","type":"string[]","typeInstance":"allergies","nullable":false,"optional":false},"medications":{"typeName":"string[]","type":"string[]","typeInstance":"medications","nullable":false,"optional":false},"isInsured":{"typeName":"boolean","type":"boolean","typeInstance":"isInsured","nullable":false,"optional":false},"insuranceProvider":{"typeName":"string","type":"string","typeInstance":"insuranceProvider","nullable":false,"optional":true},"policyNumber":{"typeName":"string","type":"string","typeInstance":"policyNumber","nullable":false,"optional":true},"medicalConditions":{"typeName":"string[]","type":"string[]","typeInstance":"medicalConditions","nullable":false,"optional":true},"lastCheckupDate":{"typeName":"string","type":"string","typeInstance":"lastCheckupDate","nullable":false,"optional":true},"primaryPhysician":{"typeName":"string","type":"string","typeInstance":"primaryPhysician","nullable":false,"optional":true},"hasDisability":{"typeName":"boolean","type":"boolean","typeInstance":"hasDisability","nullable":false,"optional":true},"accommodationNeeds":{"typeName":"string[]","type":"string[]","typeInstance":"accommodationNeeds","nullable":false,"optional":true}},"nullable":true},"financialInfo":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"financialInfo","members":{"preferredPayment":{"optional":false,"typeName":"CASH|BANK_TRANSFER|DEBIT_CARD|CREDIT_CARD","type":"enum","typeInstance":"preferredPayment","members":{"CASH":{"typeName":"CASH","type":"CASH","typeInstance":"CASH","nullable":false,"optional":false},"BANK_TRANSFER":{"typeName":"BANK_TRANSFER","type":"BANK_TRANSFER","typeInstance":"BANK_TRANSFER","nullable":false,"optional":false},"DEBIT_CARD":{"typeName":"DEBIT_CARD","type":"DEBIT_CARD","typeInstance":"DEBIT_CARD","nullable":false,"optional":false},"CREDIT_CARD":{"typeName":"CREDIT_CARD","type":"CREDIT_CARD","typeInstance":"CREDIT_CARD","nullable":false,"optional":false}},"nullable":false},"accountNumber":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"accountNumber","nullable":true},"bankName":{"typeName":"string","type":"string","typeInstance":"bankName","nullable":false,"optional":true},"scholarshipAmount":{"typeName":"decimal","type":"decimal","typeInstance":"scholarshipAmount","nullable":false,"optional":true},"tuitionFee":{"typeName":"decimal","type":"decimal","typeInstance":"tuitionFee","nullable":false,"optional":true},"outstandingBalance":{"typeName":"decimal","type":"decimal","typeInstance":"outstandingBalance","nullable":false,"optional":true},"hasLoan":{"typeName":"boolean","type":"boolean","typeInstance":"hasLoan","nullable":false,"optional":true},"loanProvider":{"typeName":"string","type":"string","typeInstance":"loanProvider","nullable":false,"optional":true},"monthlyPayment":{"typeName":"decimal","type":"decimal","typeInstance":"monthlyPayment","nullable":false,"optional":true},"paymentHistory":{"typeName":"string[]","type":"string[]","typeInstance":"paymentHistory","nullable":false,"optional":true},"creditLimit":{"typeName":"decimal","type":"decimal","typeInstance":"creditLimit","nullable":false,"optional":true},"paymentStatus":{"optional":true,"typeName":"SUSPENDED|PENDING|INACTIVE|ACTIVE","type":"enum","typeInstance":"paymentStatus","members":{"SUSPENDED":{"typeName":"SUSPENDED","type":"SUSPENDED","typeInstance":"SUSPENDED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false},"INACTIVE":{"typeName":"INACTIVE","type":"INACTIVE","typeInstance":"INACTIVE","nullable":false,"optional":false},"ACTIVE":{"typeName":"ACTIVE","type":"ACTIVE","typeInstance":"ACTIVE","nullable":false,"optional":false}},"nullable":false}},"nullable":true},"academicHistory":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"academicHistory","members":{"institutionName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"institutionName","nullable":true},"gpa":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"gpa","nullable":true},"major":{"typeName":"string","type":"string","typeInstance":"major","nullable":false,"optional":true},"graduationYear":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"graduationYear","nullable":true},"courses":{"typeName":"string[]","type":"string[]","typeInstance":"courses","nullable":false,"optional":true},"grades":{"optional":true,"typeName":"(F|D|C|B|A)[]","type":"enum[]","typeInstance":"grades","members":{"F":{"typeName":"F","type":"F","typeInstance":"F","nullable":false,"optional":false},"D":{"typeName":"D","type":"D","typeInstance":"D","nullable":false,"optional":false},"C":{"typeName":"C","type":"C","typeInstance":"C","nullable":false,"optional":false},"B":{"typeName":"B","type":"B","typeInstance":"B","nullable":false,"optional":false},"A":{"typeName":"A","type":"A","typeInstance":"A","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"degreeType":{"typeName":"string","type":"string","typeInstance":"degreeType","nullable":false,"optional":true},"certificationType":{"typeName":"string","type":"string","typeInstance":"certificationType","nullable":false,"optional":true},"transcriptVerified":{"typeName":"string","type":"string","typeInstance":"transcriptVerified","nullable":false,"optional":true},"academicStanding":{"typeName":"string","type":"string","typeInstance":"academicStanding","nullable":false,"optional":true},"honors":{"typeName":"string[]","type":"string[]","typeInstance":"honors","nullable":false,"optional":true},"activities":{"typeName":"string[]","type":"string[]","typeInstance":"activities","nullable":false,"optional":true}},"nullableArray":false,"nullable":true},"skills":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"skills","members":{"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"proficiencyLevel":{"typeName":"int","type":"int","typeInstance":"proficiencyLevel","nullable":false,"optional":true},"experience":{"optional":true,"typeName":"string|int|()","type":"union","typeInstance":"experience","nullable":true},"certificationName":{"typeName":"string","type":"string","typeInstance":"certificationName","nullable":false,"optional":true},"issuingOrganization":{"typeName":"string","type":"string","typeInstance":"issuingOrganization","nullable":false,"optional":true},"dateAcquired":{"typeName":"string","type":"string","typeInstance":"dateAcquired","nullable":false,"optional":true},"expiryDate":{"typeName":"string","type":"string","typeInstance":"expiryDate","nullable":false,"optional":true},"isVerified":{"typeName":"boolean","type":"boolean","typeInstance":"isVerified","nullable":false,"optional":true},"relatedProjects":{"typeName":"string[]","type":"string[]","typeInstance":"relatedProjects","nullable":false,"optional":true},"endorsements":{"typeName":"string[]","type":"string[]","typeInstance":"endorsements","nullable":false,"optional":true}},"nullableArray":false,"nullable":true},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"courseCode":{"typeName":"string","type":"string","typeInstance":"courseCode","nullable":false,"optional":false},"description":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"description","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"duration":{"optional":false,"typeName":"string|int|()","type":"union","typeInstance":"duration","nullable":true},"allowedGrades":{"optional":true,"typeName":"(F|D|C|B|A|())[]","type":"union[]","typeInstance":"allowedGrades","members":{"F":{"typeName":"F","type":"F","typeInstance":"F","nullable":false,"optional":false},"D":{"typeName":"D","type":"D","typeInstance":"D","nullable":false,"optional":false},"C":{"typeName":"C","type":"C","typeInstance":"C","nullable":false,"optional":false},"B":{"typeName":"B","type":"B","typeInstance":"B","nullable":false,"optional":false},"A":{"typeName":"A","type":"A","typeInstance":"A","nullable":false,"optional":false}},"nullableArray":true,"nullable":false},"professors":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professors","members":{"id":{"optional":true,"typeName":"string|int","type":"union","typeInstance":"id","nullable":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"specializations":{"optional":true,"typeName":"string[]|()","type":"union[]|()","typeInstance":"specializations","nullableArray":false,"nullable":true},"gradesAssigned":{"optional":true,"typeName":"(F|D|C|B|A|())[]","type":"union[]","typeInstance":"gradesAssigned","members":{"F":{"typeName":"F","type":"F","typeInstance":"F","nullable":false,"optional":false},"D":{"typeName":"D","type":"D","typeInstance":"D","nullable":false,"optional":false},"C":{"typeName":"C","type":"C","typeInstance":"C","nullable":false,"optional":false},"B":{"typeName":"B","type":"B","typeInstance":"B","nullable":false,"optional":false},"A":{"typeName":"A","type":"A","typeInstance":"A","nullable":false,"optional":false}},"nullableArray":true,"nullable":false},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false},"status":{"optional":true,"typeName":"SUSPENDED|PENDING|INACTIVE|ACTIVE","type":"enum","typeInstance":"status","members":{"SUSPENDED":{"typeName":"SUSPENDED","type":"SUSPENDED","typeInstance":"SUSPENDED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false},"INACTIVE":{"typeName":"INACTIVE","type":"INACTIVE","typeInstance":"INACTIVE","nullable":false,"optional":false},"ACTIVE":{"typeName":"ACTIVE","type":"ACTIVE","typeInstance":"ACTIVE","nullable":false,"optional":false}},"nullable":false},"facultyCount":{"typeName":"int","type":"int","typeInstance":"facultyCount","nullable":false,"optional":false},"specializations":{"typeName":"string[]","type":"string[]","typeInstance":"specializations","nullable":false,"optional":false},"budget":{"typeName":"decimal","type":"decimal","typeInstance":"budget","nullable":false,"optional":false},"established":{"typeName":"string","type":"string","typeInstance":"established","nullable":false,"optional":false},"headOfDepartment":{"typeName":"string","type":"string","typeInstance":"headOfDepartment","nullable":false,"optional":true},"programs":{"typeName":"string[]","type":"string[]","typeInstance":"programs","nullable":false,"optional":true},"buildingLocation":{"typeName":"string","type":"string","typeInstance":"buildingLocation","nullable":false,"optional":true},"departmentCode":{"typeName":"string","type":"string","typeInstance":"departmentCode","nullable":false,"optional":true},"studentCount":{"typeName":"int","type":"int","typeInstance":"studentCount","nullable":false,"optional":true},"researchFocus":{"typeName":"string[]","type":"string[]","typeInstance":"researchFocus","nullable":false,"optional":true},"website":{"typeName":"string","type":"string","typeInstance":"website","nullable":false,"optional":true}},"nullable":false},"evaluationScores":{"optional":true,"typeName":"(decimal|float)[]","type":"union[]","typeInstance":"evaluationScores","nullableArray":false,"nullable":false},"yearsOfExperience":{"typeName":"int","type":"int","typeInstance":"yearsOfExperience","nullable":false,"optional":true},"publications":{"optional":true,"typeName":"string[]|()","type":"union[]|()","typeInstance":"publications","nullableArray":false,"nullable":true},"researchAreas":{"optional":true,"typeName":"(string|())[]","type":"union[]","typeInstance":"researchAreas","nullableArray":true,"nullable":false},"officeHours":{"typeName":"string","type":"string","typeInstance":"officeHours","nullable":false,"optional":true},"officeLocation":{"typeName":"string","type":"string","typeInstance":"officeLocation","nullable":false,"optional":true},"academicRank":{"typeName":"string","type":"string","typeInstance":"academicRank","nullable":false,"optional":true},"tenure":{"typeName":"string","type":"string","typeInstance":"tenure","nullable":false,"optional":true},"previousPositions":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"previousPositions","fields":{"companyName":{"typeName":"string","type":"string","typeInstance":"companyName","nullable":false,"optional":false},"position":{"typeName":"string","type":"string","typeInstance":"position","nullable":false,"optional":false},"startDate":{"typeName":"string","type":"string","typeInstance":"startDate","nullable":false,"optional":false},"endDate":{"typeName":"string","type":"string","typeInstance":"endDate","nullable":false,"optional":true},"responsibilities":{"typeName":"string","type":"string","typeInstance":"responsibilities","nullable":false,"optional":true},"supervisorName":{"typeName":"string","type":"string","typeInstance":"supervisorName","nullable":false,"optional":true},"supervisorContact":{"optional":true,"typeName":"string|int","type":"union","typeInstance":"supervisorContact","nullable":false},"isCurrentEmployer":{"typeName":"boolean","type":"boolean","typeInstance":"isCurrentEmployer","nullable":false,"optional":true},"location":{"typeName":"string","type":"string","typeInstance":"location","nullable":false,"optional":true},"employmentType":{"typeName":"string","type":"string","typeInstance":"employmentType","nullable":false,"optional":true},"salary":{"typeName":"decimal","type":"decimal","typeInstance":"salary","nullable":false,"optional":true}},"nullableArray":false,"nullable":false},"teachingCourses":{"typeName":"string[]","type":"string[]","typeInstance":"teachingCourses","nullable":false,"optional":true},"awards":{"typeName":"string[]","type":"string[]","typeInstance":"awards","nullable":false,"optional":true},"highestDegree":{"typeName":"string","type":"string","typeInstance":"highestDegree","nullable":false,"optional":true},"contactInformation":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"contactInformation","nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false},"name":{"typeName":"string","type":"string","typeInstance":"name","nullable":false,"optional":false},"accreditation":{"typeName":"string","type":"string","typeInstance":"accreditation","nullable":false,"optional":false},"collegeLocation":{"optional":false,"typeName":"record|()","type":"union","typeInstance":"collegeLocation","members":{"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":true},"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"state":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"state","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"zipCode":{"typeName":"int","type":"int","typeInstance":"zipCode","nullable":false,"optional":false},"latitude":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"latitude","nullable":true},"longitude":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"longitude","nullable":true},"addressType":{"typeName":"string","type":"string","typeInstance":"addressType","nullable":false,"optional":true},"isVerified":{"typeName":"boolean","type":"boolean","typeInstance":"isVerified","nullable":false,"optional":true},"lastUpdated":{"typeName":"string","type":"string","typeInstance":"lastUpdated","nullable":false,"optional":true},"nearbyLandmarks":{"typeName":"string[]","type":"string[]","typeInstance":"nearbyLandmarks","nullable":false,"optional":true},"isPrimary":{"typeName":"boolean","type":"boolean","typeInstance":"isPrimary","nullable":false,"optional":true},"timeZone":{"typeName":"string","type":"string","typeInstance":"timeZone","nullable":false,"optional":true}},"nullable":true},"status":{"optional":false,"typeName":"SUSPENDED|PENDING|INACTIVE|ACTIVE","type":"enum","typeInstance":"status","members":{"SUSPENDED":{"typeName":"SUSPENDED","type":"SUSPENDED","typeInstance":"SUSPENDED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false},"INACTIVE":{"typeName":"INACTIVE","type":"INACTIVE","typeInstance":"INACTIVE","nullable":false,"optional":false},"ACTIVE":{"typeName":"ACTIVE","type":"ACTIVE","typeInstance":"ACTIVE","nullable":false,"optional":false}},"nullable":false},"establishedYear":{"typeName":"string","type":"string","typeInstance":"establishedYear","nullable":false,"optional":true},"departments":{"typeName":"string[]","type":"string[]","typeInstance":"departments","nullable":false,"optional":true},"president":{"typeName":"string","type":"string","typeInstance":"president","nullable":false,"optional":true},"website":{"typeName":"string","type":"string","typeInstance":"website","nullable":false,"optional":true},"campuses":{"typeName":"string[]","type":"string[]","typeInstance":"campuses","nullable":false,"optional":true},"studentPopulation":{"typeName":"int","type":"int","typeInstance":"studentPopulation","nullable":false,"optional":true},"facultyCount":{"typeName":"int","type":"int","typeInstance":"facultyCount","nullable":false,"optional":true},"programs":{"typeName":"string[]","type":"string[]","typeInstance":"programs","nullable":false,"optional":true},"endowment":{"typeName":"decimal","type":"decimal","typeInstance":"endowment","nullable":false,"optional":true},"mascot":{"typeName":"string","type":"string","typeInstance":"mascot","nullable":false,"optional":true},"sportsTeams":{"typeName":"string[]","type":"string[]","typeInstance":"sportsTeams","nullable":false,"optional":true}},"nullable":true},"languages":{"optional":true,"typeName":"string[]|()","type":"union[]|()","typeInstance":"languages","nullableArray":false,"nullable":true},"isInternational":{"typeName":"boolean","type":"boolean","typeInstance":"isInternational","nullable":false,"optional":true},"joinDate":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"joinDate","nullable":true},"photo":{"optional":true,"typeName":"byte[]|()","type":"union[]|()","typeInstance":"photo","nullableArray":false,"nullable":true},"socialMediaHandles":{"optional":true,"typeName":"(string|())[]|()","type":"union[]|()","typeInstance":"socialMediaHandles","nullableArray":true,"nullable":true},"maritalStatus":{"typeName":"string","type":"string","typeInstance":"maritalStatus","nullable":false,"optional":true},"religion":{"typeName":"string","type":"string","typeInstance":"religion","nullable":false,"optional":true},"ethnicity":{"typeName":"string","type":"string","typeInstance":"ethnicity","nullable":false,"optional":true},"employmentHistory":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"employmentHistory","members":{"companyName":{"typeName":"string","type":"string","typeInstance":"companyName","nullable":false,"optional":false},"position":{"typeName":"string","type":"string","typeInstance":"position","nullable":false,"optional":false},"startDate":{"typeName":"string","type":"string","typeInstance":"startDate","nullable":false,"optional":false},"endDate":{"typeName":"string","type":"string","typeInstance":"endDate","nullable":false,"optional":true},"responsibilities":{"typeName":"string","type":"string","typeInstance":"responsibilities","nullable":false,"optional":true},"supervisorName":{"typeName":"string","type":"string","typeInstance":"supervisorName","nullable":false,"optional":true},"supervisorContact":{"optional":true,"typeName":"string|int","type":"union","typeInstance":"supervisorContact","nullable":false},"isCurrentEmployer":{"typeName":"boolean","type":"boolean","typeInstance":"isCurrentEmployer","nullable":false,"optional":true},"location":{"typeName":"string","type":"string","typeInstance":"location","nullable":false,"optional":true},"employmentType":{"typeName":"string","type":"string","typeInstance":"employmentType","nullable":false,"optional":true},"salary":{"typeName":"decimal","type":"decimal","typeInstance":"salary","nullable":false,"optional":true}},"nullableArray":false,"nullable":true},"referralSource":{"typeName":"string","type":"string","typeInstance":"referralSource","nullable":false,"optional":true},"interests":{"typeName":"string[]","type":"string[]","typeInstance":"interests","nullable":false,"optional":true},"achievements":{"typeName":"string[]","type":"string[]","typeInstance":"achievements","nullable":false,"optional":true},"isAlumni":{"typeName":"boolean","type":"boolean","typeInstance":"isAlumni","nullable":false,"optional":true},"preferredName":{"typeName":"string","type":"string","typeInstance":"preferredName","nullable":false,"optional":true},"pronoun":{"typeName":"string","type":"string","typeInstance":"pronoun","nullable":false,"optional":true},"dietaryRestrictions":{"typeName":"string","type":"string","typeInstance":"dietaryRestrictions","nullable":false,"optional":true},"registrationStatus":{"typeName":"string","type":"string","typeInstance":"registrationStatus","nullable":false,"optional":true},"student_list":{"typeName":"record[]","type":"record[]","typeInstance":"student_list","nullable":false,"optional":false}}}},"outputMetadata":{"id":{"optional":false,"typeName":"string|int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"middleName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"middleName","nullable":true},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"gender":{"optional":false,"typeName":"OTHER|FEMALE|GREEN|MALE","type":"enum","typeInstance":"gender","members":{"OTHER":{"typeName":"OTHER","type":"OTHER","typeInstance":"OTHER","nullable":false,"optional":false},"FEMALE":{"typeName":"FEMALE","type":"FEMALE","typeInstance":"FEMALE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"MALE":{"typeName":"MALE","type":"MALE","typeInstance":"MALE","nullable":false,"optional":false}},"nullable":false},"age":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"birthDate":{"typeName":"string","type":"string","typeInstance":"birthDate","nullable":false,"optional":false},"citizenship":{"typeName":"string","type":"string","typeInstance":"citizenship","nullable":false,"optional":false},"passport":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"passport","nullable":true},"phones":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"phones","nullableArray":false,"nullable":false},"email":{"typeName":"string","type":"string","typeInstance":"email","nullable":false,"optional":false},"backupEmails":{"typeName":"string[]","type":"string[]","typeInstance":"backupEmails","nullable":false,"optional":true},"currentAddress":{"nullable":false,"optional":false,"type":"record","typeInstance":"currentAddress","typeName":"record","fields":{"streetAddress":{"typeName":"string","type":"string","typeInstance":"streetAddress","nullable":false,"optional":false},"cityName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"cityName","nullable":true},"stateName":{"typeName":"string","type":"string","typeInstance":"stateName","nullable":false,"optional":false},"countryName":{"typeName":"string","type":"string","typeInstance":"countryName","nullable":false,"optional":false},"postalCode":{"typeName":"string","type":"string","typeInstance":"postalCode","nullable":false,"optional":false},"lat":{"optional":true,"typeName":"float|()","type":"union","typeInstance":"lat","nullable":true},"lng":{"optional":true,"typeName":"float|()","type":"union","typeInstance":"lng","nullable":true},"locationType":{"typeName":"string","type":"string","typeInstance":"locationType","nullable":false,"optional":false},"verified":{"typeName":"boolean","type":"boolean","typeInstance":"verified","nullable":false,"optional":false},"updatedOn":{"typeName":"string","type":"string","typeInstance":"updatedOn","nullable":false,"optional":false},"landmarks":{"typeName":"string[]","type":"string[]","typeInstance":"landmarks","nullable":false,"optional":false},"main":{"typeName":"boolean","type":"boolean","typeInstance":"main","nullable":false,"optional":false},"timezone":{"typeName":"string","type":"string","typeInstance":"timezone","nullable":false,"optional":false}}},"homeAddress":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"homeAddress","members":{"streetAddress":{"typeName":"string","type":"string","typeInstance":"streetAddress","nullable":false,"optional":false},"cityName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"cityName","nullable":true},"stateName":{"typeName":"string","type":"string","typeInstance":"stateName","nullable":false,"optional":false},"countryName":{"typeName":"string","type":"string","typeInstance":"countryName","nullable":false,"optional":false},"postalCode":{"typeName":"string","type":"string","typeInstance":"postalCode","nullable":false,"optional":false},"lat":{"optional":true,"typeName":"float|()","type":"union","typeInstance":"lat","nullable":true},"lng":{"optional":true,"typeName":"float|()","type":"union","typeInstance":"lng","nullable":true},"locationType":{"typeName":"string","type":"string","typeInstance":"locationType","nullable":false,"optional":false},"verified":{"typeName":"boolean","type":"boolean","typeInstance":"verified","nullable":false,"optional":false},"updatedOn":{"typeName":"string","type":"string","typeInstance":"updatedOn","nullable":false,"optional":false},"landmarks":{"typeName":"string[]","type":"string[]","typeInstance":"landmarks","nullable":false,"optional":false},"main":{"typeName":"boolean","type":"boolean","typeInstance":"main","nullable":false,"optional":false},"timezone":{"typeName":"string","type":"string","typeInstance":"timezone","nullable":false,"optional":false}},"nullable":true},"studentDocs":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"studentDocs","members":{"documentType":{"typeName":"string","type":"string","typeInstance":"documentType","nullable":false,"optional":false},"number":{"typeName":"string","type":"string","typeInstance":"number","nullable":false,"optional":false},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"validUntil":{"typeName":"string","type":"string","typeInstance":"validUntil","nullable":false,"optional":false},"issueDate":{"typeName":"string","type":"string","typeInstance":"issueDate","nullable":false,"optional":false},"verified":{"typeName":"boolean","type":"boolean","typeInstance":"verified","nullable":false,"optional":false},"verifiedBy":{"typeName":"string","type":"string","typeInstance":"verifiedBy","nullable":false,"optional":false},"comments":{"typeName":"string","type":"string","typeInstance":"comments","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"emergency":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"emergency","members":{"contactName":{"typeName":"string","type":"string","typeInstance":"contactName","nullable":false,"optional":false},"contactDetails":{"optional":false,"typeName":"(string|int)[]","type":"union[]","typeInstance":"contactDetails","nullableArray":false,"nullable":false},"relation":{"typeName":"string","type":"string","typeInstance":"relation","nullable":false,"optional":false},"contactAddress":{"typeName":"string","type":"string","typeInstance":"contactAddress","nullable":false,"optional":false},"primaryContact":{"typeName":"boolean","type":"boolean","typeInstance":"primaryContact","nullable":false,"optional":false},"lastContacted":{"typeName":"string","type":"string","typeInstance":"lastContacted","nullable":false,"optional":false},"contactPersonId":{"optional":false,"typeName":"string|int","type":"union","typeInstance":"contactPersonId","nullable":false}},"nullable":true},"healthRecord":{"optional":true,"typeName":"readonly&record|()","type":"union","typeInstance":"healthRecord","members":{"blood":{"typeName":"string","type":"string","typeInstance":"blood","nullable":false,"optional":false},"allergyInfo":{"optional":false,"typeName":"(string|())[]","type":"union[]","typeInstance":"allergyInfo","nullableArray":true,"nullable":false},"currentMedications":{"optional":false,"typeName":"string[]|()","type":"union[]|()","typeInstance":"currentMedications","nullableArray":false,"nullable":true},"insuranceStatus":{"typeName":"boolean","type":"boolean","typeInstance":"insuranceStatus","nullable":false,"optional":false},"insurer":{"typeName":"string","type":"string","typeInstance":"insurer","nullable":false,"optional":false},"policyId":{"typeName":"string","type":"string","typeInstance":"policyId","nullable":false,"optional":false},"conditions":{"typeName":"string[]","type":"string[]","typeInstance":"conditions","nullable":false,"optional":false},"checkupDate":{"typeName":"string","type":"string","typeInstance":"checkupDate","nullable":false,"optional":false},"doctorName":{"typeName":"string","type":"string","typeInstance":"doctorName","nullable":false,"optional":false},"disabilityStatus":{"typeName":"boolean","type":"boolean","typeInstance":"disabilityStatus","nullable":false,"optional":false},"specialNeeds":{"typeName":"string[]","type":"string[]","typeInstance":"specialNeeds","nullable":false,"optional":false}},"nullable":true},"finances":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"finances","members":{"paymentPreference":{"optional":false,"typeName":"CASH|BANK_TRANSFER|DEBIT_CARD|CREDIT_CARD","type":"enum","typeInstance":"paymentPreference","members":{"CASH":{"typeName":"CASH","type":"CASH","typeInstance":"CASH","nullable":false,"optional":false},"BANK_TRANSFER":{"typeName":"BANK_TRANSFER","type":"BANK_TRANSFER","typeInstance":"BANK_TRANSFER","nullable":false,"optional":false},"DEBIT_CARD":{"typeName":"DEBIT_CARD","type":"DEBIT_CARD","typeInstance":"DEBIT_CARD","nullable":false,"optional":false},"CREDIT_CARD":{"typeName":"CREDIT_CARD","type":"CREDIT_CARD","typeInstance":"CREDIT_CARD","nullable":false,"optional":false}},"nullable":false},"accountId":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"accountId","nullable":true},"bank":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"bank","nullable":true},"scholarship":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"scholarship","nullable":true},"tuition":{"typeName":"decimal","type":"decimal","typeInstance":"tuition","nullable":false,"optional":false},"outstandingAmount":{"typeName":"decimal","type":"decimal","typeInstance":"outstandingAmount","nullable":false,"optional":false},"loanTaken":{"typeName":"boolean","type":"boolean","typeInstance":"loanTaken","nullable":false,"optional":false},"loanProvider":{"typeName":"string","type":"string","typeInstance":"loanProvider","nullable":false,"optional":false},"monthlyPaymentAmount":{"typeName":"decimal","type":"decimal","typeInstance":"monthlyPaymentAmount","nullable":false,"optional":false},"payments":{"typeName":"string[]","type":"string[]","typeInstance":"payments","nullable":false,"optional":false},"maxCredit":{"typeName":"decimal","type":"decimal","typeInstance":"maxCredit","nullable":false,"optional":false},"paymentStanding":{"optional":false,"typeName":"SUSPENDED|PENDING|INACTIVE|ACTIVE","type":"enum","typeInstance":"paymentStanding","members":{"SUSPENDED":{"typeName":"SUSPENDED","type":"SUSPENDED","typeInstance":"SUSPENDED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false},"INACTIVE":{"typeName":"INACTIVE","type":"INACTIVE","typeInstance":"INACTIVE","nullable":false,"optional":false},"ACTIVE":{"typeName":"ACTIVE","type":"ACTIVE","typeInstance":"ACTIVE","nullable":false,"optional":false}},"nullable":false}},"nullable":true},"education":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"education","members":{"school":{"typeName":"string","type":"string","typeInstance":"school","nullable":false,"optional":false},"gradePoint":{"typeName":"float","type":"float","typeInstance":"gradePoint","nullable":false,"optional":false},"specialization":{"typeName":"string","type":"string","typeInstance":"specialization","nullable":false,"optional":false},"completionYear":{"typeName":"int","type":"int","typeInstance":"completionYear","nullable":false,"optional":false},"completedCourses":{"typeName":"string[]","type":"string[]","typeInstance":"completedCourses","nullable":false,"optional":false},"courseGrades":{"optional":false,"typeName":"(F|D|C|B|A)[]","type":"enum[]","typeInstance":"courseGrades","members":{"F":{"typeName":"F","type":"F","typeInstance":"F","nullable":false,"optional":false},"D":{"typeName":"D","type":"D","typeInstance":"D","nullable":false,"optional":false},"C":{"typeName":"C","type":"C","typeInstance":"C","nullable":false,"optional":false},"B":{"typeName":"B","type":"B","typeInstance":"B","nullable":false,"optional":false},"A":{"typeName":"A","type":"A","typeInstance":"A","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"degree":{"typeName":"string","type":"string","typeInstance":"degree","nullable":false,"optional":false},"certificate":{"typeName":"string","type":"string","typeInstance":"certificate","nullable":false,"optional":false},"verificationStatus":{"typeName":"string","type":"string","typeInstance":"verificationStatus","nullable":false,"optional":false},"academicLevel":{"typeName":"string","type":"string","typeInstance":"academicLevel","nullable":false,"optional":false},"achievements":{"typeName":"string[]","type":"string[]","typeInstance":"achievements","nullable":false,"optional":false},"extracurriculars":{"typeName":"string[]","type":"string[]","typeInstance":"extracurriculars","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"abilities":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"abilities","members":{"skillName":{"typeName":"string","type":"string","typeInstance":"skillName","nullable":false,"optional":false},"level":{"typeName":"int","type":"int","typeInstance":"level","nullable":false,"optional":false},"experiencePeriod":{"optional":false,"typeName":"string|int","type":"union","typeInstance":"experiencePeriod","nullable":false},"certification":{"typeName":"string","type":"string","typeInstance":"certification","nullable":false,"optional":false},"issuer":{"typeName":"string","type":"string","typeInstance":"issuer","nullable":false,"optional":false},"acquisitionDate":{"typeName":"string","type":"string","typeInstance":"acquisitionDate","nullable":false,"optional":false},"expirationDate":{"typeName":"string","type":"string","typeInstance":"expirationDate","nullable":false,"optional":false},"verified":{"typeName":"boolean","type":"boolean","typeInstance":"verified","nullable":false,"optional":false},"projects":{"typeName":"string[]","type":"string[]","typeInstance":"projects","nullable":false,"optional":false},"testimonials":{"typeName":"string[]","type":"string[]","typeInstance":"testimonials","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"enrolledCourses":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"enrolledCourses","members":{"courseId":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"courseId","nullable":true},"courseName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"courseName","nullable":true},"code":{"typeName":"string","type":"string","typeInstance":"code","nullable":false,"optional":false},"desc":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"desc","nullable":true},"creditHours":{"optional":true,"typeName":"decimal|()","type":"union","typeInstance":"creditHours","nullable":true},"courseDuration":{"optional":true,"typeName":"string|int|()","type":"union","typeInstance":"courseDuration","nullable":true},"possibleGrades":{"optional":true,"typeName":"(F|D|C|B|A)[]","type":"enum[]","typeInstance":"possibleGrades","members":{"F":{"typeName":"F","type":"F","typeInstance":"F","nullable":false,"optional":false},"D":{"typeName":"D","type":"D","typeInstance":"D","nullable":false,"optional":false},"C":{"typeName":"C","type":"C","typeInstance":"C","nullable":false,"optional":false},"B":{"typeName":"B","type":"B","typeInstance":"B","nullable":false,"optional":false},"A":{"typeName":"A","type":"A","typeInstance":"A","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"professors":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professors","members":{"id":{"optional":true,"typeName":"string|int","type":"union","typeInstance":"id","nullable":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"specializations":{"optional":true,"typeName":"string[]|()","type":"union[]|()","typeInstance":"specializations","nullableArray":false,"nullable":true},"gradesAssigned":{"optional":true,"typeName":"(F|D|C|B|A|())[]","type":"union[]","typeInstance":"gradesAssigned","members":{"F":{"typeName":"F","type":"F","typeInstance":"F","nullable":false,"optional":false},"D":{"typeName":"D","type":"D","typeInstance":"D","nullable":false,"optional":false},"C":{"typeName":"C","type":"C","typeInstance":"C","nullable":false,"optional":false},"B":{"typeName":"B","type":"B","typeInstance":"B","nullable":false,"optional":false},"A":{"typeName":"A","type":"A","typeInstance":"A","nullable":false,"optional":false}},"nullableArray":true,"nullable":false},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false},"status":{"optional":true,"typeName":"SUSPENDED|PENDING|INACTIVE|ACTIVE","type":"enum","typeInstance":"status","members":{"SUSPENDED":{"typeName":"SUSPENDED","type":"SUSPENDED","typeInstance":"SUSPENDED","nullable":false,"optional":false},"PENDING":{"typeName":"PENDING","type":"PENDING","typeInstance":"PENDING","nullable":false,"optional":false},"INACTIVE":{"typeName":"INACTIVE","type":"INACTIVE","typeInstance":"INACTIVE","nullable":false,"optional":false},"ACTIVE":{"typeName":"ACTIVE","type":"ACTIVE","typeInstance":"ACTIVE","nullable":false,"optional":false}},"nullable":false},"facultyCount":{"typeName":"int","type":"int","typeInstance":"facultyCount","nullable":false,"optional":false},"specializations":{"typeName":"string[]","type":"string[]","typeInstance":"specializations","nullable":false,"optional":false},"budget":{"typeName":"decimal","type":"decimal","typeInstance":"budget","nullable":false,"optional":false},"established":{"typeName":"string","type":"string","typeInstance":"established","nullable":false,"optional":false},"headOfDepartment":{"typeName":"string","type":"string","typeInstance":"headOfDepartment","nullable":false,"optional":true},"programs":{"typeName":"string[]","type":"string[]","typeInstance":"programs","nullable":false,"optional":true},"buildingLocation":{"typeName":"string","type":"string","typeInstance":"buildingLocation","nullable":false,"optional":true},"departmentCode":{"typeName":"string","type":"string","typeInstance":"departmentCode","nullable":false,"optional":true},"studentCount":{"typeName":"int","type":"int","typeInstance":"studentCount","nullable":false,"optional":true},"researchFocus":{"typeName":"string[]","type":"string[]","typeInstance":"researchFocus","nullable":false,"optional":true},"website":{"typeName":"string","type":"string","typeInstance":"website","nullable":false,"optional":true}},"nullable":false},"evaluationScores":{"optional":true,"typeName":"(decimal|float)[]","type":"union[]","typeInstance":"evaluationScores","nullableArray":false,"nullable":false},"yearsOfExperience":{"typeName":"int","type":"int","typeInstance":"yearsOfExperience","nullable":false,"optional":true},"publications":{"optional":true,"typeName":"string[]|()","type":"union[]|()","typeInstance":"publications","nullableArray":false,"nullable":true},"researchAreas":{"optional":true,"typeName":"(string|())[]","type":"union[]","typeInstance":"researchAreas","nullableArray":true,"nullable":false},"officeHours":{"typeName":"string","type":"string","typeInstance":"officeHours","nullable":false,"optional":true},"officeLocation":{"typeName":"string","type":"string","typeInstance":"officeLocation","nullable":false,"optional":true},"academicRank":{"typeName":"string","type":"string","typeInstance":"academicRank","nullable":false,"optional":true},"tenure":{"typeName":"string","type":"string","typeInstance":"tenure","nullable":false,"optional":true},"previousPositions":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"previousPositions","fields":{"companyName":{"typeName":"string","type":"string","typeInstance":"companyName","nullable":false,"optional":false},"position":{"typeName":"string","type":"string","typeInstance":"position","nullable":false,"optional":false},"startDate":{"typeName":"string","type":"string","typeInstance":"startDate","nullable":false,"optional":false},"endDate":{"typeName":"string","type":"string","typeInstance":"endDate","nullable":false,"optional":true},"responsibilities":{"typeName":"string","type":"string","typeInstance":"responsibilities","nullable":false,"optional":true},"supervisorName":{"typeName":"string","type":"string","typeInstance":"supervisorName","nullable":false,"optional":true},"supervisorContact":{"optional":true,"typeName":"string|int","type":"union","typeInstance":"supervisorContact","nullable":false},"isCurrentEmployer":{"typeName":"boolean","type":"boolean","typeInstance":"isCurrentEmployer","nullable":false,"optional":true},"location":{"typeName":"string","type":"string","typeInstance":"location","nullable":false,"optional":true},"employmentType":{"typeName":"string","type":"string","typeInstance":"employmentType","nullable":false,"optional":true},"salary":{"typeName":"decimal","type":"decimal","typeInstance":"salary","nullable":false,"optional":true}},"nullableArray":false,"nullable":false},"teachingCourses":{"typeName":"string[]","type":"string[]","typeInstance":"teachingCourses","nullable":false,"optional":true},"awards":{"typeName":"string[]","type":"string[]","typeInstance":"awards","nullable":false,"optional":true},"highestDegree":{"typeName":"string","type":"string","typeInstance":"highestDegree","nullable":false,"optional":true},"contactInformation":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"contactInformation","nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":true},"spokenLanguages":{"typeName":"string[]","type":"string[]","typeInstance":"spokenLanguages","nullable":false,"optional":true},"foreignStudent":{"typeName":"boolean","type":"boolean","typeInstance":"foreignStudent","nullable":false,"optional":true},"profilePicture":{"optional":true,"typeName":"byte[]|()","type":"union[]|()","typeInstance":"profilePicture","nullableArray":false,"nullable":true},"socialMedia":{"typeName":"string[]","type":"string[]","typeInstance":"socialMedia","nullable":false,"optional":true},"relationshipStatus":{"typeName":"string","type":"string","typeInstance":"relationshipStatus","nullable":false,"optional":false},"religiousAffiliation":{"typeName":"string","type":"string","typeInstance":"religiousAffiliation","nullable":false,"optional":false},"ethnicBackground":{"typeName":"string","type":"string","typeInstance":"ethnicBackground","nullable":false,"optional":false},"workHistory":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"workHistory","fields":{"employer":{"typeName":"string","type":"string","typeInstance":"employer","nullable":false,"optional":false},"jobTitle":{"typeName":"string","type":"string","typeInstance":"jobTitle","nullable":false,"optional":false},"fromDate":{"typeName":"string","type":"string","typeInstance":"fromDate","nullable":false,"optional":false},"toDate":{"typeName":"string","type":"string","typeInstance":"toDate","nullable":false,"optional":false},"jobDuties":{"typeName":"string","type":"string","typeInstance":"jobDuties","nullable":false,"optional":false},"supervisor":{"typeName":"string","type":"string","typeInstance":"supervisor","nullable":false,"optional":false},"supervisorContact":{"optional":false,"typeName":"string|int","type":"union","typeInstance":"supervisorContact","nullable":false},"currentJob":{"typeName":"boolean","type":"boolean","typeInstance":"currentJob","nullable":false,"optional":false},"workLocation":{"typeName":"string","type":"string","typeInstance":"workLocation","nullable":false,"optional":false},"employmentCategory":{"typeName":"string","type":"string","typeInstance":"employmentCategory","nullable":false,"optional":false},"income":{"typeName":"decimal","type":"decimal","typeInstance":"income","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"howDiscovered":{"typeName":"string","type":"string","typeInstance":"howDiscovered","nullable":false,"optional":false},"personalInterests":{"typeName":"string[]","type":"string[]","typeInstance":"personalInterests","nullable":false,"optional":false},"accomplishments":{"typeName":"string[]","type":"string[]","typeInstance":"accomplishments","nullable":false,"optional":false},"alumniStatus":{"typeName":"boolean","type":"boolean","typeInstance":"alumniStatus","nullable":false,"optional":false},"nickName":{"typeName":"string","type":"string","typeInstance":"nickName","nullable":false,"optional":false},"preferredPronouns":{"typeName":"string","type":"string","typeInstance":"preferredPronouns","nullable":false,"optional":false},"foodRestrictions":{"typeName":"string","type":"string","typeInstance":"foodRestrictions","nullable":false,"optional":false},"enrollmentStatus":{"typeName":"string","type":"string","typeInstance":"enrollmentStatus","nullable":false,"optional":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_18/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_18/expected.json
deleted file mode 100644
index dcd2e211ae6..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_18/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in AItem.person\n select {\n id: personItem.id,\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: (personItem.age).toString()\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_18/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_18/mapping.json
deleted file mode 100644
index 17ea78cb443..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_18/mapping.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "student":{
-    "id":{
-      "operation":"DIRECT",
-      "targetType":"int",
-      "parameters":[
-        "AItem.person.id"
-      ]
-    },
-    "firstName":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "AItem.person.firstName"
-      ]
-    },
-    "lastName":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "AItem.person.lastName"
-      ]
-    },
-    "age":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "AItem.person.age"
-      ]
-    }
-  }
-}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_18/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_18/param_def.json
deleted file mode 100644
index a6b07a4f482..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_18/param_def.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "inputs":{
-    "AItem":{
-      "person":{
-        "id":{
-          "type":"int",
-          "comment":""
-        },
-        "firstName":{
-          "type":"string",
-          "comment":""
-        },
-        "lastName":{
-          "type":"string",
-          "comment":""
-        },
-        "age":{
-          "type":"int",
-          "comment":""
-        },
-        "country":{
-          "type":"string",
-          "comment":""
-        },
-        "college":{
-          "courses":{
-            "id":{
-              "type":"string",
-              "comment":""
-            },
-            "name":{
-              "type":"string",
-              "comment":""
-            },
-            "credits":{
-              "type":"decimal",
-              "comment":""
-            }
-          }
-        }
-      }
-    }
-  },
-  "output":{
-    "student":{
-      "id":{
-        "type":"int",
-        "comment":""
-      },
-      "firstName":{
-        "type":"string",
-        "comment":""
-      },
-      "lastName":{
-        "type":"string",
-        "comment":""
-      },
-      "age":{
-        "type":"string",
-        "comment":""
-      }
-    }
-  },
-  "inputMetadata":{
-    "AItem":{
-      "isArrayType":true,
-      "parameterName":"AItem",
-      "parameterType":"A[] ",
-      "type":"record[]",
-      "fields":{
-        "person":{
-          "optional":false,
-          "typeName":"record[]",
-          "type":"record[]",
-          "typeInstance":"person",
-          "fields":{
-            "id":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"id",
-              "nullable":false,
-              "optional":false
-            },
-            "firstName":{
-              "typeName":"string",
-              "type":"string",
-              "typeInstance":"firstName",
-              "nullable":false,
-              "optional":false
-            },
-            "lastName":{
-              "typeName":"string",
-              "type":"string",
-              "typeInstance":"lastName",
-              "nullable":false,
-              "optional":false
-            },
-            "age":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"age",
-              "nullable":false,
-              "optional":false
-            },
-            "country":{
-              "typeName":"string",
-              "type":"string",
-              "typeInstance":"country",
-              "nullable":false,
-              "optional":false
-            },
-            "college":{
-              "nullable":false,
-              "optional":false,
-              "type":"record",
-              "typeInstance":"college",
-              "typeName":"record",
-              "fields":{
-                "courses":{
-                  "optional":false,
-                  "typeName":"record[]",
-                  "type":"record[]",
-                  "typeInstance":"courses",
-                  "fields":{
-                    "id":{
-                      "typeName":"string",
-                      "type":"string",
-                      "typeInstance":"id",
-                      "nullable":false,
-                      "optional":false
-                    },
-                    "name":{
-                      "typeName":"string",
-                      "type":"string",
-                      "typeInstance":"name",
-                      "nullable":false,
-                      "optional":false
-                    },
-                    "credits":{
-                      "typeName":"decimal",
-                      "type":"decimal",
-                      "typeInstance":"credits",
-                      "nullable":false,
-                      "optional":false
-                    }
-                  },
-                  "nullableArray":false,
-                  "nullable":false
-                }
-              }
-            }
-          },
-          "nullableArray":false,
-          "nullable":false
-        }
-      }
-    }
-  },
-  "outputMetadata":{
-    "student":{
-      "optional":false,
-      "typeName":"record[]",
-      "type":"record[]",
-      "typeInstance":"student",
-      "fields":{
-        "id":{
-          "typeName":"int",
-          "type":"int",
-          "typeInstance":"id",
-          "nullable":false,
-          "optional":false
-        },
-        "firstName":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"firstName",
-          "nullable":false,
-          "optional":false
-        },
-        "lastName":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"lastName",
-          "nullable":false,
-          "optional":false
-        },
-        "age":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"age",
-          "nullable":false,
-          "optional":false
-        }
-      },
-      "nullableArray":false,
-      "nullable":false
-    }
-  }
-}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_19/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_19/expected.json
deleted file mode 100644
index 4b04d4993dd..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_19/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"items": "from var ItemItem in tr.Items.Item\n select {\n date: tr.Timestamp,\nproduct_id: ItemItem.ProductId,\nquantity: ItemItem.Quantity,\ntotal: tr.TotalAmount\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_19/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_19/mapping.json
deleted file mode 100644
index f46ff1b3a9f..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_19/mapping.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "items":{
-    "date":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "tr.Timestamp"
-      ]
-    },
-    "product_id":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "tr.Items.Item.ProductId"
-      ]
-    },
-    "quantity":{
-      "operation":"DIRECT",
-      "targetType":"int",
-      "parameters":[
-        "tr.Items.Item.Quantity"
-      ]
-    },
-    "total":{
-      "operation":"DIRECT",
-      "targetType":"decimal",
-      "parameters":[
-        "tr.TotalAmount"
-      ]
-    }
-  }
-}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_19/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_19/param_def.json
deleted file mode 100644
index 1a8601a1310..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_19/param_def.json
+++ /dev/null
@@ -1,198 +0,0 @@
-{
-  "inputs":{
-    "tr":{
-      "TransactionId":{
-        "type":"string",
-        "comment":""
-      },
-      "StoreId":{
-        "type":"int",
-        "comment":""
-      },
-      "Timestamp":{
-        "type":"string",
-        "comment":""
-      },
-      "Items":{
-        "Item":{
-          "ProductId":{
-            "type":"string",
-            "comment":""
-          },
-          "Name":{
-            "type":"string",
-            "comment":""
-          },
-          "Quantity":{
-            "type":"int",
-            "comment":""
-          },
-          "Price":{
-            "type":"decimal",
-            "comment":""
-          }
-        }
-      },
-      "TotalAmount":{
-        "type":"decimal",
-        "comment":""
-      },
-      "PaymentMethod":{
-        "type":"string",
-        "comment":""
-      }
-    }
-  },
-  "output":{
-    "items":{
-      "date":{
-        "type":"string",
-        "comment":""
-      },
-      "product_id":{
-        "type":"string",
-        "comment":""
-      },
-      "quantity":{
-        "type":"int",
-        "comment":""
-      },
-      "total":{
-        "type":"decimal",
-        "comment":""
-      }
-    }
-  },
-  "inputMetadata":{
-    "tr":{
-      "isArrayType":false,
-      "parameterName":"tr",
-      "parameterType":"Transaction",
-      "type":"record",
-      "fields":{
-        "TransactionId":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"TransactionId",
-          "nullable":false,
-          "optional":false
-        },
-        "StoreId":{
-          "typeName":"int",
-          "type":"int",
-          "typeInstance":"StoreId",
-          "nullable":false,
-          "optional":false
-        },
-        "Timestamp":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"Timestamp",
-          "nullable":false,
-          "optional":false
-        },
-        "Items":{
-          "nullable":false,
-          "optional":false,
-          "type":"record",
-          "typeInstance":"Items",
-          "typeName":"record",
-          "fields":{
-            "Item":{
-              "optional":false,
-              "typeName":"record[]",
-              "type":"record[]",
-              "typeInstance":"Item",
-              "fields":{
-                "ProductId":{
-                  "typeName":"string",
-                  "type":"string",
-                  "typeInstance":"ProductId",
-                  "nullable":false,
-                  "optional":false
-                },
-                "Name":{
-                  "typeName":"string",
-                  "type":"string",
-                  "typeInstance":"Name",
-                  "nullable":false,
-                  "optional":false
-                },
-                "Quantity":{
-                  "typeName":"int",
-                  "type":"int",
-                  "typeInstance":"Quantity",
-                  "nullable":false,
-                  "optional":false
-                },
-                "Price":{
-                  "typeName":"decimal",
-                  "type":"decimal",
-                  "typeInstance":"Price",
-                  "nullable":false,
-                  "optional":false
-                }
-              },
-              "nullableArray":false,
-              "nullable":false
-            }
-          }
-        },
-        "TotalAmount":{
-          "typeName":"decimal",
-          "type":"decimal",
-          "typeInstance":"TotalAmount",
-          "nullable":false,
-          "optional":false
-        },
-        "PaymentMethod":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"PaymentMethod",
-          "nullable":false,
-          "optional":false
-        }
-      }
-    }
-  },
-  "outputMetadata":{
-    "items":{
-      "optional":false,
-      "typeName":"record[]",
-      "type":"record[]",
-      "typeInstance":"items",
-      "fields":{
-        "date":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"date",
-          "nullable":false,
-          "optional":false
-        },
-        "product_id":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"product_id",
-          "nullable":false,
-          "optional":false
-        },
-        "quantity":{
-          "typeName":"int",
-          "type":"int",
-          "typeInstance":"quantity",
-          "nullable":false,
-          "optional":false
-        },
-        "total":{
-          "typeName":"decimal",
-          "type":"decimal",
-          "typeInstance":"total",
-          "nullable":false,
-          "optional":false
-        }
-      },
-      "nullableArray":false,
-      "nullable":false
-    }
-  }
-}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_2/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_2/expected.json
deleted file mode 100644
index a4c3b8738ce..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_2/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person ?: []\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: check (personItem.age).ensureType(),\ntypes_new: personItem?.types_new,\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n colors: coursesItem.colors?:[],\nid: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem.credits).ensureType(),\naddress: {\n city: coursesItem.address?.city,\nstreet: coursesItem.address?.street?:\"\",\nzipcode: coursesItem.address?.zipcode?:\"\" \n},\nprofessor: from var professorItem in coursesItem?.professor ?: []\n select {\n types: professorItem.types,\nid: professorItem.id,\nfirstName: professorItem.firstName,\ndepartment: {\n color: professorItem.department?.color,\ndepartmentName: professorItem.department?.departmentName?:\"\" \n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_2/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_2/mapping.json
deleted file mode 100644
index dfa4c87968e..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_2/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"types_new":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["A.person.types_new"]},"courses":{"colors":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED)[]","parameters":["A.person.college.courses.colors"]},"id":{"operation":"DIRECT","targetType":"int|()","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"professor":{"types":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.college.courses.professor.types"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"department":{"color":{"operation":"DIRECT","targetType":"BLUE|GREEN|RED","parameters":["A.person.college.courses.professor.department.color"]},"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_2/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_2/param_def.json
deleted file mode 100644
index 0cd22c7e4e3..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_2/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"types_new":{"type":"(string|int)[]|()","comment":""},"college":{"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]|()","comment":""},"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]","comment":""},"id":{"type":"int|()","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"person","fields":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"types_new":{"optional":true,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types_new","nullableArray":false,"nullable":true},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]|()","type":"union[]|()","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"optional":false,"typeName":"record|()","type":"union","typeInstance":"address","members":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}},"nullable":true},"professor":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professor","members":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"color":{"optional":true,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":false}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullable":true}},"nullableArray":false,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]","type":"enum[]","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"id":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"professor","fields":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"color":{"optional":true,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_20/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_20/expected.json
deleted file mode 100644
index d9be65bccfd..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_20/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student": "from var personItem in AItem.person\n select {\n id: personItem.id,\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: (personItem.age).toString(),\ncourses: from var coursesItem in personItem.college.courses\n select {\n id: check int:fromString(coursesItem.id),\ncredits: check (coursesItem.credits).ensureType()\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_20/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_20/mapping.json
deleted file mode 100644
index f355045c198..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_20/mapping.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "student":{
-    "id":{
-      "operation":"DIRECT",
-      "targetType":"int",
-      "parameters":[
-        "AItem.person.id"
-      ]
-    },
-    "firstName":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "AItem.person.firstName"
-      ]
-    },
-    "lastName":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "AItem.person.lastName"
-      ]
-    },
-    "age":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "AItem.person.age"
-      ]
-    },
-    "courses":{
-      "id":{
-        "operation":"DIRECT",
-        "targetType":"int",
-        "parameters":[
-          "AItem.person.college.courses.id"
-        ]
-      },
-      "credits":{
-        "operation":"DIRECT",
-        "targetType":"float",
-        "parameters":[
-          "AItem.person.college.courses.credits"
-        ]
-      }
-    }
-  }
-}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_20/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_20/param_def.json
deleted file mode 100644
index aeccce20be3..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_20/param_def.json
+++ /dev/null
@@ -1,233 +0,0 @@
-{
-  "inputs":{
-    "AItem":{
-      "person":{
-        "id":{
-          "type":"int",
-          "comment":""
-        },
-        "firstName":{
-          "type":"string",
-          "comment":""
-        },
-        "lastName":{
-          "type":"string",
-          "comment":""
-        },
-        "age":{
-          "type":"int",
-          "comment":""
-        },
-        "country":{
-          "type":"string",
-          "comment":""
-        },
-        "college":{
-          "courses":{
-            "id":{
-              "type":"string",
-              "comment":""
-            },
-            "name":{
-              "type":"string",
-              "comment":""
-            },
-            "credits":{
-              "type":"decimal",
-              "comment":""
-            }
-          }
-        }
-      }
-    }
-  },
-  "output":{
-    "student":{
-      "id":{
-        "type":"int",
-        "comment":""
-      },
-      "firstName":{
-        "type":"string",
-        "comment":""
-      },
-      "lastName":{
-        "type":"string",
-        "comment":""
-      },
-      "age":{
-        "type":"string",
-        "comment":""
-      },
-      "courses":{
-        "id":{
-          "type":"int",
-          "comment":""
-        },
-        "credits":{
-          "type":"float",
-          "comment":""
-        }
-      }
-    }
-  },
-  "inputMetadata":{
-    "AItem":{
-      "isArrayType":true,
-      "parameterName":"AItem",
-      "parameterType":"A[] ",
-      "type":"record[]",
-      "fields":{
-        "person":{
-          "optional":false,
-          "typeName":"record[]",
-          "type":"record[]",
-          "typeInstance":"person",
-          "fields":{
-            "id":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"id",
-              "nullable":false,
-              "optional":false
-            },
-            "firstName":{
-              "typeName":"string",
-              "type":"string",
-              "typeInstance":"firstName",
-              "nullable":false,
-              "optional":false
-            },
-            "lastName":{
-              "typeName":"string",
-              "type":"string",
-              "typeInstance":"lastName",
-              "nullable":false,
-              "optional":false
-            },
-            "age":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"age",
-              "nullable":false,
-              "optional":false
-            },
-            "country":{
-              "typeName":"string",
-              "type":"string",
-              "typeInstance":"country",
-              "nullable":false,
-              "optional":false
-            },
-            "college":{
-              "nullable":false,
-              "optional":false,
-              "type":"record",
-              "typeInstance":"college",
-              "typeName":"record",
-              "fields":{
-                "courses":{
-                  "optional":false,
-                  "typeName":"record[]",
-                  "type":"record[]",
-                  "typeInstance":"courses",
-                  "fields":{
-                    "id":{
-                      "typeName":"string",
-                      "type":"string",
-                      "typeInstance":"id",
-                      "nullable":false,
-                      "optional":false
-                    },
-                    "name":{
-                      "typeName":"string",
-                      "type":"string",
-                      "typeInstance":"name",
-                      "nullable":false,
-                      "optional":false
-                    },
-                    "credits":{
-                      "typeName":"decimal",
-                      "type":"decimal",
-                      "typeInstance":"credits",
-                      "nullable":false,
-                      "optional":false
-                    }
-                  },
-                  "nullableArray":false,
-                  "nullable":false
-                }
-              }
-            }
-          },
-          "nullableArray":false,
-          "nullable":false
-        }
-      }
-    }
-  },
-  "outputMetadata":{
-    "student":{
-      "optional":false,
-      "typeName":"record[]",
-      "type":"record[]",
-      "typeInstance":"student",
-      "fields":{
-        "id":{
-          "typeName":"int",
-          "type":"int",
-          "typeInstance":"id",
-          "nullable":false,
-          "optional":false
-        },
-        "firstName":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"firstName",
-          "nullable":false,
-          "optional":false
-        },
-        "lastName":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"lastName",
-          "nullable":false,
-          "optional":false
-        },
-        "age":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"age",
-          "nullable":false,
-          "optional":false
-        },
-        "courses":{
-          "optional":false,
-          "typeName":"record[]",
-          "type":"record[]",
-          "typeInstance":"courses",
-          "fields":{
-            "id":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"id",
-              "nullable":false,
-              "optional":false
-            },
-            "credits":{
-              "typeName":"float",
-              "type":"float",
-              "typeInstance":"credits",
-              "nullable":false,
-              "optional":false
-            }
-          },
-          "nullableArray":false,
-          "nullable":false
-        }
-      },
-      "nullableArray":false,
-      "nullable":false
-    }
-  }
-}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_21/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_21/expected.json
deleted file mode 100644
index 5557adb1794..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_21/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student": "from var personItem in AItem.person\n select {\n id: personItem.id,\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: (personItem.age).toString(),\ncourses: from var coursesItem in personItem.college.courses\n select {\n id: check int:fromString(coursesItem.id),\ncredits: check (coursesItem.credits).ensureType(),\nprofessor: from var professorItem in coursesItem.professor\n select {\n id: professorItem.id,\nfirstName: professorItem.firstName,\ndepartment: from var departmentItem in professorItem.department\n select {\n departmentName: departmentItem.departmentName\n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_21/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_21/mapping.json
deleted file mode 100644
index 1da398e6658..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_21/mapping.json
+++ /dev/null
@@ -1,73 +0,0 @@
-{
-  "student":{
-    "id":{
-      "operation":"DIRECT",
-      "targetType":"int",
-      "parameters":[
-        "AItem.person.id"
-      ]
-    },
-    "firstName":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "AItem.person.firstName"
-      ]
-    },
-    "lastName":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "AItem.person.lastName"
-      ]
-    },
-    "age":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "AItem.person.age"
-      ]
-    },
-    "courses":{
-      "id":{
-        "operation":"DIRECT",
-        "targetType":"int",
-        "parameters":[
-          "AItem.person.college.courses.id"
-        ]
-      },
-      "credits":{
-        "operation":"DIRECT",
-        "targetType":"float",
-        "parameters":[
-          "AItem.person.college.courses.credits"
-        ]
-      },
-      "professor":{
-        "id":{
-          "operation":"DIRECT",
-          "targetType":"int",
-          "parameters":[
-            "AItem.person.college.courses.professor.id"
-          ]
-        },
-        "firstName":{
-          "operation":"DIRECT",
-          "targetType":"string",
-          "parameters":[
-            "AItem.person.college.courses.professor.firstName"
-          ]
-        },
-        "department":{
-          "departmentName":{
-            "operation":"DIRECT",
-            "targetType":"string",
-            "parameters":[
-              "AItem.person.college.courses.professor.department.departmentName"
-            ]
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_21/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_21/param_def.json
deleted file mode 100644
index 9aab4a6b833..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_21/param_def.json
+++ /dev/null
@@ -1,347 +0,0 @@
-{
-  "inputs":{
-    "AItem":{
-      "person":{
-        "id":{
-          "type":"int",
-          "comment":""
-        },
-        "firstName":{
-          "type":"string",
-          "comment":""
-        },
-        "lastName":{
-          "type":"string",
-          "comment":""
-        },
-        "age":{
-          "type":"int",
-          "comment":""
-        },
-        "country":{
-          "type":"string",
-          "comment":""
-        },
-        "college":{
-          "courses":{
-            "id":{
-              "type":"string",
-              "comment":""
-            },
-            "name":{
-              "type":"string",
-              "comment":""
-            },
-            "credits":{
-              "type":"decimal",
-              "comment":""
-            },
-            "professor":{
-              "id":{
-                "type":"int",
-                "comment":""
-              },
-              "firstName":{
-                "type":"string",
-                "comment":""
-              },
-              "department":{
-                "departmentName":{
-                  "type":"string",
-                  "comment":""
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  },
-  "output":{
-    "student":{
-      "id":{
-        "type":"int",
-        "comment":""
-      },
-      "firstName":{
-        "type":"string",
-        "comment":""
-      },
-      "lastName":{
-        "type":"string",
-        "comment":""
-      },
-      "age":{
-        "type":"string",
-        "comment":""
-      },
-      "courses":{
-        "id":{
-          "type":"int",
-          "comment":""
-        },
-        "credits":{
-          "type":"float",
-          "comment":""
-        },
-        "professor":{
-          "id":{
-            "type":"int",
-            "comment":""
-          },
-          "firstName":{
-            "type":"string",
-            "comment":""
-          },
-          "department":{
-            "departmentName":{
-              "type":"string",
-              "comment":""
-            }
-          }
-        }
-      }
-    }
-  },
-  "inputMetadata":{
-    "AItem":{
-      "isArrayType":true,
-      "parameterName":"AItem",
-      "parameterType":"A[] ",
-      "type":"record[]",
-      "fields":{
-        "person":{
-          "optional":false,
-          "typeName":"record[]",
-          "type":"record[]",
-          "typeInstance":"person",
-          "fields":{
-            "id":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"id",
-              "nullable":false,
-              "optional":false
-            },
-            "firstName":{
-              "typeName":"string",
-              "type":"string",
-              "typeInstance":"firstName",
-              "nullable":false,
-              "optional":false
-            },
-            "lastName":{
-              "typeName":"string",
-              "type":"string",
-              "typeInstance":"lastName",
-              "nullable":false,
-              "optional":false
-            },
-            "age":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"age",
-              "nullable":false,
-              "optional":false
-            },
-            "country":{
-              "typeName":"string",
-              "type":"string",
-              "typeInstance":"country",
-              "nullable":false,
-              "optional":false
-            },
-            "college":{
-              "nullable":false,
-              "optional":false,
-              "type":"record",
-              "typeInstance":"college",
-              "typeName":"record",
-              "fields":{
-                "courses":{
-                  "optional":false,
-                  "typeName":"record[]",
-                  "type":"record[]",
-                  "typeInstance":"courses",
-                  "fields":{
-                    "id":{
-                      "typeName":"string",
-                      "type":"string",
-                      "typeInstance":"id",
-                      "nullable":false,
-                      "optional":false
-                    },
-                    "name":{
-                      "typeName":"string",
-                      "type":"string",
-                      "typeInstance":"name",
-                      "nullable":false,
-                      "optional":false
-                    },
-                    "credits":{
-                      "typeName":"decimal",
-                      "type":"decimal",
-                      "typeInstance":"credits",
-                      "nullable":false,
-                      "optional":false
-                    },
-                    "professor":{
-                      "optional":false,
-                      "typeName":"record[]",
-                      "type":"record[]",
-                      "typeInstance":"professor",
-                      "fields":{
-                        "id":{
-                          "typeName":"int",
-                          "type":"int",
-                          "typeInstance":"id",
-                          "nullable":false,
-                          "optional":false
-                        },
-                        "firstName":{
-                          "typeName":"string",
-                          "type":"string",
-                          "typeInstance":"firstName",
-                          "nullable":false,
-                          "optional":false
-                        },
-                        "department":{
-                          "optional":false,
-                          "typeName":"record[]",
-                          "type":"record[]",
-                          "typeInstance":"department",
-                          "fields":{
-                            "departmentName":{
-                              "typeName":"string",
-                              "type":"string",
-                              "typeInstance":"departmentName",
-                              "nullable":false,
-                              "optional":false
-                            }
-                          },
-                          "nullableArray":false,
-                          "nullable":false
-                        }
-                      },
-                      "nullableArray":false,
-                      "nullable":false
-                    }
-                  },
-                  "nullableArray":false,
-                  "nullable":false
-                }
-              }
-            }
-          },
-          "nullableArray":false,
-          "nullable":false
-        }
-      }
-    }
-  },
-  "outputMetadata":{
-    "student":{
-      "optional":false,
-      "typeName":"record[]",
-      "type":"record[]",
-      "typeInstance":"student",
-      "fields":{
-        "id":{
-          "typeName":"int",
-          "type":"int",
-          "typeInstance":"id",
-          "nullable":false,
-          "optional":false
-        },
-        "firstName":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"firstName",
-          "nullable":false,
-          "optional":false
-        },
-        "lastName":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"lastName",
-          "nullable":false,
-          "optional":false
-        },
-        "age":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"age",
-          "nullable":false,
-          "optional":false
-        },
-        "courses":{
-          "optional":false,
-          "typeName":"record[]",
-          "type":"record[]",
-          "typeInstance":"courses",
-          "fields":{
-            "id":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"id",
-              "nullable":false,
-              "optional":false
-            },
-            "credits":{
-              "typeName":"float",
-              "type":"float",
-              "typeInstance":"credits",
-              "nullable":false,
-              "optional":false
-            },
-            "professor":{
-              "optional":false,
-              "typeName":"record[]",
-              "type":"record[]",
-              "typeInstance":"professor",
-              "fields":{
-                "id":{
-                  "typeName":"int",
-                  "type":"int",
-                  "typeInstance":"id",
-                  "nullable":false,
-                  "optional":false
-                },
-                "firstName":{
-                  "typeName":"string",
-                  "type":"string",
-                  "typeInstance":"firstName",
-                  "nullable":false,
-                  "optional":false
-                },
-                "department":{
-                  "optional":false,
-                  "typeName":"record[]",
-                  "type":"record[]",
-                  "typeInstance":"department",
-                  "fields":{
-                    "departmentName":{
-                      "typeName":"string",
-                      "type":"string",
-                      "typeInstance":"departmentName",
-                      "nullable":false,
-                      "optional":false
-                    }
-                  },
-                  "nullableArray":false,
-                  "nullable":false
-                }
-              },
-              "nullableArray":false,
-              "nullable":false
-            }
-          },
-          "nullableArray":false,
-          "nullable":false
-        }
-      },
-      "nullableArray":false,
-      "nullable":false
-    }
-  }
-}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_22/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_22/expected.json
deleted file mode 100644
index 4128541717b..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_22/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"post.id","description":"post.description","author":"author","meta":"{\n tags: re `,`.split(post.tags),\ncategory: post.category,\ncreatedTimeStamp: {\n utcOffset: {\n hours: post.createdTimeStamp.utcOffset?.hours?:0,\nminutes: post.createdTimeStamp.utcOffset?.minutes?:0,\nseconds: post.createdTimeStamp.utcOffset?.seconds \n},\ntimeAbbrev: post.createdTimeStamp.timeAbbrev,\nwhich: post.createdTimeStamp.which,\ndayOfWeek: post.createdTimeStamp.dayOfWeek,\nyear: post.createdTimeStamp.year,\nmonth: post.createdTimeStamp.month,\nday: post.createdTimeStamp.day,\nhour: post.createdTimeStamp.hour,\nminute: post.createdTimeStamp.minute,\nsecond: post.createdTimeStamp.second \n} \n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_22/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_22/mapping.json
deleted file mode 100644
index 0665f359856..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_22/mapping.json
+++ /dev/null
@@ -1,128 +0,0 @@
-{
-  "id":{
-    "operation":"DIRECT",
-    "targetType":"int",
-    "parameters":[
-      "post.id"
-    ]
-  },
-  "description":{
-    "operation":"DIRECT",
-    "targetType":"string",
-    "parameters":[
-      "post.description"
-    ]
-  },
-  "author":{
-    "operation":"DIRECT",
-    "targetType":"string",
-    "parameters":[
-      "author.author"
-    ]
-  },
-  "meta":{
-    "tags":{
-      "operation":"SPLIT",
-      "targetType":"string[]",
-      "parameters":[
-        "post.tags",
-        ","
-      ]
-    },
-    "category":{
-      "operation":"DIRECT",
-      "targetType":"string",
-      "parameters":[
-        "post.category"
-      ]
-    },
-    "createdTimeStamp":{
-      "utcOffset":{
-        "hours":{
-          "operation":"DIRECT",
-          "targetType":"int",
-          "parameters":[
-            "post.createdTimeStamp.utcOffset.hours"
-          ]
-        },
-        "minutes":{
-          "operation":"DIRECT",
-          "targetType":"int",
-          "parameters":[
-            "post.createdTimeStamp.utcOffset.minutes"
-          ]
-        },
-        "seconds":{
-          "operation":"DIRECT",
-          "targetType":"decimal",
-          "parameters":[
-            "post.createdTimeStamp.utcOffset.seconds"
-          ]
-        }
-      },
-      "timeAbbrev":{
-        "operation":"DIRECT",
-        "targetType":"string",
-        "parameters":[
-          "post.createdTimeStamp.timeAbbrev"
-        ]
-      },
-      "which":{
-        "operation":"DIRECT",
-        "targetType":"0|1",
-        "parameters":[
-          "post.createdTimeStamp.which"
-        ]
-      },
-      "dayOfWeek":{
-        "operation":"DIRECT",
-        "targetType":"0|1|2|3|4|5|6",
-        "parameters":[
-          "post.createdTimeStamp.dayOfWeek"
-        ]
-      },
-      "year":{
-        "operation":"DIRECT",
-        "targetType":"int",
-        "parameters":[
-          "post.createdTimeStamp.year"
-        ]
-      },
-      "month":{
-        "operation":"DIRECT",
-        "targetType":"int",
-        "parameters":[
-          "post.createdTimeStamp.month"
-        ]
-      },
-      "day":{
-        "operation":"DIRECT",
-        "targetType":"int",
-        "parameters":[
-          "post.createdTimeStamp.day"
-        ]
-      },
-      "hour":{
-        "operation":"DIRECT",
-        "targetType":"int",
-        "parameters":[
-          "post.createdTimeStamp.hour"
-        ]
-      },
-      "minute":{
-        "operation":"DIRECT",
-        "targetType":"int",
-        "parameters":[
-          "post.createdTimeStamp.minute"
-        ]
-      },
-      "second":{
-        "operation":"DIRECT",
-        "targetType":"decimal",
-        "parameters":[
-          "post.createdTimeStamp.second"
-        ]
-      }
-    }
-  }
-}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_22/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_22/param_def.json
deleted file mode 100644
index 829d6f37393..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_22/param_def.json
+++ /dev/null
@@ -1,593 +0,0 @@
-{
-  "inputs":{
-    "post":{
-      "id":{
-        "type":"int",
-        "comment":""
-      },
-      "description":{
-        "type":"string",
-        "comment":""
-      },
-      "tags":{
-        "type":"string",
-        "comment":""
-      },
-      "category":{
-        "type":"string",
-        "comment":""
-      },
-      "createdTimeStamp":{
-        "utcOffset":{
-          "hours":{
-            "type":"int",
-            "comment":""
-          },
-          "minutes":{
-            "type":"int",
-            "comment":""
-          },
-          "seconds":{
-            "type":"decimal",
-            "comment":""
-          }
-        },
-        "timeAbbrev":{
-          "type":"string",
-          "comment":""
-        },
-        "which":{
-          "type":"0|1",
-          "comment":""
-        },
-        "dayOfWeek":{
-          "type":"0|1|2|3|4|5|6",
-          "comment":""
-        },
-        "year":{
-          "type":"int",
-          "comment":""
-        },
-        "month":{
-          "type":"int",
-          "comment":""
-        },
-        "day":{
-          "type":"int",
-          "comment":""
-        },
-        "hour":{
-          "type":"int",
-          "comment":""
-        },
-        "minute":{
-          "type":"int",
-          "comment":""
-        },
-        "second":{
-          "type":"decimal",
-          "comment":""
-        }
-      }
-    },
-    "author":{
-      "author":{
-        "type":"string",
-        "comment":""
-      }
-    }
-  },
-  "output":{
-    "id":{
-      "type":"int",
-      "comment":""
-    },
-    "description":{
-      "type":"string",
-      "comment":""
-    },
-    "author":{
-      "type":"string",
-      "comment":""
-    },
-    "meta":{
-      "tags":{
-        "type":"string[]",
-        "comment":""
-      },
-      "category":{
-        "type":"string",
-        "comment":""
-      },
-      "createdTimeStamp":{
-        "utcOffset":{
-          "hours":{
-            "type":"int",
-            "comment":""
-          },
-          "minutes":{
-            "type":"int",
-            "comment":""
-          },
-          "seconds":{
-            "type":"decimal",
-            "comment":""
-          }
-        },
-        "timeAbbrev":{
-          "type":"string",
-          "comment":""
-        },
-        "which":{
-          "type":"0|1",
-          "comment":""
-        },
-        "dayOfWeek":{
-          "type":"0|1|2|3|4|5|6",
-          "comment":""
-        },
-        "year":{
-          "type":"int",
-          "comment":""
-        },
-        "month":{
-          "type":"int",
-          "comment":""
-        },
-        "day":{
-          "type":"int",
-          "comment":""
-        },
-        "hour":{
-          "type":"int",
-          "comment":""
-        },
-        "minute":{
-          "type":"int",
-          "comment":""
-        },
-        "second":{
-          "type":"decimal",
-          "comment":""
-        }
-      }
-    }
-  },
-  "inputMetadata":{
-    "post":{
-      "isArrayType":false,
-      "parameterName":"post",
-      "parameterType":"Post",
-      "type":"record",
-      "fields":{
-        "id":{
-          "typeName":"int",
-          "type":"int",
-          "typeInstance":"id",
-          "nullable":false,
-          "optional":false
-        },
-        "description":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"description",
-          "nullable":false,
-          "optional":false
-        },
-        "tags":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"tags",
-          "nullable":false,
-          "optional":false
-        },
-        "category":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"category",
-          "nullable":false,
-          "optional":false
-        },
-        "createdTimeStamp":{
-          "nullable":false,
-          "optional":false,
-          "type":"record",
-          "typeInstance":"createdTimeStamp",
-          "typeName":"record",
-          "fields":{
-            "utcOffset":{
-              "optional":true,
-              "typeName":"readonly&record",
-              "type":"intersection",
-              "typeInstance":"utcOffset",
-              "members":{
-                "hours":{
-                  "typeName":"int",
-                  "type":"int",
-                  "typeInstance":"hours",
-                  "nullable":false,
-                  "optional":false
-                },
-                "minutes":{
-                  "typeName":"int",
-                  "type":"int",
-                  "typeInstance":"minutes",
-                  "nullable":false,
-                  "optional":false
-                },
-                "seconds":{
-                  "typeName":"decimal",
-                  "type":"decimal",
-                  "typeInstance":"seconds",
-                  "nullable":false,
-                  "optional":true
-                }
-              },
-              "nullable":false
-            },
-            "timeAbbrev":{
-              "typeName":"string",
-              "type":"string",
-              "typeInstance":"timeAbbrev",
-              "nullable":false,
-              "optional":true
-            },
-            "which":{
-              "optional":true,
-              "typeName":"0|1",
-              "type":"union",
-              "typeInstance":"which",
-              "members":{
-                "0":{
-                  "typeName":"0",
-                  "type":"0",
-                  "typeInstance":"0",
-                  "nullable":false,
-                  "optional":false
-                },
-                "1":{
-                  "typeName":"1",
-                  "type":"1",
-                  "typeInstance":"1",
-                  "nullable":false,
-                  "optional":false
-                }
-              },
-              "nullable":false
-            },
-            "dayOfWeek":{
-              "optional":true,
-              "typeName":"0|1|2|3|4|5|6",
-              "type":"union",
-              "typeInstance":"dayOfWeek",
-              "members":{
-                "0":{
-                  "typeName":"0",
-                  "type":"0",
-                  "typeInstance":"0",
-                  "nullable":false,
-                  "optional":false
-                },
-                "1":{
-                  "typeName":"1",
-                  "type":"1",
-                  "typeInstance":"1",
-                  "nullable":false,
-                  "optional":false
-                },
-                "2":{
-                  "typeName":"2",
-                  "type":"2",
-                  "typeInstance":"2",
-                  "nullable":false,
-                  "optional":false
-                },
-                "3":{
-                  "typeName":"3",
-                  "type":"3",
-                  "typeInstance":"3",
-                  "nullable":false,
-                  "optional":false
-                },
-                "4":{
-                  "typeName":"4",
-                  "type":"4",
-                  "typeInstance":"4",
-                  "nullable":false,
-                  "optional":false
-                },
-                "5":{
-                  "typeName":"5",
-                  "type":"5",
-                  "typeInstance":"5",
-                  "nullable":false,
-                  "optional":false
-                },
-                "6":{
-                  "typeName":"6",
-                  "type":"6",
-                  "typeInstance":"6",
-                  "nullable":false,
-                  "optional":false
-                }
-              },
-              "nullable":false
-            },
-            "year":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"year",
-              "nullable":false,
-              "optional":false
-            },
-            "month":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"month",
-              "nullable":false,
-              "optional":false
-            },
-            "day":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"day",
-              "nullable":false,
-              "optional":false
-            },
-            "hour":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"hour",
-              "nullable":false,
-              "optional":false
-            },
-            "minute":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"minute",
-              "nullable":false,
-              "optional":false
-            },
-            "second":{
-              "typeName":"decimal",
-              "type":"decimal",
-              "typeInstance":"second",
-              "nullable":false,
-              "optional":true
-            }
-          }
-        }
-      }
-    },
-    "author":{
-      "isArrayType":false,
-      "parameterName":"author",
-      "parameterType":"string ",
-      "type":"record",
-      "fields":{
-        "author":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"author",
-          "nullable":false,
-          "optional":false
-        }
-      }
-    }
-  },
-  "outputMetadata":{
-    "id":{
-      "typeName":"int",
-      "type":"int",
-      "typeInstance":"id",
-      "nullable":false,
-      "optional":false
-    },
-    "description":{
-      "typeName":"string",
-      "type":"string",
-      "typeInstance":"description",
-      "nullable":false,
-      "optional":false
-    },
-    "author":{
-      "typeName":"string",
-      "type":"string",
-      "typeInstance":"author",
-      "nullable":false,
-      "optional":false
-    },
-    "meta":{
-      "nullable":false,
-      "optional":false,
-      "type":"record",
-      "typeInstance":"meta",
-      "typeName":"record",
-      "fields":{
-        "tags":{
-          "typeName":"string[]",
-          "type":"string[]",
-          "typeInstance":"tags",
-          "nullable":false,
-          "optional":false
-        },
-        "category":{
-          "typeName":"string",
-          "type":"string",
-          "typeInstance":"category",
-          "nullable":false,
-          "optional":false
-        },
-        "createdTimeStamp":{
-          "nullable":false,
-          "optional":false,
-          "type":"record",
-          "typeInstance":"createdTimeStamp",
-          "typeName":"record",
-          "fields":{
-            "utcOffset":{
-              "optional":true,
-              "typeName":"readonly&record",
-              "type":"intersection",
-              "typeInstance":"utcOffset",
-              "members":{
-                "hours":{
-                  "typeName":"int",
-                  "type":"int",
-                  "typeInstance":"hours",
-                  "nullable":false,
-                  "optional":false
-                },
-                "minutes":{
-                  "typeName":"int",
-                  "type":"int",
-                  "typeInstance":"minutes",
-                  "nullable":false,
-                  "optional":false
-                },
-                "seconds":{
-                  "typeName":"decimal",
-                  "type":"decimal",
-                  "typeInstance":"seconds",
-                  "nullable":false,
-                  "optional":true
-                }
-              },
-              "nullable":false
-            },
-            "timeAbbrev":{
-              "typeName":"string",
-              "type":"string",
-              "typeInstance":"timeAbbrev",
-              "nullable":false,
-              "optional":true
-            },
-            "which":{
-              "optional":true,
-              "typeName":"0|1",
-              "type":"union",
-              "typeInstance":"which",
-              "members":{
-                "0":{
-                  "typeName":"0",
-                  "type":"0",
-                  "typeInstance":"0",
-                  "nullable":false,
-                  "optional":false
-                },
-                "1":{
-                  "typeName":"1",
-                  "type":"1",
-                  "typeInstance":"1",
-                  "nullable":false,
-                  "optional":false
-                }
-              },
-              "nullable":false
-            },
-            "dayOfWeek":{
-              "optional":true,
-              "typeName":"0|1|2|3|4|5|6",
-              "type":"union",
-              "typeInstance":"dayOfWeek",
-              "members":{
-                "0":{
-                  "typeName":"0",
-                  "type":"0",
-                  "typeInstance":"0",
-                  "nullable":false,
-                  "optional":false
-                },
-                "1":{
-                  "typeName":"1",
-                  "type":"1",
-                  "typeInstance":"1",
-                  "nullable":false,
-                  "optional":false
-                },
-                "2":{
-                  "typeName":"2",
-                  "type":"2",
-                  "typeInstance":"2",
-                  "nullable":false,
-                  "optional":false
-                },
-                "3":{
-                  "typeName":"3",
-                  "type":"3",
-                  "typeInstance":"3",
-                  "nullable":false,
-                  "optional":false
-                },
-                "4":{
-                  "typeName":"4",
-                  "type":"4",
-                  "typeInstance":"4",
-                  "nullable":false,
-                  "optional":false
-                },
-                "5":{
-                  "typeName":"5",
-                  "type":"5",
-                  "typeInstance":"5",
-                  "nullable":false,
-                  "optional":false
-                },
-                "6":{
-                  "typeName":"6",
-                  "type":"6",
-                  "typeInstance":"6",
-                  "nullable":false,
-                  "optional":false
-                }
-              },
-              "nullable":false
-            },
-            "year":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"year",
-              "nullable":false,
-              "optional":false
-            },
-            "month":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"month",
-              "nullable":false,
-              "optional":false
-            },
-            "day":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"day",
-              "nullable":false,
-              "optional":false
-            },
-            "hour":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"hour",
-              "nullable":false,
-              "optional":false
-            },
-            "minute":{
-              "typeName":"int",
-              "type":"int",
-              "typeInstance":"minute",
-              "nullable":false,
-              "optional":false
-            },
-            "second":{
-              "typeName":"decimal",
-              "type":"decimal",
-              "typeInstance":"second",
-              "nullable":false,
-              "optional":true
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_3/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_3/expected.json
deleted file mode 100644
index 899cfb6e516..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_3/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: check (personItem.age).ensureType(),\ntypes_new: personItem.types_new,\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n colors: coursesItem.colors?:[],\nid: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem.credits).ensureType(),\naddress: {\n city: coursesItem.address?.city,\nstreet: coursesItem.address?.street?:\"\",\nzipcode: coursesItem.address?.zipcode?:\"\" \n},\nprofessor: from var professorItem in coursesItem?.professor ?: []\n select {\n types: professorItem.types,\nid: professorItem.id,\nfirstName: professorItem.firstName,\ndepartment: {\n color: professorItem.department?.color,\ndepartmentName: professorItem.department?.departmentName?:\"\" \n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_3/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_3/mapping.json
deleted file mode 100644
index dfa4c87968e..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_3/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"types_new":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["A.person.types_new"]},"courses":{"colors":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED)[]","parameters":["A.person.college.courses.colors"]},"id":{"operation":"DIRECT","targetType":"int|()","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"professor":{"types":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.college.courses.professor.types"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"department":{"color":{"operation":"DIRECT","targetType":"BLUE|GREEN|RED","parameters":["A.person.college.courses.professor.department.color"]},"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_3/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_3/param_def.json
deleted file mode 100644
index 10e985f5c8e..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_3/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"college":{"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]|()","comment":""},"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]","comment":""},"id":{"type":"int|()","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"person","fields":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]|()","type":"union[]|()","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"optional":false,"typeName":"record|()","type":"union","typeInstance":"address","members":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}},"nullable":true},"professor":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professor","members":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"color":{"optional":true,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":false}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullable":true}},"nullableArray":false,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]","type":"enum[]","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"id":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":true,"typeName":"record[]","type":"record[]","typeInstance":"professor","fields":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record","type":"intersection","typeInstance":"department","members":{"color":{"optional":true,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_4/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_4/expected.json
deleted file mode 100644
index 4415205325b..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_4/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: check (personItem.age).ensureType(),\ntypes_new: personItem.types_new,\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n colors: coursesItem.colors?:[],\nid: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem.credits).ensureType(),\naddress: {\n city: coursesItem.address?.city,\nstreet: coursesItem.address.street,\nzipcode: coursesItem.address.zipcode \n},\nprofessor: from var professorItem in coursesItem?.professor ?: []\n select {\n types: professorItem.types,\nid: professorItem.id,\nfirstName: professorItem.firstName,\ndepartment: {\n color: professorItem?.department?.color?:\"BLUE\",\ndepartmentName: professorItem?.department?.departmentName?:\"\" \n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_4/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_4/mapping.json
deleted file mode 100644
index af221727bd0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_4/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"types_new":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["A.person.types_new"]},"courses":{"colors":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED)[]","parameters":["A.person.college.courses.colors"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"professor":{"types":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.college.courses.professor.types"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"department":{"color":{"operation":"DIRECT","targetType":"BLUE|GREEN|RED","parameters":["A.person.college.courses.professor.department.color"]},"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_4/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_4/param_def.json
deleted file mode 100644
index 20e3509df80..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_4/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"college":{"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]|()","comment":""},"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]","comment":""},"id":{"type":"int","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"person","fields":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]|()","type":"union[]|()","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":true,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professor","members":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record|()","type":"union","typeInstance":"department","members":{"color":{"optional":false,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":true}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullable":true}},"nullableArray":false,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]","type":"enum[]","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"professor","fields":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record|()","type":"union","typeInstance":"department","members":{"color":{"optional":false,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":true}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_5/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_5/expected.json
deleted file mode 100644
index 87688b509a9..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_5/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: check (personItem.age).ensureType(),\ntypes_new: personItem.types_new,\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n colors: coursesItem?.colors?:[],\nid: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem.credits).ensureType(),\naddress: {\n city: coursesItem.address?.city,\nstreet: coursesItem.address.street,\nzipcode: coursesItem.address.zipcode \n},\nprofessor: from var professorItem in coursesItem.professor ?: []\n select {\n types: professorItem.types,\nid: professorItem.id,\nfirstName: professorItem.firstName,\ndepartment: {\n color: professorItem?.department?.color,\ndepartmentName: professorItem?.department?.departmentName?:\"\" \n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_5/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_5/mapping.json
deleted file mode 100644
index eb065eb2dbb..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_5/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"types_new":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["A.person.types_new"]},"courses":{"colors":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED)[]","parameters":["A.person.college.courses.colors"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"professor":{"types":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.college.courses.professor.types"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"department":{"color":{"operation":"DIRECT","targetType":"BLUE|GREEN|RED|()","parameters":["A.person.college.courses.professor.department.color"]},"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_5/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_5/param_def.json
deleted file mode 100644
index fa90fb72b34..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_5/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"college":{"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]|()","comment":""},"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED|()","comment":""},"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]","comment":""},"id":{"type":"int","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED|()","comment":""},"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"person","fields":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":true,"typeName":"(BLUE|GREEN|RED)[]|()","type":"union[]|()","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professor","members":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record|()","type":"union","typeInstance":"department","members":{"color":{"optional":false,"typeName":"BLUE|GREEN|RED|()","type":"union","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":true},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":true}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullable":true}},"nullableArray":false,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]","type":"enum[]","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"professor","fields":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record|()","type":"union","typeInstance":"department","members":{"color":{"optional":false,"typeName":"BLUE|GREEN|RED|()","type":"union","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":true},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":true}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_6/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_6/expected.json
deleted file mode 100644
index 87688b509a9..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_6/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: check (personItem.age).ensureType(),\ntypes_new: personItem.types_new,\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n colors: coursesItem?.colors?:[],\nid: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem.credits).ensureType(),\naddress: {\n city: coursesItem.address?.city,\nstreet: coursesItem.address.street,\nzipcode: coursesItem.address.zipcode \n},\nprofessor: from var professorItem in coursesItem.professor ?: []\n select {\n types: professorItem.types,\nid: professorItem.id,\nfirstName: professorItem.firstName,\ndepartment: {\n color: professorItem?.department?.color,\ndepartmentName: professorItem?.department?.departmentName?:\"\" \n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_6/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_6/mapping.json
deleted file mode 100644
index eb065eb2dbb..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_6/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"types_new":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["A.person.types_new"]},"courses":{"colors":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED)[]","parameters":["A.person.college.courses.colors"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"professor":{"types":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.college.courses.professor.types"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"department":{"color":{"operation":"DIRECT","targetType":"BLUE|GREEN|RED|()","parameters":["A.person.college.courses.professor.department.color"]},"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_6/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_6/param_def.json
deleted file mode 100644
index c52efc62883..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_6/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"college":{"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]|()","comment":""},"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED|()","comment":""},"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]","comment":""},"id":{"type":"int","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED|()","comment":""},"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"person","fields":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":true,"typeName":"(BLUE|GREEN|RED)[]|()","type":"union[]|()","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professor","members":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record|()","type":"union","typeInstance":"department","members":{"color":{"optional":true,"typeName":"BLUE|GREEN|RED|()","type":"union","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":true},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":true}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullable":true}},"nullableArray":false,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]","type":"enum[]","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"professor","fields":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"readonly&record|()","type":"union","typeInstance":"department","members":{"color":{"optional":true,"typeName":"BLUE|GREEN|RED|()","type":"union","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":true},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullable":true}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_7/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_7/expected.json
deleted file mode 100644
index 6766961024e..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_7/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: check (personItem.age).ensureType(),\ntypes_new: personItem.types_new,\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n colors: coursesItem?.colors?:[],\nid: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem.credits).ensureType(),\naddress: {\n city: coursesItem.address?.city,\nstreet: coursesItem.address.street,\nzipcode: coursesItem.address.zipcode \n},\nprofessor: from var professorItem in coursesItem.professor ?: []\n select {\n types: professorItem.types,\nid: professorItem.id,\nfirstName: professorItem.firstName,\ndepartment: from var departmentItem in professorItem?.department ?: []\n select {\n color: departmentItem.color,\ndepartmentName: departmentItem.departmentName\n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_7/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_7/mapping.json
deleted file mode 100644
index af221727bd0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_7/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"types_new":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["A.person.types_new"]},"courses":{"colors":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED)[]","parameters":["A.person.college.courses.colors"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"professor":{"types":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.college.courses.professor.types"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"department":{"color":{"operation":"DIRECT","targetType":"BLUE|GREEN|RED","parameters":["A.person.college.courses.professor.department.color"]},"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_7/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_7/param_def.json
deleted file mode 100644
index 523c332bdea..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_7/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"college":{"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]|()","comment":""},"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]","comment":""},"id":{"type":"int","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"person","fields":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":true,"typeName":"(BLUE|GREEN|RED)[]|()","type":"union[]|()","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professor","members":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"(readonly&record)[]|()","type":"union[]|()","typeInstance":"department","members":{"color":{"optional":false,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullable":true}},"nullableArray":false,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]","type":"enum[]","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"professor","fields":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":true,"typeName":"(readonly&record)[]|()","type":"union[]|()","typeInstance":"department","members":{"color":{"optional":false,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_8/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_8/expected.json
deleted file mode 100644
index b5a996eaaa0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_8/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: check (personItem.age).ensureType(),\ntypes_new: personItem.types_new,\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n colors: coursesItem?.colors?:[],\nid: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem.credits).ensureType(),\naddress: {\n city: coursesItem.address?.city,\nstreet: coursesItem.address.street,\nzipcode: coursesItem.address.zipcode \n},\nprofessor: from var professorItem in coursesItem.professor ?: []\n select {\n types: professorItem.types,\nid: professorItem.id,\nfirstName: professorItem.firstName,\ndepartment: from var departmentItem in professorItem.department ?: []\n select {\n color: departmentItem.color,\ndepartmentName: departmentItem.departmentName\n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_8/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_8/mapping.json
deleted file mode 100644
index af221727bd0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_8/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"types_new":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["A.person.types_new"]},"courses":{"colors":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED)[]","parameters":["A.person.college.courses.colors"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"professor":{"types":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.college.courses.professor.types"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"department":{"color":{"operation":"DIRECT","targetType":"BLUE|GREEN|RED","parameters":["A.person.college.courses.professor.department.color"]},"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_8/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_8/param_def.json
deleted file mode 100644
index 354a4d2e564..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_8/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"college":{"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]|()","comment":""},"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]","comment":""},"id":{"type":"int","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"person","fields":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":true,"typeName":"(BLUE|GREEN|RED)[]|()","type":"union[]|()","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professor","members":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":false,"typeName":"(readonly&record)[]|()","type":"union[]|()","typeInstance":"department","members":{"color":{"optional":false,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullable":true}},"nullableArray":false,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]","type":"enum[]","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"professor","fields":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":false,"typeName":"(readonly&record)[]|()","type":"union[]|()","typeInstance":"department","members":{"color":{"optional":false,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_9/expected.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_9/expected.json
deleted file mode 100644
index db4a22088a4..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_9/expected.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":"from var personItem in A.person\n select {\n id: (personItem?.id).toString(),\nfirstName: personItem.firstName,\nlastName: personItem.lastName,\nage: check (personItem.age).ensureType(),\ntypes_new: personItem.types_new,\ncourses: from var coursesItem in personItem?.college?.courses ?: []\n select {\n colors: coursesItem?.colors?:[],\nid: check int:fromString(coursesItem?.id?:\"\"),\ncredits: check (coursesItem.credits).ensureType(),\naddress: {\n city: coursesItem.address?.city,\nstreet: coursesItem.address.street,\nzipcode: coursesItem.address.zipcode \n},\nprofessor: from var professorItem in coursesItem.professor ?: []\n select {\n types: professorItem.types,\nid: professorItem.id,\nfirstName: professorItem.firstName,\ndepartment: from var departmentItem in professorItem.department\n select {\n color: departmentItem.color,\ndepartmentName: departmentItem.departmentName\n}\n}\n}\n}"}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_9/mapping.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_9/mapping.json
deleted file mode 100644
index af221727bd0..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_9/mapping.json
+++ /dev/null
@@ -1 +0,0 @@
-{"student":{"id":{"operation":"DIRECT","targetType":"string","parameters":["A.person.id"]},"firstName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.firstName"]},"lastName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.lastName"]},"age":{"operation":"DIRECT","targetType":"float|()","parameters":["A.person.age"]},"types_new":{"operation":"DIRECT","targetType":"(string|int)[]","parameters":["A.person.types_new"]},"courses":{"colors":{"operation":"DIRECT","targetType":"(BLUE|GREEN|RED)[]","parameters":["A.person.college.courses.colors"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.id"]},"credits":{"operation":"DIRECT","targetType":"float","parameters":["A.person.college.courses.credits"]},"address":{"city":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.address.city"]},"street":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.street"]},"zipcode":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.address.zipcode"]}},"professor":{"types":{"operation":"DIRECT","targetType":"(string|int)[]|()","parameters":["A.person.college.courses.professor.types"]},"id":{"operation":"DIRECT","targetType":"int","parameters":["A.person.college.courses.professor.id"]},"firstName":{"operation":"DIRECT","targetType":"string|()","parameters":["A.person.college.courses.professor.firstName"]},"department":{"color":{"operation":"DIRECT","targetType":"BLUE|GREEN|RED","parameters":["A.person.college.courses.professor.department.color"]},"departmentName":{"operation":"DIRECT","targetType":"string","parameters":["A.person.college.courses.professor.department.departmentName"]}}}}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_9/param_def.json b/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_9/param_def.json
deleted file mode 100644
index 960477d4842..00000000000
--- a/workspaces/ballerina/ballerina-extension/test/ai/datamapper/resources/Complex/case_9/param_def.json
+++ /dev/null
@@ -1 +0,0 @@
-{"inputs":{"A":{"person":{"id":{"type":"int|()","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"int|()","comment":""},"country":{"type":"string","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"college":{"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]|()","comment":""},"id":{"type":"string|()","comment":""},"name":{"type":"string|()","comment":""},"credits":{"type":"decimal","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}}}},"output":{"student":{"id":{"type":"string","comment":""},"firstName":{"type":"string","comment":""},"lastName":{"type":"string|()","comment":""},"age":{"type":"float|()","comment":""},"types_new":{"type":"(string|int)[]","comment":""},"courses":{"colors":{"type":"(BLUE|GREEN|RED)[]","comment":""},"id":{"type":"int","comment":""},"credits":{"type":"float","comment":""},"address":{"city":{"type":"string|()","comment":""},"street":{"type":"string","comment":""},"zipcode":{"type":"string","comment":""}},"professor":{"types":{"type":"(string|int)[]|()","comment":""},"id":{"type":"int","comment":""},"firstName":{"type":"string|()","comment":""},"department":{"color":{"type":"BLUE|GREEN|RED","comment":""},"departmentName":{"type":"string","comment":""}}}}}},"inputMetadata":{"A":{"isArrayType":false,"parameterName":"A","parameterType":"A","type":"record","fields":{"person":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"person","fields":{"id":{"optional":true,"typeName":"int|()","type":"union","typeInstance":"id","nullable":true},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"int|()","type":"union","typeInstance":"age","nullable":true},"country":{"typeName":"string","type":"string","typeInstance":"country","nullable":false,"optional":false},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"college":{"optional":true,"typeName":"record|()","type":"union","typeInstance":"college","members":{"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":true,"typeName":"(BLUE|GREEN|RED)[]|()","type":"union[]|()","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":true},"id":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"id","nullable":true},"name":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"name","nullable":true},"credits":{"typeName":"decimal","type":"decimal","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]|()","type":"union[]|()","typeInstance":"professor","members":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"department","fields":{"color":{"optional":false,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":true}},"nullableArray":false,"nullable":false}},"nullable":true}},"nullableArray":false,"nullable":false}}}},"outputMetadata":{"student":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"student","fields":{"id":{"typeName":"string","type":"string","typeInstance":"id","nullable":false,"optional":false},"firstName":{"typeName":"string","type":"string","typeInstance":"firstName","nullable":false,"optional":false},"lastName":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"lastName","nullable":true},"age":{"optional":false,"typeName":"float|()","type":"union","typeInstance":"age","nullable":true},"types_new":{"optional":true,"typeName":"(string|int)[]","type":"union[]","typeInstance":"types_new","nullableArray":false,"nullable":false},"courses":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"courses","fields":{"colors":{"optional":false,"typeName":"(BLUE|GREEN|RED)[]","type":"enum[]","typeInstance":"colors","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullableArray":false,"nullable":false},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":false},"credits":{"typeName":"float","type":"float","typeInstance":"credits","nullable":false,"optional":true},"address":{"nullable":false,"optional":false,"type":"record","typeInstance":"address","typeName":"record","fields":{"city":{"optional":true,"typeName":"string|()","type":"union","typeInstance":"city","nullable":true},"street":{"typeName":"string","type":"string","typeInstance":"street","nullable":false,"optional":false},"zipcode":{"typeName":"string","type":"string","typeInstance":"zipcode","nullable":false,"optional":false}}},"professor":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"professor","fields":{"types":{"optional":false,"typeName":"(string|int)[]|()","type":"union[]|()","typeInstance":"types","nullableArray":false,"nullable":true},"id":{"typeName":"int","type":"int","typeInstance":"id","nullable":false,"optional":true},"firstName":{"optional":false,"typeName":"string|()","type":"union","typeInstance":"firstName","nullable":true},"department":{"optional":false,"typeName":"record[]","type":"record[]","typeInstance":"department","fields":{"color":{"optional":false,"typeName":"BLUE|GREEN|RED","type":"enum","typeInstance":"color","members":{"BLUE":{"typeName":"BLUE","type":"BLUE","typeInstance":"BLUE","nullable":false,"optional":false},"GREEN":{"typeName":"GREEN","type":"GREEN","typeInstance":"GREEN","nullable":false,"optional":false},"RED":{"typeName":"RED","type":"RED","typeInstance":"RED","nullable":false,"optional":false}},"nullable":false},"departmentName":{"typeName":"string","type":"string","typeInstance":"departmentName","nullable":false,"optional":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}},"nullableArray":false,"nullable":false}}}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/code/code.test.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/code/code.test.ts
index 8f3d803424e..ea93b1bacf4 100644
--- a/workspaces/ballerina/ballerina-extension/test/ai/evals/code/code.test.ts
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/code/code.test.ts
@@ -172,7 +172,7 @@ async function setupTestEnvironment(): Promise<void> {
     }
 }
 
-suite.only("AI Code Generator Tests Suite", () => {
+suite.skip("AI Code Generator Tests Suite", () => {
 
     suiteSetup(async function (): Promise<void> {
         await setupTestEnvironment();
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/datamapper.test.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/datamapper.test.ts
new file mode 100644
index 00000000000..09adc7963f8
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/datamapper.test.ts
@@ -0,0 +1,210 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 path from "path";
+import * as vscode from "vscode";
+import * as dotenv from "dotenv";
+import * as fs from "fs";
+import * as assert from "assert";
+
+import { testCases } from "./test-cases";
+import { TestCase, DatamapperUsecaseResult, Summary } from "./types";
+import {
+    DEFAULT_TEST_CONFIG,
+    TIMING,
+    PATHS,
+    VSCODE_COMMANDS,
+    wait,
+    processSingleBatch,
+    handleBatchDelay
+} from "./utils";
+import {
+    ResultManager,
+    generateComprehensiveSummary,
+    generateIterationSummary,
+    generateComprehensiveReport,
+    logExecutionStart,
+    logExecutionCompletion
+} from "./result-management";
+
+/**
+ * Execute multiple test cases in parallel with comprehensive result management
+ */
+async function executeParallelTestsWithResults(
+    testCases: readonly TestCase[]
+): Promise<Summary> {
+    const resultManager = new ResultManager();
+    await resultManager.initializeResultsDirectory();
+
+    const startTime = Date.now();
+    const iterations = DEFAULT_TEST_CONFIG.iterations;
+    logExecutionStart(testCases.length, DEFAULT_TEST_CONFIG.maxConcurrency, resultManager.getResultsDirectory(), iterations);
+
+    const allUsecaseResults: DatamapperUsecaseResult[] = [];
+
+    // Iterate N times if configured
+    for (let iteration = 1; iteration <= iterations; iteration++) {
+        if (iterations > 1) {
+            console.log(`\n${'='.repeat(80)}`);
+            console.log(`🔄 STARTING ITERATION ${iteration}/${iterations}`);
+            console.log('='.repeat(80));
+        }
+
+        let batchCount = 0;
+
+        // Process tests in batches to limit concurrency
+        for (let i = 0; i < testCases.length; i += DEFAULT_TEST_CONFIG.maxConcurrency) {
+            batchCount++;
+            const batch = testCases.slice(i, i + DEFAULT_TEST_CONFIG.maxConcurrency);
+
+            // Execute batch and get results
+            const batchResults = await processSingleBatch(batch, batchCount, iterations > 1 ? iteration : undefined);
+
+            // Persist batch results with iteration info
+            await persistBatchResults(batchResults, resultManager, i, iterations > 1 ? iteration : undefined);
+
+            // Add to overall results
+            allUsecaseResults.push(...batchResults);
+
+            // Handle inter-batch delay and monitoring
+            await handleBatchDelay(i, testCases.length, DEFAULT_TEST_CONFIG.maxConcurrency);
+        }
+
+        if (iterations > 1) {
+            const iterationResults = allUsecaseResults.filter(r => r.iteration === iteration);
+            const iterationPassed = iterationResults.filter(r => r.passed).length;
+            console.log(`\n✅ Iteration ${iteration} completed: ${iterationPassed}/${testCases.length} passed (${Math.round(iterationPassed / testCases.length * 100)}%)`);
+
+            // Generate and persist iteration summary
+            const iterationSummary = generateIterationSummary(iterationResults, iteration);
+            await resultManager.persistIterationSummary(iterationSummary);
+        }
+    }
+
+    console.log(`\n✅ All ${iterations > 1 ? 'iterations and ' : ''}batches processed. Total test runs: ${allUsecaseResults.length}`);
+
+    // Generate and persist comprehensive summary
+    const summary = generateComprehensiveSummary(allUsecaseResults, iterations > 1 ? iterations : undefined);
+    await resultManager.persistSummary(summary);
+
+    // Log completion summary
+    logExecutionCompletion(startTime, allUsecaseResults, resultManager.getResultsDirectory());
+
+    return summary;
+}
+
+/**
+ * Helper function to persist batch results
+ */
+async function persistBatchResults(
+    usecaseResults: readonly DatamapperUsecaseResult[],
+    resultManager: ResultManager,
+    startIndex: number,
+    iteration?: number
+): Promise<void> {
+    for (let i = 0; i < usecaseResults.length; i++) {
+        const resultIndex = startIndex + i;
+        await resultManager.persistUsecaseResult(usecaseResults[i], resultIndex, iteration);
+    }
+}
+
+/**
+ * Sets up the test environment by loading environment variables,
+ * initializing workspace, and ensuring extension activation
+ */
+async function setupTestEnvironment(): Promise<void> {
+    // Load environment variables from .env file if it exists
+    const envPath = path.resolve(__dirname, PATHS.ENV_FILE_RELATIVE);
+    if (fs.existsSync(envPath)) {
+        dotenv.config({ path: envPath });
+        console.log("Loaded .env file for AI tests");
+    }
+
+    // Poll for AI test command availability
+    let attempts = 0;
+
+    while (attempts < TIMING.MAX_ACTIVATION_ATTEMPTS) {
+        const availableCommands = await vscode.commands.getCommands();
+        if (availableCommands.includes(VSCODE_COMMANDS.AI_GENERATE_MAPPING_CODE_CORE)) {
+            break;
+        }
+        await new Promise(resolve => setTimeout(resolve, TIMING.EXTENSION_ACTIVATION_RETRY_INTERVAL));
+        attempts++;
+    }
+
+    if (attempts >= TIMING.MAX_ACTIVATION_ATTEMPTS) {
+        throw new Error("AI test command never registered - extension failed to activate");
+    }
+
+    // Log API key availability for test visibility
+    const anthropicApiKey = process.env.ANTHROPIC_API_KEY;
+    if (anthropicApiKey && anthropicApiKey.trim() !== "") {
+        console.log("ANTHROPIC_API_KEY found - tests will attempt BYOK authentication");
+        console.log("Using environment variable directly for authentication");
+    } else {
+        console.log("No ANTHROPIC_API_KEY found - tests will expect authentication errors");
+    }
+}
+
+suite.only("AI Datamapper Tests Suite", () => {
+
+    suiteSetup(async function (): Promise<void> {
+        await setupTestEnvironment();
+    });
+
+    suiteTeardown(async function (): Promise<void> {
+        console.log("Test suite completed - using environment-based auth, no credentials to clean up");
+    });
+
+    suite("Datamapper Code Generation", () => {
+        // Check API key before running any tests in this suite
+        const anthropicApiKey = process.env.ANTHROPIC_API_KEY;
+        const hasAnthropicKey = anthropicApiKey && anthropicApiKey.trim() !== "";
+
+        if (!hasAnthropicKey) {
+            console.log(`\n⚠️  Skipping entire test suite: ANTHROPIC_API_KEY not set`);
+            return; // Skip the entire suite
+        }
+
+        test("Execute all datamapper test cases in parallel with comprehensive result management", async function (): Promise<void> {
+
+            console.log(`\n🔧 Test Configuration (Comprehensive Results):`);
+            console.log(`   API Key Available: Yes`);
+            console.log(`   Total Test Cases: ${testCases.length}`);
+            console.log(`   Iterations: ${DEFAULT_TEST_CONFIG.iterations}`);
+            console.log(`   Max Concurrency: ${DEFAULT_TEST_CONFIG.maxConcurrency}`);
+
+            await wait(TIMING.TEST_WAIT_TIME); // Wait for workspace to settle
+
+            // Execute all test cases with comprehensive result management
+            const summary = await executeParallelTestsWithResults(testCases);
+
+            // Generate comprehensive report
+            generateComprehensiveReport(summary);
+
+            // Assert overall test success
+            console.log(`\n✅ Comprehensive test execution completed:`);
+            console.log(`   Success Rate: ${Math.round(summary.accuracy)}%`);
+            if (summary.iterations && summary.iterations > 1) {
+                console.log(`   Total Iterations: ${summary.iterations}`);
+                console.log(`   Total Test Runs: ${summary.totalTests}`);
+            }
+
+            assert.ok(true);
+        });
+
+    });
+});
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/index.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/index.ts
new file mode 100644
index 00000000000..33f45a6d93d
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/index.ts
@@ -0,0 +1,19 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 './result-persistence';
+export * from './result-manager';
+export * from './report-generator';
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/report-generator.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/report-generator.ts
new file mode 100644
index 00000000000..801c340283c
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/report-generator.ts
@@ -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 { Summary, DatamapperUsecaseResult, IterationSummary, TestCaseAccuracy } from '../types';
+
+/**
+ * Generates comprehensive report from test summary
+ */
+export function generateComprehensiveReport(summary: Summary): void {
+    console.log('\n' + '='.repeat(80));
+    console.log('📊 DATAMAPPER TEST EXECUTION REPORT');
+    console.log('='.repeat(80));
+
+    console.log(`\n📈 OVERALL SUMMARY:`);
+    console.log(`   Total Test Cases: ${summary.totalTests}`);
+    console.log(`   Passed: ${summary.totalPassed} (${Math.round(summary.accuracy)}%)`);
+    console.log(`   Failed: ${summary.totalFailed} (${Math.round((summary.totalFailed / summary.totalTests) * 100)}%)`);
+    console.log(`   Test Case Accuracy: ${summary.accuracy}%`);
+
+    // Display field-level accuracy
+    if (summary.totalFields !== undefined && summary.fieldAccuracy !== undefined) {
+        console.log(`\n🎯 FIELD-LEVEL ACCURACY:`);
+        console.log(`   Total Fields/Assertions: ${summary.totalFields}`);
+        console.log(`   Fields Passed: ${summary.totalFieldsPassed}`);
+        console.log(`   Fields Failed: ${summary.totalFields - (summary.totalFieldsPassed || 0)}`);
+        console.log(`   Field Accuracy: ${summary.fieldAccuracy.toFixed(2)}%`);
+    }
+
+    // Display iteration-specific summaries if multiple iterations
+    if (summary.iterations && summary.iterations > 1 && summary.iterationResults) {
+        logIterationSummaries(summary.iterationResults);
+    }
+
+    // Display per-test-case accuracy if multiple iterations
+    if (summary.iterations && summary.iterations > 1 && summary.perTestCaseAccuracy) {
+        logPerTestCaseAccuracy(summary.perTestCaseAccuracy);
+    }
+
+    console.log('='.repeat(80));
+}
+
+/**
+ * Logs iteration summaries
+ */
+function logIterationSummaries(iterationResults: readonly IterationSummary[]): void {
+    console.log(`\n🔄 ITERATION SUMMARIES:`);
+    iterationResults.forEach((iteration) => {
+        console.log(`\n   Iteration ${iteration.iteration}:`);
+        console.log(`      Total Tests: ${iteration.totalTests}`);
+        console.log(`      Passed: ${iteration.totalPassed} (${Math.round(iteration.accuracy)}%)`);
+        console.log(`      Failed: ${iteration.totalFailed}`);
+        console.log(`      Average Duration: ${iteration.averageDuration.toFixed(2)}ms`);
+    });
+}
+
+/**
+ * Logs per-test-case accuracy
+ */
+function logPerTestCaseAccuracy(perTestCaseAccuracy: readonly TestCaseAccuracy[]): void {
+    console.log(`\n📊 PER-TEST-CASE ACCURACY:`);
+    perTestCaseAccuracy.forEach((testCase) => {
+        console.log(`   ${testCase.testName}:`);
+        console.log(`      Success: ${testCase.successCount}/${testCase.totalAttempts} (${Math.round(testCase.accuracy)}%)`);
+    });
+}
+
+/**
+ * Generates comprehensive summary from results
+ */
+export function generateComprehensiveSummary(
+    results: readonly DatamapperUsecaseResult[],
+    iterations?: number
+): Summary {
+    const totalPassed = results.filter(r => r.passed).length;
+    const totalFailed = results.length - totalPassed;
+    const accuracy = (totalPassed / results.length) * 100;
+    const totalDuration = results.reduce((sum, r) => sum + (r.duration || 0), 0);
+    const averageDuration = totalDuration / results.length;
+
+    // Calculate field-level accuracy
+    let totalFields = 0;
+    let totalFieldsPassed = 0;
+
+    results.forEach(result => {
+        if (result.fieldResults) {
+            totalFields += result.fieldResults.length;
+            totalFieldsPassed += result.fieldResults.filter(f => f.passed).length;
+        }
+    });
+
+    const fieldAccuracy = totalFields > 0 ? (totalFieldsPassed / totalFields) * 100 : 0;
+
+    // Build summary with or without iteration data
+    if (iterations && iterations > 1) {
+        return {
+            results,
+            totalTests: results.length,
+            totalPassed,
+            totalFailed,
+            accuracy,
+            totalDuration,
+            averageDuration,
+            timestamp: Date.now(),
+            iterations,
+            iterationResults: generateIterationResults(results, iterations),
+            perTestCaseAccuracy: generatePerTestCaseAccuracy(results),
+            totalFields,
+            totalFieldsPassed,
+            fieldAccuracy
+        };
+    }
+
+    return {
+        results,
+        totalTests: results.length,
+        totalPassed,
+        totalFailed,
+        accuracy,
+        totalDuration,
+        averageDuration,
+        timestamp: Date.now(),
+        totalFields,
+        totalFieldsPassed,
+        fieldAccuracy
+    };
+}
+
+/**
+ * Generates iteration-specific results
+ */
+function generateIterationResults(
+    results: readonly DatamapperUsecaseResult[],
+    iterations: number
+): IterationSummary[] {
+    const iterationSummaries: IterationSummary[] = [];
+
+    for (let i = 1; i <= iterations; i++) {
+        const iterationResults = results.filter(r => r.iteration === i);
+        const totalPassed = iterationResults.filter(r => r.passed).length;
+        const totalFailed = iterationResults.length - totalPassed;
+        const accuracy = (totalPassed / iterationResults.length) * 100;
+        const totalDuration = iterationResults.reduce((sum, r) => sum + (r.duration || 0), 0);
+        const averageDuration = totalDuration / iterationResults.length;
+
+        iterationSummaries.push({
+            iteration: i,
+            totalTests: iterationResults.length,
+            totalPassed,
+            totalFailed,
+            accuracy,
+            totalDuration,
+            averageDuration,
+            timestamp: Date.now(),
+            results: iterationResults
+        });
+    }
+
+    return iterationSummaries;
+}
+
+/**
+ * Generates per-test-case accuracy across iterations
+ */
+function generatePerTestCaseAccuracy(
+    results: readonly DatamapperUsecaseResult[]
+): TestCaseAccuracy[] {
+    const testCaseMap = new Map<string, { successCount: number; totalAttempts: number }>();
+
+    results.forEach((result) => {
+        const existing = testCaseMap.get(result.testName) || { successCount: 0, totalAttempts: 0 };
+        existing.totalAttempts++;
+        if (result.passed) {
+            existing.successCount++;
+        }
+        testCaseMap.set(result.testName, existing);
+    });
+
+    const perTestCaseAccuracy: TestCaseAccuracy[] = [];
+    let index = 0;
+
+    testCaseMap.forEach((stats, testName) => {
+        perTestCaseAccuracy.push({
+            testCaseIndex: index++,
+            testName,
+            successCount: stats.successCount,
+            totalAttempts: stats.totalAttempts,
+            accuracy: (stats.successCount / stats.totalAttempts) * 100
+        });
+    });
+
+    return perTestCaseAccuracy;
+}
+
+/**
+ * Generates iteration summary
+ */
+export function generateIterationSummary(
+    results: readonly DatamapperUsecaseResult[],
+    iteration: number
+): IterationSummary {
+    const totalPassed = results.filter(r => r.passed).length;
+    const totalFailed = results.length - totalPassed;
+    const accuracy = (totalPassed / results.length) * 100;
+    const totalDuration = results.reduce((sum, r) => sum + (r.duration || 0), 0);
+    const averageDuration = totalDuration / results.length;
+
+    return {
+        iteration,
+        totalTests: results.length,
+        totalPassed,
+        totalFailed,
+        accuracy,
+        totalDuration,
+        averageDuration,
+        timestamp: Date.now(),
+        results
+    };
+}
+
+/**
+ * Logs execution start
+ */
+export function logExecutionStart(
+    totalTests: number,
+    maxConcurrency: number,
+    resultsDir: string,
+    iterations: number
+): void {
+    console.log('\n' + '='.repeat(80));
+    console.log('🚀 DATAMAPPER TEST EXECUTION STARTED');
+    console.log('='.repeat(80));
+    console.log(`   Total Test Cases: ${totalTests}`);
+    console.log(`   Iterations: ${iterations}`);
+    console.log(`   Max Concurrency: ${maxConcurrency}`);
+    console.log(`   Results Directory: ${resultsDir}`);
+    console.log('='.repeat(80));
+}
+
+/**
+ * Logs execution completion
+ */
+export function logExecutionCompletion(
+    startTime: number,
+    results: readonly DatamapperUsecaseResult[],
+    resultsDir: string
+): void {
+    const duration = Date.now() - startTime;
+    const totalPassed = results.filter(r => r.passed).length;
+    const totalFailed = results.length - totalPassed;
+
+    // Calculate field-level accuracy
+    let totalFields = 0;
+    let totalFieldsPassed = 0;
+
+    results.forEach(result => {
+        if (result.fieldResults) {
+            totalFields += result.fieldResults.length;
+            totalFieldsPassed += result.fieldResults.filter(f => f.passed).length;
+        }
+    });
+
+    const fieldAccuracy = totalFields > 0 ? (totalFieldsPassed / totalFields) * 100 : 0;
+
+    console.log('\n' + '='.repeat(80));
+    console.log('✅ DATAMAPPER TEST EXECUTION COMPLETED');
+    console.log('='.repeat(80));
+    console.log(`   Total Duration: ${(duration / 1000).toFixed(2)}s`);
+    console.log(`   Passed: ${totalPassed}/${results.length}`);
+    console.log(`   Failed: ${totalFailed}/${results.length}`);
+    console.log(`   Test Case Accuracy: ${Math.round((totalPassed / results.length) * 100)}%`);
+    console.log(`   Field-Level Accuracy: ${fieldAccuracy.toFixed(2)}% (${totalFieldsPassed}/${totalFields} fields)`);
+    console.log(`   Results saved to: ${resultsDir}`);
+    console.log('='.repeat(80));
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/result-manager.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/result-manager.ts
new file mode 100644
index 00000000000..78756da9c3a
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/result-manager.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 * as fs from "fs";
+import * as path from "path";
+import { DatamapperUsecaseResult, Summary, IterationSummary } from '../types';
+import { persistUsecaseResult, persistSummary, persistIterationSummary } from './result-persistence';
+import { PATHS } from '../utils/constants';
+
+/**
+ * Comprehensive Result Persistence System for Datamapper
+ */
+export class ResultManager {
+    private readonly resultsDir: string;
+
+    constructor(baseDir: string = PATHS.DEFAULT_RESULTS_DIR) {
+        this.resultsDir = path.resolve(__dirname, baseDir);
+    }
+
+    /**
+     * Initializes the results directory by removing existing and creating new
+     */
+    async initializeResultsDirectory(): Promise<void> {
+        if (fs.existsSync(this.resultsDir)) {
+            await fs.promises.rm(this.resultsDir, { recursive: true, force: true });
+            console.log("Existing results directory removed");
+        }
+
+        await fs.promises.mkdir(this.resultsDir, { recursive: true });
+        console.log("Results directory initialized");
+    }
+
+    /**
+     * Persists a single use case result
+     */
+    async persistUsecaseResult(usecaseResult: DatamapperUsecaseResult, index: number, iteration?: number): Promise<void> {
+        await persistUsecaseResult(usecaseResult, index, this.resultsDir, iteration);
+    }
+
+    /**
+     * Persists the comprehensive summary
+     */
+    async persistSummary(summary: Summary): Promise<void> {
+        await persistSummary(summary, this.resultsDir);
+    }
+
+    /**
+     * Persists an iteration summary
+     */
+    async persistIterationSummary(iterationSummary: IterationSummary): Promise<void> {
+        await persistIterationSummary(iterationSummary, this.resultsDir);
+    }
+
+    /**
+     * Returns the results directory path
+     */
+    getResultsDirectory(): string {
+        return this.resultsDir;
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/result-persistence.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/result-persistence.ts
new file mode 100644
index 00000000000..0526ce66518
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/result-management/result-persistence.ts
@@ -0,0 +1,133 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 fs from "fs";
+import * as path from "path";
+import { DatamapperUsecaseResult, Summary, SummaryCompact, IterationSummary } from '../types';
+
+/**
+ * Persists a single datamapper use case result to the file system
+ */
+export async function persistUsecaseResult(
+    usecaseResult: DatamapperUsecaseResult,
+    index: number,
+    resultsDir: string,
+    iteration?: number
+): Promise<void> {
+    // Create directory structure: results/iteration_X/Y/ or results/Y/ if no iterations
+    let resultDir: string;
+    if (iteration !== undefined) {
+        const iterationDir = path.join(resultsDir, `iteration_${iteration}`);
+        await fs.promises.mkdir(iterationDir, { recursive: true });
+        resultDir = path.join(iterationDir, index.toString());
+    } else {
+        resultDir = path.join(resultsDir, index.toString());
+    }
+    await fs.promises.mkdir(resultDir, { recursive: true });
+
+    // Write result summary
+    await fs.promises.writeFile(
+        path.join(resultDir, "result.json"),
+        JSON.stringify({
+            testName: usecaseResult.testName,
+            passed: usecaseResult.passed,
+            duration: usecaseResult.duration,
+            iteration: usecaseResult.iteration,
+            failureReason: usecaseResult.failureReason,
+            fieldResults: usecaseResult.fieldResults
+        }, null, 2)
+    );
+
+    // Write bal test results
+    await fs.promises.writeFile(
+        path.join(resultDir, "bal-test-result.json"),
+        JSON.stringify(usecaseResult.balTestResult, null, 2)
+    );
+
+    // Write field-level results separately for easy analysis
+    if (usecaseResult.fieldResults && usecaseResult.fieldResults.length > 0) {
+        await fs.promises.writeFile(
+            path.join(resultDir, "field-results.json"),
+            JSON.stringify(usecaseResult.fieldResults, null, 2)
+        );
+    }
+
+    console.log(`Result persisted for index ${index}${iteration !== undefined ? ` (iteration ${iteration})` : ''}: ${usecaseResult.testName}`);
+}
+
+/**
+ * Persists the comprehensive summary
+ */
+export async function persistSummary(summary: Summary, resultsDir: string): Promise<void> {
+    const compactSummary: SummaryCompact = {
+        totalTests: summary.totalTests,
+        totalPassed: summary.totalPassed,
+        totalFailed: summary.totalFailed,
+        accuracy: summary.accuracy
+    };
+
+    await fs.promises.writeFile(
+        path.join(resultsDir, "summary.json"),
+        JSON.stringify(compactSummary, null, 2)
+    );
+
+    // Write detailed summary with per-test-case accuracy if available
+    if (summary.perTestCaseAccuracy) {
+        await fs.promises.writeFile(
+            path.join(resultsDir, "per-test-case-accuracy.json"),
+            JSON.stringify(summary.perTestCaseAccuracy, null, 2)
+        );
+    }
+
+    // Write field-level accuracy summary
+    if (summary.totalFields !== undefined && summary.totalFieldsPassed !== undefined) {
+        await fs.promises.writeFile(
+            path.join(resultsDir, "field-level-accuracy.json"),
+            JSON.stringify({
+                totalFields: summary.totalFields,
+                totalFieldsPassed: summary.totalFieldsPassed,
+                totalFieldsFailed: summary.totalFields - summary.totalFieldsPassed,
+                fieldAccuracy: summary.fieldAccuracy
+            }, null, 2)
+        );
+    }
+
+    console.log("Summary persisted to results directory");
+}
+
+/**
+ * Persists an iteration summary
+ */
+export async function persistIterationSummary(iterationSummary: IterationSummary, resultsDir: string): Promise<void> {
+    const iterationDir = path.join(resultsDir, `iteration_${iterationSummary.iteration}`);
+    await fs.promises.mkdir(iterationDir, { recursive: true });
+
+    await fs.promises.writeFile(
+        path.join(iterationDir, "iteration-summary.json"),
+        JSON.stringify({
+            iteration: iterationSummary.iteration,
+            totalTests: iterationSummary.totalTests,
+            totalPassed: iterationSummary.totalPassed,
+            totalFailed: iterationSummary.totalFailed,
+            accuracy: iterationSummary.accuracy,
+            totalDuration: iterationSummary.totalDuration,
+            averageDuration: iterationSummary.averageDuration,
+            timestamp: iterationSummary.timestamp
+        }, null, 2)
+    );
+
+    console.log(`Iteration ${iterationSummary.iteration} summary persisted`);
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/test-cases.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/test-cases.ts
new file mode 100644
index 00000000000..96cc3a8606f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/test-cases.ts
@@ -0,0 +1,42 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 path from "path";
+import { TestCase } from "./types";
+import { PATHS } from "./utils/constants";
+
+const PROJECT_ROOT = path.resolve(__dirname, PATHS.PROJECT_ROOT_RELATIVE);
+
+/**
+ * Test cases for datamapper code generation
+ */
+export const testCases: TestCase[] = [
+    {
+        name: "Person to Student mapping",
+        resourcePath: path.join(PROJECT_ROOT, "case1"),
+        expectedFunctionName: "transform",
+    },
+    {
+        name: "Employee to EmployeeInfo mapping",
+        resourcePath: path.join(PROJECT_ROOT, "case2"),
+        expectedFunctionName: "transform",
+    },
+    {
+        name: "Student to PersonalProfile mapping",
+        resourcePath: path.join(PROJECT_ROOT, "case3"),
+        expectedFunctionName: "transform",
+    }
+];
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/config-types.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/config-types.ts
new file mode 100644
index 00000000000..660ae90eae8
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/config-types.ts
@@ -0,0 +1,23 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+/**
+ * Test configuration
+ */
+export interface TestConfiguration {
+    readonly maxConcurrency: number;
+    readonly iterations: number;
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/index.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/index.ts
new file mode 100644
index 00000000000..70a5e24582e
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/index.ts
@@ -0,0 +1,19 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 './test-types';
+export * from './result-types';
+export * from './config-types';
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/result-types.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/result-types.ts
new file mode 100644
index 00000000000..30a153ec759
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/result-types.ts
@@ -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 { BalTestResult } from "./test-types";
+
+/**
+ * Field-level accuracy tracking
+ */
+export interface FieldAccuracy {
+    readonly fieldName: string;
+    readonly testName: string;
+    readonly passed: boolean;
+    readonly expected?: string;
+    readonly actual?: string;
+}
+
+/**
+ * Datamapper use case result
+ */
+export interface DatamapperUsecaseResult {
+    readonly testName: string;
+    readonly balTestResult: BalTestResult;
+    readonly passed: boolean;
+    readonly duration?: number;
+    readonly timestamp?: number;
+    readonly failureReason?: string;
+    readonly iteration?: number;
+    readonly fieldResults?: readonly FieldAccuracy[];
+}
+
+/**
+ * Per-test-case accuracy across iterations
+ */
+export interface TestCaseAccuracy {
+    readonly testCaseIndex: number;
+    readonly testName: string;
+    readonly successCount: number;
+    readonly totalAttempts: number;
+    readonly accuracy: number;
+}
+
+/**
+ * Iteration-specific summary
+ */
+export interface IterationSummary {
+    readonly iteration: number;
+    readonly totalTests: number;
+    readonly totalPassed: number;
+    readonly totalFailed: number;
+    readonly accuracy: number;
+    readonly totalDuration: number;
+    readonly averageDuration: number;
+    readonly timestamp: number;
+    readonly results: readonly DatamapperUsecaseResult[];
+}
+
+/**
+ * Comprehensive summary of all datamapper test results
+ */
+export interface Summary {
+    readonly results: readonly DatamapperUsecaseResult[];
+    readonly totalTests: number;
+    readonly totalPassed: number;
+    readonly totalFailed: number;
+    readonly accuracy: number;
+    readonly totalDuration: number;
+    readonly averageDuration: number;
+    readonly timestamp: number;
+    readonly iterations?: number;
+    readonly iterationResults?: readonly IterationSummary[];
+    readonly perTestCaseAccuracy?: readonly TestCaseAccuracy[];
+    readonly totalFields?: number;
+    readonly totalFieldsPassed?: number;
+    readonly fieldAccuracy?: number;
+}
+
+/**
+ * Compact summary for persistence
+ */
+export interface SummaryCompact {
+    readonly totalTests: number;
+    readonly totalPassed: number;
+    readonly totalFailed: number;
+    readonly accuracy: number;
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/test-types.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/test-types.ts
new file mode 100644
index 00000000000..6afc3e4966f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/types/test-types.ts
@@ -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.
+
+/**
+ * Test case definition for datamapper
+ */
+export interface TestCase {
+    readonly name: string;
+    readonly resourcePath: string;
+    readonly expectedFunctionName: string;
+}
+
+/**
+ * Test event result
+ */
+export interface TestEventResult {
+    started: boolean;
+    completed: boolean;
+    error?: string;
+    fileArray?: any[];
+    content?: string;
+}
+
+/**
+ * Individual test assertion result
+ */
+export interface TestAssertionResult {
+    readonly testName: string;
+    readonly fieldName: string;
+    readonly passed: boolean;
+    readonly expected?: string;
+    readonly actual?: string;
+}
+
+/**
+ * Ballerina test result
+ */
+export interface BalTestResult {
+    readonly passed: number;
+    readonly failed: number;
+    readonly skipped: number;
+    readonly total: number;
+    readonly output: string;
+    readonly success: boolean;
+    readonly assertions?: readonly TestAssertionResult[];
+}
+
+/**
+ * Datamapper test result
+ */
+export interface DatamapperTestResult {
+    readonly testCase: TestCase;
+    readonly generationResult: TestEventResult;
+    readonly balTestResult?: BalTestResult;
+    readonly passed: boolean;
+    readonly failureReason?: string;
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/batch-processing.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/batch-processing.ts
new file mode 100644
index 00000000000..4288bfb6120
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/batch-processing.ts
@@ -0,0 +1,146 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 { TestCase, DatamapperUsecaseResult } from "../types";
+import { executeDatamapperTest, updateMainBalFile, runBalTest } from "./test-execution";
+import { DEFAULT_TEST_CONFIG, TIMING, wait } from "./constants";
+
+/**
+ * Process a single test case and return the result
+ */
+export async function processSingleTestCase(
+    testCase: TestCase,
+    iteration?: number
+): Promise<DatamapperUsecaseResult> {
+    const startTime = Date.now();
+
+    console.log(`\n${'='.repeat(80)}`);
+    console.log(`📋 Processing: ${testCase.name}${iteration ? ` (Iteration ${iteration})` : ''}`);
+    console.log('='.repeat(80));
+
+    const generationResult = await executeDatamapperTest(testCase);
+
+    if (generationResult.error) {
+        return {
+            testName: testCase.name,
+            balTestResult: { passed: 0, failed: 0, skipped: 0, total: 0, output: "", success: false },
+            passed: false,
+            failureReason: `Generation failed: ${generationResult.error}`,
+            duration: Date.now() - startTime,
+            timestamp: Date.now(),
+            iteration
+        };
+    }
+
+    if (!generationResult.fileArray || generationResult.fileArray.length === 0) {
+        return {
+            testName: testCase.name,
+            balTestResult: { passed: 0, failed: 0, skipped: 0, total: 0, output: "", success: false },
+            passed: false,
+            failureReason: "No files generated",
+            duration: Date.now() - startTime,
+            timestamp: Date.now(),
+            iteration
+        };
+    }
+
+    // Write all generated files to disk
+    const fs = require("fs");
+    for (const file of generationResult.fileArray) {
+        console.log(`✅ Writing generated file: ${file.filePath}`);
+        await fs.promises.writeFile(file.filePath, file.content, "utf-8");
+    }
+
+    // Wait to ensure files are properly persisted
+    console.log(`⏳ Waiting ${TIMING.FILE_WRITE_DELAY}ms for files to be persisted...`);
+    await wait(TIMING.FILE_WRITE_DELAY);
+
+    // Additional wait before running bal test to ensure file system stability
+    console.log(`⏳ Waiting ${TIMING.PRE_BAL_TEST_DELAY}ms before running bal test...`);
+    await wait(TIMING.PRE_BAL_TEST_DELAY);
+
+    // Run bal test to validate generated code
+    const balTestResult = await runBalTest(testCase);
+
+    // Test passes if bal test succeeds
+    const passed = balTestResult.success;
+
+    let failureReason: string | undefined;
+    if (!passed) {
+        failureReason = `Bal test failed: ${balTestResult.failed} test(s) failed`;
+    }
+
+    // Extract field-level results from assertions
+    const fieldResults = balTestResult.assertions?.map(assertion => ({
+        fieldName: assertion.fieldName,
+        testName: assertion.testName,
+        passed: assertion.passed,
+        expected: assertion.expected,
+        actual: assertion.actual
+    })) || [];
+
+    console.log(`\n${passed ? '✅' : '❌'} Test ${passed ? 'PASSED' : 'FAILED'} for ${testCase.name}`);
+    if (failureReason) {
+        console.log(`   Reason: ${failureReason}`);
+    }
+
+    return {
+        testName: testCase.name,
+        balTestResult,
+        passed,
+        failureReason,
+        duration: Date.now() - startTime,
+        timestamp: Date.now(),
+        iteration,
+        fieldResults
+    };
+}
+
+/**
+ * Process a batch of test cases
+ */
+export async function processSingleBatch(
+    testCases: readonly TestCase[],
+    batchCount: number,
+    iteration?: number
+): Promise<DatamapperUsecaseResult[]> {
+    console.log(`\n${'='.repeat(80)}`);
+    console.log(`🔄 Processing Batch ${batchCount}${iteration ? ` (Iteration ${iteration})` : ''} - ${testCases.length} test case(s)`);
+    console.log('='.repeat(80));
+
+    const results = await Promise.all(
+        testCases.map(testCase => processSingleTestCase(testCase, iteration))
+    );
+
+    const passed = results.filter(r => r.passed).length;
+    console.log(`\n✅ Batch ${batchCount} completed: ${passed}/${testCases.length} passed`);
+
+    return results;
+}
+
+/**
+ * Handle inter-batch delay
+ */
+export async function handleBatchDelay(
+    currentIndex: number,
+    totalTests: number,
+    batchSize: number
+): Promise<void> {
+    if (currentIndex + batchSize < totalTests) {
+        console.log(`\n⏳ Waiting ${TIMING.INTER_BATCH_DELAY}ms before next batch...\n`);
+        await wait(TIMING.INTER_BATCH_DELAY);
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/constants.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/constants.ts
new file mode 100644
index 00000000000..1f4f39ffb69
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/constants.ts
@@ -0,0 +1,74 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 { TestConfiguration } from '../types';
+
+/**
+ * Default test configuration
+ */
+export const DEFAULT_TEST_CONFIG: TestConfiguration = {
+    maxConcurrency: 1,
+    iterations: 1
+} as const;
+
+/**
+ * Timing constants
+ */
+export const TIMING = {
+    WORKSPACE_SETUP_DELAY: 10000,
+    WORKSPACE_SETTLE_DELAY: 3000,
+    EXTENSION_ACTIVATION_RETRY_INTERVAL: 2000,
+    MAX_ACTIVATION_ATTEMPTS: 30,
+    INTER_BATCH_DELAY: 2000,
+    TEST_WAIT_TIME: 15000,
+    BAL_TEST_TIMEOUT: 60000,
+    FILE_WRITE_DELAY: 2000,
+    PRE_BAL_TEST_DELAY: 3000
+} as const;
+
+/**
+ * Path constants
+ */
+export const PATHS = {
+    PROJECT_ROOT_RELATIVE: "../../../../../test/data/ai_datamapper",
+    ENV_FILE_RELATIVE: "../../../../.env",
+    DEFAULT_RESULTS_DIR: "../../../../../../test/ai/evals/datamapper/results"
+} as const;
+
+/**
+ * File constants
+ */
+export const FILES = {
+    MAIN_BAL: "main.bal",
+    TYPES_BAL: "types.bal",
+    BALLERINA_TOML: "Ballerina.toml"
+} as const;
+
+/**
+ * VS Code commands
+ */
+export const VSCODE_COMMANDS = {
+    CLOSE_ALL_EDITORS: "workbench.action.closeAllEditors",
+    OPEN: "vscode.open",
+    AI_GENERATE_MAPPING_CODE_CORE: "ballerina.test.ai.generatemappingCodecore"
+} as const;
+
+/**
+ * Wait utility function
+ */
+export async function wait(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/index.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/index.ts
new file mode 100644
index 00000000000..d7d0eaa4292
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/index.ts
@@ -0,0 +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.
+
+export * from './constants';
+export * from './test-event-handler';
+export * from './test-execution';
+export * from './batch-processing';
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/test-event-handler.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/test-event-handler.ts
new file mode 100644
index 00000000000..b25754cc0aa
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/test-event-handler.ts
@@ -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 { TestEventResult } from "../types";
+
+/**
+ * Create a test event handler for capturing datamapper generation events
+ */
+export function createTestEventHandler(): { handler: any; getResult: () => TestEventResult } {
+    const result: TestEventResult = {
+        started: false,
+        completed: false,
+    };
+
+    const handler = (event: any) => {
+        console.log("Event received:", event.type);
+
+        if (event.type === "start") {
+            result.started = true;
+        } else if (event.type === "stop") {
+            result.completed = true;
+        } else if (event.type === "error") {
+            result.error = event.content;
+        } else if (event.type === "generated_sources") {
+            result.fileArray = event.fileArray;
+        } else if (event.type === "content_block") {
+            result.content = event.content;
+        }
+    };
+
+    return {
+        handler,
+        getResult: () => result,
+    };
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/test-execution.ts b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/test-execution.ts
new file mode 100644
index 00000000000..d3d61dff561
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/ai/evals/datamapper/utils/test-execution.ts
@@ -0,0 +1,228 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT 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 fs from "fs";
+import * as path from "path";
+import { exec } from "child_process";
+import { promisify } from "util";
+import { ProcessMappingParametersRequest } from "@wso2/ballerina-core";
+import { TestCase, TestEventResult, BalTestResult } from "../types";
+import { VSCODE_COMMANDS, TIMING, FILES } from "./constants";
+import { createTestEventHandler } from "./test-event-handler";
+
+const execAsync = promisify(exec);
+
+/**
+ * Setup workspace for test execution
+ */
+async function setupWorkspace(projectPath: string): Promise<void> {
+    console.log(`📂 Setting up workspace: ${projectPath}`);
+
+    // Close all editors first
+    await vscode.commands.executeCommand(VSCODE_COMMANDS.CLOSE_ALL_EDITORS);
+
+    // Add the Ballerina workspace to trigger workspaceContains activation event
+    const currentFolderCount = vscode.workspace.workspaceFolders?.length || 0;
+    vscode.workspace.updateWorkspaceFolders(0, currentFolderCount, {
+        uri: vscode.Uri.file(projectPath),
+    });
+
+    // Wait for workspace to be added
+    await new Promise(resolve => setTimeout(resolve, TIMING.WORKSPACE_SETUP_DELAY));
+
+    // Force extension activation by opening the types file first (to load type definitions)
+    try {
+        const typesBalFile = vscode.Uri.file(path.join(projectPath, FILES.TYPES_BAL));
+        console.log(`📄 Opening types file: ${typesBalFile.fsPath}`);
+        await vscode.commands.executeCommand(VSCODE_COMMANDS.OPEN, typesBalFile);
+        await new Promise(resolve => setTimeout(resolve, 2000));
+
+        // Then open main.bal file
+        const mainBalFile = vscode.Uri.file(path.join(projectPath, FILES.MAIN_BAL));
+        console.log(`📄 Opening main file: ${mainBalFile.fsPath}`);
+        await vscode.commands.executeCommand(VSCODE_COMMANDS.OPEN, mainBalFile);
+        await new Promise(resolve => setTimeout(resolve, 2000));
+    } catch (error) {
+        console.error("Error opening files:", error);
+    }
+
+    // Give extra time for language server to index all files
+    console.log(`⏳ Waiting for language server to index files...`);
+    await new Promise(resolve => setTimeout(resolve, TIMING.WORKSPACE_SETTLE_DELAY));
+}
+
+/**
+ * Execute datamapper test for a single test case
+ */
+export async function executeDatamapperTest(testCase: TestCase): Promise<TestEventResult> {
+    console.log(`\n🚀 Starting datamapper test: ${testCase.name}`);
+
+    const { handler, getResult } = createTestEventHandler();
+
+    // Setup workspace properly
+    await setupWorkspace(testCase.resourcePath);
+
+    // Wait for workspace to stabilize and language server to index
+    await new Promise(resolve => setTimeout(resolve, TIMING.WORKSPACE_SETTLE_DELAY));
+
+    const params: ProcessMappingParametersRequest = {
+        parameters: {
+            inputRecord: [],
+            outputRecord: "",
+            functionName: testCase.expectedFunctionName,
+        }
+    };
+
+    try {
+        await vscode.commands.executeCommand(
+            VSCODE_COMMANDS.AI_GENERATE_MAPPING_CODE_CORE,
+            params,
+            handler
+        );
+
+        const result = getResult();
+        return result;
+    } catch (error) {
+        console.error(`❌ Test case ${testCase.name} failed with error:`, error);
+        const result = getResult();
+        return result;
+    }
+}
+
+/**
+ * Update main.bal file with generated code
+ */
+export async function updateMainBalFile(testCase: TestCase, generatedCode: string): Promise<void> {
+    const mainBalPath = `${testCase.resourcePath}/main.bal`;
+    await fs.promises.writeFile(mainBalPath, generatedCode, "utf-8");
+    console.log(`✅ Updated ${mainBalPath} with generated mapping code`);
+}
+
+/**
+ * Parse individual test assertions from bal test output
+ */
+function parseTestAssertions(output: string): any[] {
+    const assertions: any[] = [];
+
+    const assertionPattern = /\[fail\]\s+(\w+):\s+Assertion Failed!\s+expected:\s+'([^']*)'\s+actual\s+:\s+'([^']*)'/g;
+    let match;
+
+    while ((match = assertionPattern.exec(output)) !== null) {
+        const testName = match[1];
+        const expected = match[2];
+        const actual = match[3];
+
+        assertions.push({
+            testName,
+            fieldName: testName, // Use test name as field identifier
+            passed: false,
+            expected,
+            actual
+        });
+    }
+
+    // For passing tests, extract from test summary
+    // Pattern: test name in output followed by passing status
+    const passedTestsPattern = /(\d+)\s+passing/i;
+    const passMatch = output.match(passedTestsPattern);
+
+    if (passMatch) {
+        // Try to extract passing test names
+        const testNamePattern = /@test:Config\s*\{\}\s*function\s+(\w+)/g;
+        const testContent = output.match(/Running\s+Tests/i);
+
+        if (testContent) {
+            // Find test function names in the surrounding context
+            const testFuncMatches = [...output.matchAll(/\[pass\]\s+(\w+)/g)];
+            testFuncMatches.forEach(m => {
+                assertions.push({
+                    testName: m[1],
+                    fieldName: m[1],
+                    passed: true
+                });
+            });
+        }
+    }
+
+    return assertions;
+}
+
+/**
+ * Run Ballerina test for a test case
+ */
+export async function runBalTest(testCase: TestCase): Promise<BalTestResult> {
+    console.log(`\n🧪 Running bal test in ${testCase.resourcePath}`);
+
+    try {
+        const { stdout, stderr } = await execAsync("bal test", {
+            cwd: testCase.resourcePath,
+            timeout: TIMING.BAL_TEST_TIMEOUT
+        });
+
+        const output = stdout + stderr;
+        console.log("Bal test output:", output);
+
+        // Parse bal test output to extract metrics
+        const passingMatch = output.match(/(\d+)\s+passing/i);
+        const failingMatch = output.match(/(\d+)\s+failing/i);
+        const skippedMatch = output.match(/(\d+)\s+skipped/i);
+
+        const passed = passingMatch ? parseInt(passingMatch[1], 10) : 0;
+        const failed = failingMatch ? parseInt(failingMatch[1], 10) : 0;
+        const skipped = skippedMatch ? parseInt(skippedMatch[1], 10) : 0;
+        const total = passed + failed + skipped;
+
+        // Parse individual assertions
+        const assertions = parseTestAssertions(output);
+
+        return {
+            passed,
+            failed,
+            skipped,
+            total,
+            output,
+            success: failed === 0 && passed > 0,
+            assertions
+        };
+    } catch (error: any) {
+        const output = error.stdout + error.stderr;
+        console.error("Bal test failed:", output);
+
+        // Try to parse metrics even from error output
+        const passingMatch = output.match(/(\d+)\s+passing/i);
+        const failingMatch = output.match(/(\d+)\s+failing/i);
+        const skippedMatch = output.match(/(\d+)\s+skipped/i);
+
+        const passed = passingMatch ? parseInt(passingMatch[1], 10) : 0;
+        const failed = failingMatch ? parseInt(failingMatch[1], 10) : 0;
+        const skipped = skippedMatch ? parseInt(skippedMatch[1], 10) : 0;
+        const total = passed + failed + skipped;
+
+        // Parse individual assertions
+        const assertions = parseTestAssertions(output);
+
+        return {
+            passed,
+            failed,
+            skipped,
+            total,
+            output,
+            success: false,
+            assertions
+        };
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/ai/post_proccess/post.test.ts b/workspaces/ballerina/ballerina-extension/test/ai/post_proccess/post.test.ts
index 56b87f7ac5f..9809a7105b9 100644
--- a/workspaces/ballerina/ballerina-extension/test/ai/post_proccess/post.test.ts
+++ b/workspaces/ballerina/ballerina-extension/test/ai/post_proccess/post.test.ts
@@ -21,7 +21,7 @@ import { attemptRepairProject } from '../../../src/rpc-managers/ai-panel/repair-
 import * as assert from 'assert';
 import * as fs from 'fs';
 import * as os from 'os';
-import { StateMachine } from '../../../src/stateMachine';
+import { StateMachine } from '../../stateMachine';
 import { Uri } from 'vscode';
 import { Diagnostics } from '@wso2/ballerina-core';
 
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/Ballerina.toml b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/Ballerina.toml
new file mode 100644
index 00000000000..27fe75ff3e7
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/Ballerina.toml
@@ -0,0 +1,8 @@
+[package]
+org = "test"
+name = "datamapper_case1"
+version = "0.1.0"
+distribution = "2201.8.0"
+
+[build-options]
+observabilityIncluded = true
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/Dependencies.toml b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/Dependencies.toml
new file mode 100644
index 00000000000..0dacfb2451f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/Dependencies.toml
@@ -0,0 +1,95 @@
+# AUTO-GENERATED FILE. DO NOT MODIFY.
+
+# This file is auto-generated by Ballerina for managing dependency versions.
+# It should not be modified by hand.
+
+[ballerina]
+dependencies-toml-version = "2"
+distribution-version = "2201.12.7"
+
+[[package]]
+org = "ballerina"
+name = "jballerina.java"
+version = "0.0.0"
+
+[[package]]
+org = "ballerina"
+name = "lang.__internal"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "lang.object"}
+]
+
+[[package]]
+org = "ballerina"
+name = "lang.array"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "lang.__internal"}
+]
+
+[[package]]
+org = "ballerina"
+name = "lang.error"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"}
+]
+
+[[package]]
+org = "ballerina"
+name = "lang.object"
+version = "0.0.0"
+scope = "testOnly"
+
+[[package]]
+org = "ballerina"
+name = "observe"
+version = "1.5.0"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"}
+]
+
+[[package]]
+org = "ballerina"
+name = "test"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "lang.array"},
+	{org = "ballerina", name = "lang.error"}
+]
+modules = [
+	{org = "ballerina", packageName = "test", moduleName = "test"}
+]
+
+[[package]]
+org = "ballerinai"
+name = "observe"
+version = "0.0.0"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "observe"}
+]
+modules = [
+	{org = "ballerinai", packageName = "observe", moduleName = "observe"}
+]
+
+[[package]]
+org = "test"
+name = "datamapper_case1"
+version = "0.1.0"
+dependencies = [
+	{org = "ballerina", name = "test"},
+	{org = "ballerinai", name = "observe"}
+]
+modules = [
+	{org = "test", packageName = "datamapper_case1", moduleName = "datamapper_case1"}
+]
+
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/main.bal b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/main.bal
new file mode 100644
index 00000000000..8d796461b3c
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/main.bal
@@ -0,0 +1,3 @@
+function transform(Person person) returns Student => {
+
+};
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/target/cache/tests_cache/native-config/mocked-func-class-map.json b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/target/cache/tests_cache/native-config/mocked-func-class-map.json
new file mode 100644
index 00000000000..1f3ac6a178e
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/target/cache/tests_cache/native-config/mocked-func-class-map.json
@@ -0,0 +1 @@
+{"datamapper_case1/tests.test":[]}
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/target/cache/tests_cache/test_suit.json b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/target/cache/tests_cache/test_suit.json
new file mode 100644
index 00000000000..3e628fbf0e0
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/target/cache/tests_cache/test_suit.json
@@ -0,0 +1 @@
+{"datamapper_case1":{"orgName":"test","version":"0.1.0","packageName":"datamapper_case1","packageId":"datamapper_case1","testPackageId":"datamapper_case1$test","executeFilePath":"tests.test_execute-generated_1","sourceRootPath":"/Users/vinoth/Downloads/vscode-extension/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1","testUtilityFunctions":{"transform":"test.datamapper_case1.0.main","testB":"test.datamapper_case1$test.0.tests.test","executeTestRegistrar0":"test.datamapper_case1$test.0.tests.test_execute-generated_1","__execute__":"test.datamapper_case1$test.0.tests.test_execute-generated_1","testA":"test.datamapper_case1$test.0.tests.test"},"beforeSuiteFunctionNames":[],"afterSuiteFunctionNames":{},"beforeEachFunctionNames":[],"afterEachFunctionNames":[],"tests":[],"groups":{},"testExecutionDependencies":["/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/test/0.0.0/any/platform/java21/testerina-core-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerina/test/0.0.0/java21/ballerina-test-0.0.0.jar","/Users/vinoth/Downloads/vscode-extension/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/target/cache/test/datamapper_case1/0.1.0/java21/test-datamapper_case1-0.1.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/asm-commons-9.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerina/observe/1.5.0/java21/ballerina-observe.mockextension-1.5.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerina/observe/1.5.0/java21/ballerina-observe-1.5.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/observe-native-1.5.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerinai/observe/0.0.0/java21/ballerinai-observe-0.0.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/org.jacoco.report-0.8.12.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerinai/observe/0.0.0/java21/platform/java21/observe-internal-native-1.5.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/ballerina-rt-2201.12.7.jar","/Users/vinoth/Downloads/vscode-extension/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/target/cache/test/datamapper_case1/0.1.0/java21/test-datamapper_case1-0.1.0-testable.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/asm-tree-9.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/testerina-runtime-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/ballerina-lang-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/org.jacoco.core-0.8.12.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/asm-9.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/java-diff-utils-4.5.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/testerina-core-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/test/0.0.0/any/platform/java21/java-diff-utils-4.5.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-sdk-trace-1.0.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-semconv-1.0.0-alpha.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-sdk-common-1.0.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-sdk-testing-1.0.0.jar"],"isReportRequired":false,"isSingleDDTExecution":false,"mockFunctionNamesMap":{}}}
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/target/rerun_test.json b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/target/rerun_test.json
new file mode 100644
index 00000000000..9fc2d5d0306
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/target/rerun_test.json
@@ -0,0 +1 @@
+{"datamapper_case1":{"testNames":[],"testModuleNames":{},"subTestNames":{}}}
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/tests/test.bal b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/tests/test.bal
new file mode 100644
index 00000000000..f8ec86a2f46
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/tests/test.bal
@@ -0,0 +1,19 @@
+import ballerina/test;
+
+Person person = {
+    firstName: "John",
+    lastName: "Doe",
+    age: 19
+};
+
+Student student = transform(person);
+
+@test:Config {}
+function testA() {
+    test:assertEquals(student.fullName, "John Doe");
+}
+
+@test:Config {}
+function testB() {
+    test:assertEquals(student.age, "19");
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/types.bal b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/types.bal
new file mode 100644
index 00000000000..b1b86f9ea1b
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case1/types.bal
@@ -0,0 +1,10 @@
+type Person record {
+    string firstName;
+    string lastName;
+    int age;
+};
+
+type Student record {
+    string fullName;
+    string age;
+};
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/Ballerina.toml b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/Ballerina.toml
new file mode 100644
index 00000000000..1c719308a15
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/Ballerina.toml
@@ -0,0 +1,8 @@
+[package]
+org = "test"
+name = "datamapper_case2"
+version = "0.1.0"
+distribution = "2201.8.0"
+
+[build-options]
+observabilityIncluded = true
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/Dependencies.toml b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/Dependencies.toml
new file mode 100644
index 00000000000..c578525142e
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/Dependencies.toml
@@ -0,0 +1,95 @@
+# AUTO-GENERATED FILE. DO NOT MODIFY.
+
+# This file is auto-generated by Ballerina for managing dependency versions.
+# It should not be modified by hand.
+
+[ballerina]
+dependencies-toml-version = "2"
+distribution-version = "2201.12.7"
+
+[[package]]
+org = "ballerina"
+name = "jballerina.java"
+version = "0.0.0"
+
+[[package]]
+org = "ballerina"
+name = "lang.__internal"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "lang.object"}
+]
+
+[[package]]
+org = "ballerina"
+name = "lang.array"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "lang.__internal"}
+]
+
+[[package]]
+org = "ballerina"
+name = "lang.error"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"}
+]
+
+[[package]]
+org = "ballerina"
+name = "lang.object"
+version = "0.0.0"
+scope = "testOnly"
+
+[[package]]
+org = "ballerina"
+name = "observe"
+version = "1.5.0"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"}
+]
+
+[[package]]
+org = "ballerina"
+name = "test"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "lang.array"},
+	{org = "ballerina", name = "lang.error"}
+]
+modules = [
+	{org = "ballerina", packageName = "test", moduleName = "test"}
+]
+
+[[package]]
+org = "ballerinai"
+name = "observe"
+version = "0.0.0"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "observe"}
+]
+modules = [
+	{org = "ballerinai", packageName = "observe", moduleName = "observe"}
+]
+
+[[package]]
+org = "test"
+name = "datamapper_case2"
+version = "0.1.0"
+dependencies = [
+	{org = "ballerina", name = "test"},
+	{org = "ballerinai", name = "observe"}
+]
+modules = [
+	{org = "test", packageName = "datamapper_case2", moduleName = "datamapper_case2"}
+]
+
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/main.bal b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/main.bal
new file mode 100644
index 00000000000..08daedb605d
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/main.bal
@@ -0,0 +1,3 @@
+function transform(Employee employee) returns EmployeeInfo => {
+
+};
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/target/cache/tests_cache/native-config/mocked-func-class-map.json b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/target/cache/tests_cache/native-config/mocked-func-class-map.json
new file mode 100644
index 00000000000..dd7bb5ebc97
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/target/cache/tests_cache/native-config/mocked-func-class-map.json
@@ -0,0 +1 @@
+{"datamapper_case2/tests.test":[]}
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/target/cache/tests_cache/test_suit.json b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/target/cache/tests_cache/test_suit.json
new file mode 100644
index 00000000000..974c74825e9
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/target/cache/tests_cache/test_suit.json
@@ -0,0 +1 @@
+{"datamapper_case2":{"orgName":"test","version":"0.1.0","packageName":"datamapper_case2","packageId":"datamapper_case2","testPackageId":"datamapper_case2$test","executeFilePath":"tests.test_execute-generated_1","sourceRootPath":"/Users/vinoth/Downloads/vscode-extension/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2","testUtilityFunctions":{"transform":"test.datamapper_case2.0.main","testB":"test.datamapper_case2$test.0.tests.test","testC":"test.datamapper_case2$test.0.tests.test","executeTestRegistrar0":"test.datamapper_case2$test.0.tests.test_execute-generated_1","testA":"test.datamapper_case2$test.0.tests.test","__execute__":"test.datamapper_case2$test.0.tests.test_execute-generated_1"},"beforeSuiteFunctionNames":[],"afterSuiteFunctionNames":{},"beforeEachFunctionNames":[],"afterEachFunctionNames":[],"tests":[],"groups":{},"testExecutionDependencies":["/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/test/0.0.0/any/platform/java21/testerina-core-2201.12.7.jar","/Users/vinoth/Downloads/vscode-extension/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/target/cache/test/datamapper_case2/0.1.0/java21/test-datamapper_case2-0.1.0-testable.jar","/Users/vinoth/Downloads/vscode-extension/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/target/cache/test/datamapper_case2/0.1.0/java21/test-datamapper_case2-0.1.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/asm-commons-9.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/org.jacoco.core-0.8.12.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerina/observe/1.5.0/java21/ballerina-observe.mockextension-1.5.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerina/observe/1.5.0/java21/ballerina-observe-1.5.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/observe-native-1.5.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerinai/observe/0.0.0/java21/ballerinai-observe-0.0.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerinai/observe/0.0.0/java21/platform/java21/observe-internal-native-1.5.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/org.jacoco.report-0.8.12.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/ballerina-rt-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerina/test/0.0.0/java21/ballerina-test-0.0.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/ballerina-lang-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/asm-9.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/testerina-runtime-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/java-diff-utils-4.5.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/asm-tree-9.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/testerina-core-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/test/0.0.0/any/platform/java21/java-diff-utils-4.5.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-sdk-trace-1.0.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-semconv-1.0.0-alpha.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-sdk-common-1.0.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-sdk-testing-1.0.0.jar"],"isReportRequired":false,"isSingleDDTExecution":false,"mockFunctionNamesMap":{}}}
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/target/rerun_test.json b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/target/rerun_test.json
new file mode 100644
index 00000000000..d2c6926508e
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/target/rerun_test.json
@@ -0,0 +1 @@
+{"datamapper_case2":{"testNames":[],"testModuleNames":{},"subTestNames":{}}}
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/tests/test.bal b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/tests/test.bal
new file mode 100644
index 00000000000..7dcb714fd8c
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/tests/test.bal
@@ -0,0 +1,24 @@
+import ballerina/test;
+
+Employee employee = {
+    id: 1001,
+    name: "Jane Smith",
+    salary: 75000.50
+};
+
+EmployeeInfo info = transform(employee);
+
+@test:Config {}
+function testA() {
+    test:assertEquals(info.employeeId, "1001");
+}
+
+@test:Config {}
+function testB() {
+    test:assertEquals(info.displayName, "Jane Smith");
+}
+
+@test:Config {}
+function testC() {
+    test:assertEquals(info.formattedSalary, "$75000.50");
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/types.bal b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/types.bal
new file mode 100644
index 00000000000..694290c043f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case2/types.bal
@@ -0,0 +1,11 @@
+type Employee record {
+    int id;
+    string name;
+    decimal salary;
+};
+
+type EmployeeInfo record {
+    string employeeId;
+    string displayName;
+    string formattedSalary;
+};
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/Ballerina.toml b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/Ballerina.toml
new file mode 100644
index 00000000000..7eaa06dbea0
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/Ballerina.toml
@@ -0,0 +1,8 @@
+[package]
+org = "test"
+name = "datamapper_case3"
+version = "0.1.0"
+distribution = "2201.8.0"
+
+[build-options]
+observabilityIncluded = true
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/Dependencies.toml b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/Dependencies.toml
new file mode 100644
index 00000000000..f91e02d6bcc
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/Dependencies.toml
@@ -0,0 +1,95 @@
+# AUTO-GENERATED FILE. DO NOT MODIFY.
+
+# This file is auto-generated by Ballerina for managing dependency versions.
+# It should not be modified by hand.
+
+[ballerina]
+dependencies-toml-version = "2"
+distribution-version = "2201.12.7"
+
+[[package]]
+org = "ballerina"
+name = "jballerina.java"
+version = "0.0.0"
+
+[[package]]
+org = "ballerina"
+name = "lang.__internal"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "lang.object"}
+]
+
+[[package]]
+org = "ballerina"
+name = "lang.array"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "lang.__internal"}
+]
+
+[[package]]
+org = "ballerina"
+name = "lang.error"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"}
+]
+
+[[package]]
+org = "ballerina"
+name = "lang.object"
+version = "0.0.0"
+scope = "testOnly"
+
+[[package]]
+org = "ballerina"
+name = "observe"
+version = "1.5.0"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"}
+]
+
+[[package]]
+org = "ballerina"
+name = "test"
+version = "0.0.0"
+scope = "testOnly"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "lang.array"},
+	{org = "ballerina", name = "lang.error"}
+]
+modules = [
+	{org = "ballerina", packageName = "test", moduleName = "test"}
+]
+
+[[package]]
+org = "ballerinai"
+name = "observe"
+version = "0.0.0"
+dependencies = [
+	{org = "ballerina", name = "jballerina.java"},
+	{org = "ballerina", name = "observe"}
+]
+modules = [
+	{org = "ballerinai", packageName = "observe", moduleName = "observe"}
+]
+
+[[package]]
+org = "test"
+name = "datamapper_case3"
+version = "0.1.0"
+dependencies = [
+	{org = "ballerina", name = "test"},
+	{org = "ballerinai", name = "observe"}
+]
+modules = [
+	{org = "test", packageName = "datamapper_case3", moduleName = "datamapper_case3"}
+]
+
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/main.bal b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/main.bal
new file mode 100644
index 00000000000..7d8b552b729
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/main.bal
@@ -0,0 +1,3 @@
+function transform(Student student) returns PersonalProfile => {
+
+};
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/target/cache/tests_cache/native-config/mocked-func-class-map.json b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/target/cache/tests_cache/native-config/mocked-func-class-map.json
new file mode 100644
index 00000000000..8a2215e5146
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/target/cache/tests_cache/native-config/mocked-func-class-map.json
@@ -0,0 +1 @@
+{"datamapper_case3/tests.test":[]}
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/target/cache/tests_cache/test_suit.json b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/target/cache/tests_cache/test_suit.json
new file mode 100644
index 00000000000..76aef560dc9
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/target/cache/tests_cache/test_suit.json
@@ -0,0 +1 @@
+{"datamapper_case3":{"orgName":"test","version":"0.1.0","packageName":"datamapper_case3","packageId":"datamapper_case3","testPackageId":"datamapper_case3$test","executeFilePath":"tests.test_execute-generated_1","sourceRootPath":"/Users/vinoth/Downloads/vscode-extension/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3","testUtilityFunctions":{"testBioGender":"test.datamapper_case3$test.0.tests.test","transform":"test.datamapper_case3.0.main","testAddress":"test.datamapper_case3$test.0.tests.test","testBioAge":"test.datamapper_case3$test.0.tests.test","executeTestRegistrar0":"test.datamapper_case3$test.0.tests.test_execute-generated_1","testNumberOfRoomates":"test.datamapper_case3$test.0.tests.test","testSemesterGPA":"test.datamapper_case3$test.0.tests.test","testId":"test.datamapper_case3$test.0.tests.test","testBioName":"test.datamapper_case3$test.0.tests.test","__execute__":"test.datamapper_case3$test.0.tests.test_execute-generated_1","testAcademicMajor":"test.datamapper_case3$test.0.tests.test"},"beforeSuiteFunctionNames":[],"afterSuiteFunctionNames":{},"beforeEachFunctionNames":[],"afterEachFunctionNames":[],"tests":[],"groups":{},"testExecutionDependencies":["/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/test/0.0.0/any/platform/java21/testerina-core-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerina/observe/1.5.0/java21/ballerina-observe-1.5.0.jar","/Users/vinoth/Downloads/vscode-extension/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/target/cache/test/datamapper_case3/0.1.0/java21/test-datamapper_case3-0.1.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerina/observe/1.5.0/java21/ballerina-observe.mockextension-1.5.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/observe-native-1.5.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerinai/observe/0.0.0/java21/ballerinai-observe-0.0.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/asm-commons-9.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerinai/observe/0.0.0/java21/platform/java21/observe-internal-native-1.5.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/ballerina-rt-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/ballerina-lang-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/org.jacoco.core-0.8.12.jar","/Users/vinoth/Downloads/vscode-extension/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/target/cache/test/datamapper_case3/0.1.0/java21/test-datamapper_case3-0.1.0-testable.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/cache/ballerina/test/0.0.0/java21/ballerina-test-0.0.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/testerina-runtime-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/org.jacoco.report-0.8.12.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/asm-tree-9.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/testerina-core-2201.12.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/asm-9.7.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/bre/lib/java-diff-utils-4.5.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/test/0.0.0/any/platform/java21/java-diff-utils-4.5.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-sdk-trace-1.0.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-semconv-1.0.0-alpha.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-sdk-common-1.0.0.jar","/Users/vinoth/.ballerina/ballerina-home/distributions/ballerina-2201.12.7/repo/bala/ballerina/observe/1.5.0/java21/platform/java21/opentelemetry-sdk-testing-1.0.0.jar"],"isReportRequired":false,"isSingleDDTExecution":false,"mockFunctionNamesMap":{}}}
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/target/rerun_test.json b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/target/rerun_test.json
new file mode 100644
index 00000000000..749aa8542e1
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/target/rerun_test.json
@@ -0,0 +1 @@
+{"datamapper_case3":{"testNames":[],"testModuleNames":{},"subTestNames":{}}}
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/tests/test.bal b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/tests/test.bal
new file mode 100644
index 00000000000..3e1befb5999
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/tests/test.bal
@@ -0,0 +1,65 @@
+import ballerina/test;
+
+Student student = {
+    id: 1001,
+    studentName: "Alice Johnson",
+    age: 20,
+    gender: "Female",
+    semesterGPA: ["3.8", "3.9", "4.0"],
+    academicMajor: "Computer Science",
+    roommates: [
+        {
+            id: 1002,
+            studentName: "Bob Smith",
+            age: 21,
+            gender: "Male",
+            semesterGPA: [],
+            academicMajor: "Mathematics",
+            roommates: [],
+            address: ""
+        }
+    ],
+    address: "123 College Ave"
+};
+
+PersonalProfile profile = transform(student);
+
+@test:Config {}
+function testId() {
+    test:assertEquals(profile.id, 1001);
+}
+
+@test:Config {}
+function testBioName() {
+    test:assertEquals(profile.bio.name, "Alice Johnson");
+}
+
+@test:Config {}
+function testBioGender() {
+    test:assertEquals(profile.bio.gender, "Female");
+}
+
+@test:Config {}
+function testBioAge() {
+    test:assertEquals(profile.bio.age, 20);
+}
+
+@test:Config {}
+function testAcademicMajor() {
+    test:assertEquals(profile.academicRecord.major, "Computer Science");
+}
+
+@test:Config {}
+function testSemesterGPA() {
+    test:assertEquals(profile.academicRecord.semesterGPA, ["3.8", "3.9", "4.0"]);
+}
+
+@test:Config {}
+function testNumberOfRoomates() {
+    test:assertEquals(profile.accommodationDetails.numberOfRoomates, 1);
+}
+
+@test:Config {}
+function testAddress() {
+    test:assertEquals(profile.accommodationDetails.address, "123 College Ave");
+}
diff --git a/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/types.bal b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/types.bal
new file mode 100644
index 00000000000..3ed7727b0e8
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/test/data/ai_datamapper/case3/types.bal
@@ -0,0 +1,33 @@
+type Student record {
+    int id;
+    string studentName;
+    int age;
+    string gender;
+    string[] semesterGPA;
+    string academicMajor;
+    Student[] roommates;
+    string address;
+};
+
+type PersonalProfile record {
+    int id;
+    Bio bio;
+    AcademicRecord academicRecord;
+    Accommodation accommodationDetails;
+};
+
+type Bio record {
+    string name;
+    string gender;
+    int age;
+};
+
+type AcademicRecord record {
+    string major;
+    string[] semesterGPA;
+};
+
+type Accommodation record {
+    int numberOfRoomates;
+    string address;
+};
diff --git a/workspaces/ballerina/ballerina-extension/test/runAiTest.ts b/workspaces/ballerina/ballerina-extension/test/runAiTest.ts
index d5a50d3443b..3e89b66a624 100644
--- a/workspaces/ballerina/ballerina-extension/test/runAiTest.ts
+++ b/workspaces/ballerina/ballerina-extension/test/runAiTest.ts
@@ -36,7 +36,7 @@ async function main() {
 
         if (missingVars.length > 0) {
             console.warn(
-                '\n⚠️  Environment Variable Configuration Warning:\n' +
+                '\n  Environment Variable Configuration Warning:\n' +
                 `Missing required environment variables: ${missingVars.join(', ')}\n` +
                 `Please provide values in either .env file or runtime environment.\n`
             );
@@ -67,7 +67,8 @@ async function main() {
             extensionDevelopmentPath,
             extensionTestsPath,
             launchArgs: [
-                '--grep=^AI Code Generator Tests Suite'
+                '--grep=^AI Code Generator Tests Suite',
+                '--grep=^AI Datamapper Tests Suite'
             ],
             extensionTestsEnv: {
                 ...envKeys,
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/agent-chat/rpc-client.ts b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/agent-chat/rpc-client.ts
index 8d5200a6ad8..4f3a08c0288 100644
--- a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/agent-chat/rpc-client.ts
+++ b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/agent-chat/rpc-client.ts
@@ -14,14 +14,19 @@
  * 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 {
+    abortChatRequest,
     AgentChatAPI,
     ChatReqMessage,
     ChatRespMessage,
-    abortChatRequest,
-    getChatMessage
+    getChatMessage,
+    getTracingStatus,
+    showTraceView,
+    TraceInput,
+    TraceStatus
 } from "@wso2/ballerina-core";
 import { HOST_EXTENSION } from "vscode-messenger-common";
 import { Messenger } from "vscode-messenger-webview";
@@ -40,4 +45,12 @@ export class AgentChatRpcClient implements AgentChatAPI {
     abortChatRequest(): void {
         return this._messenger.sendNotification(abortChatRequest, HOST_EXTENSION);
     }
+
+    getTracingStatus(): Promise<TraceStatus> {
+        return this._messenger.sendRequest(getTracingStatus, HOST_EXTENSION);
+    }
+
+    showTraceView(params: TraceInput): Promise<void> {
+        return this._messenger.sendRequest(showTraceView, HOST_EXTENSION, params);
+    }
 }
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 b70e51a425a..733e57fbd04 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
@@ -24,30 +24,21 @@ import {
     AIPanelPrompt,
     AddFilesToProjectRequest,
     AddToProjectRequest,
-    AllDataMapperSourceRequest,
-    CodeSegment,
-    CreateTempFileRequest,
-    DataMapperModelResponse,
-    DatamapperModelContext,
     DeleteFromProjectRequest,
     DeveloperDocument,
     DocGenerationRequest,
-    ExtendedDataMapperMetadata,
     FetchDataRequest,
     FetchDataResponse,
     GenerateCodeRequest,
-    GenerateMappingsResponse,
     GenerateOpenAPIRequest,
-    GenerateTypesFromRecordRequest,
-    GenerateTypesFromRecordResponse,
     GetFromFileRequest,
-    GetModuleDirParams,
     LLMDiagnostics,
     LoginMethod,
     MetadataWithAttachments,
-    NotifyAIMappingsRequest,
     PostProcessRequest,
     PostProcessResponse,
+    ProcessContextTypeCreationRequest,
+    ProcessMappingParametersRequest,
     ProjectDiagnostics,
     ProjectSource,
     RelevantLibrariesAndFunctionsRequest,
@@ -63,29 +54,25 @@ import {
     abortAIGeneration,
     abortTestGeneration,
     addChatSummary,
-    addCodeSegmentToWorkspace,
     addFilesToProject,
-    addInlineCodeSegmentToWorkspace,
     addToProject,
     applyDoOnFailBlocks,
     checkSyntaxError,
     clearInitialPrompt,
-    createTempFileAndGenerateMetadata,
     createTestDirecoryIfNotExists,
     deleteFromProject,
     fetchData,
     generateCode,
-    generateDataMapperModel,
+    generateContextTypes,
     generateFunctionTests,
     generateHealthcareCode,
-    generateMappings,
+    generateInlineMappingCode,
+    generateMappingCode,
     generateOpenAPI,
     generateTestPlan,
     getAIMachineSnapshot,
     getAccessToken,
-    getActiveFile,
     getBackendUrl,
-    getContentFromFile,
     getDefaultPrompt,
     getDriftDiagnosticContents,
     getFileExists,
@@ -94,7 +81,6 @@ import {
     getGeneratedDocumentation,
     getGeneratedTests,
     getLoginMethod,
-    getModuleDirectory,
     getProjectUuid,
     getRefreshedAccessToken,
     getRelevantLibrariesAndFunctions,
@@ -104,21 +90,19 @@ import {
     getServiceSourceForName,
     getShadowDiagnostics,
     getTestDiagnostics,
-    getTypesFromRecord,
     handleChatSummaryError,
     isCopilotSignedIn,
     isNaturalProgrammingDirectoryExists,
     isRequirementsSpecificationFileExist,
+    isUserAuthenticated,
     markAlertShown,
-    notifyAIMappings,
-    openAIMappingChatWindow,
+    openChatWindowWithCommand,
     postProcess,
     promptGithubAuthorize,
     promptWSO2AILogout,
     readDeveloperMdFile,
     repairGeneratedCode,
     showSignInAlert,
-    stopAIMappings,
     submitFeedback,
     updateDevelopmentDocument,
     updateRequirementSpecification
@@ -181,14 +165,6 @@ export class AiPanelRpcClient implements AIPanelAPI {
         return this._messenger.sendNotification(deleteFromProject, HOST_EXTENSION, params);
     }
 
-    notifyAIMappings(params: NotifyAIMappingsRequest): Promise<boolean> {
-        return this._messenger.sendRequest(notifyAIMappings, HOST_EXTENSION, params);
-    }
-
-    stopAIMappings(): Promise<GenerateMappingsResponse> {
-        return this._messenger.sendRequest(stopAIMappings, HOST_EXTENSION);
-    }
-
     getShadowDiagnostics(params: ProjectSource): Promise<ProjectDiagnostics> {
         return this._messenger.sendRequest(getShadowDiagnostics, HOST_EXTENSION, params);
     }
@@ -201,32 +177,20 @@ export class AiPanelRpcClient implements AIPanelAPI {
         return this._messenger.sendNotification(clearInitialPrompt, 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);
+    openChatWindowWithCommand(): void {
+        return this._messenger.sendNotification(openChatWindowWithCommand, HOST_EXTENSION);
     }
 
-    generateMappings(params: MetadataWithAttachments): Promise<AllDataMapperSourceRequest> {
-        return this._messenger.sendRequest(generateMappings, HOST_EXTENSION, params);
+    generateContextTypes(params: ProcessContextTypeCreationRequest): void {
+        return this._messenger.sendNotification(generateContextTypes, HOST_EXTENSION, params);
     }
 
-    addCodeSegmentToWorkspace(params: CodeSegment): Promise<boolean> {
-        return this._messenger.sendRequest(addCodeSegmentToWorkspace, HOST_EXTENSION, params);
+    generateMappingCode(params: ProcessMappingParametersRequest): void {
+        return this._messenger.sendNotification(generateMappingCode, HOST_EXTENSION, params);
     }
 
-    addInlineCodeSegmentToWorkspace(params: CodeSegment): void {
-        return this._messenger.sendNotification(addInlineCodeSegmentToWorkspace, HOST_EXTENSION, params);
+    generateInlineMappingCode(params: MetadataWithAttachments): void {
+        return this._messenger.sendNotification(generateInlineMappingCode, HOST_EXTENSION, params);
     }
 
     getGeneratedTests(params: TestGenerationRequest): Promise<TestGenerationResponse> {
@@ -265,10 +229,6 @@ export class AiPanelRpcClient implements AIPanelAPI {
         return this._messenger.sendRequest(postProcess, HOST_EXTENSION, params);
     }
 
-    getActiveFile(): Promise<string> {
-        return this._messenger.sendRequest(getActiveFile, HOST_EXTENSION);
-    }
-
     promptGithubAuthorize(): Promise<boolean> {
         return this._messenger.sendRequest(promptGithubAuthorize, HOST_EXTENSION);
     }
@@ -329,14 +289,6 @@ export class AiPanelRpcClient implements AIPanelAPI {
         return this._messenger.sendNotification(createTestDirecoryIfNotExists, HOST_EXTENSION, params);
     }
 
-    getModuleDirectory(params: GetModuleDirParams): Promise<string> {
-        return this._messenger.sendRequest(getModuleDirectory, HOST_EXTENSION, params);
-    }
-
-    getContentFromFile(params: GetFromFileRequest): Promise<string> {
-        return this._messenger.sendRequest(getContentFromFile, HOST_EXTENSION, params);
-    }
-
     submitFeedback(params: SubmitFeedbackRequest): Promise<boolean> {
         return this._messenger.sendRequest(submitFeedback, HOST_EXTENSION, params);
     }
@@ -380,4 +332,8 @@ export class AiPanelRpcClient implements AIPanelAPI {
     addFilesToProject(params: AddFilesToProjectRequest): Promise<boolean> {
         return this._messenger.sendRequest(addFilesToProject, HOST_EXTENSION, params);
     }
+
+    isUserAuthenticated(): Promise<boolean> {
+        return this._messenger.sendRequest(isUserAuthenticated, HOST_EXTENSION);
+    }
 }
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 98ae747249f..47455b7a01c 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
@@ -38,6 +38,8 @@ import {
     BIModuleNodesResponse,
     BINodeTemplateRequest,
     BINodeTemplateResponse,
+    BISearchNodesRequest,
+    BISearchNodesResponse,
     BISearchRequest,
     BISearchResponse,
     BISourceCodeRequest,
@@ -45,9 +47,12 @@ import {
     BuildMode,
     ClassFieldModifierRequest,
     ComponentRequest,
+    ConfigVariableRequest,
     ConfigVariableResponse,
     CreateComponentResponse,
     CurrentBreakpointsResponse,
+    DeleteConfigVariableRequestV2,
+    DeleteConfigVariableResponseV2,
     DeleteTypeRequest,
     DeleteTypeResponse,
     DeploymentRequest,
@@ -83,7 +88,6 @@ import {
     OpenAPIGeneratedModulesResponse,
     OpenConfigTomlRequest,
     ProjectComponentsResponse,
-    ProjectImports,
     ProjectRequest,
     ProjectStructureResponse,
     ReadmeContentRequest,
@@ -109,6 +113,8 @@ import {
     UpdateTypesRequest,
     UpdateTypesResponse,
     UpdatedArtifactsResponse,
+    VerifyTypeDeleteRequest,
+    VerifyTypeDeleteResponse,
     VisibleTypesRequest,
     VisibleTypesResponse,
     WorkspacesResponse,
@@ -129,7 +135,6 @@ import {
     formDidOpen,
     generateOpenApiClient,
     getAiSuggestions,
-    getAllImports,
     getAvailableChunkers,
     getAvailableDataLoaders,
     getAvailableEmbeddingProviders,
@@ -177,6 +182,7 @@ import {
     renameIdentifier,
     runProject,
     search,
+    searchNodes,
     updateClassField,
     updateConfigVariables,
     updateConfigVariablesV2,
@@ -185,12 +191,12 @@ import {
     updateServiceClass,
     updateType,
     updateTypes,
-    DeleteConfigVariableRequestV2,
-    DeleteConfigVariableResponseV2,
-    VerifyTypeDeleteRequest,
-    VerifyTypeDeleteResponse,
     verifyTypeDelete,
-    ConfigVariableRequest,
+    FormDiagnosticsRequest,
+    FormDiagnosticsResponse,
+    getFormDiagnostics,
+    getExpressionTokens,
+    ExpressionTokensRequest,
 } from "@wso2/ballerina-core";
 import { HOST_EXTENSION } from "vscode-messenger-common";
 import { Messenger } from "vscode-messenger-webview";
@@ -370,12 +376,12 @@ export class BiDiagramRpcClient implements BIDiagramAPI {
         return this._messenger.sendRequest(getBreakpointInfo, HOST_EXTENSION);
     }
 
-    getExpressionDiagnostics(params: ExpressionDiagnosticsRequest): Promise<ExpressionDiagnosticsResponse> {
-        return this._messenger.sendRequest(getExpressionDiagnostics, HOST_EXTENSION, params);
+    getFormDiagnostics(params: FormDiagnosticsRequest): Promise<FormDiagnosticsResponse> {
+        return this._messenger.sendRequest(getFormDiagnostics, HOST_EXTENSION, params);
     }
 
-    getAllImports(): Promise<ProjectImports> {
-        return this._messenger.sendRequest(getAllImports, HOST_EXTENSION);
+    getExpressionDiagnostics(params: ExpressionDiagnosticsRequest): Promise<ExpressionDiagnosticsResponse> {
+        return this._messenger.sendRequest(getExpressionDiagnostics, HOST_EXTENSION, params);
     }
 
     formDidOpen(params: FormDidOpenParams): Promise<void> {
@@ -470,6 +476,10 @@ export class BiDiagramRpcClient implements BIDiagramAPI {
         return this._messenger.sendRequest(search, HOST_EXTENSION, params);
     }
 
+    searchNodes(params: BISearchNodesRequest): Promise<BISearchNodesResponse> {
+        return this._messenger.sendRequest(searchNodes, HOST_EXTENSION, params);
+    }
+
     getRecordNames(): Promise<RecordsInWorkspaceMentions> {
         return this._messenger.sendRequest(getRecordNames, HOST_EXTENSION);
     }
@@ -497,4 +507,8 @@ export class BiDiagramRpcClient implements BIDiagramAPI {
     verifyTypeDelete(params: VerifyTypeDeleteRequest): Promise<VerifyTypeDeleteResponse> {
         return this._messenger.sendRequest(verifyTypeDelete, HOST_EXTENSION, params);
     }
+
+    getExpressionTokens(params: ExpressionTokensRequest): Promise<number[]> {
+        return this._messenger.sendRequest(getExpressionTokens, 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 cbbcbeafe3a..54b1724faeb 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
@@ -46,9 +46,11 @@ import {
     runBackgroundTerminalCommand,
     selectFileOrDirPath,
     getCurrentProjectTomlValues,
-    TomlValues,
+    PackageTomlValues,
     selectFileOrFolderPath,
-    showErrorMessage
+    showErrorMessage,
+    WorkspaceTypeResponse,
+    getWorkspaceType
 } from "@wso2/ballerina-core";
 import { HOST_EXTENSION } from "vscode-messenger-common";
 import { Messenger } from "vscode-messenger-webview";
@@ -112,7 +114,11 @@ export class CommonRpcClient implements CommonRPCAPI {
         return this._messenger.sendNotification(showErrorMessage, HOST_EXTENSION, params);
     }
     
-    getCurrentProjectTomlValues(): Promise<TomlValues> {
+    getCurrentProjectTomlValues(): Promise<PackageTomlValues> {
         return this._messenger.sendRequest(getCurrentProjectTomlValues, HOST_EXTENSION);
     }
+
+    getWorkspaceType(): Promise<WorkspaceTypeResponse> {
+        return this._messenger.sendRequest(getWorkspaceType, HOST_EXTENSION);
+    }
 }
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/data-mapper/rpc-client.ts b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/data-mapper/rpc-client.ts
index 20a4f0978b3..a4c8b9bf67f 100644
--- a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/data-mapper/rpc-client.ts
+++ b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/data-mapper/rpc-client.ts
@@ -54,7 +54,6 @@ import {
     deleteClause,
     deleteMapping,
     deleteSubMapping,
-    getAllDataMapperSource,
     getDataMapperCodedata,
     getDataMapperModel,
     getDataMapperSource,
@@ -137,10 +136,6 @@ export class DataMapperRpcClient implements DataMapperAPI {
         return this._messenger.sendRequest(getSubMappingCodedata, HOST_EXTENSION, params);
     }
 
-    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);
     }
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/service-designer/rpc-client.ts b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/service-designer/rpc-client.ts
index 0f4d33beae2..b4aca46cadd 100644
--- a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/service-designer/rpc-client.ts
+++ b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/service-designer/rpc-client.ts
@@ -34,22 +34,27 @@ import {
     ListenerSourceCodeRequest,
     ListenersRequest,
     ListenersResponse,
+    PayloadContext,
     ResourceReturnTypesRequest,
-    ResourceReturnTypesResponse,
     ServiceDesignerAPI,
+    ServiceInitSourceRequest,
     ServiceModelFromCodeRequest,
     ServiceModelFromCodeResponse,
+    ServiceModelInitResponse,
     ServiceModelRequest,
     ServiceModelResponse,
     ServiceSourceCodeRequest,
     TriggerModelsRequest,
     TriggerModelsResponse,
     UpdatedArtifactsResponse,
+    VisibleTypesResponse,
     addFunctionSourceCode,
     addListenerSourceCode,
     addResourceSourceCode,
     addServiceSourceCode,
+    createServiceAndListener,
     exportOASFile,
+    generateExamplePayloadJson,
     getFunctionFromSource,
     getFunctionModel,
     getHttpResourceModel,
@@ -57,6 +62,7 @@ import {
     getListenerModelFromCode,
     getListeners,
     getResourceReturnTypes,
+    getServiceInitModel,
     getServiceModel,
     getServiceModelFromCode,
     getTriggerModels,
@@ -130,7 +136,7 @@ export class ServiceDesignerRpcClient implements ServiceDesignerAPI {
         return this._messenger.sendRequest(getHttpResourceModel, HOST_EXTENSION, params);
     }
 
-    getResourceReturnTypes(params: ResourceReturnTypesRequest): Promise<ResourceReturnTypesResponse> {
+    getResourceReturnTypes(params: ResourceReturnTypesRequest): Promise<VisibleTypesResponse> {
         return this._messenger.sendRequest(getResourceReturnTypes, HOST_EXTENSION, params);
     }
 
@@ -145,4 +151,16 @@ export class ServiceDesignerRpcClient implements ServiceDesignerAPI {
     updateResourceSourceCode(params: FunctionSourceCodeRequest): Promise<UpdatedArtifactsResponse> {
         return this._messenger.sendRequest(updateResourceSourceCode, HOST_EXTENSION, params);
     }
+
+    getServiceInitModel(params: ServiceModelRequest): Promise<ServiceModelInitResponse> {
+        return this._messenger.sendRequest(getServiceInitModel, HOST_EXTENSION, params);
+    }
+
+    createServiceAndListener(params: ServiceInitSourceRequest): Promise<UpdatedArtifactsResponse> {
+        return this._messenger.sendRequest(createServiceAndListener, HOST_EXTENSION, params);
+    }
+
+    generateExamplePayloadJson(params: PayloadContext): Promise<object> {
+        return this._messenger.sendRequest(generateExamplePayloadJson, HOST_EXTENSION, params);
+    }
 }
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/visualizer/rpc-client.ts b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/visualizer/rpc-client.ts
index b8841f763cf..bbdde39ea7e 100644
--- a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/visualizer/rpc-client.ts
+++ b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/visualizer/rpc-client.ts
@@ -22,8 +22,9 @@ import {
     ColorThemeKind,
     HistoryEntry,
     OpenViewRequest,
+    ProjectStructureArtifactResponse,
     UndoRedoStateResponse,
-    UpdateUndoRedoMangerRequest,
+    UpdatedArtifactsResponse,
     VisualizerAPI,
     addToHistory,
     addToUndoStack,
@@ -36,7 +37,8 @@ import {
     openView,
     redo,
     undo,
-    undoRedoState
+    undoRedoState,
+    updateCurrentArtifactLocation
 } from "@wso2/ballerina-core";
 import { HOST_EXTENSION } from "vscode-messenger-common";
 import { Messenger } from "vscode-messenger-webview";
@@ -95,4 +97,8 @@ export class VisualizerRpcClient implements VisualizerAPI {
     getThemeKind(): Promise<ColorThemeKind> {
         return this._messenger.sendRequest(getThemeKind, HOST_EXTENSION);
     }
+
+    updateCurrentArtifactLocation(params: UpdatedArtifactsResponse): Promise<ProjectStructureArtifactResponse> {
+        return this._messenger.sendRequest(updateCurrentArtifactLocation, HOST_EXTENSION, params);
+    }
 }
diff --git a/workspaces/ballerina/ballerina-side-panel/package.json b/workspaces/ballerina/ballerina-side-panel/package.json
index a13f9a36fe3..8fcaa618b85 100644
--- a/workspaces/ballerina/ballerina-side-panel/package.json
+++ b/workspaces/ballerina/ballerina-side-panel/package.json
@@ -27,7 +27,8 @@
         "@wso2/ballerina-rpc-client": "workspace:*",
         "lodash": "~4.17.21",
         "react-hook-form": "7.56.4",
-        "react-markdown": "~10.1.0"
+        "react-markdown": "~10.1.0",
+        "@github/markdown-toolbar-element": "^2.2.3"
     },
     "devDependencies": {
         "@storybook/react": "^6.5.16",
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 64b594411c5..1b09a2344a8 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/CardList/index.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/CardList/index.tsx
@@ -39,6 +39,7 @@ namespace S {
     export const PanelBody = styled(SidePanelBody)`
         height: calc(100vh - 100px);
         padding-top: 0;
+        overflow-y: auto;
     `;
 
     export const StyledSearchInput = styled(SearchBox)`
@@ -301,7 +302,7 @@ function CardList(props: CardListProps) {
         return (
             <S.CardsContainer>
                 {nodes.map((node, index) => (
-                    <S.Card key={node.id + index} enabled={node.enabled} onClick={() => handleCardClick(node)}>
+                    <S.Card key={node.id + index} enabled={node.enabled} onClick={() => handleCardClick(node)} title={node.description}>
                         <S.CardIcon>{node.icon ? node.icon : <LogIcon />}</S.CardIcon>
                         <S.CardContent>
                             <S.CardTitle>{node.label}</S.CardTitle>
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/Form/FormDescription.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/Form/FormDescription.tsx
index 4b3bd1d54e7..0345c192164 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/Form/FormDescription.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/Form/FormDescription.tsx
@@ -28,7 +28,6 @@ namespace S {
     export const FormInfoDescription = styled.div`
         color: ${ThemeColors.ON_SURFACE_VARIANT};
         font-size: 13px;
-        margin-bottom: 12px;
         padding: 8px 12px;
         border-radius: 4px;
         opacity: 0.9;
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 55eac7e51ac..0ac8b2f5895 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/Form/index.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/Form/index.tsx
@@ -319,6 +319,8 @@ export interface FormProps {
     projectPath?: string;
     selectedNode?: NodeKind;
     onSubmit?: (data: FormValues, dirtyFields?: any) => void;
+    onBlur?: (data: FormValues, dirtyFields?: any) => void;
+    onFormValidation?: (data: FormValues, dirtyFields?: any) => Promise<boolean>;
     isSaving?: boolean;
     openRecordEditor?: (isOpen: boolean, fields: FormValues, editingField?: FormField, newType?: string | NodeProperties) => void;
     openView?: (filePath: string, position: NodePosition) => void;
@@ -340,19 +342,23 @@ export interface FormProps {
     concertRequired?: boolean;
     concertMessage?: string;
     formImports?: FormImports;
+    popupManager?: {
+        addPopup: (modal: React.ReactNode, id: string, title: string, height?: number, width?: number) => void;
+        removeLastPopup: () => void;
+        closePopup: (id: string) => void;
+    }
     preserveOrder?: boolean;
     handleSelectedTypeChange?: (type: string | CompletionItem) => void;
     scopeFieldAddon?: React.ReactNode;
-    newServerUrl?: string;
     onChange?: (fieldKey: string, value: any, allValues: FormValues) => void;
-    mcpTools?: { name: string; description?: string }[];
-    onToolsChange?: (selectedTools: string[]) => void;
     injectedComponents?: {
         component: React.ReactNode;
         index: number;
     }[];
     hideSaveButton?: boolean; // Option to hide the save button
     onValidityChange?: (isValid: boolean) => void; // Callback for form validity status
+    changeOptionalFieldTitle?: string; // Option to change the title of optional fields
+    openFormTypeEditor?: (open: boolean, newType?: string, editingField?: FormField) => void;
 }
 
 export const Form = forwardRef((props: FormProps) => {
@@ -364,6 +370,8 @@ export const Form = forwardRef((props: FormProps) => {
         cancelText,
         actionButton,
         onSubmit,
+        onBlur,
+        onFormValidation,
         isSaving,
         onCancelForm,
         oneTimeForm,
@@ -377,6 +385,7 @@ export const Form = forwardRef((props: FormProps) => {
         visualizableField,
         recordTypeFields,
         nestedForm,
+        popupManager,
         compact = false,
         isInferredReturnType,
         concertRequired = true,
@@ -385,12 +394,11 @@ export const Form = forwardRef((props: FormProps) => {
         preserveOrder = false,
         handleSelectedTypeChange,
         scopeFieldAddon,
-        newServerUrl,
-        mcpTools,
-        onToolsChange,
         injectedComponents,
         hideSaveButton = false,
         onValidityChange,
+        changeOptionalFieldTitle = undefined,
+        openFormTypeEditor
     } = props;
 
     const {
@@ -413,11 +421,13 @@ export const Form = forwardRef((props: FormProps) => {
     const [isMarkdownExpanded, setIsMarkdownExpanded] = useState(false);
     const [isIdentifierEditing, setIsIdentifierEditing] = useState(false);
     const [isSubComponentEnabled, setIsSubComponentEnabled] = useState(false);
+    const [optionalFieldsTitle, setOptionalFieldsTitle] = useState("Advanced Configurations");
 
     const markdownRef = useRef<HTMLDivElement>(null);
 
     const [isUserConcert, setIsUserConcert] = useState(false);
     const [savingButton, setSavingButton] = useState<string | null>(null);
+    const [isValidatingForm, setIsValidatingForm] = useState(false);
 
 
     useEffect(() => {
@@ -481,6 +491,10 @@ export const Form = forwardRef((props: FormProps) => {
             });
             setDiagnosticsInfo(diagnosticsMap);
             reset(defaultValues);
+
+            if (changeOptionalFieldTitle) {
+                setOptionalFieldsTitle("Advanced Configurations");
+            }
         }
     }, [formFields, reset]);
 
@@ -489,6 +503,18 @@ export const Form = forwardRef((props: FormProps) => {
         onSubmit && onSubmit(data, dirtyFields);
     };
 
+    const handleFormValidation = async (): Promise<boolean> => {
+        setIsValidatingForm(true);
+        const data = getValues();
+        const validationResult = await onFormValidation(data, dirtyFields);
+        setIsValidatingForm(false);
+        return validationResult;
+    }
+
+    const handleOnBlur = async () => {
+        onBlur?.(getValues(), dirtyFields);
+    };
+
     // Expose a method to trigger the save
     // useImperativeHandle(ref, () => ({
     //     triggerSave: () => handleSubmit(handleOnSave)(), // Call handleSubmit with the save function
@@ -587,48 +613,59 @@ export const Form = forwardRef((props: FormProps) => {
         },
         targetLineRange,
         fileName,
+        popupManager: popupManager,
+        nodeInfo: {
+            kind: selectedNode,
+        }
     };
 
     // Find the first editable field
     const firstEditableFieldIndex = formFields.findIndex((field) => field.editable !== false);
 
     const isValid = useMemo(() => {
-        if (!diagnosticsInfo) {
-            return true;
-        }
+        let hasDiagnostics: boolean = false;
 
-        let hasDiagnostics: boolean = true;
-        for (const diagnosticsInfoItem of diagnosticsInfo) {
-            const key = diagnosticsInfoItem.key;
-            if (!key) {
-                continue;
-            }
+        // Check diagnostics from diagnosticsInfo state
+        if (diagnosticsInfo) {
+            for (const diagnosticsInfoItem of diagnosticsInfo) {
+                const key = diagnosticsInfoItem.key;
+                if (!key) {
+                    continue;
+                }
 
-            let diagnostics: Diagnostic[] = diagnosticsInfoItem.diagnostics || [];
-            if (diagnostics.length === 0) {
-                clearErrors(key);
-                continue;
-            } else {
-                // Filter the BCE2066 diagnostics
-                diagnostics = diagnostics.filter(
-                    (d) => d.code !== "BCE2066" || d.message !== "incompatible types: expected 'any', found 'error'"
-                );
-
-                const diagnosticsMessage = diagnostics.map((d) => d.message).join("\n");
-                setError(key, { type: "validate", message: diagnosticsMessage });
-
-                // If the severity is not ERROR, don't invalidate
-                const hasErrorDiagnostics = diagnostics.some((d) => d.severity === 1);
-                if (hasErrorDiagnostics) {
-                    hasDiagnostics = false;
-                } else {
+                let diagnostics: Diagnostic[] = diagnosticsInfoItem.diagnostics || [];
+                if (diagnostics.length === 0) {
+                    clearErrors(key);
                     continue;
+                } else {
+                    // Filter the BCE2066 diagnostics
+                    diagnostics = diagnostics.filter(
+                        (d) => d.code !== "BCE2066" || d.message !== "incompatible types: expected 'any', found 'error'"
+                    );
+
+                    const diagnosticsMessage = diagnostics.map((d) => d.message).join("\n");
+                    setError(key, { type: "validate", message: diagnosticsMessage });
+
+                    // If the severity is not ERROR, don't invalidate
+                    const hasErrorDiagnostics = diagnostics.some((d) => d.severity === 1);
+                    if (hasErrorDiagnostics) {
+                        hasDiagnostics = true;
+                    } else {
+                        continue;
+                    }
                 }
             }
         }
 
-        return hasDiagnostics;
-    }, [diagnosticsInfo]);
+        // Check diagnostics directly from formFields
+        for (const field of formFields) {
+            if (field.diagnostics && field.diagnostics.length > 0) {
+                hasDiagnostics = true;
+            }
+        }
+
+        return !hasDiagnostics;
+    }, [diagnosticsInfo, formFields]);
 
     // Call onValidityChange when form validity changes
     useEffect(() => {
@@ -648,8 +685,8 @@ export const Form = forwardRef((props: FormProps) => {
     };
 
     const disableSaveButton =
-        !isValid || isValidating || props.disableSaveButton || (concertMessage && concertRequired && !isUserConcert) ||
-        isIdentifierEditing || isSubComponentEnabled || Object.keys(errors).length > 0;
+        isValidating || props.disableSaveButton || (concertMessage && concertRequired && !isUserConcert) ||
+        isIdentifierEditing || isSubComponentEnabled || isValidatingForm || Object.keys(errors).length > 0;
 
     const handleShowMoreClick = () => {
         setIsMarkdownExpanded(!isMarkdownExpanded);
@@ -684,9 +721,12 @@ export const Form = forwardRef((props: FormProps) => {
         })();
     };
 
-    const handleOnSaveClick = () => {
+    const handleOnSaveClick = async () => {
         setSavingButton('save');
-        handleSubmit(handleOnSave)();
+        const isValidForm = onFormValidation ? await handleFormValidation() : true;
+        if (isValidForm) {
+            handleSubmit(handleOnSave)();
+        }
     };
 
     return (
@@ -731,25 +771,35 @@ export const Form = forwardRef((props: FormProps) => {
                             .sort((a, b) => b.groupNo - a.groupNo)
                             .filter((field) => field.type !== "VIEW");
 
-                        const renderedComponents = fieldsToRender.reduce<React.ReactNode[]>((acc, field, index) => {
+                        const renderedComponents: React.ReactNode[] = [];
+                        let renderedFieldCount = 0;
+                        const injectedIndices = new Set<number>(); // Track which injections have been added
+
+                        fieldsToRender.forEach((field) => {
+                            // Check if we need to inject components before this field
                             if (injectedComponents) {
                                 injectedComponents.forEach((injected) => {
-                                    if (injected.index === index) {
-                                        acc.push(injected.component);
+                                    if (injected.index === renderedFieldCount && !injectedIndices.has(injected.index)) {
+                                        renderedComponents.push(
+                                            <React.Fragment key={`injected-${injected.index}`}>
+                                                {injected.component}
+                                            </React.Fragment>
+                                        );
+                                        injectedIndices.add(injected.index);
                                     }
                                 });
                             }
 
                             if (field.advanced || field.hidden) {
-                                return acc;
+                                return;
                             }
                             // When preserveOrder is false, skip prioritized fields (they'll be rendered at bottom)
                             if (!preserveOrder && isPrioritizedField(field)) {
-                                return acc;
+                                return;
                             }
 
                             const updatedField = updateFormFieldWithImports(field, formImports);
-                            acc.push(
+                            renderedComponents.push(
                                 <S.Row key={updatedField.key}>
                                     <EditorFactory
                                         field={updatedField}
@@ -761,26 +811,35 @@ export const Form = forwardRef((props: FormProps) => {
                                         openSubPanel={handleOpenSubPanel}
                                         subPanelView={subPanelView}
                                         handleOnFieldFocus={handleOnFieldFocus}
-                                        autoFocus={firstEditableFieldIndex === formFields.indexOf(updatedField)}
+                                        autoFocus={firstEditableFieldIndex === formFields.indexOf(updatedField) && !hideSaveButton}
                                         recordTypeFields={recordTypeFields}
                                         onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
                                         handleOnTypeChange={handleOnTypeChange}
                                         setSubComponentEnabled={setIsSubComponentEnabled}
                                         handleNewTypeSelected={handleNewTypeSelected}
-                                        newServerUrl={newServerUrl}
-                                        mcpTools={mcpTools}
-                                        onToolsChange={onToolsChange}
+                                        onBlur={handleOnBlur}
+                                        isContextTypeEditorSupported={updatedField?.isContextTypeSupported}
+                                        openFormTypeEditor={
+                                            openFormTypeEditor &&
+                                            ((open: boolean, newType?: string) => openFormTypeEditor(open, newType, updatedField))
+                                        }
                                     />
                                     {updatedField.key === "scope" && scopeFieldAddon}
                                 </S.Row>
                             );
-                            return acc;
-                        }, []);
+                            renderedFieldCount++;
+                        });
 
+                        // Check if we need to inject components after all fields
                         if (injectedComponents) {
                             injectedComponents.forEach((injected) => {
-                                if (injected.index >= fieldsToRender.length) {
-                                    renderedComponents.push(injected.component);
+                                if (injected.index >= renderedFieldCount && !injectedIndices.has(injected.index)) {
+                                    renderedComponents.push(
+                                        <React.Fragment key={`injected-${injected.index}`}>
+                                            {injected.component}
+                                        </React.Fragment>
+                                    );
+                                    injectedIndices.add(injected.index);
                                 }
                             });
                         }
@@ -789,7 +848,7 @@ export const Form = forwardRef((props: FormProps) => {
                     })()}
                     {hasAdvanceFields && (
                         <S.Row>
-                            Optional Configurations
+                            {optionalFieldsTitle}
                             <S.ButtonContainer>
                                 {!showAdvancedOptions && (
                                     <LinkButton
@@ -822,7 +881,7 @@ export const Form = forwardRef((props: FormProps) => {
                     {hasAdvanceFields &&
                         showAdvancedOptions &&
                         formFields.map((field) => {
-                            if (field.advanced) {
+                            if (field.advanced && !field.hidden) {
                                 const updatedField = updateFormFieldWithImports(field, formImports);
                                 return (
                                     <S.Row key={updatedField.key}>
@@ -837,6 +896,7 @@ export const Form = forwardRef((props: FormProps) => {
                                             recordTypeFields={recordTypeFields}
                                             onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
                                             handleOnTypeChange={handleOnTypeChange}
+                                            onBlur={handleOnBlur}
                                         />
                                     </S.Row>
                                 );
@@ -853,6 +913,7 @@ export const Form = forwardRef((props: FormProps) => {
                                 handleOnFieldFocus={handleOnFieldFocus}
                                 recordTypeFields={recordTypeFields}
                                 onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
+                                onBlur={handleOnBlur}
                             />
                         )}
                         {typeField && !isInferredReturnType && (
@@ -867,6 +928,7 @@ export const Form = forwardRef((props: FormProps) => {
                                 recordTypeFields={recordTypeFields}
                                 onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
                                 handleNewTypeSelected={handleNewTypeSelected}
+                                onBlur={handleOnBlur}
 
                             />
                         )}
@@ -879,6 +941,7 @@ export const Form = forwardRef((props: FormProps) => {
                                     onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
                                     handleNewTypeSelected={handleNewTypeSelected}
                                     handleOnTypeChange={handleOnTypeChange}
+                                    onBlur={handleOnBlur}
                                 />
                                 {typeField && (
                                     <TypeHelperText
@@ -921,9 +984,13 @@ export const Form = forwardRef((props: FormProps) => {
                             onClick={handleOnSaveClick}
                             disabled={disableSaveButton || isSaving}
                         >
-                            {isSaving && savingButton === 'save' ? (
+                            {isValidatingForm ? (
+                                <Typography variant="progress">Validating...</Typography>
+                            ) : isSaving && savingButton === 'save' ? (
                                 <Typography variant="progress">{submitText || "Saving..."}</Typography>
-                            ) : submitText || "Save"}
+                            ) : (
+                                submitText || "Save"
+                            )}
                         </Button>
                     </S.Footer>
                 )}
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 e2222fe028f..d7101a4a3b7 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/Form/types.ts
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/Form/types.ts
@@ -17,7 +17,7 @@
  */
 
 import { RefObject } from "react";
-import { DiagnosticMessage, FormDiagnostics, TextEdit, PropertyModel, LinePosition, LineRange, ExpressionProperty, Metadata, RecordTypeField, Imports } from "@wso2/ballerina-core";
+import { DiagnosticMessage, FormDiagnostics, TextEdit, PropertyModel, LinePosition, LineRange, ExpressionProperty, Metadata, RecordTypeField, Imports, ConfigProperties } from "@wso2/ballerina-core";
 import { ParamConfig } from "../ParamManager/ParamManager";
 import { CompletionItem, FormExpressionEditorRef, HelperPaneHeight, HelperPaneOrigin, OptionProps } from "@wso2/ui-toolkit";
 
@@ -53,11 +53,14 @@ export type FormField = {
     enabled: boolean;
     lineRange?: LineRange;
     metadata?: Metadata;
+    isContextTypeSupported?: boolean;
     codedata?: { [key: string]: any };
     imports?: { [key: string]: string };
     actionLabel?: string | JSX.Element;
+    properties?: ConfigProperties;
     actionCallback?: () => void;
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: string | boolean) => void;
+    isGraphqlId?: boolean;
 };
 
 export type ParameterValue = {
@@ -88,6 +91,12 @@ export type HelperPaneCompletionCategory = {
     items: HelperPaneCompletionItem[];
 }
 
+
+export type HelperpaneOnChangeOptions = {
+    closeHelperPane?: boolean;
+    replaceFullText?: boolean;
+}
+
 export type HelperPaneVariableInfo = {
     category: HelperPaneCompletionCategory[];
 }
@@ -136,7 +145,8 @@ type FormTypeConditionalProps = {
         value: string,
         cursorPosition: number,
         fetchReferenceTypes: boolean,
-        valueTypeConstraint: string
+        valueTypeConstraint: string,
+        fieldKey?: string
     ) => Promise<void>;
     getTypeHelper: (
         fieldKey: string,
@@ -169,7 +179,7 @@ type FormHelperPaneConditionalProps = {
         anchorRef: RefObject<HTMLDivElement>,
         defaultValue: string,
         value: string,
-        onChange: (value: string, updatedCursorPosition: number) => void,
+        onChange: (value: string,  options?: HelperpaneOnChangeOptions) => void,
         changeHelperPaneState: (isOpen: boolean) => void,
         helperPaneHeight: HelperPaneHeight,
         recordTypeField?: RecordTypeField,
@@ -210,6 +220,18 @@ type FormExpressionEditorBaseProps = {
     onSaveConfigurables?: (values: any) => void;
 }
 
+type ExpressionEditorRPCManager = {
+    getExpressionTokens: (
+        expression: string,
+        filePath: string,
+        position: LinePosition
+    ) => Promise<number[]>;
+}
+
+type ExpressionEditorFormProps = {
+    rpcManager: ExpressionEditorRPCManager;
+}
+
 type SanitizedExpressionEditorProps = {
     rawExpression?: (expression: string) => string; // original expression
     sanitizedExpression?: (expression: string) => string; // sanitized expression that will be rendered in the editor
@@ -220,6 +242,7 @@ export type FormExpressionEditorProps =
     FormTypeConditionalProps &
     FormHelperPaneConditionalProps &
     FormExpressionEditorBaseProps &
+    ExpressionEditorFormProps &
     SanitizedExpressionEditorProps;
 
 export type FormImports = {
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/GroupList/index.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/GroupList/index.tsx
index 3eb6bc77a45..555826f913e 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/GroupList/index.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/GroupList/index.tsx
@@ -22,6 +22,8 @@ import styled from "@emotion/styled";
 import { CallIcon, LogIcon } from "../../resources";
 import { Category, Node } from "./../NodeList/types";
 import { stripHtmlTags } from "../Form/utils";
+import { formatMethodName } from "../../utils/formatMethodName";
+
 
 namespace S {
     export const Card = styled.div<{}>`
@@ -229,7 +231,8 @@ function getComponentTitle(node: Node) {
         return stripHtmlTags(node.description);
     }
 
-    return stripHtmlTags(node.label);
+    const label = stripHtmlTags(node.label);
+    return formatMethodName(label);
 }
 
 function getComponentDescription(node: Node) {
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/index.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/index.tsx
new file mode 100644
index 00000000000..74374c69005
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/index.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 } from 'react';
+import { Label, Slider, SwitchWrapper } from './styles';
+import { InputMode } from '../editors/MultiModeExpressionEditor/ChipExpressionEditor/types';
+import { getDefaultExpressionMode } from '../editors/MultiModeExpressionEditor/ChipExpressionEditor/utils';
+
+interface ModeSwitcherProps {
+    value: InputMode;
+    onChange: (value: InputMode) => void;
+    valueTypeConstraint: string | string[];
+}
+
+const ModeSwitcher: React.FC<ModeSwitcherProps> = ({ value, onChange, valueTypeConstraint }) => {
+    const isChecked = value === InputMode.EXP;
+
+    const defaultMode = useMemo(
+        () => getDefaultExpressionMode(valueTypeConstraint),
+        [valueTypeConstraint]
+    );
+
+    const handlePrimaryModeClick = () => {
+        onChange(defaultMode);
+    };
+
+    const handleExpressionClick = () => {
+        onChange(InputMode.EXP);
+    };
+
+    return (
+        <SwitchWrapper>
+            <Slider checked={isChecked}>
+                <Label active={!isChecked} onClick={handlePrimaryModeClick}>{defaultMode}</Label>
+                <Label active={isChecked} onClick={handleExpressionClick}>Expression</Label>
+            </Slider>
+        </SwitchWrapper>
+    );
+};
+
+export default ModeSwitcher;
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/styles.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/styles.tsx
new file mode 100644
index 00000000000..2697d4dc233
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/styles.tsx
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { ThemeColors } from '@wso2/ui-toolkit';
+
+interface LabelProps {
+  active: boolean;
+}
+
+export const Label = styled.span<LabelProps>`
+  position: absolute;
+  text-align: center;
+  font-size: 10px;
+  z-index: 1;
+  transition: all 0.2s ease;
+  color: ${props => props.active ? ThemeColors.ON_SURFACE : ThemeColors.ON_SURFACE_VARIANT};
+  font-weight: ${props => props.active ? '600' : '500'};
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  
+  &:first-of-type {
+    left: 0;
+    width: 30%;
+  }
+  
+  &:last-of-type {
+    left: 30%;
+    width: 70%;
+  }
+`;
+
+export const Slider = styled.div<{ checked: boolean }>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${ThemeColors.SURFACE_CONTAINER};
+  color: ${ThemeColors.ON_SURFACE};
+  font-weight: 500;
+  border-radius: 2px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 2px;
+  transition: all 0.2s ease;
+  border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+
+  &:before {
+    content: "";
+    position: absolute;
+    height: calc(100% - 4px);
+    width: ${props => props.checked ? 'calc(70% - 6px)' : 'calc(30% - 2px)'};
+    left: ${props => props.checked ? 'calc(30% + 4px)' : '2px'};
+    border-radius: 1px;
+    background: ${ThemeColors.SURFACE_DIM};
+    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
+    z-index: 0;
+    border: 1px solid ${ThemeColors.OUTLINE};
+  }
+
+  &:active:before {
+    background: ${ThemeColors.SURFACE_DIM};
+    box-shadow: 
+      0 1px 2px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    transform: translateY(1px);
+  }
+`;
+
+export const SwitchWrapper = styled.div`
+  font-size: 12px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 110px;
+  height: 24px;
+  margin-top: 2px;
+`;
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/categoryConfig.ts b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/categoryConfig.ts
index eeca926019b..da37cedf5bd 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/categoryConfig.ts
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/categoryConfig.ts
@@ -31,6 +31,7 @@ export interface CategoryConfig {
     actions: CategoryAction[];
     showWhenEmpty: boolean;
     useConnectionContainer: boolean; // Whether to use getConnectionContainer for rendering
+    fixed?: boolean; // Whether the header should be non-collapsible
 }
 
 // Configuration for all categories with their specific behaviors
@@ -44,7 +45,8 @@ export const CATEGORY_CONFIGS: Record<string, CategoryConfig> = {
             handlerKey: 'onAddConnection'
         }],
         showWhenEmpty: true,
-        useConnectionContainer: true
+        useConnectionContainer: true,
+        fixed: true
     },
     "Current Integration": {
         title: "Current Integration",
@@ -72,7 +74,8 @@ export const CATEGORY_CONFIGS: Record<string, CategoryConfig> = {
             }
         ],
         showWhenEmpty: true,
-        useConnectionContainer: false
+        useConnectionContainer: false,
+        fixed: true
     },
     "Agents": {
         title: "Agents", 
@@ -89,7 +92,8 @@ export const CATEGORY_CONFIGS: Record<string, CategoryConfig> = {
             handlerKey: 'onAdd'
         }],
         showWhenEmpty: true,
-        useConnectionContainer: true
+        useConnectionContainer: true,
+        fixed: true
     },
     "Vector Stores": {
         title: "Vector Stores",
@@ -100,7 +104,8 @@ export const CATEGORY_CONFIGS: Record<string, CategoryConfig> = {
             handlerKey: 'onAdd'
         }],
         showWhenEmpty: true,
-        useConnectionContainer: true
+        useConnectionContainer: true,
+        fixed: true
     },
     "Embedding Providers": {
         title: "Embedding Providers",
@@ -111,7 +116,8 @@ export const CATEGORY_CONFIGS: Record<string, CategoryConfig> = {
             handlerKey: 'onAdd'
         }],
         showWhenEmpty: true,
-        useConnectionContainer: true
+        useConnectionContainer: true,
+        fixed: true
     },
     "Data Loaders": {
         title: "Data Loaders",
@@ -122,7 +128,8 @@ export const CATEGORY_CONFIGS: Record<string, CategoryConfig> = {
             handlerKey: 'onAdd'
         }],
         showWhenEmpty: true,
-        useConnectionContainer: true
+        useConnectionContainer: true,
+        fixed: true
     },
     "Chunkers": {
         title: "Chunkers",
@@ -133,10 +140,11 @@ export const CATEGORY_CONFIGS: Record<string, CategoryConfig> = {
             handlerKey: 'onAdd'
         }],
         showWhenEmpty: true,
-        useConnectionContainer: true
+        useConnectionContainer: true,
+        fixed: true
     },
-    "Vector Knowledge Bases": {
-        title: "Vector Knowledge Bases",
+    "Knowledge Bases": {
+        title: "Knowledge Bases",
         actions: [{
             type: 'add',
             tooltip: "",
@@ -144,7 +152,8 @@ export const CATEGORY_CONFIGS: Record<string, CategoryConfig> = {
             handlerKey: 'onAdd'
         }],
         showWhenEmpty: true,
-        useConnectionContainer: true
+        useConnectionContainer: true,
+        fixed: true
     }
 };
 
@@ -163,6 +172,11 @@ export const shouldUseConnectionContainer = (title: string): boolean => {
     return config?.useConnectionContainer ?? false;
 };
 
+export const isCategoryFixed = (title: string): boolean => {
+    const config = getCategoryConfig(title);
+    return config?.fixed ?? false;
+};
+
 export const getCategoryActions = (title: string, contextTitle?: string): CategoryAction[] => {
     const config = getCategoryConfig(title);
     if (!config) return [];
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 12ff3dd2877..f8e1e6ba4e2 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
@@ -36,7 +36,7 @@ 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";
+import { shouldShowEmptyCategory, shouldUseConnectionContainer, getCategoryActions, isCategoryFixed } from "./categoryConfig";
 
 namespace S {
     export const Container = styled.div<{}>`
@@ -54,6 +54,7 @@ namespace S {
     export const PanelBody = styled(SidePanelBody)`
         height: calc(100vh - 100px);
         padding-top: 0;
+        overflow-y: auto;
     `;
 
     export const StyledSearchInput = styled(SearchBox)`
@@ -237,6 +238,7 @@ namespace S {
         }
     `;
 
+
     export const AdvancedSubTitle = styled.div`
         font-size: 12px;
         opacity: 0.7;
@@ -261,6 +263,18 @@ namespace S {
         }
     `;
 
+    export const CategoryHeaderFixed = styled.div<{ fullWidth?: boolean }>`
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: -webkit-fill-available;
+        padding: 12px;
+        cursor: default;
+        border-radius: 5px;
+        margin: ${({ fullWidth }) => fullWidth ? '0 -12px' : '0'};
+    `;
+
     export const CategoryCard = styled.div<{ hasBackground?: boolean }>`
         background-color: ${({ hasBackground }) => hasBackground ? `rgba(255, 255, 255, 0.02)` : 'transparent'};
         border-radius: 5px;
@@ -544,7 +558,7 @@ export function NodeList(props: NodeListProps) {
             "Logging": { hasBackground: true },
             "Model Providers": { hasBackground: false },
             "Embedding Providers": { hasBackground: false },
-            "Vector Knowledge Bases": { hasBackground: false },
+            "Knowledge Bases": { hasBackground: false },
             "Vector Stores": { hasBackground: false },
             "Data Loaders": { hasBackground: false },
             "Chunkers": { hasBackground: false },
@@ -589,9 +603,17 @@ export function NodeList(props: NodeListProps) {
                             <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>
+                                        (() => {
+                                            const isFixed = isCategoryFixed(group.title);
+                                            const HeaderComponent = isFixed ? S.CategoryHeaderFixed : S.CategoryHeader;
+                                            const headerProps = isFixed ? 
+                                                { fullWidth: config.hasBackground && !isSubCategory } : 
+                                                { fullWidth: config.hasBackground && !isSubCategory, onClick: () => toggleCategory(group.title) };
+                                            
+                                            return (
+                                                <HeaderComponent {...headerProps}>
+                                                    <S.Row style={{ margin: 0, cursor: isFixed ? 'default' : 'pointer' }}>
+                                                        <S.Title>{group.title}</S.Title>
                                                 <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                                     {categoryActions.map((action, actionIndex) => {
                                                         const handlers = {
@@ -622,14 +644,18 @@ export function NodeList(props: NodeListProps) {
                                                             </Tooltip>
                                                         );
                                                     })}
-                                                    <Tooltip content={isCategoryExpanded ? "Collapse" : "Expand"}>
-                                                        <S.ChevronIcon isExpanded={isCategoryExpanded}>
-                                                            <Codicon name="chevron-right" />
-                                                        </S.ChevronIcon>
-                                                    </Tooltip>
+                                                    {!isFixed && (
+                                                        <Tooltip content={isCategoryExpanded ? "Collapse" : "Expand"}>
+                                                            <S.ChevronIcon isExpanded={isCategoryExpanded}>
+                                                                <Codicon name="chevron-right" />
+                                                            </S.ChevronIcon>
+                                                        </Tooltip>
+                                                    )}
                                                 </div>
                                             </S.Row>
-                                        </S.CategoryHeader>
+                                        </HeaderComponent>
+                                            );
+                                        })()
                                     ) : (
                                         <S.Row>
                                             <Tooltip content={group.description}>
@@ -637,7 +663,7 @@ export function NodeList(props: NodeListProps) {
                                             </Tooltip>
                                         </S.Row>
                                     )}
-                                    {isCategoryExpanded && (
+                                    {(isCategoryExpanded || isCategoryFixed(group.title)) && (
                                         <>
                                             {(!group.items || group.items.length === 0) &&
                                                 !searchText &&
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 bb2bc268d26..18b77bf5056 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamEditor.tsx
@@ -22,7 +22,7 @@ import React, { RefObject, useEffect, useState } from 'react';
 import { EditorContainer } from './styles';
 import { Parameter } from './ParamManager';
 import Form from '../Form';
-import { FormField, FormValues } from '../Form/types';
+import { FormField, FormValues, HelperpaneOnChangeOptions } from '../Form/types';
 import { useFormContext } from '../../context';
 import { RecordTypeField, TextEdit } from '@wso2/ballerina-core';
 import { HelperPaneHeight } from '@wso2/ui-toolkit';
@@ -51,7 +51,7 @@ export function ParamEditor(props: ParamProps) {
         anchorRef: RefObject<HTMLDivElement>,
         defaultValue: string,
         value: string,
-        onChange: (value: string, updatedCursorPosition: number) => void,
+        onChange: (value: string, options?: HelperpaneOnChangeOptions) => void,
         changeHelperPaneState: (isOpen: boolean) => void,
         helperPaneHeight: HelperPaneHeight,
         recordTypeField?: RecordTypeField
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 357f80bd888..99b0b61d179 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamManager.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamManager.tsx
@@ -313,6 +313,9 @@ export function ParamManager(props: ParamManagerProps) {
                                 field.editable = param.identifierEditable;
                                 field.lineRange = param.identifierRange;
                             }
+                            if (field.key === "type" && field.type === "ACTION_TYPE" && param.formValues['isGraphqlId'] !== undefined) {
+                                field.isGraphqlId = param.formValues['isGraphqlId'];
+                            }
                         }
                     })
                     render.push(
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/TypeModeSwitcher/index.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/TypeModeSwitcher/index.tsx
new file mode 100644
index 00000000000..dc73fc19282
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/TypeModeSwitcher/index.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 { Label, Slider, SwitchWrapper } from './styles';
+
+
+export enum TypeInputMode {
+    GUIDED = "Guided",
+    ADVANCED = "Advanced"
+}
+
+interface TypeModeSwitcherProps {
+    value: TypeInputMode;
+    onChange: (value: TypeInputMode) => void;
+}
+
+const TypeModeSwitcher: React.FC<TypeModeSwitcherProps> = ({ value, onChange }) => {
+    const isChecked = value === TypeInputMode.ADVANCED;
+
+    const handleGuidedClick = () => {
+        onChange(TypeInputMode.GUIDED);
+    };
+
+    const handleAdvancedClick = () => {
+        onChange(TypeInputMode.ADVANCED);
+    };
+
+    return (
+        <SwitchWrapper>
+            <Slider checked={isChecked}>
+                <Label active={!isChecked} onClick={handleGuidedClick}>Guided</Label>
+                <Label active={isChecked} onClick={handleAdvancedClick}>Advanced</Label>
+            </Slider>
+        </SwitchWrapper>
+    );
+};
+
+export default TypeModeSwitcher;
+
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/TypeModeSwitcher/styles.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/TypeModeSwitcher/styles.tsx
new file mode 100644
index 00000000000..83d0126a7d6
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/TypeModeSwitcher/styles.tsx
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { ThemeColors } from '@wso2/ui-toolkit';
+
+interface LabelProps {
+  active: boolean;
+}
+
+export const Label = styled.span<LabelProps>`
+  position: absolute;
+  text-align: center;
+  font-size: 10px;
+  z-index: 1;
+  transition: all 0.2s ease;
+  color: ${props => props.active ? ThemeColors.ON_SURFACE : ThemeColors.ON_SURFACE_VARIANT};
+  font-weight: ${props => props.active ? '600' : '500'};
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  
+  &:first-of-type {
+    left: 0;
+    width: 40%;
+  }
+  
+  &:last-of-type {
+    left: 40%;
+    width: 60%;
+  }
+`;
+
+export const Slider = styled.div<{ checked: boolean }>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${ThemeColors.SURFACE_CONTAINER};
+  color: ${ThemeColors.ON_SURFACE};
+  font-weight: 500;
+  border-radius: 2px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 2px;
+  transition: all 0.2s ease;
+  border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+
+  &:before {
+    content: "";
+    position: absolute;
+    height: calc(100% - 4px);
+    width: ${props => props.checked ? 'calc(60% - 6px)' : 'calc(40% - 2px)'};
+    left: ${props => props.checked ? 'calc(40% + 4px)' : '2px'};
+    top: 1px;
+    border-radius: 1px;
+    background: ${ThemeColors.SURFACE_DIM};
+    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
+    z-index: 0;
+    border: 1px solid ${ThemeColors.OUTLINE};
+    box-shadow: 
+      0 1px 3px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+
+  &:active:before {
+    background: ${ThemeColors.SURFACE_DIM};
+    box-shadow: 
+      0 1px 2px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    transform: translateY(1px);
+  }
+`;
+
+export const SwitchWrapper = styled.div`
+  font-size: 12px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 110px;
+  height: 24px;
+  margin-top: 2px;
+`;
+
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/WarningPopup/index.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/WarningPopup/index.tsx
new file mode 100644
index 00000000000..d708314719d
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/WarningPopup/index.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 Modal from './modal';
+import { ButtonContainer, StyledButton } from './styles';
+import { Button, ThemeColors } from '@wso2/ui-toolkit';
+
+interface WarningPopupProps {
+    isOpen: boolean;
+    onContinue: () => void;
+    onCancel: () => void;
+}
+
+const WarningPopup: React.FC<WarningPopupProps> = ({ isOpen, onContinue, onCancel }) => {
+    return (
+        <Modal isOpen={isOpen} onClose={onCancel} maxWidth='90%'>
+            <p>If you continue, you will lose all structured information. Do you want to continue?</p>
+            <ButtonContainer>
+                <Button 
+                    appearance='primary'
+                    onClick={onContinue}>
+                    Continue
+                </Button>
+                <Button 
+                    appearance='secondary'
+                    onClick={onCancel}>
+                    Cancel
+                </Button>
+            </ButtonContainer>
+        </Modal>
+    );
+};
+
+export default WarningPopup;
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/WarningPopup/modal.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/WarningPopup/modal.tsx
new file mode 100644
index 00000000000..3c829e01e8e
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/WarningPopup/modal.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { ModalBackdrop, ModalContent } from './styles';
+
+interface ModalProps {
+    isOpen: boolean;
+    children: React.ReactNode;
+    onClose?: () => void;
+    maxWidth?: string;
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, children, onClose, maxWidth = '400px' }) => {
+    if (!isOpen) return null;
+
+    const handleBackdropClick = (e: React.MouseEvent) => {
+        if (e.target === e.currentTarget && onClose) {
+            onClose();
+        }
+    };
+
+    return (
+        <ModalBackdrop onClick={handleBackdropClick}>
+            <ModalContent maxWidth={maxWidth}>
+                {children}
+            </ModalContent>
+        </ModalBackdrop>
+    );
+};
+
+export default Modal;
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/WarningPopup/styles.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/WarningPopup/styles.tsx
new file mode 100644
index 00000000000..5f190a89261
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/WarningPopup/styles.tsx
@@ -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.
+ */
+
+import styled from "@emotion/styled";
+import { ThemeColors } from '@wso2/ui-toolkit';
+
+export const ButtonContainer = styled.div({
+    marginTop: '20px',
+    display: 'flex',
+    justifyContent: 'center',
+    gap: '10px'
+});
+
+export const StyledButton = styled.button({
+    background: ThemeColors.SURFACE_DIM,
+    color: ThemeColors.ON_SURFACE,
+    border: `1px solid ${ThemeColors.OUTLINE_VARIANT}`,
+    borderRadius: '2px',
+    padding: '8px 16px',
+    cursor: 'pointer',
+    transition: 'all 0.1s ease',
+    
+    '&:hover': {
+        background: ThemeColors.SURFACE_CONTAINER,
+        borderColor: ThemeColors.OUTLINE
+    }
+});
+
+export const ModalBackdrop = styled.div({
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1000
+});
+
+export const ModalContent = styled.div<{ maxWidth: string }>(({ maxWidth }) => ({
+    backgroundColor: ThemeColors.SURFACE,
+    color: ThemeColors.ON_SURFACE,
+    padding: '20px',
+    border: `1px solid ${ThemeColors.OUTLINE_VARIANT}`,
+    borderRadius: '4px',
+    boxShadow: '0 4px 24px rgba(0, 0, 0, 0.4)',
+    width: maxWidth,
+    textAlign: 'center'
+}));
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionExpressionEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionExpressionEditor.tsx
index e7916549762..e585412f381 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionExpressionEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionExpressionEditor.tsx
@@ -26,6 +26,7 @@ const Row = styled.div`
     display: flex;
     flex-direction: column;
     margin: 0;
+    width: 100%;
 `;
 
 const actionButtonStyles = {
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx
new file mode 100644
index 00000000000..046290cfb8b
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx
@@ -0,0 +1,727 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 {
+    Codicon,
+    ErrorBanner,
+    FormExpressionEditor,
+    FormExpressionEditorRef,
+    HelperPaneHeight,
+    Icon,
+    Item,
+    Menu,
+    MenuItem,
+    RequiredFormInput,
+    ThemeColors,
+    Tooltip,
+    Typography,
+    CompletionItem,
+    Button,
+    CheckBox,
+} from "@wso2/ui-toolkit";
+import { FormField } from "../Form/types";
+import { useFormContext } from "../../context";
+import { Controller } from "react-hook-form";
+import { S } from "./ExpressionEditor";
+import { getPropertyFromFormField, sanitizeType } from "./utils";
+import { debounce } from "lodash";
+import styled from "@emotion/styled";
+import ReactMarkdown from "react-markdown";
+import { NodeProperties, PropertyModel } from "@wso2/ballerina-core";
+
+const isGraphQLScalarType = (type: string): boolean => {
+    const scalarTypes = [
+        'string',
+        'int',
+        'float',
+        'decimal'
+    ];
+
+    const isScalarOrArrayOfScalar = (t: string): boolean => {
+        let cleanType = t.trim().replace(/\?$/, '');
+
+        if (cleanType.endsWith('[]')) {
+            const baseType = cleanType.slice(0, -2).trim();
+            return isScalarOrArrayOfScalar(baseType);
+        }
+
+        if (cleanType.startsWith('(') && cleanType.endsWith(')')) {
+            cleanType = cleanType.slice(1, -1).trim();
+            if (cleanType.includes('|')) {
+                const unionParts = cleanType.split('|').map(part => part.trim());
+                return unionParts.every(part => isScalarOrArrayOfScalar(part));
+            }
+        }
+
+        return scalarTypes.includes(cleanType.toLowerCase());
+    };
+
+    let cleanType = type.trim().replace(/\?$/, '');
+
+    if (cleanType.endsWith('[]') && cleanType.includes('(') && cleanType.includes('|')) {
+        const baseType = cleanType.slice(0, -2).trim();
+        return isScalarOrArrayOfScalar(baseType);
+    }
+
+    if (cleanType.includes('|')) {
+        const unionParts = cleanType.split('|').map(part => part.trim());
+        return unionParts.every(part => isScalarOrArrayOfScalar(part));
+    }
+
+    if (cleanType.endsWith('[]')) {
+        const baseType = cleanType.slice(0, -2).trim();
+        return isScalarOrArrayOfScalar(baseType);
+    }
+
+    return isScalarOrArrayOfScalar(cleanType);
+};
+
+interface ActionTypeEditorProps {
+    field: FormField;
+    openRecordEditor: (open: boolean, newType?: string | NodeProperties) => void;
+    handleOnFieldFocus?: (key: string) => void;
+    handleOnTypeChange?: (value?: string) => void;
+    handleNewTypeSelected?: (type: string | CompletionItem) => void;
+    autoFocus?: boolean;
+}
+
+const Ribbon = styled.div({
+    backgroundColor: ThemeColors.PRIMARY,
+    opacity: 0.6,
+    width: '24px',
+    height: `calc(100% - 6.5px)`,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    borderTopLeftRadius: '2px',
+    borderBottomLeftRadius: '2px',
+    borderRight: 'none',
+    marginTop: '3.75px',
+    paddingTop: '6px',
+    cursor: 'pointer'
+});
+
+const codiconStyles = {
+    color: 'var(--vscode-editorLightBulb-foreground)',
+    marginRight: '2px'
+}
+
+const CheckBoxLabel = styled.div`
+    font-family: var(--font-family);
+    color: var(--vscode-editor-foreground);
+    text-align: left;
+`;
+
+const CheckBoxDescription = styled.div`
+    font-family: var(--font-family);
+    color: var(--vscode-list-deemphasizedForeground);
+    text-align: left;
+`;
+
+const CheckBoxLabelGroup = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+`;
+
+const CheckBoxBoxGroup = styled.div`
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: flex-start;
+`;
+
+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',
+                    height: '12px'
+                }} />
+            </Ribbon>
+        </Tooltip>
+    );
+};
+
+const getDefaultCompletion = (newType: string) => {
+    return (
+        <S.TitleContainer data-testid="add-type-completion">
+            <Codicon name="add" />
+            <Typography variant="body3" sx={{ fontWeight: 600 }}>
+                Add Type: {newType}
+            </Typography>
+        </S.TitleContainer>
+    )
+}
+
+export function ActionTypeEditor(props: ActionTypeEditorProps) {
+    const { field, openRecordEditor, handleOnFieldFocus, handleOnTypeChange, autoFocus, handleNewTypeSelected } = props;
+    const { form, expressionEditor } = useFormContext();
+    const { control } = form;
+    const {
+        types,
+        referenceTypes,
+        helperPaneOrigin: typeHelperOrigin,
+        helperPaneHeight: typeHelperHeight,
+        retrieveVisibleTypes,
+        getTypeHelper,
+        onFocus,
+        onBlur,
+        onCompletionItemSelect,
+        onSave,
+        onCancel,
+        getExpressionEditorDiagnostics
+    } = expressionEditor;
+
+    const exprRef = useRef<FormExpressionEditorRef>(null);
+    const typeBrowserRef = useRef<HTMLDivElement>(null);
+    const codeActionRef = useRef<HTMLDivElement>(null);
+    const onChangeRef = useRef<((value: string) => void) | null>(null);
+
+    const cursorPositionRef = useRef<number | undefined>(undefined);
+    const [showDefaultCompletion, setShowDefaultCompletion] = useState<boolean>(false);
+    const [focused, setFocused] = useState<boolean>(false);
+    const [isTypeOptional, setIsTypeOptional] = useState<boolean>(false);
+    const [isCodeActionMenuOpen, setIsCodeActionMenuOpen] = useState<boolean>(false);
+    const [isGraphqlId, setIsGraphqlId] = useState<boolean>(field.isGraphqlId || false);
+    const [showGraphqlCheckbox, setShowGraphqlCheckbox] = useState<boolean>(false);
+
+    const [isTypeHelperOpen, setIsTypeHelperOpen] = useState<boolean>(false);
+
+    /** HACK: FE implementation check the optional support of a type till the LS supports it
+     * Issue: https://github.com/wso2/product-ballerina-integrator/issues/1262
+     */
+    const checkTypeOptional = (typeValue: string | any[]): boolean => {
+        if (!typeValue) {
+            return false;
+        }
+
+        // Handle string values
+        if (typeof typeValue === 'string') {
+            const trimmedValue = typeValue.trim();
+
+            // Check for optional syntax (ends with '?')
+            if (trimmedValue.endsWith('?')) {
+                return true;
+            }
+
+            // Check for standalone () - representing nil
+            if (trimmedValue === '()') {
+                return true;
+            }
+
+            // Check for union with () - representing nil
+            if (trimmedValue.includes('()')) {
+                const unionParts = trimmedValue.split('|').map(part => part.trim());
+                return unionParts.some(part => part === '()');
+            }
+
+            // Check for stream<T> where T is optional
+            // Pattern: stream<string?, error> or stream<int|(), string>
+            if (trimmedValue.startsWith('stream<') && trimmedValue.includes('>')) {
+                const streamMatch = trimmedValue.match(/^stream<(.+)>$/);
+                if (streamMatch) {
+                    const typeParams = streamMatch[1];
+                    // Split by comma to get individual type parameters
+                    const params = typeParams.split(',').map(param => param.trim());
+                    // Check if the first type parameter (T) is optional
+                    if (params.length > 0) {
+                        const firstParam = params[0];
+                        return checkTypeOptional(firstParam);
+                    }
+                }
+            }
+
+            return false;
+        }
+
+        // Handle array values - check if any item is optional
+        if (Array.isArray(typeValue)) {
+            return typeValue.some(item =>
+                typeof item === 'string' && checkTypeOptional(item)
+            );
+        }
+
+        return false;
+    };
+
+    const handleMakeOptional = async () => {
+        const currentValue = form.getValues(field.key) || field.value || '';
+
+        if (exprRef.current) {
+            let newValue = currentValue;
+
+            // Check if it's a stream type
+            if (currentValue.startsWith('stream<') && currentValue.includes('>')) {
+                const streamMatch = currentValue.match(/^stream<(.+)>$/);
+                if (streamMatch) {
+                    const typeParams = streamMatch[1];
+                    const params = typeParams.split(',').map(param => param.trim());
+
+                    if (params.length > 0) {
+                        const firstParam = params[0];
+                        // Add ? to the first type parameter if it doesn't already have one
+                        if (!firstParam.endsWith('?') && !checkTypeOptional(firstParam)) {
+                            const modifiedFirstParam = firstParam + '?';
+                            params[0] = modifiedFirstParam;
+                            newValue = `stream<${params.join(', ')}>`;
+                        }
+                    }
+                }
+            } else if (!currentValue.toString().endsWith('?')) {
+                // For non-stream types, add ? at the end
+                newValue = currentValue + '?';
+            }
+
+            // Only update if the value actually changed
+            if (newValue !== currentValue) {
+                // Update the form value using setValue instead of onChange
+                form.setValue(field.key, newValue, { shouldValidate: true, shouldDirty: true });
+
+                // Update the expression editor value directly
+                if (exprRef.current.inputElement) {
+                    exprRef.current.inputElement.value = newValue;
+                }
+
+                // Move cursor to the end
+                const newCursorPosition = newValue.length;
+                cursorPositionRef.current = newCursorPosition;
+
+                setIsTypeOptional(true);
+            }
+        }
+    };
+
+    const handleCodeActionClick = () => {
+        setIsCodeActionMenuOpen(prev => !prev);
+    };
+
+    const handleCodeActionClose = () => {
+        setIsCodeActionMenuOpen(false);
+    };
+
+    const handleFocus = async (value: string) => {
+        setFocused(true);
+        // Trigger actions on focus
+        await onFocus?.();
+        await retrieveVisibleTypes(value, value.length, true, field.valueTypeConstraint as string, field.key);
+        handleOnFieldFocus?.(field.key);
+    };
+
+    const handleBlur = async () => {
+        setFocused(false);
+        // Trigger actions on blur
+        await onBlur?.();
+        setShowDefaultCompletion(undefined);
+        // Clean up memory
+        cursorPositionRef.current = undefined;
+    };
+
+    const handleCompletionSelect = async (value: string) => {
+        // Trigger actions on completion select
+        await onCompletionItemSelect?.(value, field.key);
+
+        // Set cursor position
+        const cursorPosition = exprRef.current?.shadowRoot?.querySelector('textarea')?.selectionStart;
+        cursorPositionRef.current = cursorPosition;
+        setShowDefaultCompletion(false);
+    };
+
+    const handleCancel = () => {
+        onCancel?.();
+        handleChangeTypeHelperState(false);
+        setShowDefaultCompletion(false);
+    }
+
+    const handleDefaultCompletionSelect = (value: string | NodeProperties) => {
+        openRecordEditor(true, value);
+        handleCancel();
+    }
+
+    const handleTypeEdit = (value: string) => {
+        handleOnTypeChange && handleOnTypeChange(value);
+    };
+
+    const debouncedTypeEdit = debounce(handleTypeEdit, 300);
+
+    const handleChangeTypeHelperState = (isOpen: boolean) => {
+        setIsTypeHelperOpen(isOpen);
+    };
+
+    const toggleTypeHelperPaneState = () => {
+        if (!isTypeHelperOpen) {
+            exprRef.current?.focus();
+        } else {
+            handleChangeTypeHelperState(false);
+        }
+    };
+
+    const handleGetTypeHelper = (
+        value: string,
+        onChange: (value: string, updatedCursorPosition: number) => void,
+        helperPaneHeight: HelperPaneHeight
+    ) => {
+        return getTypeHelper(
+            field.key,
+            field.valueTypeConstraint as string,
+            typeBrowserRef,
+            value,
+            cursorPositionRef.current,
+            isTypeHelperOpen,
+            onChange,
+            handleChangeTypeHelperState,
+            helperPaneHeight,
+            handleCancel,
+            exprRef
+        );
+    }
+
+    /* Track cursor position */
+    const handleSelectionChange = () => {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return;
+        }
+
+        const range = selection.getRangeAt(0);
+
+        if (exprRef.current?.parentElement.contains(range.startContainer)) {
+            cursorPositionRef.current = exprRef.current?.inputElement?.selectionStart ?? 0;
+        }
+    }
+
+    // Initialize optional type state based on field value
+    useEffect(() => {
+        const typeValue = typeof field.value === 'string' ? field.value : '';
+
+        if (typeValue) {
+            const isOptional = checkTypeOptional(typeValue);
+            setIsTypeOptional(isOptional);
+
+            // Check if the type is a GraphQL scalar type to show/hide checkbox
+            const isScalar = isGraphQLScalarType(typeValue);
+            setShowGraphqlCheckbox(isScalar);
+        } else {
+            // If no value, hide the checkbox
+            setShowGraphqlCheckbox(false);
+        }
+    }, [field.value]);
+
+    // Initialize GraphQL ID state from field
+    useEffect(() => {
+        if (field.isGraphqlId !== undefined) {
+            setIsGraphqlId(field.isGraphqlId);
+        }
+    }, [field.isGraphqlId]);
+
+    // Update form value when checkbox changes
+    const handleGraphqlIdChange = (checked: boolean) => {
+        setIsGraphqlId(checked);
+        // Store the isGraphqlId value in a hidden form field
+        form.setValue(`isGraphqlId`, checked, { shouldValidate: false, shouldDirty: true });
+    };
+
+    // Create code actions and menu items
+    const createCodeActionsAndMenuItems = () => {
+        const nullableAction = field.properties ? field.properties["nullableAction"] : undefined;
+        if (!nullableAction) return { codeActions: [], menuItems: [] };
+
+        const nullableProperty: PropertyModel = field.properties["nullableAction"].properties;
+        const action = nullableProperty["false"]?.value;
+
+        const codeActions = !isTypeOptional && action ? [{
+            title: action,
+            onClick: async () => {
+                handleMakeOptional();
+                handleCodeActionClose();
+            }
+        }] : [];
+
+        const menuItems: React.ReactNode[] = [];
+        codeActions.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-nullable-${index}`}
+                />
+            );
+        });
+
+        return { codeActions, menuItems };
+    };
+
+    const { codeActions, menuItems } = createCodeActionsAndMenuItems();
+
+    useEffect(() => {
+        const typeField = exprRef.current;
+        if (!typeField) {
+            return;
+        }
+
+        document.addEventListener('selectionchange', handleSelectionChange);
+        return () => {
+            document.removeEventListener('selectionchange', handleSelectionChange);
+        }
+    }, [exprRef.current]);
+
+    // Handle click outside to close code action menu
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (codeActionRef.current && !codeActionRef.current.contains(event.target as Node)) {
+                setIsCodeActionMenuOpen(false);
+            }
+        };
+
+        if (isCodeActionMenuOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isCodeActionMenuOpen]);
+
+    return (
+        <S.Container>
+            <S.HeaderContainer>
+                <S.Header>
+                    <S.LabelContainer>
+                        <S.Label>{field.label}</S.Label>
+                        {!field.optional && <RequiredFormInput />}
+                    </S.LabelContainer>
+                    <S.EditorMdContainer>
+                        {field.documentation && <ReactMarkdown>{field.documentation}</ReactMarkdown>}
+                    </S.EditorMdContainer>
+
+                    {/* Conditional metadata rendering based on optional type state */}
+                    {(() => {
+                        let msg;
+                        const nullableAction = field.properties ? field.properties["nullableAction"] : undefined;
+
+                        // Check if there are any diagnostics for this field
+                        const hasDiagnostics = form.formState.errors && form.formState.errors[field.key];
+
+                        // Get current form value to check if field has content
+                        const currentValue = form.watch(field.key) || field.value || '';
+
+                        // Only show nullable action UI if there are no diagnostics, nullableAction exists, and field has a value
+                        if (nullableAction && !hasDiagnostics && currentValue.trim()) {
+                            const nullableProperty: PropertyModel = field.properties["nullableAction"].properties;
+
+                            if (isTypeOptional) {
+                                msg = nullableProperty["true"]?.metadata?.description || '';
+                            } else {
+                                msg = nullableProperty["false"]?.metadata?.description || '';
+                            }
+
+                            return (
+                                <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: '2px' }} ref={codeActionRef}>
+                                    {!isTypeOptional && codeActions.length > 0 && (
+                                        <>
+                                            <Button
+                                                appearance="icon"
+                                                data-testid="code-action-icon"
+                                                onClick={handleCodeActionClick}
+                                            >
+                                                <Codicon name="lightbulb" sx={codiconStyles} />
+                                            </Button>
+                                            {isCodeActionMenuOpen && (
+                                                <div style={{
+                                                    position: 'absolute',
+                                                    top: '100%',
+                                                    left: 0,
+                                                    zIndex: 1000,
+                                                    backgroundColor: 'var(--vscode-menu-background)',
+                                                    border: '1px solid var(--vscode-menu-border)',
+                                                    borderRadius: '3px',
+                                                    boxShadow: '0 2px 8px var(--vscode-widget-shadow)',
+                                                    minWidth: '150px'
+                                                }}>
+                                                    <Menu
+                                                        sx={{
+                                                            background: 'transparent',
+                                                            boxShadow: 'none',
+                                                            padding: 0,
+                                                            border: 'none'
+                                                        }}
+                                                    >
+                                                        {menuItems}
+                                                    </Menu>
+                                                </div>
+                                            )}
+                                        </>
+                                    )}
+                                    <S.DefaultValue>
+                                        {msg}
+                                    </S.DefaultValue>
+
+                                </div>
+                            );
+
+                        } else {
+                            return null;
+                        }
+                    })()
+                    }
+                </S.Header>
+                {field.valueTypeConstraint &&
+                    <S.Type
+                        isVisible={focused}
+                        title={field.valueTypeConstraint as string}
+                    >
+                        {sanitizeType(field.valueTypeConstraint as string)}
+                    </S.Type>
+                }
+            </S.HeaderContainer>
+            <Controller
+                control={control}
+                name={field.key}
+                defaultValue={field.value}
+                rules={{
+                    required: {
+                        value: !field.optional,
+                        message: `${field.label} is required`
+                    }
+                }}
+                render={({ field: { name, value, onChange }, fieldState: { error } }) => {
+                    onChangeRef.current = onChange;
+
+                    return (
+                        <div>
+                            <FormExpressionEditor
+                                key={field.key}
+                                ref={exprRef}
+                                anchorRef={typeBrowserRef}
+                                name={name}
+                                startAdornment={<EditorRibbon onClick={toggleTypeHelperPaneState} />}
+                                completions={types}
+                                showDefaultCompletion={showDefaultCompletion}
+                                getDefaultCompletion={() => getDefaultCompletion(value)}
+                                value={value}
+                                ariaLabel={field.label}
+                                onChange={async (updatedValue: string, updatedCursorPosition: number) => {
+                                    if (updatedValue === value) {
+                                        return;
+                                    }
+
+                                    onChange(updatedValue);
+                                    debouncedTypeEdit(updatedValue);
+                                    cursorPositionRef.current = updatedCursorPosition;
+
+                                    // Check if type is optional and update state
+                                    const isOptional = checkTypeOptional(updatedValue);
+                                    setIsTypeOptional(isOptional);
+
+                                    // Check if the new type is a GraphQL scalar type
+                                    const isScalar = isGraphQLScalarType(updatedValue);
+                                    setShowGraphqlCheckbox(isScalar);
+
+                                    // If the type is not a scalar, reset the GraphQL ID checkbox
+                                    if (!isScalar) {
+                                        setIsGraphqlId(false);
+                                        form.setValue(`isGraphqlId`, false, { shouldValidate: false, shouldDirty: true });
+                                    }
+
+                                    // Set show default completion
+                                    const typeExists = referenceTypes.find((type) => type.label === updatedValue);
+
+                                    if (getExpressionEditorDiagnostics) {
+                                        const required = !field.optional;
+
+                                        getExpressionEditorDiagnostics(
+                                            (required ?? !field.optional) || updatedValue !== '',
+                                            updatedValue,
+                                            field.key,
+                                            getPropertyFromFormField(field)
+                                        );
+                                    }
+
+                                    handleNewTypeSelected && handleNewTypeSelected(typeExists ? typeExists : updatedValue)
+                                    const validTypeForCreation = updatedValue.match(/^[a-zA-Z_'][a-zA-Z0-9_]*$/);
+                                    if (updatedValue && !typeExists && validTypeForCreation) {
+                                        setShowDefaultCompletion(true);
+                                    } else {
+                                        setShowDefaultCompletion(false);
+                                    }
+
+                                    // Retrieve types
+                                    await retrieveVisibleTypes(
+                                        updatedValue,
+                                        updatedCursorPosition,
+                                        false,
+                                        field.valueTypeConstraint as string,
+                                        field.key
+                                    );
+                                }}
+                                onCompletionSelect={handleCompletionSelect}
+                                onDefaultCompletionSelect={() => handleDefaultCompletionSelect(value)}
+                                onFocus={() => handleFocus(value)}
+                                enableExIcon={false}
+                                isHelperPaneOpen={isTypeHelperOpen}
+                                changeHelperPaneState={handleChangeTypeHelperState}
+                                getHelperPane={handleGetTypeHelper}
+                                helperPaneOrigin={typeHelperOrigin}
+                                helperPaneHeight={typeHelperHeight}
+                                onBlur={handleBlur}
+                                onSave={onSave}
+                                onCancel={handleCancel}
+                                placeholder={field.placeholder}
+                                autoFocus={autoFocus}
+                                sx={{ paddingInline: '0' }}
+                                helperPaneZIndex={40001}
+                            />
+                            {error?.message && <ErrorBanner errorMsg={error.message.toString()} />}
+
+                            {/* GraphQL ID Checkbox - only shown for scalar types */}
+                            {showGraphqlCheckbox ? (
+                                    <div style={{ marginBottom: '8px', marginTop: '8px' }}>
+                                        <CheckBoxBoxGroup>
+                                            <CheckBox
+                                                label=""
+                                                checked={isGraphqlId}
+                                                onChange={(checked) => handleGraphqlIdChange(checked)}
+                                                data-testid="graphql-id-checkbox"
+                                            />
+                                            <CheckBoxLabelGroup>
+                                                <CheckBoxLabel>ID Type</CheckBoxLabel>
+                                                <CheckBoxDescription>
+                                                    Mark this field as a GraphQL ID type
+                                                </CheckBoxDescription>
+                                            </CheckBoxLabelGroup>
+                                        </CheckBoxBoxGroup>
+                                    </div>
+                                ) : null
+                            }
+                        </div>
+                    );
+                }}
+            />
+        </S.Container>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/AutoCompleteEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/AutoCompleteEditor.tsx
new file mode 100644
index 00000000000..7d7238fcad7
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/AutoCompleteEditor.tsx
@@ -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 React, { useEffect } from "react";
+
+import { AutoComplete } from "@wso2/ui-toolkit";
+
+import { FormField } from "../Form/types";
+import { capitalize, getValueForDropdown } from "./utils";
+import { useFormContext } from "../../context";
+import { SubPanel, SubPanelView } from "@wso2/ballerina-core";
+
+interface AutoCompleteEditorProps {
+    field: FormField;
+    openSubPanel?: (subPanel: SubPanel) => void;
+}
+
+export function AutoCompleteEditor(props: AutoCompleteEditorProps) {
+    const { field, openSubPanel } = props;
+    const { form } = useFormContext();
+    const { register, setValue, watch } = form;
+
+    const value = watch(field.key);
+
+    return (
+        <AutoComplete
+            id={field.key}
+            description={field.documentation}
+            value={value as string}
+            {...register(field.key, { required: !field.optional, value: getValueForDropdown(field) })}
+            label={capitalize(field.label)}
+            items={field.items}
+            allowItemCreate={true}
+            required={!field.optional}
+            disabled={!field.editable}
+            onValueChange={(val: string) => {
+                setValue(field.key, val);
+                field.onValueChange?.(val);
+            }}
+            sx={{
+                marginRight: "-4px",
+                "& [id='dropdown-container']": {
+                    width: "292px",
+                }
+            }}
+        />
+    );
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/CheckBoxConditionalEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/CheckBoxConditionalEditor.tsx
new file mode 100644
index 00000000000..e35afc239bf
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/CheckBoxConditionalEditor.tsx
@@ -0,0 +1,216 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { FormField } from "../Form/types";
+import { CheckBoxGroup, FormCheckBox } from "@wso2/ui-toolkit";
+import styled from "@emotion/styled";
+import { EditorFactory } from "./EditorFactory";
+import { useFormContext } from "../../context";
+import { PropertyModel } from "@wso2/ballerina-core";
+
+const Form = styled.div`
+    display: grid;
+    gap: 20px;
+    width: 100%;
+`;
+
+const FormSection = styled.div`
+    display: grid;
+    gap: 20px;
+    width: 100%;
+`;
+
+const Label = styled.div`
+    font-family: var(--font-family);
+    color: var(--vscode-editor-foreground);
+    text-align: left;
+    text-transform: capitalize;
+`;
+const Description = styled.div`
+    font-family: var(--font-family);
+    color: var(--vscode-list-deemphasizedForeground);
+    text-align: left;
+`;
+const LabelGroup = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+`;
+const BoxGroup = styled.div`
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: flex-start;
+    gap: 10px;
+`;
+
+interface CheckBoxConditionalEditorProps {
+    field: FormField;
+}
+
+export function CheckBoxConditionalEditor(props: CheckBoxConditionalEditorProps) {
+    const { field } = props;
+    const { form } = useFormContext();
+    const { register, control, watch } = form;
+    const [checkedStateFields, setCheckedStateFields] = useState<FormField[]>([]);
+    const [uncheckedStateFields, setUncheckedStateFields] = useState<FormField[]>([]);
+
+    const { setValue } = form;
+
+    const checked = watch(field.key, true);
+
+    useEffect(() => {
+        if (field.choices && field.choices.length > 1) {
+            // first choice is for checked state, second is for unchecked state
+            const mappedCheckedStateFields = mapPropertiesToFormFields(field.choices[0].properties || {});
+            setCheckedStateFields(mappedCheckedStateFields);
+
+            const mappedUncheckedStateFields = mapPropertiesToFormFields(field.choices[1].properties || {});
+            setUncheckedStateFields(mappedUncheckedStateFields);
+        }
+    }, [field]);
+
+    // Add useEffect to set initial values
+    useEffect(() => {
+        if (checkedStateFields.length > 0) {
+            Object.entries(checkedStateFields).forEach(([_, propValue]) => {
+                if (propValue.value !== undefined) {
+                    setValue(propValue.key, propValue.value);
+                }
+            });
+        }
+    }, [checkedStateFields]);
+
+    // Add useEffect to set initial values
+    useEffect(() => {
+        if (uncheckedStateFields.length > 0) {
+            Object.entries(uncheckedStateFields).forEach(([_, propValue]) => {
+                if (propValue.value !== undefined) {
+                    setValue(propValue.key, propValue.value);
+                }
+            }
+            );
+        }
+    }, [uncheckedStateFields]);
+
+    return (
+        <Form>
+            <CheckBoxGroup containerSx={{ width: "100%" }}>
+                <BoxGroup>
+                    <FormCheckBox
+                        name={field.key}
+                        {...register(field.key, { value: getBooleanValue(field, field.value) })}
+                        control={control as any}
+                    />
+                    <LabelGroup>
+                        <Label>{field.label}</Label>
+                        <Description>{field.documentation}</Description>
+                    </LabelGroup>
+                </BoxGroup>
+            </CheckBoxGroup>
+            <FormSection>
+                {checked && checkedStateFields.length > 0 && (
+                    <>
+                        {checkedStateFields.map((dfield, index) => (
+                            <EditorFactory
+                                key={dfield.key}
+                                field={dfield}
+                                autoFocus={index === 0 ? true : false}
+                            />
+                        ))}
+                    </>
+                )}
+                {!checked && uncheckedStateFields.length > 0 && (
+                    <>
+                        {uncheckedStateFields.map((dfield, index) => (
+                            <EditorFactory
+                                key={dfield.key}
+                                field={dfield}
+                                autoFocus={index === 0 ? true : false}
+                            />
+                        ))}
+                    </>
+                )}
+            </FormSection>
+        </Form>
+
+    );
+
+}
+
+function getBooleanValue(field: FormField, value: any) {
+    if (field.type === "FLAG") {
+        return value === "true" || value === true;
+    }
+    return value;
+}
+
+
+/**
+ * Maps the properties to an array of FormField objects.
+ * 
+ * @param properties The properties to map.
+ * @returns An array of FormField objects.
+ */
+function mapPropertiesToFormFields(properties: { [key: string]: PropertyModel; }): FormField[] {
+    if (!properties) return [];
+
+    return Object.entries(properties).map(([key, property]) => {
+
+        // Determine value for MULTIPLE_SELECT
+        let value: any = property.value;
+        if (property.valueType === "MULTIPLE_SELECT") {
+            if (property.values && property.values.length > 0) {
+                value = property.values;
+            } else if (property.value) {
+                value = [property.value];
+            } else if (property.items && property.items.length > 0) {
+                value = [property.items[0]];
+            } else {
+                value = [];
+            }
+        }
+
+        let items = undefined;
+        if (property.valueType === "MULTIPLE_SELECT" || property.valueType === "SINGLE_SELECT") {
+            items = property.items;
+        }
+
+        return {
+            key,
+            label: property?.metadata?.label,
+            type: property.valueType,
+            documentation: property?.metadata?.description || "",
+            valueType: property.valueTypeConstraint,
+            editable: true,
+            enabled: property.enabled ?? true,
+            optional: property.optional,
+            value,
+            valueTypeConstraint: property.valueTypeConstraint,
+            advanced: property.advanced,
+            diagnostics: [],
+            items,
+            choices: property.choices,
+            placeholder: property.placeholder,
+            addNewButton: property.addNewButton,
+            lineRange: property?.codedata?.lineRange,
+            advanceProps: mapPropertiesToFormFields(property.properties)
+        } as FormField;
+    });
+}
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 6e8667ab960..d69774536af 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/CheckBoxEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/CheckBoxEditor.tsx
@@ -53,7 +53,7 @@ interface TextEditorProps {
 export function CheckBoxEditor(props: TextEditorProps) {
     const { field } = props;
     const { form } = useFormContext();
-    const { register, control } = form;
+    const { register, control, setValue } = form;
 
     const getBooleanValue = (value: any) => {
         if (field.type === "FLAG") {
@@ -62,13 +62,22 @@ export function CheckBoxEditor(props: TextEditorProps) {
         return value;
     };
 
+    const handleChange = (e: any) => {
+        const checked = e.target.value;
+        setValue(field.key, checked);
+        field.onValueChange?.(checked);
+    };
+
     return (
         <CheckBoxGroup containerSx={{ width: "100%" }}>
             <BoxGroup>
-                <FormCheckBox 
-                    name={field.key} 
-                    {...register(field.key, { value: getBooleanValue(field.value) })} 
-                    control={control as any} 
+                <FormCheckBox
+                    name={field.key}
+                    {...register(field.key, {
+                        value: getBooleanValue(field.value),
+                        onChange: handleChange
+                    })}
+                    control={control as any}
                 />
                 <LabelGroup>
                     <Label>{field.label}</Label>
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ChoiceForm.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ChoiceForm.tsx
index b4fe58cdc36..5cbe6bfe7a6 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ChoiceForm.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ChoiceForm.tsx
@@ -79,6 +79,10 @@ export function ChoiceForm(props: ChoiceFormProps) {
         const formFields: FormField[] = [];
         for (const key in model.properties) {
             const expression = model.properties[key];
+            let items = undefined;
+            if (expression.valueType === "MULTIPLE_SELECT" || expression.valueType === "SINGLE_SELECT") {
+                items = expression.items;
+            }
             const formField: FormField = {
                 key: key,
                 label: expression?.metadata.label || key.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, str => str.toUpperCase()),
@@ -92,7 +96,7 @@ export function ChoiceForm(props: ChoiceFormProps) {
                 valueTypeConstraint: expression.valueTypeConstraint,
                 advanced: expression.advanced,
                 diagnostics: [],
-                items: expression.valueType === "SINGLE_SELECT" ? [""].concat(expression.items) : expression.items,
+                items,
                 choices: expression.choices,
                 placeholder: expression.placeholder,
                 defaultValue: expression.defaultValue as string
@@ -109,7 +113,7 @@ export function ChoiceForm(props: ChoiceFormProps) {
                 <RadioButtonGroup
                     id="choice-options"
                     label={field.documentation}
-                    defaultValue={1}
+                    defaultValue={selectedOption}
                     defaultChecked={true}
                     value={selectedOption}
                     options={field.choices.map((choice, index) => ({ id: index.toString(), value: index + 1, content: choice.metadata.label }))}
@@ -125,11 +129,12 @@ export function ChoiceForm(props: ChoiceFormProps) {
             </ChoiceSection>
 
             <FormSection>
-                {dynamicFields.map((dfield) => {
+                {dynamicFields.map((dfield, index) => {
                     return (
                         <EditorFactory
                             key={dfield.key}
                             field={dfield}
+                            autoFocus={index === 0 ? true : false}
                             recordTypeFields={recordTypeFields}
                         />
                     );
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/CustomDropdownEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/CustomDropdownEditor.tsx
index 173442a7548..2150283ec37 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/CustomDropdownEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/CustomDropdownEditor.tsx
@@ -20,7 +20,7 @@
 // so, created new custom dropdown editor for this purpose and keep previous one for other forms.
 // update the editor factory to use this component for enum and single select fields.
 
-import React, { useEffect, useState } from "react";
+import React from "react";
 import styled from "@emotion/styled";
 
 import { Dropdown } from "@wso2/ui-toolkit";
@@ -29,19 +29,10 @@ import { FormField } from "../Form/types";
 import { capitalize, getValueForDropdown } from "./utils";
 import { useFormContext } from "../../context";
 import { SubPanel, SubPanelView } from "@wso2/ballerina-core";
-import { McpToolsSelection } from "./McpToolsSelection";
 
 interface CustomDropdownEditorProps {
     field: FormField;
     openSubPanel?: (subPanel: SubPanel) => void;
-    // Additional props for MCP tools functionality
-    serviceUrl?: string;
-    configs?: object;
-    rpcClient?: any;
-    onToolsChange?: (selectedTools: string[]) => void;
-    renderToolsSelection?: () => React.ReactNode;
-    newServerUrl?: string;
-    mcpTools?: { name: string; description?: string }[];
 }
 
 const DropdownStack = styled.div`
@@ -55,58 +46,9 @@ const DropdownSpacer = styled.div`
 `;
 
 export function CustomDropdownEditor(props: CustomDropdownEditorProps) {
-    const { field, openSubPanel, newServerUrl } = props;
+    const { field, openSubPanel } = props;
     const { form } = useFormContext();
-    const { register, setValue, watch } = form;
-    const [mcpTools, setMcpTools] = useState<{ name: string; description?: string }[]>(props.mcpTools || []);
-
-    // Sync mcpTools state with props.mcpTools
-    useEffect(() => {
-        if (props.mcpTools) {
-            setMcpTools(props.mcpTools);
-        }
-    }, [props.mcpTools]);
-    const [selectedMcpTools, setSelectedMcpTools] = useState<Set<string>>(new Set());
-    const [loadingMcpTools, setLoadingMcpTools] = useState(false);
-    const [mcpToolsError, setMcpToolsError] = useState<string>("");
-    const toolSelection = watch(field.key);
-    const [localServiceUrl, setLocalServiceUrl] = useState<string>("");
-
-    useEffect(() => {
-        if (newServerUrl && newServerUrl !== localServiceUrl) {
-            setLocalServiceUrl(newServerUrl);
-            console.log(">>> New server URL set:", newServerUrl);
-        }
-    }, [newServerUrl]);
-
-    const handleToolSelectionChange = (toolName: string, isSelected: boolean) => {
-        const newSelectedTools = new Set(selectedMcpTools);
-        if (isSelected) {
-            newSelectedTools.add(toolName);
-        } else {
-            newSelectedTools.delete(toolName);
-        }
-        setSelectedMcpTools(newSelectedTools);
-        // Call the callback with the updated selection
-        props.onToolsChange?.(Array.from(newSelectedTools));
-    };
-
-    const handleSelectAllTools = () => {
-        let newSelectedTools: Set<string>;
-        if (selectedMcpTools.size === mcpTools.length) {
-            newSelectedTools = new Set();
-        } else {
-            newSelectedTools = new Set(mcpTools.map(tool => tool.name));
-        }
-        setSelectedMcpTools(newSelectedTools);
-        // Call the callback with the updated selection
-        props.onToolsChange?.(Array.from(newSelectedTools));
-    };
-
-    // Call onToolsChange whenever selectedMcpTools changes
-    useEffect(() => {
-        props.onToolsChange?.(Array.from(selectedMcpTools));
-    }, [selectedMcpTools]);
+    const { register, setValue } = form;
 
     const showScopeControls = field.key === "toolsToInclude";
 
@@ -135,17 +77,6 @@ export function CustomDropdownEditor(props: CustomDropdownEditorProps) {
                     addNewBtnClick={field.addNewButton ? () => openSubPanel({ view: SubPanelView.ADD_NEW_FORM }) : undefined}
                 />
                 <DropdownSpacer />
-                {toolSelection === "Selected" && (
-                    <McpToolsSelection
-                        tools={props.mcpTools ?? mcpTools}
-                        selectedTools={selectedMcpTools}
-                        loading={loadingMcpTools}
-                        error={mcpToolsError}
-                        onToolSelectionChange={handleToolSelectionChange}
-                        onSelectAll={handleSelectAllTools}
-                        serviceUrl={localServiceUrl}
-                    />
-                )}
             </DropdownStack>
         );
     }
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/DropdownChoiceForm.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/DropdownChoiceForm.tsx
index 9a64c434a41..351252ce02d 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/DropdownChoiceForm.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/DropdownChoiceForm.tsx
@@ -91,12 +91,13 @@ export function DropdownChoiceForm(props: DropdownChoiceFormProps) {
                 />
             </ChoiceSection>
             <FormSection>
-                {dynamicFields.map((dfield) => {
+                {dynamicFields.map((dfield, index) => {
                     if (!dfield.advanced && !dfield.optional) {
                         return (
                             <EditorFactory
                                 key={dfield.key}
                                 field={dfield}
+                                autoFocus={index === 0 ? true : false}
                             />
                         );
                     }
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/DropdownEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/DropdownEditor.tsx
index 53141e52b04..f0d82ea0705 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/DropdownEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/DropdownEditor.tsx
@@ -47,13 +47,29 @@ export function DropdownEditor(props: DropdownEditorProps) {
         field.items = ["Global", "Local"];
     }
 
+    // Handle items: string[] or { label, value }[]
+    let dropdownItems;
+    if (field.itemOptions) {
+        dropdownItems = field.itemOptions;
+    } else if (Array.isArray(field.items) && field.items.length > 0) {
+        if (typeof field.items[0] === "string") {
+            dropdownItems = field.items.map((item) => ({ id: item, content: item, value: item }));
+        } else if (typeof field.items[0] === "object" && field.items[0] !== null && "label" in field.items[0] && "value" in field.items[0]) {
+            dropdownItems = field.items.map((item: any) => ({ id: item.value, content: item.label, value: item.value }));
+        } else {
+            dropdownItems = [];
+        }
+    } else {
+        dropdownItems = [];
+    }
+
     return (
         <Dropdown
             id={field.key}
             description={field.documentation}
             {...register(field.key, { required: !field.optional, value: getValueForDropdown(field) })}
             label={capitalize(field.label)}
-            items={field.itemOptions ? field.itemOptions : field.items?.map((item) => ({ id: item, content: item, value: item }))}
+            items={dropdownItems}
             required={!field.optional}
             disabled={!field.editable}
             onChange={(e) => {
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 7ee5730e912..85ca9aa36af 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/EditorFactory.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/EditorFactory.tsx
@@ -44,6 +44,9 @@ import { HeaderSetEditor } from "./HeaderSetEditor";
 import { CompletionItem } from "@wso2/ui-toolkit";
 import { CustomDropdownEditor } from "./CustomDropdownEditor";
 import { ActionExpressionEditor } from "./ActionExpressionEditor";
+import { CheckBoxConditionalEditor } from "./CheckBoxConditionalEditor";
+import { ActionTypeEditor } from "./ActionTypeEditor";
+import { AutoCompleteEditor } from "./AutoCompleteEditor";
 
 interface FormFieldEditorProps {
     field: FormField;
@@ -52,17 +55,16 @@ interface FormFieldEditorProps {
     openSubPanel?: (subPanel: SubPanel) => void;
     subPanelView?: SubPanelView;
     handleOnFieldFocus?: (key: string) => void;
+    onBlur?: () => void | Promise<void>;
     autoFocus?: boolean;
     handleOnTypeChange?: () => void;
     recordTypeFields?: RecordTypeField[];
     onIdentifierEditingStateChange?: (isEditing: boolean) => void;
     setSubComponentEnabled?: (isAdding: boolean) => void;
     handleNewTypeSelected?: (type: string | CompletionItem) => void;
-
     scopeFieldAddon?: React.ReactNode;
-    newServerUrl?: string;
-    mcpTools?: { name: string; description?: string }[];
-    onToolsChange?: (selectedTools: string[]) => void;
+    isContextTypeEditorSupported?: boolean;
+    openFormTypeEditor?: (open: boolean, newType?: string) => void;
 }
 
 export const EditorFactory = (props: FormFieldEditorProps) => {
@@ -73,15 +75,18 @@ export const EditorFactory = (props: FormFieldEditorProps) => {
         openSubPanel,
         subPanelView,
         handleOnFieldFocus,
+        onBlur,
         autoFocus,
         handleOnTypeChange,
         recordTypeFields,
         onIdentifierEditingStateChange,
         setSubComponentEnabled,
         handleNewTypeSelected,
-        scopeFieldAddon,
-        newServerUrl
+        isContextTypeEditorSupported,
+        openFormTypeEditor,
+        scopeFieldAddon
     } = props;
+
     if (!field.enabled || field.hidden) {
         return <></>;
     } else if (field.type === "MULTIPLE_SELECT") {
@@ -113,27 +118,38 @@ export const EditorFactory = (props: FormFieldEditorProps) => {
     } else if (field.type === "EXPRESSION" && field.key === "resourcePath") {
         // HACK: this should fixed with the LS API. this is used to avoid the expression editor for resource path field.
         return <TextEditor field={field} handleOnFieldFocus={handleOnFieldFocus} />;
-    } else if (field.type.toUpperCase() === "ENUM" && props.mcpTools) {
-        // TODO: this is a temporary solution to handle the enum field with MCP tools.
-        return <CustomDropdownEditor field={field} mcpTools={props.mcpTools} onToolsChange={props.onToolsChange} />;
     } else if (field.type.toUpperCase() === "ENUM") {
         // Enum is a dropdown field
         return <DropdownEditor field={field} openSubPanel={openSubPanel} />;
+    } else if (field.type.toUpperCase() === "AUTOCOMPLETE") {
+        return <AutoCompleteEditor field={field} openSubPanel={openSubPanel} />;
+    } else if (field.type === "CUSTOM_DROPDOWN") {
+        return <CustomDropdownEditor field={field} openSubPanel={openSubPanel} />;
     } else if (field.type === "FILE_SELECT" && field.editable) {
         return <FileSelect field={field} />;
-    } else if (field.type === "SINGLE_SELECT" && field.editable && props.mcpTools) {
-        // TODO: this is a temporary solution to handle the single select field with MCP tools.
-        return <CustomDropdownEditor field={field} openSubPanel={openSubPanel} newServerUrl={newServerUrl} mcpTools={props.mcpTools} onToolsChange={props.onToolsChange} />;
     } else if (field.type === "SINGLE_SELECT" && field.editable) {
         return <DropdownEditor field={field} openSubPanel={openSubPanel} />;
+    } else if (!field.items && (field.type === "ACTION_TYPE") && field.editable) {
+        return (
+            <ActionTypeEditor
+                field={field}
+                openRecordEditor={openRecordEditor}
+                handleOnFieldFocus={handleOnFieldFocus}
+                autoFocus={autoFocus}
+                handleOnTypeChange={handleOnTypeChange}
+                handleNewTypeSelected={handleNewTypeSelected}
+            />
+        );
     } else if (!field.items && (field.key === "type" || field.type === "TYPE") && field.editable) {
-        // Type field is a type editor
         return (
             <TypeEditor
                 field={field}
                 openRecordEditor={openRecordEditor}
+                openFormTypeEditor={openFormTypeEditor}
+                isContextTypeEditorSupported={isContextTypeEditorSupported}
                 handleOnFieldFocus={handleOnFieldFocus}
                 autoFocus={autoFocus}
+                onBlur={onBlur}
                 handleOnTypeChange={handleOnTypeChange}
                 handleNewTypeSelected={handleNewTypeSelected}
 
@@ -147,6 +163,7 @@ export const EditorFactory = (props: FormFieldEditorProps) => {
                 openSubPanel={openSubPanel}
                 subPanelView={subPanelView}
                 handleOnFieldFocus={handleOnFieldFocus}
+                onBlur={onBlur}
                 autoFocus={autoFocus}
                 recordTypeField={recordTypeFields?.find(recordField => recordField.key === field.key)}
             />
@@ -175,7 +192,7 @@ export const EditorFactory = (props: FormFieldEditorProps) => {
     } else if (field.type !== "IDENTIFIER" && !field.editable) {
         return <ReadonlyField field={field} />;
     } else if (field.type === "IDENTIFIER" && field.editable) {
-        return <IdentifierField field={field} handleOnFieldFocus={handleOnFieldFocus} autoFocus={autoFocus} />;
+        return <IdentifierField field={field} handleOnFieldFocus={handleOnFieldFocus} autoFocus={autoFocus} onBlur={onBlur} />;
     } 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") {
@@ -189,6 +206,13 @@ export const EditorFactory = (props: FormFieldEditorProps) => {
                 recordTypeField={recordTypeFields?.find(recordField => recordField.key === field.key)}
             />
         );
+    } else if (field.type === "CONDITIONAL_FIELDS" && field.editable) {
+        // Conditional fields is a group of fields which are conditionally shown based on a checkbox field
+        return (
+            <CheckBoxConditionalEditor
+                field={field}
+            />
+        );
     } else {
         // Default to text editor
         // Readonly fields are also treated as text editor
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/ExpandedEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/ExpandedEditor.tsx
new file mode 100644
index 00000000000..85330799795
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/ExpandedEditor.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 React, { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import styled from "@emotion/styled";
+import { ThemeColors, Divider, Typography } from "@wso2/ui-toolkit";
+import { FormField } from "../../Form/types";
+import { EditorMode } from "./modes/types";
+import { TextMode } from "./modes/TextMode";
+import { PromptMode } from "./modes/PromptMode";
+import { CompressButton } from "../MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingButtonIcons";
+
+interface ExpandedPromptEditorProps {
+    isOpen: boolean;
+    field: FormField;
+    value: string;
+    onClose: () => void;
+    onSave: (value: string) => 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;
+    background-color: color-mix(in srgb, ${ThemeColors.SECONDARY_CONTAINER} 70%, transparent);
+    font-family: GilmerRegular;
+`;
+
+const ModalBox = styled.div`
+    width: 1000px;
+    max-width: 95vw;
+    min-width: 800px;
+    height: 80vh;
+    max-height: 90vh;
+    min-height: 600px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    padding: 8px 8px;
+    border-radius: 3px;
+    background-color: ${ThemeColors.SURFACE_DIM};
+    box-shadow: 0 3px 8px rgb(0 0 0 / 0.2);
+    z-index: 30001;
+    resize: both;
+`;
+
+const ModalHeaderSection = styled.header`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: 16px;
+    margin-bottom: 4px;
+`;
+
+const ModalContent = styled.div`
+    flex: 1;
+    overflow-y: auto;
+    padding: 18px 16px;
+    display: flex;
+    flex-direction: column;
+`;
+
+
+/**
+ * Map of mode components - add new modes here
+ */
+const MODE_COMPONENTS: Record<EditorMode, React.ComponentType<any>> = {
+    text: TextMode,
+    prompt: PromptMode
+};
+
+export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
+    isOpen,
+    field,
+    value,
+    onClose,
+    onSave,
+}) => {
+    const [editedValue, setEditedValue] = useState(value);
+    const promptFields = ["query", "instructions", "role"];
+    const defaultMode: EditorMode = promptFields.includes(field.key) ? "prompt" : "text";
+    const [mode] = useState<EditorMode>(defaultMode);
+    const [showPreview, setShowPreview] = useState(false);
+    const [mouseDownTarget, setMouseDownTarget] = useState<EventTarget | null>(null);
+
+    useEffect(() => {
+        setEditedValue(value);
+    }, [value, isOpen]);
+
+    useEffect(() => {
+        if (mode === "text") {
+            setShowPreview(false);
+        }
+    }, [mode]);
+
+    const handleMinimize = () => {
+        onSave(editedValue);
+        onClose();
+    };
+
+    const handleBackdropMouseDown = (e: React.MouseEvent) => {
+        setMouseDownTarget(e.target);
+    };
+
+    const handleBackdropClick = (e: React.MouseEvent) => {
+        // Only close if both mousedown and click happened on the backdrop
+        if (e.target === e.currentTarget && mouseDownTarget === e.currentTarget) {
+            handleMinimize();
+        }
+        setMouseDownTarget(null);
+    };
+
+    if (!isOpen) return null;
+
+    // Get the current mode component
+    const ModeComponent = MODE_COMPONENTS[mode];
+
+    // Prepare props for the mode component
+    const modeProps = {
+        value: editedValue,
+        onChange: setEditedValue,
+        field,
+        // Props for modes with preview support
+        ...(mode === "prompt" && {
+            isPreviewMode: showPreview,
+            onTogglePreview: () => setShowPreview(!showPreview)
+        })
+    };
+
+    return createPortal(
+        <ModalContainer onMouseDown={handleBackdropMouseDown} onClick={handleBackdropClick}>
+            <ModalBox onClick={(e) => e.stopPropagation()}>
+                <ModalHeaderSection>
+                    <Typography variant="h3">{field.label}</Typography>
+                    <div onClick={handleMinimize} title="Minimize" style={{ cursor: 'pointer' }}>
+                        <CompressButton />
+                    </div>
+                </ModalHeaderSection>
+                <div style={{ padding: "0 16px" }}>
+                    <Divider sx={{ margin: 0 }} />
+                </div>
+                <ModalContent>
+                    <ModeComponent {...modeProps} />
+                </ModalContent>
+            </ModalBox>
+        </ModalContainer>,
+        document.body
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/controls/MarkdownPreview.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/controls/MarkdownPreview.tsx
new file mode 100644
index 00000000000..e3404efe75a
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/controls/MarkdownPreview.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 React from "react";
+import styled from "@emotion/styled";
+import { ThemeColors } from "@wso2/ui-toolkit";
+import ReactMarkdown from "react-markdown";
+
+const PreviewContainer = styled.div`
+    width: 100%;
+    height: 100%;
+    padding: 12px;
+    fontSize: 14px;
+    font-family: var(--vscode-editor-font-family);
+    background: var(--input-background);
+    color: ${ThemeColors.ON_SURFACE};
+    border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    overflow-y: auto;
+    overflow-x: auto;
+    box-sizing: border-box;
+
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: break-word;
+
+    p, li, td, th, blockquote {
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+    }
+
+    pre {
+        overflow-x: auto;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+    
+    code {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+`;
+
+interface MarkdownPreviewProps {
+    /** Markdown content to render */
+    content: string;
+}
+
+/**
+ * Markdown preview component that renders markdown content
+ */
+export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({ content }) => {
+    return (
+        <PreviewContainer>
+            <ReactMarkdown
+                components={{
+                    // Prevent rendering of potentially dangerous elements
+                    script: () => null,
+                    iframe: () => null,
+                }}
+                disallowedElements={['script', 'iframe', 'object', 'embed']}
+                unwrapDisallowed={true}
+            >
+                {content}
+            </ReactMarkdown>
+        </PreviewContainer>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/controls/MarkdownToolbar.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/controls/MarkdownToolbar.tsx
new file mode 100644
index 00000000000..09bd74955aa
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/controls/MarkdownToolbar.tsx
@@ -0,0 +1,193 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, Icon, Switch } from "@wso2/ui-toolkit";
+import "@github/markdown-toolbar-element";
+
+// Type declarations for GitHub markdown toolbar custom elements
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'markdown-toolbar': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & { for?: string }, HTMLElement>;
+            'md-bold': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'md-italic': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'md-code': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'md-link': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'md-header': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & { 'data-md-header'?: string }, HTMLElement>;
+            'md-quote': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'md-unordered-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'md-ordered-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'md-task-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'md-code-block': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+const ToolbarContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px;
+    padding: 8px 12px;
+    border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+    border-radius: 4px 4px 0 0;
+    flex-wrap: wrap;
+    font-family: GilmerMedium;
+
+    markdown-toolbar {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-wrap: wrap;
+    }
+`;
+
+const ToolbarButton = styled.button`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    background-color: transparent;
+    color: ${ThemeColors.ON_SURFACE};
+    border: 1px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover:not(:disabled) {
+        background-color: ${ThemeColors.SECONDARY_CONTAINER};
+        border-color: ${ThemeColors.OUTLINE};
+    }
+
+    &:active:not(:disabled) {
+        background-color: ${ThemeColors.SECONDARY_CONTAINER};
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    &:focus-visible {
+        outline: 2px solid ${ThemeColors.PRIMARY};
+        outline-offset: 2px;
+    }
+`;
+
+const ToolbarDivider = styled.div`
+    width: 1px;
+    height: 24px;
+    background-color: ${ThemeColors.OUTLINE_VARIANT};
+    margin: 0 4px;
+`;
+
+interface MarkdownToolbarProps {
+    /** ID of the textarea this toolbar controls */
+    textareaId: string;
+    /** Whether preview mode is active */
+    isPreviewMode?: boolean;
+    /** Callback to toggle preview mode */
+    onTogglePreview?: () => void;
+}
+
+/**
+ * Markdown formatting toolbar using GitHub's markdown-toolbar-element
+ * Provides buttons for common markdown formatting operations
+ */
+export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
+    textareaId,
+    isPreviewMode = false,
+    onTogglePreview
+}) => {
+    return (
+        <ToolbarContainer>
+            <markdown-toolbar for={textareaId}>
+                <md-bold>
+                    <ToolbarButton title="Bold" disabled={isPreviewMode}>
+                        <Icon name="bi-bold" sx={{ width: "20px", height: "20px", fontSize: "20px" }} />
+                    </ToolbarButton>
+                </md-bold>
+                <md-italic>
+                    <ToolbarButton title="Italic" disabled={isPreviewMode}>
+                        <Icon name="bi-italic" sx={{ width: "20px", height: "20px", fontSize: "20px" }} />
+                    </ToolbarButton>
+                </md-italic>
+                <md-code>
+                    <ToolbarButton title="Inline Code" disabled={isPreviewMode}>
+                        <Icon name="bi-code" sx={{ width: "20px", height: "20px", fontSize: "20px" }} />
+                    </ToolbarButton>
+                </md-code>
+                <md-link>
+                    <ToolbarButton title="Insert Link" disabled={isPreviewMode}>
+                        <Icon name="bi-link" sx={{ width: "20px", height: "20px", fontSize: "20px" }} />
+                    </ToolbarButton>
+                </md-link>
+
+                <ToolbarDivider />
+
+                <md-header data-md-header="3">
+                    <ToolbarButton title="Heading" disabled={isPreviewMode}>
+                        <Icon name="bi-heading" sx={{ width: "24px", height: "24px", fontSize: "24px" }} />
+                    </ToolbarButton>
+                </md-header>
+                <md-quote>
+                    <ToolbarButton title="Blockquote" disabled={isPreviewMode}>
+                        <Icon name="bi-quote" sx={{ width: "20px", height: "20px", fontSize: "20px" }} />
+                    </ToolbarButton>
+                </md-quote>
+
+                <ToolbarDivider />
+
+                <md-unordered-list>
+                    <ToolbarButton title="Bulleted List" disabled={isPreviewMode}>
+                        <Icon name="bi-bulleted" sx={{ width: "20px", height: "20px", fontSize: "20px" }} />
+                    </ToolbarButton>
+                </md-unordered-list>
+                <md-ordered-list>
+                    <ToolbarButton title="Numbered List" disabled={isPreviewMode}>
+                        <Icon name="bi-numbered" sx={{ width: "20px", height: "20px", fontSize: "20px" }} />
+                    </ToolbarButton>
+                </md-ordered-list>
+                <md-task-list>
+                    <ToolbarButton title="Task List" disabled={isPreviewMode}>
+                        <Icon name="bi-checklist" sx={{ width: "20px", height: "20px", fontSize: "20px" }} />
+                    </ToolbarButton>
+                </md-task-list>
+            </markdown-toolbar>
+
+            {onTogglePreview && (
+                <Switch
+                    checked={isPreviewMode}
+                    leftLabel="Edit"
+                    rightLabel="Preview"
+                    onChange={onTogglePreview}
+                    checkedColor="var(--vscode-button-background)"
+                    checkedBorder="1px solid color-mix(in srgb, var(--vscode-dropdown-border) 75%, transparent)"
+                    enableTransition={false}
+                    sx={{
+                        borderColor: ThemeColors.OUTLINE_VARIANT
+                    }}
+                />
+            )}
+        </ToolbarContainer>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/index.ts b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/index.ts
new file mode 100644
index 00000000000..662f369f6ae
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/index.ts
@@ -0,0 +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.
+ */
+
+export { ExpandedEditor } from "./ExpandedEditor";
+export type { EditorMode, EditorModeProps, EditorModeWithPreviewProps } from "./modes/types";
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/PromptMode.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/PromptMode.tsx
new file mode 100644
index 00000000000..6e0244bff2c
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/PromptMode.tsx
@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { EditorModeWithPreviewProps } from "./types";
+import { MarkdownToolbar } from "../controls/MarkdownToolbar";
+import { MarkdownPreview } from "../controls/MarkdownPreview";
+
+const TextArea = styled.textarea`
+    width: 100%;
+    height: 100%;
+    padding: 12px !important;
+    fontSize: 13px;
+    font-family: var(--vscode-editor-font-family);
+    background: var(--input-background);
+    color: ${ThemeColors.ON_SURFACE};
+    border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+    border-radius: 0 0 4px 4px;
+    border-top: none;
+    resize: none;
+    outline: none;
+    box-sizing: border-box;
+`;
+
+const TEXTAREA_ID = "prompt-textarea";
+
+/**
+ * Prompt mode editor - textarea with markdown toolbar and preview support
+ */
+export const PromptMode: React.FC<EditorModeWithPreviewProps> = ({
+    value,
+    onChange,
+    isPreviewMode,
+    onTogglePreview,
+    field
+}) => {
+    /**
+     * Handles Enter key to automatically continue lists (similar to GitHub comments)
+     */
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key !== 'Enter' || e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) {
+            return;
+        }
+
+        const textarea = e.currentTarget;
+        const cursorPosition = textarea.selectionStart;
+        const textBeforeCursor = value.substring(0, cursorPosition);
+        const textAfterCursor = value.substring(cursorPosition);
+
+        // Find the start of the current line
+        const lastNewlineIndex = textBeforeCursor.lastIndexOf('\n');
+        const currentLine = textBeforeCursor.substring(lastNewlineIndex + 1);
+
+        // Check for unordered list (- or *)
+        const unorderedMatch = currentLine.match(/^(\s*)([-*])\s+(.*)$/);
+        if (unorderedMatch) {
+            const [, indent, marker, content] = unorderedMatch;
+
+            // If the list item is empty (just the marker), remove it and exit list mode
+            if (!content.trim()) {
+                e.preventDefault();
+                const newValue = textBeforeCursor.substring(0, lastNewlineIndex + 1) + '\n' + textAfterCursor;
+                onChange(newValue);
+                // Set cursor position after both newlines
+                queueMicrotask(() => {
+                    textarea.selectionStart = textarea.selectionEnd = lastNewlineIndex + 2;
+                });
+                return;
+            }
+
+            // Continue the list
+            e.preventDefault();
+            const newValue = textBeforeCursor + '\n' + indent + marker + ' ' + textAfterCursor;
+            onChange(newValue);
+            // Set cursor position after the list marker
+            queueMicrotask(() => {
+                const newCursorPos = cursorPosition + indent.length + marker.length + 2;
+                textarea.selectionStart = textarea.selectionEnd = newCursorPos;
+            });
+            return;
+        }
+
+        // Check for ordered list (1., 2., etc.)
+        const orderedMatch = currentLine.match(/^(\s*)(\d+)\.\s+(.*)$/);
+        if (orderedMatch) {
+            const [, indent, number, content] = orderedMatch;
+
+            // If the list item is empty (just the number), remove it and exit list mode
+            if (!content.trim()) {
+                e.preventDefault();
+                const newValue = textBeforeCursor.substring(0, lastNewlineIndex + 1) + '\n' + textAfterCursor;
+                onChange(newValue);
+                // Set cursor position after both newlines
+                queueMicrotask(() => {
+                    textarea.selectionStart = textarea.selectionEnd = lastNewlineIndex + 2;
+                });
+                return;
+            }
+
+            // Continue the list with incremented number
+            e.preventDefault();
+            const nextNumber = parseInt(number, 10) + 1;
+            const newValue = textBeforeCursor + '\n' + indent + nextNumber + '. ' + textAfterCursor;
+            onChange(newValue);
+            // Set cursor position after the list marker
+            queueMicrotask(() => {
+                const newCursorPos = cursorPosition + indent.length + nextNumber.toString().length + 3;
+                textarea.selectionStart = textarea.selectionEnd = newCursorPos;
+            });
+            return;
+        }
+
+        // Check for task list (- [ ] or - [x])
+        const taskMatch = currentLine.match(/^(\s*)([-*])\s+\[([ x])\]\s+(.*)$/);
+        if (taskMatch) {
+            const [, indent, marker, , content] = taskMatch;
+
+            // If the task item is empty, remove it and exit list mode
+            if (!content.trim()) {
+                e.preventDefault();
+                const newValue = textBeforeCursor.substring(0, lastNewlineIndex + 1) + '\n' + textAfterCursor;
+                onChange(newValue);
+                // Set cursor position after both newlines
+                queueMicrotask(() => {
+                    textarea.selectionStart = textarea.selectionEnd = lastNewlineIndex + 2;
+                });
+                return;
+            }
+
+            // Continue the task list with unchecked box
+            e.preventDefault();
+            const newValue = textBeforeCursor + '\n' + indent + marker + ' [ ] ' + textAfterCursor;
+            onChange(newValue);
+            // Set cursor position after the task marker
+            queueMicrotask(() => {
+                const newCursorPos = cursorPosition + indent.length + marker.length + 6;
+                textarea.selectionStart = textarea.selectionEnd = newCursorPos;
+            });
+            return;
+        }
+    };
+
+    const placeholder = field.placeholder && field.placeholder.trim() !== "" && field.placeholder.trim() !== "\"\""
+        ? field.placeholder
+        : "Enter your text here...";
+
+    return (
+        <>
+            <MarkdownToolbar
+                textareaId={TEXTAREA_ID}
+                isPreviewMode={isPreviewMode}
+                onTogglePreview={() => onTogglePreview(!isPreviewMode)}
+            />
+            {isPreviewMode ? (
+                <MarkdownPreview content={value} />
+            ) : (
+                <TextArea
+                    id={TEXTAREA_ID}
+                    value={value}
+                    onChange={(e) => onChange(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder={placeholder}
+                    autoFocus
+                />
+            )}
+        </>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/TextMode.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/TextMode.tsx
new file mode 100644
index 00000000000..ed54d5b51f5
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/TextMode.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { EditorModeProps } from "./types";
+
+const TextArea = styled.textarea`
+    width: 100%;
+    height: 100%;
+    padding: 12px !important;
+    fontSize: 13px;
+    font-family: var(--vscode-editor-font-family);
+    background: var(--input-background);
+    color: ${ThemeColors.ON_SURFACE};
+    border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+    border-radius: 4px;
+    resize: none;
+    outline: none;
+    box-sizing: border-box;
+
+    &:focus {
+        border-color: ${ThemeColors.OUTLINE};
+        box-shadow: 0 0 0 1px ${ThemeColors.OUTLINE};
+    }
+`;
+
+/**
+ * Text mode editor - simple textarea without any formatting tools
+ */
+export const TextMode: React.FC<EditorModeProps> = ({ value, onChange, field }) => {
+    return (
+        <TextArea
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={field.placeholder || "Enter your text here..."}
+            autoFocus
+        />
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/types.ts b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/types.ts
new file mode 100644
index 00000000000..b2a812db9ff
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/types.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 { FormField } from "../../../Form/types";
+
+/**
+ * Base props that all editor mode components must implement
+ */
+export interface EditorModeProps {
+    /** Current value of the editor */
+    value: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+    /** Field metadata (for accessing field properties if needed) */
+    field: FormField;
+}
+
+/**
+ * Extended props for modes that support preview functionality (e.g., Prompt mode)
+ */
+export interface EditorModeWithPreviewProps extends EditorModeProps {
+    /** Whether preview mode is active */
+    isPreviewMode: boolean;
+    /** Callback to toggle preview mode */
+    onTogglePreview: (enabled: boolean) => void;
+}
+
+/**
+ * Mode type identifier
+ */
+export type EditorMode = "text" | "prompt";
+
+/**
+ * Map of mode identifiers to their display labels
+ */
+export const MODE_LABELS: Record<EditorMode, string> = {
+    text: "Text",
+    prompt: "Prompt"
+};
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 953e92dd51c..e609db98535 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx
@@ -17,7 +17,7 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
-import { Control, Controller, FieldValues, UseFormWatch } from 'react-hook-form';
+import { Control, Controller, FieldValues, UseFormWatch, UseFormSetValue } from 'react-hook-form';
 import styled from '@emotion/styled';
 import {
     Button,
@@ -26,13 +26,12 @@ import {
     FormExpressionEditor,
     FormExpressionEditorRef,
     HelperPaneHeight,
-    Icon,
     RequiredFormInput,
     ThemeColors,
     Tooltip
 } from '@wso2/ui-toolkit';
 import { getPropertyFromFormField, sanitizeType } from './utils';
-import { FormField, FormExpressionEditorProps } from '../Form/types';
+import { FormField, FormExpressionEditorProps, HelperpaneOnChangeOptions } from '../Form/types';
 import { useFormContext } from '../../context';
 import {
     LineRange,
@@ -42,6 +41,12 @@ import {
 } from '@wso2/ballerina-core';
 import ReactMarkdown from 'react-markdown';
 import { FieldProvider } from "./FieldContext";
+import ModeSwitcher from '../ModeSwitcher';
+import { ExpressionField } from './ExpressionField';
+import WarningPopup from '../WarningPopup';
+import { InputMode } from './MultiModeExpressionEditor/ChipExpressionEditor/types';
+import { getDefaultExpressionMode, getInputModeFromTypes } from './MultiModeExpressionEditor/ChipExpressionEditor/utils';
+import { ExpandedEditor } from './ExpandedEditor';
 
 export type ContextAwareExpressionEditorProps = {
     id?: string;
@@ -54,10 +59,11 @@ export type ContextAwareExpressionEditorProps = {
     openSubPanel?: (subPanel: SubPanel) => void;
     subPanelView?: SubPanelView;
     handleOnFieldFocus?: (key: string) => void;
+    onBlur?: () => void | Promise<void>;
     autoFocus?: boolean;
     recordTypeField?: RecordTypeField;
     helperPaneZIndex?: number;
-
+    isInExpandedMode?: boolean;
 };
 
 type diagnosticsFetchContext = {
@@ -70,6 +76,7 @@ type ExpressionEditorProps = ContextAwareExpressionEditorProps &
     FormExpressionEditorProps & {
         control: Control<FieldValues, any>;
         watch: UseFormWatch<any>;
+        setValue: UseFormSetValue<FieldValues>;
         targetLineRange?: LineRange;
         fileName: string;
     };
@@ -113,7 +120,8 @@ export namespace S {
     export const HeaderContainer = styled.div({
         display: 'flex',
         alignItems: 'flex-end',
-        justifyContent: 'space-between'
+        justifyContent: 'space-between',
+        minHeight: '26px'
     });
 
     export const Header = styled.div({
@@ -125,13 +133,13 @@ export namespace S {
     export const Type = styled.div<{ isVisible: boolean }>(({ isVisible }) => ({
         color: ThemeColors.PRIMARY,
         fontFamily: 'monospace',
-        fontSize: '12px',
+        fontSize: '10px',
         border: `1px solid ${ThemeColors.PRIMARY}`,
         borderRadius: '999px',
-        padding: '2px 8px',
+        padding: '1px 6px',
         display: 'inline-block',
         userSelect: 'none',
-        maxWidth: '148px',
+        maxWidth: '120px',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -175,11 +183,18 @@ export namespace S {
     `;
 
     export const DefaultValue = styled.span`
-        color: var(--vscode-textPreformat-foreground);
+        color: var(--vscode-input-placeholderForeground);
         font-family: var(--vscode-editor-font-family);
         font-size: 12px;
     `;
 
+    export const FieldInfoSection = styled.div({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        gap: '5px'
+    });
+
     export const EditorMdContainer = styled.div`
         width: 100%;
         font-size: 13px;
@@ -275,21 +290,6 @@ export namespace S {
     `;
 }
 
-const EditorRibbon = ({ onClick }: { onClick: () => void }) => {
-    return (
-        <Tooltip content="Add Expression" containerSx={{ cursor: 'default' }}>
-            <S.Ribbon onClick={onClick}>
-                <Icon name="bi-expression" sx={{
-                    color: ThemeColors.ON_PRIMARY,
-                    fontSize: '12px',
-                    width: '12px',
-                    height: '12px'
-                }} />
-            </S.Ribbon>
-        </Tooltip>
-    );
-};
-
 export const ContextAwareExpressionEditor = (props: ContextAwareExpressionEditorProps) => {
     const { form, expressionEditor, targetLineRange, fileName } = useFormContext();
 
@@ -298,9 +298,9 @@ export const ContextAwareExpressionEditor = (props: ContextAwareExpressionEditor
             fileName={fileName}
             targetLineRange={targetLineRange}
             helperPaneZIndex={props.helperPaneZIndex}
-            {...props}
             {...form}
             {...expressionEditor}
+            {...props}
         />
     );
 };
@@ -315,6 +315,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
         required,
         showHeader = true,
         watch,
+        setValue,
         fieldKey,
         completions,
         triggerCharacters,
@@ -341,18 +342,33 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
 
     const key = fieldKey ?? field.key;
     const [focused, setFocused] = useState<boolean>(false);
+    const [inputMode, setInputMode] = useState<InputMode>(InputMode.EXP);
+    const [isExpressionEditorHovered, setIsExpressionEditorHovered] = useState<boolean>(false);
+    const [showModeSwitchWarning, setShowModeSwitchWarning] = useState(false);
+    const [formDiagnostics, setFormDiagnostics] = useState(field.diagnostics);
+    const [isExpandedModalOpen, setIsExpandedModalOpen] = useState(false);
+
+    // Update formDiagnostics when field.diagnostics changes
+    useEffect(() => {
+        setFormDiagnostics(field.diagnostics);
+    }, [field.diagnostics]);
+
 
     // If Form directly  calls ExpressionEditor without setting targetLineRange and fileName through context
     const { targetLineRange: contextTargetLineRange, fileName: contextFileName } = useFormContext();
     const effectiveTargetLineRange = targetLineRange ?? contextTargetLineRange;
     const effectiveFileName = fileName ?? contextFileName;
 
+    const initialFieldValue = useRef(field.value);
+
     const [isHelperPaneOpen, setIsHelperPaneOpen] = useState<boolean>(false);
     /* Define state to retrieve helper pane data */
 
     const exprRef = useRef<FormExpressionEditorRef>(null);
     const anchorRef = useRef<HTMLDivElement>(null);
 
+    const { nodeInfo } = useFormContext();
+
     // Use to fetch initial diagnostics
     const previousDiagnosticsFetchContext = useRef<diagnosticsFetchContext>({
         fetchedInitialDiagnostics: false,
@@ -365,6 +381,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
         if (!targetLineRange) return;
         // Fetch initial diagnostics
         if (getExpressionEditorDiagnostics && fieldValue !== undefined
+            && inputMode === InputMode.EXP
             && (previousDiagnosticsFetchContext.current.fetchedInitialDiagnostics === false
                 || previousDiagnosticsFetchContext.current.diagnosticsFetchedTargetLineRange !== targetLineRange
             )) {
@@ -372,8 +389,9 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
                 fetchedInitialDiagnostics: true,
                 diagnosticsFetchedTargetLineRange: targetLineRange
             };
+            // Only validate on initial render if the field has a non-empty value
             getExpressionEditorDiagnostics(
-                (required ?? !field.optional) || fieldValue !== '',
+                fieldValue !== '',
                 fieldValue,
                 key,
                 getPropertyFromFormField(field)
@@ -381,9 +399,32 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
         }
     }, [fieldValue, targetLineRange]);
 
+    useEffect(() => {
+        let newInputMode = getInputModeFromTypes(field.valueTypeConstraint)
+        if (isModeSwitcherRestricted()) {
+            setInputMode(InputMode.EXP);
+            return;
+        }
+        if (!newInputMode) {
+            setInputMode(InputMode.EXP);
+            return;
+        }
+        if (newInputMode === InputMode.TEXT
+            && typeof initialFieldValue.current === 'string'
+            && initialFieldValue.current.trim() !== ''
+            && !(initialFieldValue.current.trim().startsWith("\"")
+                && initialFieldValue.current.trim().endsWith("\"")
+            )
+        ) {
+            setInputMode(InputMode.EXP)
+        }
+        else {
+            setInputMode(newInputMode);
+        }
+    }, [field?.valueTypeConstraint]);
+
     const handleFocus = async () => {
         setFocused(true);
-
         // Trigger actions on focus
         await onFocus?.();
         handleOnFieldFocus?.(key);
@@ -402,6 +443,14 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
         setIsHelperPaneOpen(isOpen);
     };
 
+    const handleSave = async (value: string) => {
+        let valueToBeSaved = value;
+        if (inputMode === InputMode.TEXT) {
+            valueToBeSaved = `\"${value}\"`;
+        }
+        onSave?.(valueToBeSaved);
+    }
+
     const toggleHelperPaneState = () => {
         if (!isHelperPaneOpen) {
             exprRef.current?.focus();
@@ -412,7 +461,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
 
     const handleGetHelperPane = (
         value: string,
-        onChange: (value: string, updatedCursorPosition: number) => void,
+        onChange: (value: string, options?: HelperpaneOnChangeOptions) => void,
         helperPaneHeight: HelperPaneHeight
     ) => {
         return getHelperPane?.(
@@ -434,6 +483,52 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
         return await extractArgsFromFunction(value, getPropertyFromFormField(field), cursorPosition);
     };
 
+    const handleModeChange = (value: InputMode) => {
+        const currentValue = watch(key);
+        if (
+            inputMode === InputMode.EXP
+            && value === InputMode.TEXT
+            && (!currentValue.trim().startsWith("\"") || !currentValue.trim().endsWith("\""))
+            && currentValue.trim() !== ''
+        ) {
+            setShowModeSwitchWarning(true);
+            return;
+        }
+        if (inputMode === InputMode.TEXT && value === InputMode.EXP) {
+            if (currentValue && typeof currentValue === 'string' &&
+                !currentValue.startsWith('"') && !currentValue.endsWith('"')) {
+                setValue(key, `"${currentValue}"`);
+            }
+        }
+        setInputMode(value);
+    };
+
+    const handleModeSwitchWarningContinue = () => {
+        const defaultMode = getDefaultExpressionMode(field.valueTypeConstraint);
+        setInputMode(defaultMode);
+        setShowModeSwitchWarning(false);
+    };
+
+    const handleModeSwitchWarningCancel = () => {
+        setShowModeSwitchWarning(false);
+    };
+
+    const handleOpenExpandedMode = () => {
+        setIsExpandedModalOpen(true);
+    };
+
+    const handleSaveExpandedMode = (value: string) => {
+        setValue(key, value);
+        if (field.onValueChange) {
+            field.onValueChange(value);
+        }
+    };
+
+    // Only allow opening expanded mode for specific fields
+    const onOpenExpandedMode = (!props.isInExpandedMode && ["query", "instructions", "role"].includes(field.key))
+        ? handleOpenExpandedMode
+        : undefined;
+
     const defaultValueText = field.defaultValue ?
         <S.DefaultValue>Defaults to {field.defaultValue}</S.DefaultValue> : null;
 
@@ -443,30 +538,58 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
             : `${field.documentation}.`
         : '';
 
+    const isModeSwitcherRestricted = () => {
+        if (nodeInfo?.kind === "FOREACH") return true;
+        return false;
+    };
+
+    const isModeSwitcherAvailable = () => {
+        if (isModeSwitcherRestricted()) return false;
+        if (!(focused || isExpressionEditorHovered)) return false;
+        if (!getInputModeFromTypes(field.valueTypeConstraint)) return false;
+        return true;
+    }
 
     return (
-        <FieldProvider 
-        initialField={props.field} 
-        triggerCharacters={props.triggerCharacters}
+        <FieldProvider
+            initialField={props.field}
+            triggerCharacters={props.triggerCharacters}
         >
-            <S.Container id={id}>
+            <S.Container
+                id={id}
+                onMouseEnter={() => setIsExpressionEditorHovered(true)}
+                onMouseLeave={() => setIsExpressionEditorHovered(false)}
+            >
                 {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>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: '8px' }}>
+                            <div>
+                                <S.HeaderContainer>
+                                    <S.LabelContainer>
+                                        <S.Label>{field.label}</S.Label>
+                                        {(required ?? !field.optional) && <RequiredFormInput />}
+                                        {field.valueTypeConstraint && (
+                                            <S.Type style={{ marginLeft: '5px' }} isVisible={focused} title={field.valueTypeConstraint as string}>
+                                                {sanitizeType(field.valueTypeConstraint as string)}
+                                            </S.Type>
+                                        )}
+                                    </S.LabelContainer>
+                                </S.HeaderContainer>
+                                <S.EditorMdContainer>
+                                    {documentation && <ReactMarkdown>{documentation}</ReactMarkdown>}
+                                    {defaultValueText}
+                                </S.EditorMdContainer>
+                            </div>
+                            <S.FieldInfoSection>
+                                {isModeSwitcherAvailable() && (
+                                    <ModeSwitcher
+                                        value={inputMode}
+                                        onChange={handleModeChange}
+                                        valueTypeConstraint={field.valueTypeConstraint}
+                                        />
+                                    )}
+                            </S.FieldInfoSection>
+                        </div>
                     </S.Header>
                 )}
                 <Controller
@@ -475,25 +598,28 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
                     rules={{ required: required ?? (!field.optional && !field.placeholder) }}
                     render={({ field: { name, value, onChange }, fieldState: { error } }) => (
                         <div>
-                            <FormExpressionEditor
-                                key={key}
-                                ref={exprRef}
-                                anchorRef={anchorRef}
+                            <ExpressionField
+                                inputMode={inputMode}
                                 name={name}
+                                value={value}
                                 completions={completions}
-                                value={sanitizedExpression ? sanitizedExpression(value) : value}
+                                fileName={effectiveFileName}
+                                targetLineRange={effectiveTargetLineRange}
                                 autoFocus={autoFocus}
-                                startAdornment={<EditorRibbon onClick={toggleHelperPaneState} />}
+                                sanitizedExpression={sanitizedExpression}
                                 ariaLabel={field.label}
+                                placeholder={placeholder}
                                 onChange={async (updatedValue: string, updatedCursorPosition: number) => {
                                     if (updatedValue === value) {
                                         return;
                                     }
 
-                                const rawValue = rawExpression ? rawExpression(updatedValue) : updatedValue;
-                                onChange(rawValue);
+                                    // clear field diagnostics
+                                    setFormDiagnostics([]);
+                                    const rawValue = rawExpression ? rawExpression(updatedValue) : updatedValue;
 
-                                    if (getExpressionEditorDiagnostics) {
+                                    onChange(rawValue);
+                                    if (getExpressionEditorDiagnostics && inputMode === InputMode.EXP) {
                                         getExpressionEditorDiagnostics(
                                             (required ?? !field.optional) || rawValue !== '',
                                             rawValue,
@@ -528,26 +654,47 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
                                     handleFocus();
                                 }}
                                 onBlur={handleBlur}
-                                onSave={onSave}
+                                onSave={handleSave}
                                 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}
+                                exprRef={exprRef}
+                                anchorRef={anchorRef}
+                                onToggleHelperPane={toggleHelperPaneState}
+                                onOpenExpandedMode={onOpenExpandedMode}
+                                isInExpandedMode={props.isInExpandedMode}
                             />
-                            {error && <ErrorBanner errorMsg={error.message.toString()} />}
+                            {error ?
+                                <ErrorBanner errorMsg={error.message.toString()} /> :
+                                formDiagnostics && formDiagnostics.length > 0 &&
+                                <ErrorBanner errorMsg={formDiagnostics.map(d => d.message).join(', ')} />
+                            }
                         </div>
                     )}
                 />
             </S.Container>
+            {showModeSwitchWarning && (
+                <WarningPopup
+                    isOpen={showModeSwitchWarning}
+                    onContinue={handleModeSwitchWarningContinue}
+                    onCancel={handleModeSwitchWarningCancel}
+                />
+            )}
+            {onOpenExpandedMode && (
+                <ExpandedEditor
+                    isOpen={isExpandedModalOpen}
+                    field={field}
+                    value={watch(key)}
+                    onClose={() => setIsExpandedModalOpen(false)}
+                    onSave={handleSaveExpandedMode}
+                />
+            )}
         </FieldProvider>
     );
 };
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionField.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionField.tsx
new file mode 100644
index 00000000000..ff6e22e907d
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionField.tsx
@@ -0,0 +1,165 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 } from 'react';
+import {
+    CompletionItem,
+    FnSignatureDocumentation,
+    FormExpressionEditorRef,
+    HelperPaneHeight,
+    ThemeColors,
+    Tooltip
+} from '@wso2/ui-toolkit';
+import { S } from './ExpressionEditor';
+import TextModeEditor from './MultiModeExpressionEditor/TextExpressionEditor/TextModeEditor';
+import { InputMode } from './MultiModeExpressionEditor/ChipExpressionEditor/types';
+import { ChipExpressionBaseComponent } from './MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionBaseComponent';
+import { LineRange } from '@wso2/ballerina-core/lib/interfaces/common';
+import { HelperpaneOnChangeOptions } from '../Form/types';
+
+export interface ExpressionField {
+    inputMode: InputMode;
+    name: string;
+    value: string;
+    fileName?: string;
+    targetLineRange?: LineRange;
+    completions: CompletionItem[];
+    autoFocus?: boolean;
+    sanitizedExpression?: (value: string) => string;
+    ariaLabel?: string;
+    placeholder?: string;
+    onChange: (updatedValue: string, updatedCursorPosition: number) => void;
+    extractArgsFromFunction?: (value: string, cursorPosition: number) => Promise<{
+        label: string;
+        args: string[];
+        currentArgIndex: number;
+        documentation?: FnSignatureDocumentation;
+    }>;
+    onCompletionSelect?: (value: string, item: CompletionItem) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onSave?: (value: string) => void;
+    onCancel?: () => void;
+    onRemove?: () => void;
+    isHelperPaneOpen: boolean;
+    changeHelperPaneState: (isOpen: boolean) => void;
+    getHelperPane?: (
+        value: string,
+        onChange: (value: string, options?: HelperpaneOnChangeOptions) => void,
+        helperPaneHeight: HelperPaneHeight
+    ) => React.ReactNode;
+    helperPaneHeight?: HelperPaneHeight;
+    helperPaneWidth?: number;
+    growRange?: { start: number; offset: number };
+    helperPaneZIndex?: number;
+    exprRef: RefObject<FormExpressionEditorRef>;
+    anchorRef: RefObject<HTMLDivElement>;
+    onToggleHelperPane: () => void;
+    onOpenExpandedMode?: () => void;
+    isInExpandedMode?: boolean;
+}
+
+const EditorRibbon = ({ onClick }: { onClick: () => void }) => {
+    return (
+        <Tooltip content="Add Expression" containerSx={{ cursor: 'default' }}>
+            <S.Ribbon onClick={onClick}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    style={{ color: ThemeColors.ON_PRIMARY }}>
+                    <path
+                        fill="currentColor"
+                        d="M12.42 5.29c-1.1-.1-2.07.71-2.17 1.82L10 10h2.82v2h-3l-.44 5.07A4.001 4.001 0 0 1 2 18.83l1.5-1.5c.33 1.05 1.46 1.64 2.5 1.3c.78-.24 1.33-.93 1.4-1.74L7.82 12h-3v-2H8l.27-3.07a4.01 4.01 0 0 1 4.33-3.65c1.26.11 2.4.81 3.06 1.89l-1.5 1.5c-.25-.77-.93-1.31-1.74-1.38M22 13.65l-1.41-1.41l-2.83 2.83l-2.83-2.83l-1.43 1.41l2.85 2.85l-2.85 2.81l1.43 1.41l2.83-2.83l2.83 2.83L22 19.31l-2.83-2.81z" />
+                </svg>
+            </S.Ribbon>
+        </Tooltip>
+    );
+};
+
+export const ExpressionField: React.FC<ExpressionField> = ({
+    inputMode,
+    name,
+    value,
+    completions,
+    autoFocus,
+    ariaLabel,
+    placeholder,
+    fileName,
+    targetLineRange,
+    onChange,
+    extractArgsFromFunction,
+    onCompletionSelect,
+    onFocus,
+    onBlur,
+    onSave,
+    onCancel,
+    onRemove,
+    isHelperPaneOpen,
+    changeHelperPaneState,
+    getHelperPane,
+    helperPaneHeight,
+    helperPaneWidth,
+    growRange,
+    helperPaneZIndex,
+    exprRef,
+    anchorRef,
+    onToggleHelperPane,
+    sanitizedExpression,
+    onOpenExpandedMode,
+    isInExpandedMode
+}) => {
+    if (inputMode === InputMode.TEXT) {
+        return (
+            <TextModeEditor
+                exprRef={exprRef}
+                anchorRef={anchorRef}
+                name={name}
+                value={value}
+                autoFocus={autoFocus}
+                ariaLabel={ariaLabel}
+                onChange={onChange}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                onSave={onSave}
+                onCancel={onCancel}
+                onRemove={onRemove}
+                growRange={growRange}
+                placeholder={placeholder}
+                onOpenExpandedMode={onOpenExpandedMode}
+                isInExpandedMode={isInExpandedMode}
+            />
+
+        );
+    }
+
+    return (
+        <ChipExpressionBaseComponent
+            getHelperPane={getHelperPane}
+            completions={completions}
+            onChange={onChange}
+            value={value}
+            fileName={fileName}
+            targetLineRange={targetLineRange}
+            extractArgsFromFunction={extractArgsFromFunction}
+            onOpenExpandedMode={onOpenExpandedMode}
+            isInExpandedMode={isInExpandedMode}
+        />
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/IdentifierField.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/IdentifierField.tsx
index 9c12801af94..bfb59a2676f 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/IdentifierField.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/IdentifierField.tsx
@@ -16,8 +16,8 @@
  * under the License.
  */
 
-import { TextField } from "@wso2/ui-toolkit";
-import React, { useState, useCallback } from "react";
+import { ErrorBanner, TextField } from "@wso2/ui-toolkit";
+import React, { useState, useCallback, useEffect } from "react";
 import { debounce } from "lodash";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import { useFormContext } from "../../context";
@@ -27,16 +27,22 @@ export interface IdentifierFieldProps {
     field: FormField;
     handleOnFieldFocus?: (key: string) => void;
     autoFocus?: boolean;
+    onBlur?: () => void | Promise<void>;
 }
 
 export function IdentifierField(props: IdentifierFieldProps) {
-    const { field, handleOnFieldFocus, autoFocus } = props;
+    const { field, handleOnFieldFocus, autoFocus, onBlur } = props;
     const { rpcClient } = useRpcContext();
     const { expressionEditor, form } = useFormContext();
     const { getExpressionEditorDiagnostics } = expressionEditor;
+    const [formDiagnostics, setFormDiagnostics] = useState(field.diagnostics);
     const { watch, formState, register } = form;
     const { errors } = formState;
 
+    useEffect(() => {
+        setFormDiagnostics(field.diagnostics);
+    }, [field.diagnostics]);
+
     const validateIdentifierName = useCallback(debounce(async (value: string) => {
         const fieldValue = watch(field.key);
 
@@ -48,6 +54,7 @@ export function IdentifierField(props: IdentifierFieldProps) {
 
     const handleOnBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
         validateIdentifierName(e.target.value);
+        onBlur?.();
     }
 
     const handleOnFocus = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -60,25 +67,32 @@ export function IdentifierField(props: IdentifierFieldProps) {
 
 
     const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setFormDiagnostics([]);
         onChange(e);
         validateIdentifierName(e.target.value);
+        field.onValueChange?.(e.target.value as string);
     }
 
     return (
-        <TextField
-            id={field.key}
-            label={capitalize(field.label)}
-            {...registerField}
-            onChange={(e) => handleOnChange(e)}
-            required={!field.optional}
-            description={field.documentation}
-            placeholder={field.placeholder}
-            readOnly={!field.editable}
-            errorMsg={errors[field.key]?.message.toString()}
-            onBlur={(e) => handleOnBlur(e)}
-            onFocus={(e) => handleOnFocus(e)}
-            autoFocus={autoFocus}
-            sx={{ width: "100%" }}
-        />
+        <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
+            <TextField
+                id={field.key}
+                label={capitalize(field.label)}
+                {...registerField}
+                onChange={(e) => handleOnChange(e)}
+                required={!field.optional}
+                description={field.documentation}
+                placeholder={field.placeholder}
+                readOnly={!field.editable}
+                errorMsg={errors[field.key]?.message.toString()}
+                onBlur={(e) => handleOnBlur(e)}
+                onFocus={(e) => handleOnFocus(e)}
+                autoFocus={autoFocus}
+                sx={{ width: "100%" }}
+            />
+            {(!errors[field.key]?.message) && formDiagnostics && formDiagnostics.length > 0 && (
+                <ErrorBanner errorMsg={formDiagnostics.map(d => d.message).join(', ')} />
+            )}
+        </div>
     );
 }
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/McpToolsSelection.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/McpToolsSelection.tsx
deleted file mode 100644
index 257cfbd4a52..00000000000
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/McpToolsSelection.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.
- */
-
-import React from "react";
-import styled from "@emotion/styled";
-import { Button, CheckBox, ThemeColors } from "@wso2/ui-toolkit";
-
-// Types for MCP tools
-export interface McpTool {
-    name: string;
-    description?: string;
-}
-
-interface McpToolsSelectionProps {
-    tools: McpTool[];
-    selectedTools: Set<string>;
-    loading: boolean;
-    error: string;
-    onToolSelectionChange: (toolName: string, isSelected: boolean) => void;
-    onSelectAll: () => void;
-    serviceUrl?: string;
-}
-
-const ToolsContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-top: 12px;
-    padding: 12px;
-    border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
-    border-radius: 8px;
-`;
-const ToolsHeader = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 8px;
-`;
-const ToolsTitle = styled.div`
-    font-size: 14px;
-    font-family: GilmerBold;
-    color: ${ThemeColors.ON_SURFACE};
-`;
-const ToolCheckboxContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    max-height: 200px;
-    overflow-y: auto;
-`;
-const ToolCheckboxItem = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 0;
-`;
-const ErrorMessage = styled.div`
-    color: ${ThemeColors.ERROR};
-    font-size: 12px;
-    margin-top: 4px;
-`;
-const LoadingMessage = styled.div`
-    color: ${ThemeColors.ON_SURFACE_VARIANT};
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-`;
-const InlineSpinner = styled.span`
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid ${ThemeColors.ON_SURFACE_VARIANT};
-  border-top: 2px solid transparent;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-`;
-
-export const McpToolsSelection: React.FC<McpToolsSelectionProps> = ({
-    tools,
-    selectedTools,
-    loading,
-    error,
-    onToolSelectionChange,
-    onSelectAll,
-    serviceUrl
-}) => {
-    return (
-        <ToolsContainer>
-            <ToolsHeader>
-                <ToolsTitle>Available Tools</ToolsTitle>
-                {tools.length > 0 && (
-                    <Button
-                        onClick={onSelectAll}
-                        disabled={loading}
-                    >
-                        {selectedTools.size === tools.length ? "Deselect All" : "Select All"}
-                    </Button>
-                )}
-            </ToolsHeader>
-            {loading && (
-                <LoadingMessage>
-                    <InlineSpinner />
-                    Loading tools from MCP server...
-                </LoadingMessage>
-            )}
-            {error && (
-                <ErrorMessage>{error}</ErrorMessage>
-            )}
-            {tools.length > 0 && (
-                <ToolCheckboxContainer>
-                    {tools.map((tool) => (
-                        <ToolCheckboxItem key={tool.name}>
-                            <CheckBox
-                                label=""
-                                checked={selectedTools.has(tool.name)}
-                                disabled={loading}
-                                onChange={() => !loading && onToolSelectionChange(tool.name, !selectedTools.has(tool.name))}
-                            >
-                            </CheckBox>
-                            <div>
-                                <div style={{ fontWeight: 'bold' }}>{tool.name}</div>
-                                {tool.description && (
-                                    <div style={{ fontSize: '12px', color: ThemeColors.ON_SURFACE_VARIANT }}>
-                                        {tool.description}
-                                    </div>
-                                )}
-                            </div>
-                        </ToolCheckboxItem>
-                    ))}
-                </ToolCheckboxContainer>
-            )}
-            {!loading && !error && tools.length === 0 && serviceUrl?.trim() && (
-                <div style={{ color: ThemeColors.ON_SURFACE_VARIANT, fontSize: '12px' }}>
-                    No tools available from this MCP server
-                </div>
-            )}
-        </ToolsContainer>
-    );
-}; 
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CHipTest.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CHipTest.tsx
new file mode 100644
index 00000000000..b261b4fa821
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CHipTest.tsx
@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from "react";
+
+export const ChipTest = () => {
+    const [focusState, setFocusState] = useState<{ cursor: number, caretPosition: number }>({ cursor: 0, caretPosition: 2 });
+    const spanRefs = [React.createRef<HTMLSpanElement>(), React.createRef<HTMLSpanElement>()];
+
+    const setCaretAtPosition = (element: HTMLSpanElement, position: number) => {
+        if (!element) return;
+
+        const selection = window.getSelection();
+        const range = document.createRange();
+
+        // Ensure position is within bounds
+        const textLength = element.textContent?.length || 0;
+        const safePosition = Math.max(0, Math.min(position, textLength));
+
+        try {
+            range.setStart(element.firstChild || element, safePosition);
+            range.setEnd(element.firstChild || element, safePosition);
+
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+        } catch (error) {
+            console.warn('Could not set caret position:', error);
+        }
+    };
+
+    function getCaretCharacterOffsetWithin(element) {
+        let caretOffset = 0;
+        const selection = window.getSelection();
+
+        if (selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            const preCaretRange = range.cloneRange();
+            preCaretRange.selectNodeContents(element);
+            preCaretRange.setEnd(range.endContainer, range.endOffset);
+            caretOffset = preCaretRange.toString().length;
+        }
+        console.log('Caret Offset:', caretOffset);
+        return caretOffset;
+    }
+
+    const restoreCaret = (el: HTMLSpanElement, index:number) => {
+        const offset = focusState[index].caretPosition;
+        setCaretAtPosition(el, offset);
+    }
+
+    const saveSelection = (el: HTMLSpanElement, index: number) => {
+        const caretPos = getCaretCharacterOffsetWithin(el);
+        // setFocusState(prev => )
+    }
+
+    const handleOnFocus = (element: HTMLSpanElement, index: number) => {
+        restoreCaret(element, index);
+        // if (!element) return;
+
+        // setFocusState(prev => ({ ...prev, cursor: index }));
+        // const caretPos = getCaretCharacterOffsetWithin(element);
+        // setFocusState(prev => ({ ...prev, caretPosition: caretPos }));
+    }
+
+    // useEffect(() => {
+    //     if (spanRefs[focusState.cursor]?.current) {
+    //         spanRefs[focusState.cursor].current.focus();
+    //         setCaretAtPosition(focusState.caretPosition);
+    //     }
+    // }, [focusState.cursor, focusState.caretPosition]);
+
+    return (
+        <div
+            style={{
+                width: "100%",
+                backgroundColor: 'red',
+                height: "200px"
+            }}>
+            <div>
+                <span style={{ marginLeft: '10px' }}>Current Cursor: {focusState.cursor}</span>
+                <span style={{ marginLeft: '10px' }}>Caret Position: {focusState.caretPosition}</span>
+
+            </div>
+            <span
+                ref={spanRefs[0]}
+                contentEditable={true}
+                onFocus={(e) => {
+                    handleOnFocus(e.target,0);
+                }}
+                style={{
+                    width: '200px',
+                    height: '100px',
+                    backgroundColor: 'green'
+                }}
+            >
+                qawfwfawf
+            </span>
+            <span
+                ref={spanRefs[1]}
+                contentEditable={true}
+                onFocus={(e) => {
+                    handleOnFocus(e.target, 1);
+                }}
+                
+                style={{
+                    width: '200px',
+                    height: '100px',
+                    backgroundColor: 'green'
+                }}
+            >
+                awdawdawd
+            </span>
+        </div>
+
+    );
+}
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionBaseComponent.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionBaseComponent.tsx
new file mode 100644
index 00000000000..49b6f5a53b6
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionBaseComponent.tsx
@@ -0,0 +1,558 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, useCallback, useRef, useMemo } from "react";
+import FXButton from "./components/FxButton";
+import { ChipEditorContainer, SkeletonLoader } from "./styles";
+import { ExpressionModel } from "./types";
+import { AutoExpandingEditableDiv } from "./components/AutoExpandingEditableDiv";
+import { TokenizedExpression } from "./components/TokenizedExpression";
+import {
+    getAbsoluteCaretPosition,
+    mapAbsoluteToModel,
+    createExpressionModelFromTokens,
+    getTextValueFromExpressionModel,
+    updateExpressionModelWithCompletion,
+    handleCompletionNavigation,
+    setFocusInExpressionModel,
+    updateExpressionModelWithHelperValue,
+    getAbsoluteCaretPositionFromModel,
+    getWordBeforeCursor,
+    filterCompletionsByPrefixAndType,
+    setCursorPositionToExpressionModel,
+    updateTokens,
+} from "./utils";
+import { CompletionItem, FnSignatureDocumentation, HelperPaneHeight } from "@wso2/ui-toolkit";
+import { useFormContext } from "../../../../context";
+import { DATA_ELEMENT_ID_ATTRIBUTE, FOCUS_MARKER, ARROW_LEFT_MARKER, ARROW_RIGHT_MARKER, BACKSPACE_MARKER, COMPLETIONS_MARKER, HELPER_MARKER, DELETE_MARKER } from "./constants";
+import { LineRange } from "@wso2/ballerina-core/lib/interfaces/common";
+import { HelperpaneOnChangeOptions } from "../../../Form/types";
+
+export type ChipExpressionBaseComponentProps = {
+    onTokenRemove?: (token: string) => void;
+    onTokenClick?: (token: string) => void;
+    getHelperPane?: (
+        value: string,
+        onChange: (value: string, options?: HelperpaneOnChangeOptions) => void,
+        helperPaneHeight: HelperPaneHeight
+    ) => React.ReactNode;
+    completions: CompletionItem[];
+    onChange: (updatedValue: string, updatedCursorPosition: number) => void;
+    value: string;
+    fileName?: string;
+    extractArgsFromFunction?: (value: string, cursorPosition: number) => Promise<{
+        label: string;
+        args: string[];
+        currentArgIndex: number;
+        documentation?: FnSignatureDocumentation;
+    }>;
+    targetLineRange?: LineRange;
+    onOpenExpandedMode?: () => void;
+    isInExpandedMode?: boolean;
+}
+
+export const ChipExpressionBaseComponent = (props: ChipExpressionBaseComponentProps) => {
+    const [tokens, setTokens] = useState<number[]>([]);
+    const [expressionModel, setExpressionModel] = useState<ExpressionModel[]>();
+    const [selectedCompletionItem, setSelectedCompletionItem] = useState<number>(0);
+    const [isCompletionsOpen, setIsCompletionsOpen] = useState<boolean>(false);
+    const [hasTypedSinceFocus, setHasTypedSinceFocus] = useState<boolean>(false);
+    const [isAnyElementFocused, setIsAnyElementFocused] = useState(false);
+    const [chipClicked, setChipClicked] = useState<ExpressionModel | null>(null);
+    const [isHelperPaneOpen, setIsHelperPaneOpen] = useState(false);
+    const [filteredCompletions, setFilteredCompletions] = useState<CompletionItem[]>(props.completions);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const fieldContainerRef = useRef<HTMLDivElement>(null);
+    const fetchedInitialTokensRef = useRef<boolean>(false);
+    const pendingCursorPositionUpdateRef = useRef<number>(0);
+    const pendingForceSetTokensRef = useRef<number[] | null>(null);
+    const fetchnewTokensRef = useRef<boolean>(true);
+    const focusedTextElementRef = useRef<HTMLSpanElement | null>(null);
+    const scheduledCompletionFilterRef = useRef<boolean>(false);
+
+    const { expressionEditor } = useFormContext();
+    const expressionEditorRpcManager = expressionEditor?.rpcManager;
+
+    const memoizedExpressionModel = useMemo(
+        () => createExpressionModelFromTokens(props.value, tokens),
+        [props.value, tokens]
+    );
+
+    const fetchUpdatedFilteredTokens = useCallback(async (value: string): Promise<number[]> => {
+        setIsLoading(true);
+        try {
+            const response = await expressionEditorRpcManager?.getExpressionTokens(
+                value,
+                props.fileName,
+                props.targetLineRange.startLine
+            );
+            setIsLoading(false);
+            return response || [];
+        } catch (error) {
+            setIsLoading(false);
+            return [];
+        }
+    }, [expressionEditorRpcManager]);
+
+    const getFnSignature = useCallback(async (value: string, cursorPosition: number) => {
+        if (props.extractArgsFromFunction) {
+            setIsLoading(true);
+            const fnSignature = await props.extractArgsFromFunction(value, cursorPosition);
+            setIsLoading(false);
+            if (fnSignature) {
+                return fnSignature
+            }
+        }
+        return undefined;
+    }, [props.extractArgsFromFunction]);
+
+    const fetchInitialTokens = async (value: string) => {
+        let updatedTokens = tokens;
+
+        if (pendingForceSetTokensRef.current) {
+            setTokens(pendingForceSetTokensRef.current);
+            updatedTokens = pendingForceSetTokensRef.current;
+            pendingForceSetTokensRef.current = null;
+        }
+        if (fetchnewTokensRef.current) {
+            const filteredTokens = await fetchUpdatedFilteredTokens(value);
+            setTokens(filteredTokens);
+            updatedTokens = filteredTokens;
+            fetchnewTokensRef.current = false;
+        }
+
+        fetchedInitialTokensRef.current = true;
+        let exprModel;
+
+        if (value === props.value && updatedTokens === tokens) {
+            exprModel = memoizedExpressionModel;
+        } else {
+            exprModel = createExpressionModelFromTokens(value, updatedTokens);
+        }
+
+        if (pendingCursorPositionUpdateRef.current !== null) {
+            exprModel = setCursorPositionToExpressionModel(exprModel, pendingCursorPositionUpdateRef.current);
+            pendingCursorPositionUpdateRef.current = null;
+        }
+
+        setExpressionModel(exprModel);
+    };
+
+    useEffect(() => {
+        if (props.value === undefined || props.value === null) return;
+        fetchInitialTokens(props.value);
+    }, [props.value]);
+
+    useEffect(() => {
+        if (!scheduledCompletionFilterRef.current) return;
+        const newFilteredCompletions = filterCompletionsByPrefixAndType(props.completions, '');
+        setFilteredCompletions(newFilteredCompletions);
+        scheduledCompletionFilterRef.current = false;
+    }, [props.completions]);
+
+    const handleExpressionChange = async (
+        updatedModel: ExpressionModel[],
+        cursorPosition: number,
+        lastTypedText?: string
+    ) => {
+        const updatedValue = getTextValueFromExpressionModel(updatedModel);
+
+        if (lastTypedText === FOCUS_MARKER) {
+            setExpressionModel(updatedModel);
+            setChipClicked(null);
+            setIsHelperPaneOpen(true);
+            return;
+        }
+
+        // Calculate cursor movement
+        const cursorPositionBeforeUpdate = getAbsoluteCaretPositionFromModel(expressionModel);
+        const cursorPositionAfterUpdate = getAbsoluteCaretPositionFromModel(updatedModel);
+        const cursorDelta = updatedValue.length - props.value.length;
+
+        // Update tokens based on cursor movement
+        const previousFullText = getTextValueFromExpressionModel(expressionModel);
+        const updatedTokens = updateTokens(tokens, cursorPositionBeforeUpdate, cursorDelta, previousFullText);
+
+        const shouldUpdateTokens = (!lastTypedText?.startsWith('#$') || lastTypedText === BACKSPACE_MARKER)
+            && JSON.stringify(updatedTokens) !== JSON.stringify(tokens);
+
+        if (shouldUpdateTokens) {
+            pendingForceSetTokensRef.current = updatedTokens;
+        }
+
+        const wordBeforeCursor = getWordBeforeCursor(updatedModel);
+        const valueBeforeCursor = updatedValue.substring(0, cursorPositionAfterUpdate);
+
+        // Handle helper pane and completions visibility
+        handleHelperPaneVisibility(updatedValue, valueBeforeCursor, wordBeforeCursor);
+
+        // Handle navigation keys
+        if (isNavigationKey(lastTypedText)) {
+            handleNavigationKey(cursorPosition, lastTypedText);
+            return;
+        }
+
+        // Determine if we need to fetch new tokens
+        if (shouldFetchNewTokens(lastTypedText)) {
+            fetchnewTokensRef.current = true;
+        }
+
+        // Update cursor and value
+        pendingCursorPositionUpdateRef.current = cursorPosition;
+        props.onChange(updatedValue, cursorPosition);
+        setHasTypedSinceFocus(true);
+    };
+
+    const handleHelperPaneVisibility = (
+        updatedValue: string,
+        valueBeforeCursor: string,
+        wordBeforeCursor: string | null
+    ) => {
+        const trimmedValueBeforeCursor = valueBeforeCursor.trim();
+
+        if (trimmedValueBeforeCursor.endsWith('+') || trimmedValueBeforeCursor.endsWith(':')) {
+            setIsHelperPaneOpen(true);
+            return;
+        }
+
+        if (valueBeforeCursor === '') {
+            setIsHelperPaneOpen(true);
+            setIsCompletionsOpen(false);
+            return;
+        }
+        if (valueBeforeCursor.endsWith('.')) {
+            scheduledCompletionFilterRef.current = true;
+            return;
+        }
+        if (!wordBeforeCursor || wordBeforeCursor.trim() === '') {
+            setIsHelperPaneOpen(false);
+            setIsCompletionsOpen(false);
+            return;
+        }
+        const newFilteredCompletions = filterCompletionsByPrefixAndType(props.completions, wordBeforeCursor);
+        setFilteredCompletions(newFilteredCompletions);
+
+        if (newFilteredCompletions.length > 0) {
+            setIsHelperPaneOpen(false);
+            setIsCompletionsOpen(true);
+        } else {
+            setIsHelperPaneOpen(false);
+            setIsCompletionsOpen(false);
+        }
+    };
+
+    const isNavigationKey = (lastTypedText?: string): boolean => {
+        return lastTypedText === ARROW_LEFT_MARKER
+            || lastTypedText === ARROW_RIGHT_MARKER;
+    };
+
+    const handleNavigationKey = (cursorPosition: number, lastTypedText?: string) => {
+        pendingCursorPositionUpdateRef.current = cursorPosition;
+        fetchInitialTokens(props.value);
+    };
+
+    const shouldFetchNewTokens = (lastTypedText?: string): boolean => {
+        if (!lastTypedText || lastTypedText.length === 0) {
+            return false;
+        }
+
+        const isSpecialKey = lastTypedText === BACKSPACE_MARKER
+            || lastTypedText === COMPLETIONS_MARKER
+            || lastTypedText === HELPER_MARKER
+            || lastTypedText === DELETE_MARKER;
+
+        const endsWithTriggerChar = lastTypedText.endsWith('+')
+            || lastTypedText.endsWith(' ')
+            || lastTypedText.endsWith(',');
+
+        return endsWithTriggerChar || isSpecialKey;
+    };
+
+    const expandFunctionSignature = useCallback(async (value: string): Promise<string> => {
+        if (value.endsWith('()')) {
+            const signature = await getFnSignature(value, value.length - 1);
+            if (signature) {
+                const argsString = signature.args.map((_, index) => `$${index + 1}`).join(',');
+                return value.slice(0, -1) + argsString + ')';
+            }
+        }
+        return value;
+    }, [getFnSignature]);
+
+    const handleCompletionSelect = async (item: CompletionItem) => {
+        const itemCopy = { ...item };
+        itemCopy.value = await expandFunctionSignature(item.value);
+        const absoluteCaretPosition = getAbsoluteCaretPosition(expressionModel);
+        const updatedExpressionModelInfo = updateExpressionModelWithCompletion(expressionModel, absoluteCaretPosition, itemCopy.value);
+
+        if (updatedExpressionModelInfo) {
+            const { updatedModel, newCursorPosition } = updatedExpressionModelInfo;
+            handleExpressionChange(updatedModel, newCursorPosition, COMPLETIONS_MARKER);
+        }
+        setIsCompletionsOpen(false);
+    };
+
+    const handleHelperPaneValueChange = async (updatedValue: string, options?: HelperpaneOnChangeOptions) => {
+        let currentModel = expressionModel ? [...expressionModel] : [];
+        if (currentModel.length === 0) {
+            currentModel.push({
+                id: "1",
+                value: "",
+                isToken: false,
+                startColumn: 0,
+                startLine: 0,
+                length: 0,
+                type: 'literal',
+                isFocused: false,
+                focusOffsetStart: 0,
+                focusOffsetEnd: 0
+            });
+        }
+        if (options?.replaceFullText) {
+            const updatedTokens = await fetchUpdatedFilteredTokens(updatedValue);
+            let exprModel = createExpressionModelFromTokens(updatedValue, updatedTokens);
+            handleExpressionChange(exprModel, updatedValue.length, HELPER_MARKER);
+            return;
+        }
+        let value = await expandFunctionSignature(updatedValue);
+        if (
+            chipClicked &&
+            (chipClicked.type !== 'parameter' ||
+                chipClicked.length > 0)
+        ) {
+            let absoluteCaretPosition = 0;
+            for (let i = 0; i < currentModel?.length; i++) {
+                if (currentModel && currentModel[i].isFocused) {
+                    absoluteCaretPosition += currentModel[i]?.focusOffsetStart || 0;
+                    break;
+                }
+                absoluteCaretPosition += currentModel ? currentModel[i].value.length : 0;
+            }
+            const updatedExpressionModelInfo = updateExpressionModelWithHelperValue(currentModel, absoluteCaretPosition, value, true);
+
+            if (updatedExpressionModelInfo) {
+                const { updatedModel, updatedValue, newCursorPosition } = updatedExpressionModelInfo;
+
+                const textValue = getTextValueFromExpressionModel(updatedModel || []);
+                const updatedTokens = await fetchUpdatedFilteredTokens(textValue);
+
+                let exprModel = createExpressionModelFromTokens(textValue, updatedTokens);
+
+                // Map absolute position into new model and set focus flags
+                const mapped = mapAbsoluteToModel(exprModel, absoluteCaretPosition + value.length);
+                exprModel = setFocusInExpressionModel(exprModel, mapped, true);
+                setChipClicked(null);
+                handleExpressionChange(exprModel, newCursorPosition, HELPER_MARKER);
+            }
+        }
+        else {
+            let selectedElement = currentModel.find(el => el.isFocused);
+            let shouldReplaceEntireValue = false;
+            if (!selectedElement) {
+                selectedElement = currentModel[currentModel.length - 1];
+            };
+            let absoluteCaretPosition = getAbsoluteCaretPositionFromModel(currentModel);
+            if (
+                selectedElement.focusOffsetStart !== undefined &&
+                selectedElement.focusOffsetEnd !== undefined &&
+                selectedElement.focusOffsetStart !== selectedElement.focusOffsetEnd
+            ) {
+                const newValue = selectedElement.value.substring(0, selectedElement.focusOffsetStart) +
+                    selectedElement.value.substring(selectedElement.focusOffsetEnd);
+                
+                currentModel = currentModel.map(el => {
+                    if (el === selectedElement) {
+                        return {
+                            ...el,
+                            value: newValue,
+                            length: newValue.length,
+                            focusOffsetStart: selectedElement.focusOffsetStart,
+                            focusOffsetEnd: selectedElement.focusOffsetStart,
+                            isFocused: true
+                        };
+                    }
+                    return el;
+                });
+                
+                let sumBeforeSelected = 0;
+                for (let i = 0; i < currentModel.length; i++) {
+                    if (currentModel[i].isFocused) {
+                        break;
+                    }
+                    sumBeforeSelected += currentModel[i].length;
+                }
+                absoluteCaretPosition = sumBeforeSelected + selectedElement.focusOffsetStart;
+                shouldReplaceEntireValue = false;
+            }
+            const updatedExpressionModelInfo = updateExpressionModelWithHelperValue(currentModel, absoluteCaretPosition, value, shouldReplaceEntireValue);
+            if (updatedExpressionModelInfo) {
+                const { updatedModel, newCursorPosition } = updatedExpressionModelInfo;
+
+                const textValue = getTextValueFromExpressionModel(updatedModel || []);
+                const updatedTokens = await fetchUpdatedFilteredTokens(textValue);
+
+                let exprModel = createExpressionModelFromTokens(textValue, updatedTokens);
+
+                // Map absolute position into new model and set focus flags
+                const mapped = mapAbsoluteToModel(exprModel, absoluteCaretPosition + value.length);
+                exprModel = setFocusInExpressionModel(exprModel, mapped, true);
+                handleExpressionChange(exprModel, newCursorPosition, HELPER_MARKER);
+            }
+        }
+        if (options?.closeHelperPane) {
+            setIsHelperPaneOpen(false);
+        }
+        else {
+            setIsHelperPaneOpen(true);
+        }
+    };
+
+    const handleCompletionKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if (!isCompletionsOpen || filteredCompletions.length === 0) return;
+
+        handleCompletionNavigation(
+            e,
+            filteredCompletions.length,
+            selectedCompletionItem,
+            setSelectedCompletionItem,
+            handleCompletionSelect,
+            setIsCompletionsOpen,
+            filteredCompletions
+        );
+    }, [isCompletionsOpen, selectedCompletionItem, filteredCompletions]);
+
+    const handleHelperKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            setIsHelperPaneOpen(false);
+        }
+    }, []);
+
+    const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (isCompletionsOpen) {
+            handleCompletionKeyDown(e);
+        }
+        if (isHelperPaneOpen) {
+            handleHelperKeyDown(e);
+        }
+    }, [isCompletionsOpen, handleCompletionKeyDown, isHelperPaneOpen, handleHelperKeyDown]);
+
+    useEffect(() => {
+        if (filteredCompletions.length === 0) {
+            setIsCompletionsOpen(false);
+            return;
+        }
+        if (isAnyElementFocused && hasTypedSinceFocus && !isHelperPaneOpen) {
+            setIsCompletionsOpen(true);
+            setSelectedCompletionItem(-1);
+        } else {
+            setIsCompletionsOpen(false);
+        }
+    }, [filteredCompletions, isAnyElementFocused, hasTypedSinceFocus]);
+
+    const handleChipClick = useCallback((element: HTMLElement, value: string, type: string, id?: string) => {
+        const clickedChip = expressionModel?.find(model => model.id === id);
+        if (!clickedChip) return;
+        setChipClicked(clickedChip);
+
+        const chipId = element.getAttribute(DATA_ELEMENT_ID_ATTRIBUTE);
+        if (chipId && expressionModel) {
+            const updatedExpressionModel = expressionModel.map(model => {
+                if (model.id === chipId) {
+                    return { ...model, isFocused: true, focusOffsetStart: Math.max(model.length - 1, 0) };
+                }
+                return { ...model, isFocused: false };
+            });
+
+            setExpressionModel(updatedExpressionModel);
+        }
+
+        setIsHelperPaneOpen(true);
+    }, [expressionModel]);
+
+    const handleChipFocus = useCallback((element: HTMLElement, value: string, type: string, absoluteOffset?: number) => {
+        const chipId = element.getAttribute(DATA_ELEMENT_ID_ATTRIBUTE);
+        if (chipId && expressionModel) {
+            const updatedExpressionModel = expressionModel.map(model => {
+                if (model.id === chipId) {
+                    return { ...model, isFocused: true, focusOffsetStart: 0, focusOffsetEnd: 0 };
+                }
+                return { ...model, isFocused: false, focusOffsetStart: undefined, focusOffsetEnd: undefined };
+            });
+            setExpressionModel(updatedExpressionModel);
+        }
+    }, [expressionModel]);
+
+    const handleChipBlur = useCallback(() => {
+    }, []);
+
+    const toggleHelperPane = useCallback(() => {
+        setIsHelperPaneOpen(prev => !prev);
+    }, []);
+
+    useEffect(() => {
+    }, [pendingCursorPositionUpdateRef.current, expressionModel]);
+
+    const handleTextFocus = (e: React.FocusEvent<HTMLSpanElement>) => {
+        focusedTextElementRef.current = e.currentTarget;
+    }
+
+    return (
+        <ChipEditorContainer ref={fieldContainerRef} style={{ position: 'relative', height: props.isInExpandedMode ? '100%' : 'auto' }}>
+            {!props.isInExpandedMode && <FXButton />}
+            <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+                {isLoading && <SkeletonLoader />}
+                <AutoExpandingEditableDiv
+                    value={props.value}
+                    fieldContainerRef={fieldContainerRef}
+                    onFocusChange={(focused) => {
+                        setIsAnyElementFocused(focused);
+                        if (!focused && expressionModel) {
+                            const cleared = expressionModel.map(el => ({ ...el, isFocused: false, focusOffset: undefined }));
+                            handleExpressionChange(cleared, getAbsoluteCaretPosition(cleared), FOCUS_MARKER);
+                        }
+                    }}
+                    onKeyDown={handleKeyDown}
+                    isCompletionsOpen={isCompletionsOpen}
+                    completions={filteredCompletions}
+                    selectedCompletionItem={selectedCompletionItem}
+                    onCompletionSelect={handleCompletionSelect}
+                    onCompletionHover={setSelectedCompletionItem}
+                    onCloseCompletions={() => setIsCompletionsOpen(false)}
+                    getHelperPane={props.getHelperPane}
+                    isHelperPaneOpen={isHelperPaneOpen}
+                    handleHelperPaneValueChange={handleHelperPaneValueChange}
+                    onHelperPaneClose={() => setIsHelperPaneOpen(false)}
+                    onToggleHelperPane={toggleHelperPane}
+                    isInExpandedMode={props.isInExpandedMode}
+                    onOpenExpandedMode={props.onOpenExpandedMode}
+                >
+                    <TokenizedExpression
+                        expressionModel={expressionModel || []}
+                        onExpressionChange={handleExpressionChange}
+                        onChipClick={handleChipClick}
+                        onTextFocus={handleTextFocus}
+                        onChipFocus={handleChipFocus}
+                        onChipBlur={handleChipBlur}
+                    />
+                </AutoExpandingEditableDiv>
+            </div>
+        </ChipEditorContainer >
+    )
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/AutoExpandingEditableDiv.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/AutoExpandingEditableDiv.tsx
new file mode 100644
index 00000000000..44a035962c8
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/AutoExpandingEditableDiv.tsx
@@ -0,0 +1,300 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, useEffect, useCallback, useRef } from "react"
+import { ChipEditorField } from "../styles"
+import { CompletionItem, HelperPaneHeight } from "@wso2/ui-toolkit";
+import { ContextMenuContainer, Completions, FloatingButtonContainer, COMPLETIONS_WIDTH } from "../styles";
+import { CompletionsItem } from "./CompletionsItem";
+import { FloatingToggleButton } from "./FloatingToggleButton";
+import { CloseHelperButton, OpenHelperButton } from "./FloatingButtonIcons";
+import { DATA_CHIP_ATTRIBUTE, DATA_ELEMENT_ID_ATTRIBUTE, ARIA_PRESSED_ATTRIBUTE, CHIP_MENU_VALUE, CHIP_TRUE_VALUE, EXPANDED_EDITOR_HEIGHT } from '../constants';
+import { getCompletionsMenuPosition, isBetween } from "../utils";
+import styled from "@emotion/styled";
+import { HelperpaneOnChangeOptions } from "../../../../Form/types";
+
+const ChipEditorFieldContainer = styled.div`
+    width: 100%;
+    position: relative;
+
+    #floating-button-container {
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+    }
+
+    &:hover #floating-button-container {
+        opacity: 1;
+    }
+`;
+
+export type AutoExpandingEditableDivProps = {
+    value: string;
+    fieldContainerRef?: React.RefObject<HTMLDivElement>;
+    children?: React.ReactNode;
+    onKeyUp?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    onInput?: (e: React.FormEvent<HTMLDivElement>) => void;
+    style?: React.CSSProperties;
+    onFocusChange?: (isFocused: boolean) => void;
+    isCompletionsOpen?: boolean;
+    completions?: CompletionItem[];
+    selectedCompletionItem?: number;
+    menuPosition2?: { top: number; left: number };
+    onCompletionSelect?: (item: CompletionItem) => void;
+    onCompletionHover?: (index: number) => void;
+    onCloseCompletions?: () => void;
+    getHelperPane?: (
+        value: string,
+        onChange: (value: string, options?: HelperpaneOnChangeOptions) => void,
+        helperPaneHeight: HelperPaneHeight
+    ) => React.ReactNode
+    isHelperPaneOpen?: boolean;
+    onHelperPaneClose?: () => void;
+    onToggleHelperPane?: () => void;
+    handleHelperPaneValueChange?: (value: string,  options?: HelperpaneOnChangeOptions) => void;
+    isInExpandedMode?: boolean;
+    onOpenExpandedMode?: () => void;
+}
+
+export const AutoExpandingEditableDiv = (props: AutoExpandingEditableDivProps) => {
+    const {
+        children,
+        onKeyUp,
+        onKeyDown,
+        onInput,
+        fieldContainerRef,
+        style
+    } = props;
+
+    const [isAnyElementFocused, setIsAnyElementFocused] = useState(false);
+
+    const menuRef = useRef<HTMLDivElement>(null);
+    const lastFocusStateRef = useRef<{ focused: boolean; isEditable: boolean }>({ focused: false, isEditable: false });
+
+    const renderCompletionsMenu = () => {
+        if (!props.isCompletionsOpen || !props.completions || !fieldContainerRef?.current) return null;
+
+        const menuPosition = getCompletionsMenuPosition(fieldContainerRef);
+
+
+        const menuWidth = COMPLETIONS_WIDTH;
+        const viewportWidth = document.documentElement.clientWidth;
+        const adjustedLeft = Math.max(0, Math.min(menuPosition.left, viewportWidth - menuWidth - 10));
+
+        return (
+            <ContextMenuContainer
+                ref={menuRef}
+                top={menuPosition.top}
+                left={adjustedLeft}
+                data-menu={CHIP_MENU_VALUE}
+                onMouseDown={(e) => e.preventDefault()}
+            >
+                <Completions>
+                    {props.completions.map((item, index) => (
+                        <CompletionsItem
+                            key={`${item.label}-${index}`}
+                            item={item}
+                            isSelected={index === props.selectedCompletionItem}
+                            onClick={() => props.onCompletionSelect?.(item)}
+                            onMouseEnter={() => props.onCompletionHover?.(index)}
+                        />
+                    ))}
+                </Completions>
+            </ContextMenuContainer>
+        );
+    };
+
+    const renderHelperPane = () => {
+        if (!props.getHelperPane || !props.isHelperPaneOpen || !fieldContainerRef?.current) return null;
+
+        const menuPosition = getCompletionsMenuPosition(fieldContainerRef);
+        const menuWidth = COMPLETIONS_WIDTH;
+        const viewportWidth = document.documentElement.clientWidth;
+        const adjustedLeft = Math.max(0, Math.min(menuPosition.left, viewportWidth - menuWidth - 10));
+        return (
+            <ContextMenuContainer
+                ref={menuRef}
+                top={menuPosition.top}
+                left={adjustedLeft}
+                data-menu={CHIP_MENU_VALUE}
+                onMouseDown={(e) => {
+                    //HACK: Replace this with a proper solution to handle helperpane clicks.
+                    //TODO: Need comprehensive focus management solution
+                    const target = e.target as HTMLElement;
+                    if (
+                        target instanceof HTMLInputElement ||
+                        target instanceof HTMLTextAreaElement ||
+                        target.tagName.toLowerCase() === 'vscode-text-field' ||
+                        target.tagName.toLowerCase() === 'input' ||
+                        target.closest('vscode-text-field')
+                    ) {
+                        return;
+                    }
+                    e.preventDefault();
+                }}
+            >
+                {props.getHelperPane(
+                    props.value,
+                    props.handleHelperPaneValueChange ? props.handleHelperPaneValueChange : () => { },
+                    "3/4"
+                )}
+            </ContextMenuContainer>
+        );
+    };
+
+    const checkFocusState = useCallback(() => {
+        const container = fieldContainerRef?.current;
+        if (!container) {
+            setIsAnyElementFocused(false);
+            return;
+        }
+
+        const activeElement = document.activeElement as HTMLElement;
+
+        const isWithinContainer = container.contains(activeElement);
+
+        const isEditableOrChip =
+            activeElement?.hasAttribute('contenteditable') ||
+            activeElement?.getAttribute(DATA_CHIP_ATTRIBUTE) === CHIP_TRUE_VALUE ||
+            activeElement?.hasAttribute(DATA_ELEMENT_ID_ATTRIBUTE) ||
+            activeElement?.getAttribute(ARIA_PRESSED_ATTRIBUTE) !== null;
+
+        const isEditableSpan = activeElement?.hasAttribute('contenteditable');
+
+        const newFocusState = isWithinContainer && isEditableOrChip;
+
+        const lastState = lastFocusStateRef.current;
+        if (lastState.focused !== newFocusState || lastState.isEditable !== isEditableSpan) {
+            setIsAnyElementFocused(newFocusState);
+            lastFocusStateRef.current = { focused: newFocusState, isEditable: isEditableSpan };
+
+            if (props.onFocusChange) {
+                props.onFocusChange(newFocusState);
+            }
+        }
+    }, [fieldContainerRef]);
+
+    const debounce = (func: Function, delay: number) => {
+        let timer: ReturnType<typeof setTimeout>;
+        return (...args: any[]) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => func(...args), delay);
+        };
+    };
+
+    const debouncedCheckFocusState = debounce(checkFocusState, 100);
+
+    useEffect(() => {
+        const handleFocusChange = () => {
+            debouncedCheckFocusState();
+        };
+        document.addEventListener('focusin', handleFocusChange);
+        document.addEventListener('focusout', handleFocusChange);
+        checkFocusState();
+
+        return () => {
+            document.removeEventListener('focusin', handleFocusChange);
+            document.removeEventListener('focusout', handleFocusChange);
+        };
+    }, [debouncedCheckFocusState]);
+
+    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+                setTimeout(() => {
+                    props.onCloseCompletions?.();
+                    props.onHelperPaneClose?.();
+                }, 100);
+            }
+        };
+
+        if (props.isCompletionsOpen || props.isHelperPaneOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [props.isCompletionsOpen, props.isHelperPaneOpen, props.onCloseCompletions, props.onHelperPaneClose]);
+
+    const handleEditorClicked = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (e.target instanceof HTMLSpanElement) return;
+        const spans = (e.target as HTMLElement).querySelectorAll('span[contenteditable="true"]');
+        if (spans.length <= 0) return;
+
+        let closestSpan: HTMLSpanElement | null = null;
+        let smallestDistance = Number.MAX_VALUE;
+        let matchNotFound = true;
+
+        for (let i = 0; i < spans.length; i++) {
+            const span = spans[i] as HTMLSpanElement;
+            const spanRect = span.getBoundingClientRect();
+            if (!isBetween(spanRect.top, spanRect.bottom, e.clientY)) continue;
+            if (spanRect.right < e.clientX) {
+                const distance = e.clientX - spanRect.right;
+                if (distance < smallestDistance) {
+                    smallestDistance = distance;
+                    closestSpan = span;
+                    matchNotFound = false;
+                }
+            } else if (spanRect.left <= e.clientX && e.clientX <= spanRect.right) {
+                closestSpan = span;
+                matchNotFound = false;
+                break;
+            }
+        }
+        if (matchNotFound) {
+            (spans[spans.length - 1] as HTMLSpanElement).focus();
+        }
+        if (closestSpan) {
+            closestSpan.focus();
+        }
+    }
+
+    return (
+        <ChipEditorFieldContainer>
+            <ChipEditorField
+                ref={fieldContainerRef}
+                style={{
+                    ...style,
+                    flex: 1,
+                    maxHeight: props.isInExpandedMode ? `${EXPANDED_EDITOR_HEIGHT}px` : '100px',
+                    ...(props.isInExpandedMode && {
+                        height: `${EXPANDED_EDITOR_HEIGHT}px`,
+                        minHeight: `${EXPANDED_EDITOR_HEIGHT}px`,
+                    })
+                }}
+                onKeyUp={onKeyUp}
+                onClick={handleEditorClicked}
+                onKeyDown={onKeyDown}
+                onInput={onInput}
+            >
+                <div style={{ flex: 1, overflow: 'auto', height: props.isInExpandedMode ? `${EXPANDED_EDITOR_HEIGHT}px` : 'auto' }}>
+                    {children}
+                </div>
+            </ChipEditorField>
+            {renderCompletionsMenu()}
+            {renderHelperPane()}
+            <FloatingButtonContainer id="floating-button-container">
+                <FloatingToggleButton onClick={() => props.onToggleHelperPane?.()} title={props.isHelperPaneOpen ? "Close Helper" : "Open Helper"}>
+                    {props.isHelperPaneOpen ? <CloseHelperButton /> : <OpenHelperButton />}
+                </FloatingToggleButton>
+            </FloatingButtonContainer>
+        </ChipEditorFieldContainer>
+    )
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipComponent.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipComponent.tsx
new file mode 100644
index 00000000000..e8be29d1f88
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipComponent.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 } from "react";
+import { Chip } from "../styles";
+import { CHIP_TRUE_VALUE } from '../constants';
+import { ThemeColors } from "@wso2/ui-toolkit";
+
+export type ChipProps = {
+    type: 'variable' | 'property' | 'parameter';
+    text: string;
+    onClick?: (element: HTMLElement) => void;
+    onBlur?: () => void;
+    onFocus?: (element: HTMLElement) => void;
+    dataElementId?: string; // Add dataElementId prop
+}
+
+export const ChipComponent = (props: ChipProps) => {
+    const { type, text, onClick, onBlur, onFocus, dataElementId } = props; // Destructure dataElementId
+    const chipRef = useRef<HTMLDivElement>(null);
+
+    const handleClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (onClick && chipRef.current) {
+            onClick(chipRef.current);
+        }
+    };
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        e.stopPropagation();
+    };
+
+    const handleFocus = () => {
+        if (onFocus && chipRef.current) {
+            onFocus(chipRef.current);
+        }
+    };
+
+    if (type === 'variable') {
+        return <Chip ref={chipRef} contentEditable={false} tabIndex={0} onClick={handleClick} onMouseDown={handleMouseDown} onFocus={handleFocus} onBlur={onBlur} data-chip={CHIP_TRUE_VALUE} data-element-id={dataElementId}>{text}</Chip>;
+    } else if (type === 'property') {
+        return <Chip ref={chipRef} contentEditable={false} tabIndex={0} onClick={handleClick} onMouseDown={handleMouseDown} onFocus={handleFocus} onBlur={onBlur} data-chip={CHIP_TRUE_VALUE} data-element-id={dataElementId}>{text}</Chip>;
+    } else {
+        return (
+            <Chip
+                ref={chipRef}
+                contentEditable={false}
+                tabIndex={0}
+                onClick={handleClick}
+                onMouseDown={handleMouseDown}
+                onFocus={handleFocus}
+                onBlur={onBlur}
+                data-chip={CHIP_TRUE_VALUE}
+                data-element-id={dataElementId}
+                style={{ backgroundColor: '#70c995', color: ThemeColors.SURFACE_DIM }}
+            >
+                {/^\$\d+$/.test(text) ? '  ' : text}
+            </Chip>
+        );
+
+    }
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/CompletionsItem.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/CompletionsItem.tsx
new file mode 100644
index 00000000000..89a78e14e6b
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/CompletionsItem.tsx
@@ -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.
+ */
+
+import React, { useRef } from "react";
+import { createPortal } from "react-dom";
+import { CompletionItem, getIcon, ThemeColors } from "@wso2/ui-toolkit";
+import { CompletionsItemEl, CompletionsTag, DescriptionWrapper } from "../styles";
+
+interface CompletionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    item: CompletionItem;
+    isSelected: boolean;
+}
+
+export const CompletionsItem = (props: CompletionsProps) => {
+    const { item, ...divProps } = props;
+
+    const completionItemRef = useRef<HTMLDivElement>();
+
+    const getDescriptionOrigin = () => {
+        if (!completionItemRef.current) return {
+            top: 0, left: 0
+        }
+        const rect = completionItemRef.current.getBoundingClientRect();
+        return ({
+            left: rect.left,
+            top: rect.top
+        })
+    }
+    return (
+        <>
+            <CompletionsItemEl
+                style={{color: props.isSelected? ThemeColors.ON_PRIMARY : undefined}}
+                ref={completionItemRef}
+                {...divProps}
+            >
+                <div style={{
+                    display: "flex",
+                    gap: "5px"
+                }}>
+                    {getIcon(item.kind)}
+                    {item.label}
+                </div>
+                <CompletionsTag> {item.tag} </CompletionsTag>
+            </CompletionsItemEl>
+            {props.isSelected && createPortal(
+                <DescriptionWrapper style={{ top: getDescriptionOrigin().top, left: getDescriptionOrigin().left }}>{item.description}</DescriptionWrapper>,
+                document.body
+            )}
+        </>
+    )
+}
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/DebugToggleButton.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/DebugToggleButton.tsx
new file mode 100644
index 00000000000..74cb27d5d1f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/DebugToggleButton.tsx
@@ -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.
+ */
+
+import React from "react";
+import { FloatingToggleButton } from "./FloatingToggleButton";
+
+export type DebugToggleButtonProps = {
+    isActive: boolean;
+    onToggle: () => void;
+};
+
+export const DebugToggleButton: React.FC<DebugToggleButtonProps> = ({ 
+    isActive, 
+    onToggle 
+}) => {
+    const handleClick = () => {
+        onToggle();
+    };
+
+    return (
+        <FloatingToggleButton
+            isActive={isActive}
+            onClick={handleClick}
+            title="Debug Mode"
+        >
+            D
+        </FloatingToggleButton>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ExpressionToggleButton.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ExpressionToggleButton.tsx
new file mode 100644
index 00000000000..5df127ffaed
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ExpressionToggleButton.tsx
@@ -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.
+ */
+
+import React from "react";
+import { FloatingToggleButton } from "./FloatingToggleButton";
+
+export type ExpressionToggleButtonProps = {
+    isActive: boolean;
+    onToggle: () => void;
+};
+
+export const ExpressionToggleButton: React.FC<ExpressionToggleButtonProps> = ({ 
+    isActive, 
+    onToggle 
+}) => {
+    const handleClick = () => {
+        onToggle();
+    };
+
+    return (
+        <FloatingToggleButton
+            isActive={isActive}
+            onClick={handleClick}
+            title="Expression Mode"
+        >
+            E
+        </FloatingToggleButton>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingButtonIcons.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingButtonIcons.tsx
new file mode 100644
index 00000000000..193bb1b687a
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingButtonIcons.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";
+
+export const OpenHelperButton = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path
+                fill="currentColor"
+                d="m12 11.5l4-4H8zM19 3q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3zM5 16v3h14v-3zm14-2V5H5v9zM5 16v3z"
+            />
+        </svg>
+    );
+};
+
+export const CloseHelperButton = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path
+                fill="currentColor"
+                d="M8 11.5h8l-4-4zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-7h14V5H5z"
+            />
+        </svg>
+    );
+};
+
+export const ExpandButton = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8V3h5m8 0h5v5m0 8v5h-5m-8 0H3v-5"></path>
+        </svg>
+    );
+};
+
+export const CompressButton = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8h5V3m8 0v5h5m-5 13v-5h5M3 16h5v5"></path>
+        </svg>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingToggleButton.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingToggleButton.tsx
new file mode 100644
index 00000000000..6cd9126b699
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingToggleButton.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 from "react";
+import { FloatingToggleButton as StyledButton } from "../styles";
+import { ARIA_PRESSED_ATTRIBUTE } from '../constants';
+
+export type FloatingToggleButtonProps = {
+    isActive?: boolean;
+    onClick: () => void;
+    children: React.ReactNode;
+    title?: string;
+};
+
+export const FloatingToggleButton: React.FC<FloatingToggleButtonProps> = ({
+    isActive,
+    onClick,
+    children,
+    title
+}) => {
+    return (
+        <StyledButton
+            isActive={isActive ?? false}
+            onClick={onClick}
+            title={title}
+            {...{[ARIA_PRESSED_ATTRIBUTE]: isActive ?? false}}
+        >
+            {children}
+        </StyledButton>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/FxButton.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/FxButton.tsx
new file mode 100644
index 00000000000..cf1f48dae2c
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/FxButton.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { ThemeColors, Tooltip } from "@wso2/ui-toolkit";
+import React from "react";
+import styled from "@emotion/styled";
+
+export const Ribbon = styled.div`
+    background-color: ${ThemeColors.PRIMARY};
+    opacity: 0.6;
+    width: 24px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: 6px;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    border-right: none;
+    cursor: pointer;
+    position: relative;
+`;
+
+const FXButton = ({ onClick }: { onClick?: () => void }) => {
+    return (
+        <Tooltip content="Add Expression" containerSx={{ cursor: 'default' }}>
+            <Ribbon onClick={onClick}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    style={{ color: ThemeColors.ON_PRIMARY }}>
+                    <path
+                        fill="currentColor"
+                        d="M12.42 5.29c-1.1-.1-2.07.71-2.17 1.82L10 10h2.82v2h-3l-.44 5.07A4.001 4.001 0 0 1 2 18.83l1.5-1.5c.33 1.05 1.46 1.64 2.5 1.3c.78-.24 1.33-.93 1.4-1.74L7.82 12h-3v-2H8l.27-3.07a4.01 4.01 0 0 1 4.33-3.65c1.26.11 2.4.81 3.06 1.89l-1.5 1.5c-.25-.77-.93-1.31-1.74-1.38M22 13.65l-1.41-1.41l-2.83 2.83l-2.83-2.83l-1.43 1.41l2.85 2.85l-2.85 2.81l1.43 1.41l2.83-2.83l2.83 2.83L22 19.31l-2.83-2.81z" />
+                </svg>
+            </Ribbon>
+        </Tooltip>
+    );
+};
+
+export default FXButton;
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/TextElement.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/TextElement.tsx
new file mode 100644
index 00000000000..e65e2fe42d5
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/TextElement.tsx
@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, useLayoutEffect, useRef } from "react";
+import { getCaretOffsetWithin, getAbsoluteCaretPosition, setCaretPosition, handleKeyDownInTextElement, getAbsoluteCaretPositionFromModel, hasTextSelection, getSelectionOffsets, setSelectionRange } from "../utils";
+import { ExpressionModel } from "../types";
+import { InvisibleSpan } from "../styles";
+import { FOCUS_MARKER } from "../constants";
+
+export const TextElement = (props: {
+    element: ExpressionModel;
+    expressionModel: ExpressionModel[];
+    sx?: React.CSSProperties;
+    index: number;
+    onTextFocus?: (e: React.FocusEvent<HTMLSpanElement>) => void;
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void;
+}) => {
+    const { onExpressionChange } = props;
+    const spanRef = useRef<HTMLSpanElement | null>(null);
+    const pendingCaretOffsetRef = useRef<number | null>(null);
+    const lastValueRef = useRef<string>(props.element.value);
+    const isProgrammaticFocusRef = useRef<boolean>(false);
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
+        // Only call handleKeyDownInTextElement when there's no text selection (caret is at a single position)
+        // If there's a selection, let the browser handle the default behavior
+        // because we only have to handle the case where the cursor is in the starting position of
+        // a text element and user is trying to delete or move left or right
+        // if user has selected a range then we do not have to care about chip deletions
+        // (Chips cannot be selected)
+        if (spanRef.current && hasTextSelection(spanRef.current)) {
+            return;
+        }
+        handleKeyDownInTextElement(e, props.expressionModel, props.index, onExpressionChange, spanRef.current);
+    };
+
+    // Restore caret position after a value update if we captured a pending position during input
+    useLayoutEffect(() => {
+        const host = spanRef.current;
+        const pending = pendingCaretOffsetRef.current;
+        // Only restore caret if we have a pending position and the element is the active element
+        if (host && pending !== null && document.activeElement === host) {
+            setCaretPosition(host, pending);
+            pendingCaretOffsetRef.current = null;
+        }
+    }, [props.element.value]);
+
+    const updateFocusOffset = (host: HTMLSpanElement) => {
+        if (!onExpressionChange) return;
+        
+        // Get selection offsets (handles both caret position and selection range)
+        const { start, end } = getSelectionOffsets(host);
+        
+        const updatedModel = props.expressionModel.map((el, i) =>
+            i === props.index
+                ? { ...el, isFocused: true, focusOffsetStart: start, focusOffsetEnd: end }
+                : { ...el, isFocused: false, focusOffsetStart: undefined, focusOffsetEnd: undefined }
+        );
+        const newCursorPosition = getAbsoluteCaretPosition(updatedModel);
+        onExpressionChange(updatedModel, newCursorPosition, FOCUS_MARKER);
+    };
+
+    const handleMouseUp = (e: React.MouseEvent<HTMLSpanElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const host = spanRef.current;
+        if (!host) return;
+        // Sync caret after mouse placement
+        updateFocusOffset(host);
+    };
+
+    const handleInput = (e: React.FormEvent<HTMLSpanElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!onExpressionChange) return;
+        if (!props.expressionModel) return;
+
+        const host = spanRef.current;
+
+        const rawNewValue = e.currentTarget.textContent || '';
+        const oldValue = lastValueRef.current;
+
+        const cursorDelta = rawNewValue.length - oldValue.length;
+
+        const currentFocusOffset = props.element.focusOffsetStart ?? oldValue.length;
+
+        let pendingOffset: number | null = null;
+        if (host) {
+            pendingOffset = getCaretOffsetWithin(host);
+            pendingCaretOffsetRef.current = pendingOffset;
+        }
+
+        let newValue = rawNewValue;
+
+        const updatedExpressionModel = [...props.expressionModel];
+        let didPrependSpace = false;
+        if (props.index > 0) {
+            const previousModelElement = props.expressionModel[props.index - 1];
+            if (previousModelElement.isToken && previousModelElement.length > 0 && !newValue.startsWith(" ")) {
+                newValue = " " + newValue;
+                didPrependSpace = true;
+            }
+        }
+
+        // If we programmatically added a leading space, the caret (measured before update)
+        // must be shifted right by one to remain at the user's intended position.
+        const newFocusOffset = pendingOffset !== null
+            ? pendingOffset + (didPrependSpace ? 1 : 0)
+            : (currentFocusOffset + cursorDelta + (didPrependSpace ? 1 : 0));
+        if (pendingCaretOffsetRef.current !== null) {
+            pendingCaretOffsetRef.current = pendingCaretOffsetRef.current + (didPrependSpace ? 1 : 0);
+        }
+        updatedExpressionModel[props.index] = {
+            ...props.element,
+            value: newValue,
+            length: newValue.length,
+            isFocused: true,
+            focusOffsetStart: newFocusOffset,
+            focusOffsetEnd: newFocusOffset
+        };
+        const enteredText = newValue.substring(
+            currentFocusOffset,
+            newFocusOffset
+        );
+        const newAbsoluteCursorPosition = getAbsoluteCaretPositionFromModel(updatedExpressionModel);
+        lastValueRef.current = newValue;
+        onExpressionChange(updatedExpressionModel, newAbsoluteCursorPosition, enteredText);
+    };
+
+    const handleFocus = (e: React.FocusEvent<HTMLSpanElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        props.onTextFocus && props.onTextFocus(e);
+
+        if (isProgrammaticFocusRef.current) {
+            isProgrammaticFocusRef.current = false;
+            return;
+        }
+
+        if (!onExpressionChange || !props.expressionModel) return;
+        const updatedModel = props.expressionModel.map((element, index) => {
+            if (index === props.index) {
+                return { ...element, isFocused: true, focusOffsetStart: getCaretOffsetWithin(e.currentTarget), focusOffsetEnd: getCaretOffsetWithin(e.currentTarget) };
+            } else {
+                return { ...element, isFocused: false, focusOffsetStart: undefined, focusOffsetEnd: undefined };
+            }
+        })
+        const newCursorPosition = getAbsoluteCaretPosition(updatedModel);
+        onExpressionChange(updatedModel, newCursorPosition, FOCUS_MARKER);
+    }
+
+    // If this element is marked as focused, focus it and set the caret/selection to focusOffset
+    useEffect(() => {
+        if (props.element.isFocused && spanRef.current) {
+            const host = spanRef.current;
+            isProgrammaticFocusRef.current = true;
+            host.focus();
+            
+            const startOffset = props.element.focusOffsetStart ?? (host.textContent?.length || 0);
+            const endOffset = props.element.focusOffsetEnd ?? startOffset;
+            
+            if (startOffset !== endOffset) {
+                setSelectionRange(host, startOffset, endOffset);
+            } else {
+                setCaretPosition(host, startOffset);
+            }
+        }
+    }, [props.element.isFocused, props.element.focusOffsetStart, props.element.focusOffsetEnd]);
+
+    return (
+        <InvisibleSpan
+            ref={spanRef}
+            data-element-id={props.element.id}
+            onInput={handleInput}
+            onFocus={handleFocus}
+            onMouseUp={handleMouseUp}
+            onKeyDown={handleKeyDown}
+            contentEditable
+            suppressContentEditableWarning
+            style={props.sx}
+            >
+                {props.element.value}
+        </InvisibleSpan>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/TokenizedExpression.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/TokenizedExpression.tsx
new file mode 100644
index 00000000000..9a4d7676f99
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/TokenizedExpression.tsx
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { ReactNode } from "react";
+import { ChipComponent } from "./ChipComponent";
+import { TextElement } from "./TextElement";
+import { ExpressionModel } from "../types";
+
+export const getTokenTypeFromIndex = (index: number): string => {
+    const tokenTypes: { [key: number]: string } = {
+        0: 'variable',
+        1: 'property',
+        2: 'parameter'
+    };
+    return tokenTypes[index] || 'property';
+};
+
+export const getTokenChip = (
+    value: string,
+    type: string,
+    absoluteOffset?: number,
+    onChipClick?: (element: HTMLElement, value: string, type: string, id?: string) => void,
+    onChipBlur?: () => void,
+    onChipFocus?: (element: HTMLElement, value: string, type: string, absoluteOffset?: number) => void,
+    chipId?: string
+): ReactNode => {
+    const handleClick = (element: HTMLElement) => {
+        if (onChipClick) {
+            onChipClick(element, value, type, chipId);
+        }
+    };
+
+    const handleBlur = () => {
+        if (onChipBlur) {
+            onChipBlur();
+        }
+    };
+
+    const handleFocus = (element: HTMLElement) => {
+        if (onChipFocus) {
+            onChipFocus(element, value, type, absoluteOffset);
+        }
+    };
+
+    return <ChipComponent type={type as 'variable' | 'property' | 'parameter'} dataElementId={chipId} text={value} onClick={handleClick} onBlur={handleBlur} onFocus={handleFocus} />;
+
+}
+
+export type TokenizedExpressionProps = {
+    expressionModel: ExpressionModel[];
+    onChipClick?: (element: HTMLElement, value: string, type: string, id?: string) => void;
+    onChipBlur?: () => void;
+    onTextFocus?: (e: React.FocusEvent<HTMLSpanElement>) => void;
+    onChipFocus?: (element: HTMLElement, value: string, type: string, absoluteOffset?: number) => void;
+    onExpressionChange?: (updatedExpression: ExpressionModel[], cursorPosition: number, lastTypedText: string) => void;
+}
+
+export const TokenizedExpression = (props: TokenizedExpressionProps) => {
+    const { expressionModel, onExpressionChange } = props;
+
+    return (
+        expressionModel.length === 0 ? (
+            <TextElement
+                key="empty"
+                sx={{
+                    display: "inline-block"
+                }}
+                element={{ id: "empty", value: "", isToken: false, length: 0 } as ExpressionModel}
+                expressionModel={[]}
+                index={0}
+                onExpressionChange={onExpressionChange}
+            />
+        ) : (
+            <>
+                {expressionModel.map((element, index) => {
+                    if (element.isToken) {
+                        // Use stable key to prevent React from remounting and losing focus
+                        return (
+                            <React.Fragment key={element.id}>
+                                {getTokenChip(
+                                    element.value,
+                                    element.type,
+                                    undefined,
+                                    props.onChipClick,
+                                    props.onChipBlur,
+                                    props.onChipFocus,
+                                    element.id
+                                )}
+                            </React.Fragment>
+                        );
+                    } else {
+                        return <TextElement
+                            key={element.id}
+                            element={element}
+                            expressionModel={expressionModel}
+                            onTextFocus={props.onTextFocus}
+                            index={index}
+                            onExpressionChange={onExpressionChange}
+                            sx={{
+                                display: expressionModel.length === 1 ? 'inline-block' : 'inline',
+                            }}
+                        />;
+                    }
+                })}
+            </>
+        )
+    )
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts
new file mode 100644
index 00000000000..52c643fde92
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 const CHIP_EXPRESSION_EDITOR_HEIGHT = 26;
+export const EXPANDED_EDITOR_HEIGHT = 500;
+
+// Data attributes
+export const DATA_CHIP_ATTRIBUTE = 'data-chip';
+export const DATA_MENU_ATTRIBUTE = 'data-menu';
+export const DATA_ELEMENT_ID_ATTRIBUTE = 'data-element-id';
+export const ARIA_PRESSED_ATTRIBUTE = 'aria-pressed';
+
+// Attribute values
+export const CHIP_MENU_VALUE = 'chip-menu';
+export const CHIP_TRUE_VALUE = 'true';
+
+// Special text markers for expression changes
+export const BACKSPACE_MARKER = '#$BACKSPACE';
+export const DELETE_MARKER = '#$DELETE';
+export const ARROW_RIGHT_MARKER = '#$ARROWRIGHT';
+export const ARROW_LEFT_MARKER = '#$ARROWLEFT';
+export const FOCUS_MARKER = '#$FOCUS';
+export const COMPLETIONS_MARKER = '#$COMPLETIONS';
+export const HELPER_MARKER = '#$HELPER';
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/styles.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/styles.tsx
new file mode 100644
index 00000000000..2d2a03e413a
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/styles.tsx
@@ -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 styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { CHIP_EXPRESSION_EDITOR_HEIGHT } from "./constants";
+import { ThemeColors } from "@wso2/ui-toolkit";
+
+export const ChipEditorField = styled.div`
+    font-family: monospace;
+    font-size: 12px;
+    min-height: ${CHIP_EXPRESSION_EDITOR_HEIGHT}px;
+    height: 100%;
+    width: 100%;
+    padding: 1px 25px 1px 8px;
+    background-color: var(--vscode-input-background);
+    color: var(--vscode-input-foreground, #000000);
+    white-space: pre-wrap;
+    outline: none;
+    border: 1px solid var(--vscode-dropdown-border);
+    word-break: break-all;
+    position: relative;
+    overflow: auto;
+
+    &:focus {
+        outline: 1px solid var(--vscode-focusBorder, #0078d4);
+    }
+`;
+
+export const ChipEditorContainer = styled.div`
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 100%;
+    margin-top: 4px;
+`;
+
+export const Chip = styled.div`
+    border-radius: 4px;
+    background-color: rgba(0, 122, 204, 0.3);
+    color: var(--vscode-input-foreground, white); /* Updated text color */
+    cursor: pointer;
+    margin: 2px 0px;
+    font-size: 12px;
+    padding: 2px 10px;
+    display: inline-block;
+    min-height: 20px;
+    min-width: 25px;
+    transition: all 0.2s ease;
+    outline: none;
+    vertical-align: middle;
+    user-select: none;
+    -webkit-user-select: none;
+
+    &:hover {
+        background-color: rgba(0, 122, 204, 0.5);
+    }
+
+    &:active {
+        box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.8);
+        background-color: ${ThemeColors.PRIMARY};
+    }
+`;
+
+export const COMPLETIONS_WIDTH = 300;
+
+export const ContextMenuContainer = styled.div<{ top: number; left: number }>`
+    position: absolute;
+    top: ${props => props.top}px;
+    left: ${props => props.left}px;
+    background-color: ${ThemeColors.SURFACE_CONTAINER};
+    border-radius: 4px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+    z-index: 1000;
+    min-width: 120px;
+    width: ${COMPLETIONS_WIDTH}px;
+    overflow: hidden;
+`;
+
+export const ChipMenuItem = styled.div`
+    padding: 6px 12px;
+    cursor: pointer;
+    font-size: 12px;
+    color: ${ThemeColors.ON_SURFACE};
+    
+    &:hover {
+        background-color: ${ThemeColors.SURFACE};
+    }
+`
+
+export const InvisibleSpan = styled.span`
+    min-height: 20px;
+    min-width: 15px;
+    border: none;
+    outline: none;
+    background: transparent;
+    box-shadow: none;
+    padding: 3px 3px 0 0;
+    margin: 0;
+    padding-top: 3px;
+    border-radius: 0;
+    background-color: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    text-decoration: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    &:focus {
+        outline: none;
+        border: none;
+        box-shadow: none;
+    }
+
+    &:active {
+        outline: none;
+        border: none;
+        box-shadow: none;
+    }
+
+    &:hover {
+        outline: none;
+        border: none;
+        box-shadow: none;
+        background-color: transparent;
+    }
+
+    &::before,
+    &::after {
+        border: none;
+        outline: none;
+        box-shadow: none;
+    }
+`;
+
+const CompletionsadeInUp = keyframes`
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+`;
+
+export const Completions = styled.div`
+    background-color: ${ThemeColors.SURFACE_BRIGHT};
+    border: 1px solid ${ThemeColors.OUTLINE};
+    width: 100%;
+    max-height: 300px;
+    overflow-y: auto;
+    position: static;
+    padding: 2px 0px;
+    border-radius: 3px;
+    z-index: 2001;
+    animation: ${CompletionsadeInUp} 0.3s ease forwards;
+`
+
+export const DescriptionWrapper = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2001;
+    background-color: ${ThemeColors.SURFACE_BRIGHT};
+    color: var(--vscode-input-foreground, white);
+    width: fit-content;
+    height: fit-content;
+    padding: 4px 8px; 
+    border-radius: 2px;
+    border: 1px solid ${ThemeColors.OUTLINE};
+    font-size: 14px;
+    pointer-events: none; 
+    transform: translateX(-100%);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); 
+`;
+
+export const CompletionsItemEl = styled.div<CompletionsItemElProps>`
+    height: 25px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0px 5px;
+    align-items: center;
+    background-color: ${(props: CompletionsItemElProps) =>
+        props.isSelected
+            ? 'var(--vscode-list-activeSelectionBackground)'
+            : ThemeColors.SURFACE_BRIGHT};
+    color: var(--vscode-input-foreground, #000000); /* Updated text color */
+
+    &:hover {
+        background-color: ${ThemeColors.OUTLINE_VARIANT};
+        cursor: pointer;
+    }
+`;
+
+export const CompletionsTag = styled.div`
+    color: ${ThemeColors.ON_SURFACE_VARIANT}
+`
+
+interface CompletionsItemElProps {
+    isSelected?: boolean;
+}
+
+// Floating toggle button styles - VS Code design philosophy
+export const FloatingButtonContainer = styled.div`
+    position: absolute;
+    bottom: 6px;
+    right: 6px; 
+    display: flex;
+    gap: 6px;
+    z-index: 1500;
+`;
+
+export const FloatingToggleButton = styled.button<{ isActive: boolean }>`
+    width: 16px;
+    height: 16px;
+    border: 1px solid ${props => props.isActive ? ThemeColors.PRIMARY : ThemeColors.OUTLINE};
+    border-radius: 2px;
+    background-color: ${props => props.isActive ? ThemeColors.PRIMARY : ThemeColors.SURFACE_CONTAINER};
+    color: ${props => props.isActive ? ThemeColors.ON_PRIMARY : ThemeColors.ON_SURFACE_VARIANT};
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 9px;
+    font-weight: 600;
+    transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, transform 0.1s ease;
+    outline: none;
+    padding: 0;
+    box-shadow: ${props => props.isActive ? `0 0 0 1px ${ThemeColors.PRIMARY}` : '0 1px 2px rgba(0, 0, 0, 0.15)'};
+
+    &:hover {
+        background-color: ${props => props.isActive ? ThemeColors.PRIMARY_CONTAINER : ThemeColors.SURFACE_CONTAINER};
+        border-color: ${props => props.isActive ? ThemeColors.PRIMARY : ThemeColors.OUTLINE_VARIANT};
+        transform: scale(1.05);
+        
+        svg {
+            color: ${ThemeColors.PRIMARY}cc;
+        }
+    }
+
+    &:active {
+        background-color: ${props => props.isActive ? ThemeColors.PRIMARY : ThemeColors.SURFACE_CONTAINER};
+    }
+
+    &:focus-visible {
+        outline: 1px solid ${ThemeColors.PRIMARY};
+        outline-offset: 2px;
+    }
+`;
+
+export const ExpandedPopupContainer = styled.div`
+    flex: 1;
+    position: absolute;
+    width: 765px;
+    padding: 50px 10px 10px 10px;
+    height: 85%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const spin = keyframes`
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+`;
+
+export const Spinner = styled.span`
+    display: inline-block;
+    position: absolute;
+    margin: auto;
+    font-size: 14px;
+    animation: ${spin} 1s linear infinite;
+`;
+
+const loading = keyframes`
+    0% {
+        background: var(--vscode-editor-background);
+    }
+    100% {
+        background: var(--vscode-editor-inactiveSelectionBackground);
+    }
+`;
+
+export const SkeletonLoader = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--vscode-editor-background);
+    z-index: 1000;
+    border: 1px solid var(--vscode-dropdown-border);
+    border-radius: 2px;
+    overflow: hidden;
+    pointer-events: none;
+    animation: ${loading} 1s infinite alternate;
+`;
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/types.ts b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/types.ts
new file mode 100644
index 00000000000..7f64cd5977b
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/types.ts
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 enum InputMode {
+  TEXT = "Text",
+  EXP = "Expression"
+}
+
+export const INPUT_MODE_MAP = {
+  string: InputMode.TEXT,
+  //later add more when needed
+};
+
+export type ExpressionColumnOffset = {
+  startColumn: number;
+  endColumn: number;
+}
+
+export type ExpressionTokenPosition = {
+  lineNumber: number;
+  column: ExpressionColumnOffset;
+}
+
+export type Token = {
+  line: number;
+  column: number;
+  length: number;
+  tokenType: 'variable'
+}
+
+export type ExpressionModel = {
+  id: string
+  value: string,
+  isToken: boolean,
+  startColumn: number,
+  startLine: number,
+  length: number,
+  type: 'variable' | 'function' | 'literal' | 'parameter',
+  isFocused?: boolean
+  focusOffsetStart?: number,
+  focusOffsetEnd?: number
+}
+
+export type CursorPosition = {
+  start: number;
+  end: number;
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/utils.ts b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/utils.ts
new file mode 100644
index 00000000000..72a761ee39f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/utils.ts
@@ -0,0 +1,1215 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { CompletionItem } from "@wso2/ui-toolkit";
+import { INPUT_MODE_MAP, InputMode, ExpressionModel } from "./types";
+import { BACKSPACE_MARKER, DELETE_MARKER, ARROW_RIGHT_MARKER, ARROW_LEFT_MARKER } from "./constants";
+
+const TOKEN_LINE_OFFSET_INDEX = 0;
+const TOKEN_START_CHAR_OFFSET_INDEX = 1;
+const TOKEN_LENGTH_INDEX = 2;
+
+export const getInputModeFromTypes = (valueTypeConstraint: string | string[]): InputMode => {
+    if (!valueTypeConstraint) return;
+    let types: string[];
+    if (typeof valueTypeConstraint === 'string') {
+        if (valueTypeConstraint.includes('|')) {
+            types = valueTypeConstraint.split('|').map(t => t.trim());
+        } else {
+            types = [valueTypeConstraint];
+        }
+    } else {
+        types = valueTypeConstraint;
+    }
+
+    for (let i = 0; i < types.length; i++) {
+        if (INPUT_MODE_MAP[types[i]]) {
+            return INPUT_MODE_MAP[types[i]];
+        }
+    }
+    return;
+};
+
+export const getDefaultExpressionMode = (valueTypeConstraint: string | string[]): InputMode => {
+    if (!valueTypeConstraint) throw new Error("Value type constraint is undefined");
+    return getInputModeFromTypes(valueTypeConstraint);
+}
+
+export const getAbsoluteColumnOffset = (value: string, line: number, column: number) => {
+    const lines = value.split("\n");
+    let cumulativeLength = 0;
+    if (line < 0 || line >= lines.length) throw new Error("Invalid line number");
+    for (let i = 0; i < lines.length; i++) {
+        if (i === line) {
+            return cumulativeLength + column;
+        }
+        cumulativeLength += lines[i].length + 1;
+    }
+}
+
+export const getLineFromAbsoluteOffset = (value: string, absoluteOffset: number) => {
+    const lines = value.split("\n");
+    let cumulativeLength = 0;
+
+    for (let i = 0; i < lines.length; i++) {
+        cumulativeLength += lines[i].length;
+        if (cumulativeLength >= absoluteOffset) {
+            return i;
+        }
+        cumulativeLength += 1;
+    }
+    return lines.length - 1;
+}
+
+export const getTokenChunks = (tokens: number[]) => {
+    const chunkSize = 5;
+    const tokenChunks = [];
+    for (let i = 0; i < tokens.length; i += chunkSize) {
+        tokenChunks.push(tokens.slice(i, i + chunkSize));
+    }
+    return tokenChunks;
+};
+
+export const calculateCompletionsMenuPosition = (
+    fieldContainerRef: React.RefObject<HTMLDivElement>,
+    setMenuPosition: React.Dispatch<React.SetStateAction<{ top: number; left: number }>>
+) => {
+    if (fieldContainerRef.current) {
+        const activeElement = document.activeElement as HTMLElement;
+        if (activeElement && activeElement.hasAttribute('data-element-id')) {
+            const rect = activeElement.getBoundingClientRect();
+            const containerRect = fieldContainerRef.current.getBoundingClientRect();
+            const menuWidth = 300;
+            let left = rect.right - containerRect.left - menuWidth;
+
+            left = Math.max(0, left);
+
+            setMenuPosition({
+                top: rect.bottom - containerRect.top + 20,
+                left: left
+            });
+        } else {
+            const containerRect = fieldContainerRef.current.getBoundingClientRect();
+            const menuWidth = 300;
+            setMenuPosition({
+                top: containerRect.bottom,
+                left: Math.max(0, containerRect.width - menuWidth)
+            });
+        }
+    } else {
+        setMenuPosition(prev => ({ ...prev }));
+    }
+};
+
+export const getCompletionsMenuPosition = (
+    fieldContainerRef: React.RefObject<HTMLDivElement>
+) => {
+    const activeElement = document.activeElement as HTMLElement;
+    if (activeElement && activeElement.hasAttribute('data-element-id')) {
+        const rect = activeElement.getBoundingClientRect();
+        const containerRect = fieldContainerRef.current.getBoundingClientRect();
+        const menuWidth = 300;
+        let left = rect.right - containerRect.left - menuWidth;
+
+        left = Math.max(0, left);
+
+        return {
+            top: rect.bottom - containerRect.top + 5,
+            left: left
+        }
+    } else {
+        const containerRect = fieldContainerRef.current.getBoundingClientRect();
+        const menuWidth = 300;
+        return ({
+            top: containerRect.height,
+            left: Math.max(0, containerRect.width - menuWidth - 30)
+        });
+    }
+};
+
+export const getTokenAtCursorPosition = (
+    expressionModel: ExpressionModel[],
+    cursorPosition: number
+) => {
+    let currentAbsolutePosition = 0;
+
+    for (const item of expressionModel) {
+        const itemStart = currentAbsolutePosition;
+        const itemEnd = currentAbsolutePosition + item.length;
+
+        if (cursorPosition >= itemStart && cursorPosition <= itemEnd) {
+            const offset = cursorPosition - itemStart;
+            return {
+                element: item,
+                offset: offset
+            };
+        }
+
+        currentAbsolutePosition += item.length;
+    }
+
+    return null;
+};
+
+export const getTextValueFromExpressionModel = (expressionModel: ExpressionModel[] = []): string => {
+    if (!Array.isArray(expressionModel) || expressionModel.length === 0) return "";
+
+    return expressionModel
+        .map((item: ExpressionModel) => {
+            return item.value;
+        })
+        .join("");
+};
+
+export const expressionModelInitValue: ExpressionModel = {
+    id: '1',
+    value: '',
+    isToken: false,
+    startColumn: 0,
+    startLine: 0,
+    length: 0,
+    type: 'literal',
+    isFocused: false,
+    focusOffsetStart: undefined
+}
+
+export const createExpressionModelFromTokens = (
+    value: string,
+    tokens: number[]
+): ExpressionModel[] => {
+    if (!value) return [];
+    if (!tokens || tokens.length === 0) {
+        return [{
+           ...expressionModelInitValue, value: value, length: value.length, 
+        }];
+    }
+
+    const expressionModel: ExpressionModel[] = [];
+    const tokenChunks = getTokenChunks(tokens);
+
+    let currentLine = 0;
+    let currentChar = 0;
+    let previousTokenEndOffset = 0;
+    let idCounter = 1;
+
+    for (let i = 0; i < tokenChunks.length; i++) {
+        const chunk = tokenChunks[i];
+        const deltaLine = chunk[TOKEN_LINE_OFFSET_INDEX];
+        const deltaStartChar = chunk[TOKEN_START_CHAR_OFFSET_INDEX];
+        const tokenLength = chunk[TOKEN_LENGTH_INDEX];
+        const tokenTypeIndex = chunk[3];
+        const tokenModifiers = chunk[4];
+
+        currentLine += deltaLine;
+        if (deltaLine === 0) {
+            currentChar += deltaStartChar;
+        } else {
+            currentChar = deltaStartChar;
+        }
+
+        const tokenAbsoluteOffset = getAbsoluteColumnOffset(value, currentLine, currentChar);
+
+        if (tokenAbsoluteOffset > previousTokenEndOffset) {
+            const literalValue = value.slice(previousTokenEndOffset, tokenAbsoluteOffset);
+            const literalStartLine = getLineFromAbsoluteOffset(value, previousTokenEndOffset);
+            const literalStartColumn = previousTokenEndOffset - getAbsoluteColumnOffset(value, literalStartLine, 0);
+
+            expressionModel.push({
+                id: String(idCounter++),
+                value: literalValue,
+                isToken: false,
+                startColumn: literalStartColumn,
+                startLine: literalStartLine,
+                length: literalValue.length,
+                type: 'literal'
+            });
+        }
+
+        const tokenValue = value.slice(tokenAbsoluteOffset, tokenAbsoluteOffset + tokenLength);
+        const tokenType = getTokenTypeFromIndex(tokenTypeIndex);
+
+        expressionModel.push({
+            id: String(idCounter++),
+            value: tokenValue,
+            isToken: true,
+            startColumn: currentChar,
+            startLine: currentLine,
+            length: tokenLength,
+            type: tokenType as 'variable' | 'function' | 'literal'
+        });
+
+        previousTokenEndOffset = tokenAbsoluteOffset + tokenLength;
+    }
+
+    if (previousTokenEndOffset < value.length) {
+        const literalValue = value.slice(previousTokenEndOffset);
+        const literalStartLine = getLineFromAbsoluteOffset(value, previousTokenEndOffset);
+        const literalStartColumn = previousTokenEndOffset - getAbsoluteColumnOffset(value, literalStartLine, 0);
+
+        expressionModel.push({
+            id: String(idCounter++),
+            value: literalValue,
+            isToken: false,
+            startColumn: literalStartColumn,
+            startLine: literalStartLine,
+            length: literalValue.length,
+            type: 'literal'
+        });
+    }
+
+    if (expressionModel.length > 0 && expressionModel[0].isToken) {
+        expressionModel.unshift({
+            id: '0',
+            value: '',
+            isToken: false,
+            startColumn: 0,
+            startLine: 0,
+            length: 0,
+            type: 'literal'
+        });
+    }
+
+    if (expressionModel.length > 0 && expressionModel[expressionModel.length - 1].isToken) {
+        const endLine = getLineFromAbsoluteOffset(value, value.length);
+        const endColumnBase = getAbsoluteColumnOffset(value, endLine, 0);
+        const endColumn = (typeof endColumnBase === 'number') ? (value.length - endColumnBase) : 0;
+        expressionModel.push({
+            id: '0',
+            value: '',
+            isToken: false,
+            startColumn: endColumn,
+            startLine: endLine,
+            length: 0,
+            type: 'literal'
+        });
+    }
+
+    // Renumber all ids to match their final positions (1-indexed)
+    expressionModel.forEach((el, index) => {
+        el.id = String(index + 1);
+    });
+
+    return expressionModel;
+};
+
+const getTokenTypeFromIndex = (index: number): string => {
+    const tokenTypes: { [key: number]: string } = {
+        0: 'variable',
+        1: 'function',
+        2: 'parameter',
+        3: 'property',
+    };
+    return tokenTypes[index] || 'variable';
+};
+
+export const getCaretOffsetWithin = (el: HTMLElement): number => {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return 0;
+    const range = selection.getRangeAt(0);
+    if (!el.contains(range.startContainer)) return 0;
+    let offset = 0;
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
+    let current: Node | null = walker.nextNode();
+    while (current) {
+        if (current === range.startContainer) {
+            offset += range.startOffset;
+            break;
+        } else {
+            offset += (current.textContent || '').length;
+        }
+        current = walker.nextNode();
+    }
+    return offset;
+};
+
+export const hasTextSelection = (el: HTMLElement): boolean => {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return false;
+    const range = selection.getRangeAt(0);
+    if (!el.contains(range.startContainer)) return false;
+    return !range.collapsed;
+};
+
+export const getSelectionOffsets = (el: HTMLElement): { start: number; end: number } => {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+        const offset = getCaretOffsetWithin(el);
+        return { start: offset, end: offset };
+    }
+    
+    const range = selection.getRangeAt(0);
+    
+    if (!el.contains(range.startContainer) || !el.contains(range.endContainer)) {
+        const offset = getCaretOffsetWithin(el);
+        return { start: offset, end: offset };
+    }
+    if (range.collapsed) {
+        const offset = getCaretOffsetWithin(el);
+        return { start: offset, end: offset };
+    }
+
+    let startOffset = 0;
+    let endOffset = 0;
+    
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
+    let current: Node | null = walker.nextNode();
+    
+    while (current) {
+        const textLength = (current.textContent || '').length;
+        
+        // Calculate start offset
+        if (current === range.startContainer) {
+            startOffset += range.startOffset;
+        } else if (current.compareDocumentPosition(range.startContainer) & Node.DOCUMENT_POSITION_FOLLOWING) {
+            // startContainer comes after current node
+            startOffset += textLength;
+        }
+        
+        // Calculate end offset
+        if (current === range.endContainer) {
+            endOffset += range.endOffset;
+            break;
+        } else {
+            endOffset += textLength;
+        }
+        
+        current = walker.nextNode();
+    }
+
+    return { start: startOffset, end: endOffset };
+};
+
+export const getAbsoluteCaretPosition = (model: ExpressionModel[] | undefined): number => {
+    if (!model || model.length === 0) return 0;
+    const active = document.activeElement as HTMLElement | null;
+    if (!active) return 0;
+    const elementId = active.getAttribute('data-element-id');
+    if (!elementId) return 0;
+    const idx = model.findIndex(m => m.id === elementId);
+    if (idx < 0) return 0;
+
+    const carrotOffsetInSelectedSpan = getCaretOffsetWithin(active);
+
+    let sumOfChars = 0;
+    for (let i = 0; i < idx; i++) {
+        sumOfChars += model[i].length;
+    }
+
+    return sumOfChars + carrotOffsetInSelectedSpan;
+};
+
+export const getAbsoluteCaretPositionFromModel = (expressionModel: ExpressionModel[]): number => {
+    if (!expressionModel || expressionModel.length === 0) return 0;
+
+    let absolutePosition = 0;
+
+    for (const element of expressionModel) {
+        if (element.isFocused) {
+            absolutePosition += element.focusOffsetStart ?? 0;
+            break;
+        }
+        absolutePosition += element.length;
+    }
+
+    return absolutePosition;
+};
+
+export const mapAbsoluteToModel = (model: ExpressionModel[], absolutePos: number): { index: number; offset: number } | null => {
+    if (!model || model.length === 0) return null;
+    let sum = 0;
+    for (let i = 0; i < model.length; i++) {
+        const len = model[i].length;
+        if (absolutePos <= sum + len) {
+            const local = Math.max(0, Math.min(len, absolutePos - sum));
+            return { index: i, offset: local };
+        }
+        sum += len;
+    }
+    return { index: model.length - 1, offset: model[model.length - 1].length };
+};
+
+export const findNearestEditableIndex = (model: ExpressionModel[], startIndex: number, preferNext: boolean): number | null => {
+    if (!model || model.length === 0) return null;
+    if (!model[startIndex].isToken) return startIndex;
+    if (preferNext) {
+        for (let i = startIndex + 1; i < model.length; i++) {
+            if (!model[i].isToken) return i;
+        }
+        for (let i = startIndex - 1; i >= 0; i--) {
+            if (!model[i].isToken) return i;
+        }
+    } else {
+        for (let i = startIndex - 1; i >= 0; i--) {
+            if (!model[i].isToken) return i;
+        }
+        for (let i = startIndex + 1; i < model.length; i++) {
+            if (!model[i].isToken) return i;
+        }
+    }
+    return null;
+};
+
+export const updateExpressionModelWithCompletion = (
+    expressionModel: ExpressionModel[] | undefined,
+    absoluteCaretPosition: number,
+    completionValue: string
+): { updatedModel: ExpressionModel[]; updatedValue: string; newCursorPosition: number } | null => {
+    if (!expressionModel) return null;
+
+    const mapped = mapAbsoluteToModel(expressionModel, absoluteCaretPosition);
+
+    if (!mapped) return null;
+
+    const { index, offset } = mapped;
+    const elementAboutToModify = expressionModel[index];
+
+    if (!elementAboutToModify || typeof elementAboutToModify.value !== 'string') return null;
+
+    const textBeforeCaret = elementAboutToModify.value.substring(0, offset);
+    const textAfterCaret = elementAboutToModify.value.substring(offset);
+
+    const lastWordMatch = textBeforeCaret.match(/\b\w+$/);
+    const lastWordStart = lastWordMatch ? textBeforeCaret.lastIndexOf(lastWordMatch[0]) : offset;
+
+    const updatedText =
+        textBeforeCaret.substring(0, lastWordStart) +
+        completionValue +
+        textAfterCaret;
+
+    let sumOfCharsBefore = 0;
+    for (let i = 0; i < index; i++) {
+        sumOfCharsBefore += expressionModel[i].length;
+    }
+    const newCursorPosition = sumOfCharsBefore + lastWordStart + completionValue.length;
+
+    const updatedModel = expressionModel.map((el, i) =>
+        i === index ? { ...el, value: updatedText, length: updatedText.length } : el
+    );
+
+    const updatedValue = getTextValueFromExpressionModel(updatedModel);
+    return { updatedModel, updatedValue, newCursorPosition };
+};
+
+export const updateExpressionModelWithHelper = (
+    expressionModel: ExpressionModel[] | undefined,
+    absoluteCaretPosition: number,
+    helperValue: string
+): { updatedModel: ExpressionModel[]; updatedValue: string; newCursorPosition: number } | null => {
+    if (!expressionModel) return null;
+
+    const mapped = mapAbsoluteToModel(expressionModel, absoluteCaretPosition);
+
+    if (!mapped) return null;
+
+    const { index, offset } = mapped;
+    const elementAboutToModify = expressionModel[index];
+
+    if (!elementAboutToModify || typeof elementAboutToModify.value !== 'string') return null;
+
+    const textBeforeCaret = elementAboutToModify.value.substring(0, offset);
+    const textAfterCaret = elementAboutToModify.value.substring(offset);
+
+    const updatedText =
+        textBeforeCaret +
+        helperValue +
+        textAfterCaret;
+
+    let sumOfCharsBefore = 0;
+    for (let i = 0; i < index; i++) {
+        sumOfCharsBefore += expressionModel[i].length;
+    }
+    const newCursorPosition = sumOfCharsBefore + helperValue.length;
+
+    const updatedModel = expressionModel.map((el, i) =>
+        i === index ? { ...el, value: updatedText, length: updatedText.length } : el
+    );
+
+    const updatedValue = getTextValueFromExpressionModel(updatedModel);
+    return { updatedModel, updatedValue, newCursorPosition };
+};
+
+export const updateExpressionModelWithHelperValue = (
+    expressionModel: ExpressionModel[] | undefined,
+    absoluteCaretPosition: number,
+    helperValue: string,
+    replaceEntireToken: boolean = false
+): { updatedModel: ExpressionModel[]; updatedValue: string; newCursorPosition: number } | null => {
+    if (!expressionModel) return null;
+    let initializedModel = []
+    if (expressionModel.length === 0) {
+        initializedModel = [{
+            id: "1",
+            value: "",
+            isToken: false,
+            startColumn: 0,
+            startLine: 0,
+            length: 0,
+            type: 'literal',
+            isFocused: false,
+            focusOffsetStart: 0,
+            focusOffsetEnd: 0
+        }]
+    }
+    else {
+        initializedModel = expressionModel
+    }
+
+    const mapped = mapAbsoluteToModel(initializedModel, absoluteCaretPosition);
+
+    if (!mapped) return null;
+
+    const { index, offset } = mapped;
+    const elementAboutToModify = initializedModel[index];
+
+    if (!elementAboutToModify || typeof elementAboutToModify.value !== 'string') return null;
+
+    let updatedText = '';
+    if (replaceEntireToken) {
+        updatedText = helperValue;
+    }
+    else {
+        const textBeforeCaret = elementAboutToModify.value.substring(0, offset);
+        const textAfterCaret = elementAboutToModify.value.substring(offset);
+        updatedText = textBeforeCaret + helperValue + textAfterCaret;
+    }
+
+    let sumOfCharsBefore = 0;
+    for (let i = 0; i < index; i++) {
+        sumOfCharsBefore += initializedModel[i].length;
+    }
+
+    let newCursorPosition: number;
+    if (replaceEntireToken) {
+        newCursorPosition = sumOfCharsBefore + helperValue.length;
+    } else {
+        newCursorPosition = sumOfCharsBefore + offset + helperValue.length;
+    }
+
+    const updatedModel = initializedModel.map((el, i) =>
+        i === index ? { ...el, value: updatedText, length: updatedText.length } : el
+    );
+
+    const updatedValue = getTextValueFromExpressionModel(updatedModel);
+    return { updatedModel, updatedValue, newCursorPosition };
+};
+
+export const handleCompletionNavigation = (
+    e: React.KeyboardEvent,
+    completionsLength: number,
+    selectedCompletionItem: number,
+    setSelectedCompletionItem: React.Dispatch<React.SetStateAction<number>>,
+    handleCompletionSelect: (completion: CompletionItem) => void,
+    setIsCompletionsOpen: React.Dispatch<React.SetStateAction<boolean>>,
+    completions: CompletionItem[]
+) => {
+    switch (e.key) {
+        case 'ArrowDown':
+            e.preventDefault();
+            setSelectedCompletionItem(prev =>
+                prev < completionsLength - 1 ? prev + 1 : prev
+            );
+            break;
+        case 'ArrowUp':
+            e.preventDefault();
+            setSelectedCompletionItem(prev =>
+                prev > 0 ? prev - 1 : -1
+            );
+            break;
+        case 'Enter':
+            if (selectedCompletionItem >= 0 && selectedCompletionItem < completionsLength) {
+                e.preventDefault();
+                handleCompletionSelect(completions[selectedCompletionItem]);
+            }
+            break;
+        case 'Escape':
+            e.preventDefault();
+            setIsCompletionsOpen(false);
+            break;
+        default:
+            break;
+    }
+};
+
+export const setFocusInExpressionModel = (
+    exprModel: ExpressionModel[],
+    mapped: { index: number; offset: number } | null,
+    preferNext: boolean = true
+): ExpressionModel[] => {
+    if (!mapped) return exprModel;
+
+    const editableIndex = findNearestEditableIndex(exprModel, mapped.index, preferNext);
+    if (editableIndex !== null) {
+        const boundedOffset = Math.max(0, Math.min(exprModel[editableIndex].length, mapped.offset));
+        return exprModel.map((m, i) => (
+            i === editableIndex
+                ? { ...m, isFocused: true, focusOffsetStart: boundedOffset, focusOffsetEnd: boundedOffset }
+                : { ...m, isFocused: false }
+        ));
+    }
+
+    return exprModel;
+};
+
+export const setCaretPosition = (el: HTMLElement, position: number) => {
+    if (!el.firstChild) {
+        el.appendChild(document.createTextNode(""));
+    }
+
+    let remaining = Math.max(0, position);
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
+    let textNode: Text | null = null;
+    let posInNode = 0;
+    let node = walker.nextNode() as Text | null;
+
+    while (node) {
+        const len = node.textContent ? node.textContent.length : 0;
+        if (remaining <= len) {
+            textNode = node;
+            posInNode = remaining;
+            break;
+        }
+        remaining -= len;
+        node = walker.nextNode() as Text | null;
+    }
+
+    if (!textNode) {
+        const last = el.lastChild;
+        if (last && last.nodeType === Node.TEXT_NODE) {
+            textNode = last as Text;
+            posInNode = (textNode.textContent || "").length;
+        } else {
+            textNode = el.firstChild as Text;
+            posInNode = 0;
+        }
+    }
+
+    const range = document.createRange();
+    range.setStart(textNode, Math.max(0, Math.min(posInNode, (textNode.textContent || "").length)));
+    range.collapse(true);
+    const sel = window.getSelection();
+    if (sel) {
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+};
+
+export const setSelectionRange = (el: HTMLElement, start: number, end: number) => {
+    if (!el.firstChild) {
+        el.appendChild(document.createTextNode(""));
+    }
+
+    // Helper function to find text node and position
+    const findPosition = (position: number) => {
+        let remaining = Math.max(0, position);
+        const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
+        let textNode: Text | null = null;
+        let posInNode = 0;
+        let node = walker.nextNode() as Text | null;
+
+        while (node) {
+            const len = node.textContent ? node.textContent.length : 0;
+            if (remaining <= len) {
+                textNode = node;
+                posInNode = remaining;
+                break;
+            }
+            remaining -= len;
+            node = walker.nextNode() as Text | null;
+        }
+
+        if (!textNode) {
+            const last = el.lastChild;
+            if (last && last.nodeType === Node.TEXT_NODE) {
+                textNode = last as Text;
+                posInNode = (textNode.textContent || "").length;
+            } else {
+                textNode = el.firstChild as Text;
+                posInNode = 0;
+            }
+        }
+
+        return { textNode, posInNode };
+    };
+
+    const startPos = findPosition(start);
+    const endPos = findPosition(end);
+
+    const range = document.createRange();
+    range.setStart(startPos.textNode, Math.max(0, Math.min(startPos.posInNode, (startPos.textNode.textContent || "").length)));
+    range.setEnd(endPos.textNode, Math.max(0, Math.min(endPos.posInNode, (endPos.textNode.textContent || "").length)));
+
+    const sel = window.getSelection();
+    if (sel) {
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+};
+
+export const handleKeyDownInTextElement = (
+    e: React.KeyboardEvent<HTMLSpanElement>,
+    expressionModel: ExpressionModel[],
+    index: number,
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void,
+    host?: HTMLSpanElement | null
+) => {
+    if (!host) return;
+
+    const caretOffset = getCaretOffsetWithin(host);
+    const textLength = host.textContent?.length || 0;
+
+    switch (e.key) {
+        case 'Backspace':
+            handleBackspace(e, expressionModel, index, caretOffset, onExpressionChange);
+            break;
+        case 'Delete':
+            handleDelete(e, expressionModel, index, caretOffset, textLength, onExpressionChange);
+            break;
+        case 'ArrowRight':
+            handleArrowRight(e, expressionModel, index, caretOffset, textLength, onExpressionChange);
+            break;
+        case 'ArrowLeft':
+            handleArrowLeft(e, expressionModel, index, caretOffset, onExpressionChange);
+            break;
+    }
+};
+
+const handleBackspace = (
+    e: React.KeyboardEvent<HTMLSpanElement>,
+    expressionModel: ExpressionModel[],
+    index: number,
+    caretOffset: number,
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void
+) => {
+    if (caretOffset === 0) {
+        handleBackspaceAtStart(e, expressionModel, index, onExpressionChange);
+    }
+};
+
+const handleBackspaceAtStart = (
+    e: React.KeyboardEvent<HTMLSpanElement>,
+    expressionModel: ExpressionModel[],
+    index: number,
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void
+) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (index === 0 || index >= expressionModel.length) return;
+
+    let newExpressionModel = [...expressionModel];
+    const tokensToRemove: number[] = [];
+
+    // Scan backwards to find first non-token or collect all tokens
+    for (let i = index - 1; i >= 0; i--) {
+        if (newExpressionModel[i].isToken) {
+            tokensToRemove.push(i);
+        } else {
+            mergeWithPreviousElement(
+                expressionModel,
+                index,
+                i,
+                tokensToRemove,
+                onExpressionChange
+            );
+            return;
+        }
+    }
+
+    // If we only found tokens, remove them
+    if (tokensToRemove.length > 0) {
+        newExpressionModel = newExpressionModel.filter(
+            (_, idx) => !tokensToRemove.includes(idx)
+        );
+        const newCursorPosition = getAbsoluteCaretPositionFromModel(newExpressionModel);
+        onExpressionChange?.(newExpressionModel, newCursorPosition, BACKSPACE_MARKER);
+    }
+};
+
+const mergeWithPreviousElement = (
+    expressionModel: ExpressionModel[],
+    currentIndex: number,
+    previousIndex: number,
+    tokensToRemove: number[],
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void
+) => {
+    const currentElement = expressionModel[currentIndex];
+    const shouldRemoveCurrent = currentElement.length === 0;
+
+    const newExpressionModel = expressionModel
+        .map((el, idx) => {
+            if (idx === previousIndex) {
+                return { ...el, isFocused: true, focusOffsetStart: el.length };
+            }
+            return el;
+        })
+        .filter((_, idx) => {
+            if (idx === currentIndex) return !shouldRemoveCurrent;
+            return !tokensToRemove.includes(idx);
+        });
+
+    const newCursorPosition = getAbsoluteCaretPositionFromModel(newExpressionModel);
+    onExpressionChange?.(newExpressionModel, newCursorPosition, BACKSPACE_MARKER);
+};
+
+const handleDelete = (
+    e: React.KeyboardEvent<HTMLSpanElement>,
+    expressionModel: ExpressionModel[],
+    index: number,
+    caretOffset: number,
+    textLength: number,
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void
+) => {
+    if (caretOffset !== textLength) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const currentElement = expressionModel[index];
+    if (!currentElement || index === expressionModel.length - 1) return;
+
+    let newExpressionModel = [...expressionModel];
+    const tokensToRemove: number[] = [];
+
+    // Scan forward to find first non-token or collect all tokens
+    for (let i = index + 1; i < expressionModel.length; i++) {
+        if (expressionModel[i].isToken) {
+            tokensToRemove.push(i);
+        } else {
+            deleteFirstCharFromNextElement(
+                expressionModel,
+                index,
+                i,
+                tokensToRemove,
+                onExpressionChange
+            );
+            return;
+        }
+    }
+
+    // If we only found tokens, remove them
+    if (tokensToRemove.length > 0) {
+        newExpressionModel = newExpressionModel.filter(
+            (_, idx) => !tokensToRemove.includes(idx)
+        );
+        const newCursorPosition = getAbsoluteCaretPositionFromModel(newExpressionModel);
+        onExpressionChange?.(newExpressionModel, newCursorPosition, DELETE_MARKER);
+    }
+};
+
+const deleteFirstCharFromNextElement = (
+    expressionModel: ExpressionModel[],
+    currentIndex: number,
+    nextIndex: number,
+    tokensToRemove: number[],
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void
+) => {
+    const currentElement = expressionModel[currentIndex];
+    const nextElement = expressionModel[nextIndex];
+    const updatedNextValue = nextElement.value.slice(1);
+    const shouldRemoveNext = updatedNextValue.length === 0;
+
+    const newExpressionModel = expressionModel
+        .map((el, idx) => {
+            if (idx === currentIndex) {
+                return { ...el, isFocused: true, focusOffsetStart: el.length, focusOffsetEnd: el.length };
+            } else if (idx === nextIndex && !shouldRemoveNext) {
+                return { ...el, value: updatedNextValue, length: updatedNextValue.length, isFocused: false, focusOffsetStart: 0, focusOffsetEnd: 0 };
+            }
+            return el;
+        })
+        .filter((_, idx) => {
+            if (idx === nextIndex) return !shouldRemoveNext;
+            return !tokensToRemove.includes(idx);
+        });
+
+    const newCursorPosition = getAbsoluteCaretPositionFromModel(newExpressionModel);
+    onExpressionChange?.(newExpressionModel, newCursorPosition, DELETE_MARKER);
+};
+
+const handleArrowRight = (
+    e: React.KeyboardEvent<HTMLSpanElement>,
+    expressionModel: ExpressionModel[],
+    index: number,
+    caretOffset: number,
+    textLength: number,
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void
+) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (caretOffset === textLength) {
+        moveToNextElement(expressionModel, index, onExpressionChange);
+    } else {
+        moveCaretForward(expressionModel, index, caretOffset, onExpressionChange);
+    }
+};
+
+const moveToNextElement = (
+    expressionModel: ExpressionModel[],
+    index: number,
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void
+) => {
+    if (index < 0 || index >= expressionModel.length - 1) return;
+
+    for (let i = index + 1; i < expressionModel.length; i++) {
+        if (!expressionModel[i].isToken) {
+            const newExpressionModel = expressionModel.map((el, idx) => {
+                if (idx === i) {
+                    return { ...el, isFocused: true, focusOffsetStart: 0, focusOffsetEnd: 0 };
+                } else if (idx === index) {
+                    return { ...el, isFocused: false, focusOffsetStart: undefined, focusOffsetEnd: undefined };
+                }
+                return el;
+            });
+
+            const newCursorPosition = getAbsoluteCaretPositionFromModel(newExpressionModel);
+            onExpressionChange?.(newExpressionModel, newCursorPosition, ARROW_RIGHT_MARKER);
+            return;
+        }
+    }
+};
+
+const moveCaretForward = (
+    expressionModel: ExpressionModel[],
+    index: number,
+    caretOffset: number,
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void
+) => {
+    const newExpressionModel = expressionModel.map((el, idx) => {
+        if (idx === index) {
+            return { ...el, isFocused: true, focusOffsetStart: Math.max(0, caretOffset + 1), focusOffsetEnd: Math.max(0, caretOffset + 1) };
+        }
+        return el;
+    });
+
+    const newCursorPosition = getAbsoluteCaretPositionFromModel(newExpressionModel);
+    onExpressionChange?.(newExpressionModel, newCursorPosition, ARROW_LEFT_MARKER);
+};
+
+const handleArrowLeft = (
+    e: React.KeyboardEvent<HTMLSpanElement>,
+    expressionModel: ExpressionModel[],
+    index: number,
+    caretOffset: number,
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void
+) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (caretOffset === 0) {
+        moveToPreviousElement(expressionModel, index, onExpressionChange);
+    } else {
+        moveCaretBackward(expressionModel, index, caretOffset, onExpressionChange);
+    }
+};
+
+const moveToPreviousElement = (
+    expressionModel: ExpressionModel[],
+    index: number,
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void
+) => {
+    if (index <= 0 || index >= expressionModel.length) return;
+
+    // Find previous non-token element
+    for (let i = index - 1; i >= 0; i--) {
+        if (!expressionModel[i].isToken) {
+            const newExpressionModel = expressionModel.map((el, idx) => {
+                if (idx === i) {
+                    return { ...el, isFocused: true, focusOffsetStart: el.length, focusOffsetEnd: el.length };
+                } else if (idx === index) {
+                    return { ...el, isFocused: false, focusOffsetStart: undefined, focusOffsetEnd: undefined};
+                }
+                return el;
+            });
+
+            const newCursorPosition = getAbsoluteCaretPositionFromModel(newExpressionModel);
+            onExpressionChange?.(newExpressionModel, newCursorPosition, ARROW_LEFT_MARKER);
+            return;
+        }
+    }
+};
+
+const moveCaretBackward = (
+    expressionModel: ExpressionModel[],
+    index: number,
+    caretOffset: number,
+    onExpressionChange?: (updatedExpressionModel: ExpressionModel[], cursorPosition?: number, lastTypedText?: string) => void
+) => {
+    const newExpressionModel = expressionModel.map((el, idx) => {
+        if (idx === index) {
+            return { ...el, isFocused: true, focusOffsetStart: Math.max(0, caretOffset - 1), focusOffsetEnd: Math.max(0, caretOffset - 1)};
+        }
+        return el;
+    });
+
+    const newCursorPosition = getAbsoluteCaretPositionFromModel(newExpressionModel);
+    onExpressionChange?.(newExpressionModel, newCursorPosition, ARROW_LEFT_MARKER);
+};
+
+export const getWordBeforeCursor = (expressionModel: ExpressionModel[]): string => {
+    const absoluteCaretPosition = getAbsoluteCaretPositionFromModel(expressionModel);
+    const fullText = getTextValueFromExpressionModel(expressionModel);
+    const fullTextUpToCursor = fullText.slice(0, absoluteCaretPosition);
+
+    const match = fullTextUpToCursor.match(/\b\w+$/);
+
+    const lastMatch = match ? match[match.length - 1] : "";
+    return fullTextUpToCursor.endsWith(lastMatch) ? lastMatch : '';
+};
+
+export const filterCompletionsByPrefixAndType = (completions: CompletionItem[], prefix: string): CompletionItem[] => {
+    if (!prefix) {
+        return completions.filter(completion =>
+            completion.kind === 'field'
+        );
+    }
+
+    return completions.filter(completion =>
+        (completion.kind === 'function' || completion.kind === 'variable' || completion.kind === 'field') &&
+        completion.label.toLowerCase().startsWith(prefix.toLowerCase())
+    );
+};
+
+export const setCursorPositionToExpressionModel = (expressionModel: ExpressionModel[], cursorPosition: number): ExpressionModel[] => {
+    const newExpressionModel = [];
+    let i = 0;
+    let foundTarget = false;
+
+    while (i < expressionModel.length) {
+        const element = expressionModel[i];
+        if (!foundTarget && cursorPosition <= element.length) {
+            foundTarget = true;
+
+            if (element.isToken) {
+                if (expressionModel.length <= i + 1) {
+
+                    newExpressionModel.push({
+                        id: element.id + "1",
+                        isFocused: true,
+                        focusOffsetStart: 0,
+                        focusOffsetEnd: 0,
+                        value: ' ',
+                        isToken: element.isToken,
+                        startColumn: element.startColumn,
+                        startLine: element.startLine,
+                        length: element.length,
+                        type: element.type
+                    });
+                    return newExpressionModel;
+                }
+                else {
+                    const nextElement = expressionModel[i + 1];
+                    newExpressionModel.push({
+                        ...element,
+                        isFocused: false,
+                        focusOffsetStart: undefined,
+                        focusOffsetEnd: undefined
+                    });
+                    newExpressionModel.push({
+                        ...nextElement,
+                        isFocused: true,
+                        focusOffsetStart: 0,
+                        focusOffsetEnd: 0
+                    });
+                    i += 2;
+                }
+            }
+            else {
+                newExpressionModel.push({
+                    ...element,
+                    isFocused: true,
+                    focusOffsetStart: cursorPosition,
+                    focusOffsetEnd: cursorPosition
+                });
+                i += 1;
+            }
+        }
+        else {
+            newExpressionModel.push({
+                ...element,
+                isFocused: false,
+                focusOffsetStart: undefined,
+                focusOffsetEnd: undefined
+            });
+            i += 1;
+            if (!foundTarget) {
+                cursorPosition -= element.length;
+            }
+        }
+    }
+    return newExpressionModel;
+};
+
+export const updateTokens = (tokens: number[], cursorPosition: number, cursorChange: number, previousFullText: string): number[] => {
+    const updatedTokens: number[] = [];
+    const tokenChunks = getTokenChunks(tokens);
+
+    let currentLine = 0;
+    let currentChar = 0;
+    let adjustedCurrentLine = false;
+
+    for (let i = 0; i < tokenChunks.length; i++) {
+        const chunk = tokenChunks[i];
+        const deltaLine = chunk[TOKEN_LINE_OFFSET_INDEX];
+        const deltaStartChar = chunk[TOKEN_START_CHAR_OFFSET_INDEX];
+        const tokenLength = chunk[TOKEN_LENGTH_INDEX];
+        const tokenType = chunk[3];
+        const tokenModifiers = chunk[4];
+
+        if (deltaLine > 0) {
+            adjustedCurrentLine = false;
+        }
+
+        currentLine += deltaLine;
+        if (deltaLine === 0) {
+            currentChar += deltaStartChar;
+        } else {
+            currentChar = deltaStartChar;
+        }
+
+        const tokenAbsoluteOffset = getAbsoluteColumnOffset(previousFullText, currentLine, currentChar);
+
+        let adjustedDeltaStartChar = deltaStartChar;
+        if (!adjustedCurrentLine && tokenAbsoluteOffset >= cursorPosition) {
+            adjustedDeltaStartChar += cursorChange;
+            adjustedCurrentLine = true;
+        }
+
+        updatedTokens.push(deltaLine, adjustedDeltaStartChar, tokenLength, tokenType, tokenModifiers);
+    }
+
+    return updatedTokens;
+};
+
+export const getModelWithModifiedParamsChip = (expressionModel: ExpressionModel[]): ExpressionModel[] => {
+    return expressionModel.map(el => {
+        if (el.type === 'parameter' && el.value.length === 0) {
+            return {
+                ...el,
+                value: '$1',
+                length: 2
+            }
+        }
+        return el;
+    }
+    )
+}
+
+export const isBetween = (a: number, b: number, target: number): boolean => {
+    return target >= Math.min(a, b) && target <= Math.max(a, b);
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/TextExpressionEditor/TextModeEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/TextExpressionEditor/TextModeEditor.tsx
new file mode 100644
index 00000000000..f936a6e0cec
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/TextExpressionEditor/TextModeEditor.tsx
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { FormExpressionEditor } from "@wso2/ui-toolkit";
+import { ExpressionField } from "../../ExpressionField";
+import React from "react";
+import { getValueForTextModeEditor } from "../../utils";
+import styled from "@emotion/styled";
+import { FloatingToggleButton } from "../ChipExpressionEditor/components/FloatingToggleButton";
+import { ExpandButton } from "../ChipExpressionEditor/components/FloatingButtonIcons";
+
+const EditorContainer = styled.div`
+    width: 100%;
+    position: relative;
+
+    #text-mode-editor-expand {
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+    }
+
+    &:hover #text-mode-editor-expand {
+        opacity: 1;
+    }
+`;
+
+type TextModeEditorProps = Pick<ExpressionField, 'name' | 'value' | 'autoFocus' | 'ariaLabel' | 'placeholder' | 'onChange' | 'onFocus' | 'onBlur' | 'onSave' | 'onCancel' | 'onRemove' | 'growRange' | 'exprRef' | 'anchorRef' | 'onOpenExpandedMode' | 'isInExpandedMode'>;
+
+export const TextModeEditor: React.FC<TextModeEditorProps> = ({
+    name,
+    value,
+    autoFocus,
+    ariaLabel,
+    placeholder,
+    onChange,
+    onFocus,
+    onBlur,
+    onSave,
+    onCancel,
+    onRemove,
+    growRange,
+    exprRef,
+    anchorRef,
+    onOpenExpandedMode,
+    isInExpandedMode,
+}) => {
+
+    const handleOnChange = async (value: string, updatedCursorPosition: number) => {
+        const newValue = "\"" + value + "\"";
+        onChange(newValue, updatedCursorPosition);
+    }
+
+    return (
+        <EditorContainer>
+            <FormExpressionEditor
+                ref={exprRef}
+                anchorRef={anchorRef}
+                name={name}
+                completions={[]}
+                value={getValueForTextModeEditor(value)}
+                autoFocus={autoFocus}
+                startAdornment={<></>}
+                ariaLabel={ariaLabel}
+                onChange={handleOnChange}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                onSave={onSave}
+                onCancel={onCancel}
+                onRemove={onRemove}
+                enableExIcon={false}
+                growRange={growRange}
+                sx={{ paddingInline: '0' }}
+                placeholder={placeholder}
+            />
+            {onOpenExpandedMode && !isInExpandedMode && (
+                <div id="text-mode-editor-expand" style={{ position: 'absolute', bottom: '9px', right: '8px' }}>
+                    <FloatingToggleButton onClick={onOpenExpandedMode} title="Expand Editor">
+                        <ExpandButton />
+                    </FloatingToggleButton>
+                </div>
+            )}
+        </EditorContainer>
+    );
+};
+
+export default TextModeEditor
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiSelectEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiSelectEditor.tsx
index ab6ab07bc6f..62162efd27f 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiSelectEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiSelectEditor.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 
 import { Button, Codicon, Dropdown, OptionProps, ThemeColors } from "@wso2/ui-toolkit";
 import styled from "@emotion/styled";
@@ -95,23 +95,46 @@ export function MultiSelectEditor(props: MultiSelectEditorProps) {
 
     const NEW_OPTION = "Create New Tool";
 
-    const noOfSelectedValues = field.items.length === 0 ? 0 : (field.value === "" ? 1 : field.value.length);
-    const [dropdownCount, setDropdownCount] = useState(noOfSelectedValues);
-
-    // Watch all the individual dropdown values, including the default value
-    const values = [...Array(dropdownCount)].map((_, index) => {
-        const value = watch(`${field.key}-${index}`);
-        if (value === NEW_OPTION) {
-            return;
+    // Calculate initial number of dropdowns based on the field value
+    const calculateInitialCount = () => {
+        if (field.items.length === 0) {
+            return 0;
         }
-        const itemValue = value || getValueForDropdown(field, index);
-        if (value === undefined) {
-            setValue(`${field.key}-${index}`, itemValue);
+        if (!field.value || field.value === "" || (Array.isArray(field.value) && field.value.length === 0)) {
+            return 1;
         }
-        return itemValue;
-    }).filter(Boolean);
+        return Array.isArray(field.value) ? field.value.length : 1;
+    };
+
+    const [dropdownCount, setDropdownCount] = useState(calculateInitialCount());
+
+    useEffect(() => {
+        for (let index = 0; index < dropdownCount; index++) {
+            const currentValue = watch(`${field.key}-${index}`);
+            // Set default value if current value is undefined, null, or empty string
+            if (currentValue === undefined || currentValue === null || currentValue === "") {
+                const defaultValue = getValueForDropdown(field, index);
+                if (defaultValue !== undefined && defaultValue !== null && defaultValue !== "") {
+                    setValue(`${field.key}-${index}`, defaultValue);
+                }
+            }
+        }
+    }, [dropdownCount, field.key, field, watch, setValue]);
+
+    // Watch all the individual dropdown values
+    const watchedValues = useMemo(() =>
+        [...Array(dropdownCount)].map((_, index) =>
+            watch(`${field.key}-${index}`)
+        ),
+        [dropdownCount, field.key, watch]
+    );
+
+    // Calculate values array without side effects
+    const values = useMemo(() => {
+        return watchedValues
+            .filter(value => value && value !== NEW_OPTION);
+    }, [watchedValues, NEW_OPTION]);
 
-    // Update the main field with the array of values
     useEffect(() => {
         setValue(field.key, values);
     }, [values, field.key, setValue]);
@@ -153,35 +176,42 @@ export function MultiSelectEditor(props: MultiSelectEditorProps) {
                 <S.Label>{field.label}</S.Label>
             </S.LabelContainer>
             <S.Description>{field.documentation}</S.Description>
-            {[...Array(dropdownCount)].map((_, index) => (
-                <S.DropdownContainer key={`${field.key}-${index}`}>
-                    <Dropdown
-                        id={`${field.key}-${index}`}
-                        {...register(`${field.key}-${index}`, {
-                            required: !field.optional && index === 0,
-                            value: getValueForDropdown(field, index)
-                        })}
-                        items={getItemsList()}
-                        required={!field.optional && index === 0}
-                        disabled={!field.editable}
-                        sx={{ width: "100%" }}
-                        containerSx={{ width: "100%" }}
-                        addNewBtnClick={field.addNewButton ? () => openSubPanel({ view: SubPanelView.ADD_NEW_FORM }) : undefined}
-                        addNewBtnLabel={field.addNewButton ? (field.addNewButtonLabel || field.label) : undefined}
-                        aria-label={field.label}
-                    />
-                    {dropdownCount > 1 &&
-                        <S.DeleteButton
-                            appearance="icon"
-                            onClick={() => onDelete(index)}
+            {[...Array(dropdownCount)].map((_, index) => {
+                const currentValue = watch(`${field.key}-${index}`) || getValueForDropdown(field, index);
+                return (
+                    <S.DropdownContainer key={`${field.key}-${index}`}>
+                        <Dropdown
+                            id={`${field.key}-${index}`}
+                            {...register(`${field.key}-${index}`, {
+                                required: !field.optional && index === 0,
+                                value: getValueForDropdown(field, index)
+                            })}
+                            value={currentValue}
+                            items={getItemsList()}
+                            required={!field.optional && index === 0}
                             disabled={!field.editable}
-                            tooltip="Delete"
-                        >
-                            <Codicon name="trash" />
-                        </S.DeleteButton>
-                    }
-                </S.DropdownContainer>
-            ))}
+                            sx={{ width: "100%" }}
+                            containerSx={{ width: "100%" }}
+                            addNewBtnClick={field.addNewButton ? () => openSubPanel({ view: SubPanelView.ADD_NEW_FORM }) : undefined}
+                            addNewBtnLabel={field.addNewButton ? (field.addNewButtonLabel || field.label) : undefined}
+                            aria-label={field.label}
+                            onChange={(e) => {
+                                setValue(`${field.key}-${index}`, e.target.value);
+                            }}
+                        />
+                        {dropdownCount > 1 &&
+                            <S.DeleteButton
+                                appearance="icon"
+                                onClick={() => onDelete(index)}
+                                disabled={!field.editable}
+                                tooltip="Delete"
+                            >
+                                <Codicon name="trash" />
+                            </S.DeleteButton>
+                        }
+                    </S.DropdownContainer>
+                );
+            })}
             {(field.addNewButton && field.items.length > dropdownCount) &&
                 <S.AddNewButton
                     appearance='icon'
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/TextAreaEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/TextAreaEditor.tsx
index be416ecf789..57a64c83b89 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/TextAreaEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/TextAreaEditor.tsx
@@ -16,12 +16,16 @@
  * under the License.
  */
 
-import React from "react";
+import React, { useState } from "react";
 import { FormField } from "../Form/types";
 import { AutoResizeTextArea } from "@wso2/ui-toolkit";
 import { useFormContext } from "../../context";
 import { S } from "./ExpressionEditor";
 import { Controller } from "react-hook-form";
+import { ExpandedEditor } from "./ExpandedEditor";
+import styled from "@emotion/styled";
+import { ExpandButton } from "./MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingButtonIcons";
+import { FloatingToggleButton } from "./MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingToggleButton";
 
 interface TextAreaEditorProps {
     field: FormField;
@@ -29,53 +33,93 @@ interface TextAreaEditorProps {
     autoFocus?: boolean;
 }
 
+const TextAreaContainer = styled.div`
+    width: 100%;
+    position: relative;
+
+    #textarea-editor-expand {
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+    }
+
+    &:hover #textarea-editor-expand {
+        opacity: 1;
+    }
+`;
+
 export function TextAreaEditor(props: TextAreaEditorProps) {
     const { field, handleOnFieldFocus, autoFocus } = props;
     const { form } = useFormContext();
-    const { control } = form;
+    const { control, setValue, watch } = form;
+    const [isExpandedModalOpen, setIsExpandedModalOpen] = useState(false);
 
     const errorMsg = field.diagnostics?.map((diagnostic) => diagnostic.message).join("\n");
 
+    const handleOpenExpandedMode = () => {
+        setIsExpandedModalOpen(true);
+    };
+
+    const handleSaveExpandedMode = (value: string) => {
+        setValue(field.key, value);
+        if (field.onValueChange) {
+            field.onValueChange(value);
+        }
+    };
+
     return (
-        <S.Container>
-            <S.HeaderContainer>
-                <S.Header>
-                    <S.LabelContainer>
-                        <S.Label>{field.label}</S.Label>
-                    </S.LabelContainer>
-                    <S.Description>{field.documentation}</S.Description>
-                </S.Header>
-            </S.HeaderContainer>
-            <Controller
-                control={control}
-                name={field.key}
-                defaultValue={field.value}
-                rules={{
-                    required: {
-                        value: !field.optional && !field.placeholder,
-                        message: `${field.label} is required`
-                    }
-                }}
-                render={({ field: { name, value, onChange }, fieldState: { error } }) => (
-                    <div>
-                        <AutoResizeTextArea
-                            id={field.key}
-                            name={name}
-                            aria-label={field.label}
-                            required={!field.optional}
-                            placeholder={field.placeholder}
-                            readOnly={!field.editable}
-                            value={value}
-                            sx={{ width: "100%" }}
-                            errorMsg={errorMsg}
-                            onFocus={() => handleOnFieldFocus?.(field.key)}
-                            autoFocus={autoFocus}
-                            onChange={onChange}
-                            growRange={{ start: 4, offset: 12 }}
-                        />
-                    </div>
-                )}
+        <>
+            <S.Container>
+                <S.HeaderContainer>
+                    <S.Header>
+                        <S.LabelContainer>
+                            <S.Label>{field.label}</S.Label>
+                        </S.LabelContainer>
+                        <S.Description>{field.documentation}</S.Description>
+                    </S.Header>
+                </S.HeaderContainer>
+                <Controller
+                    control={control}
+                    name={field.key}
+                    defaultValue={field.value}
+                    rules={{
+                        required: {
+                            value: !field.optional && !field.placeholder,
+                            message: `${field.label} is required`
+                        }
+                    }}
+                    render={({ field: { name, value, onChange } }) => (
+                        <TextAreaContainer>
+                            <AutoResizeTextArea
+                                id={field.key}
+                                name={name}
+                                aria-label={field.label}
+                                required={!field.optional}
+                                placeholder={field.placeholder}
+                                readOnly={!field.editable}
+                                value={value}
+                                sx={{ width: "100%" }}
+                                errorMsg={errorMsg}
+                                onFocus={() => handleOnFieldFocus?.(field.key)}
+                                autoFocus={autoFocus}
+                                onChange={onChange}
+                                growRange={{ start: 4, offset: 12 }}
+                            />
+                            <div id="textarea-editor-expand" style={{ position: 'absolute', bottom: '9px', right: '8px' }}>
+                                <FloatingToggleButton onClick={handleOpenExpandedMode} title="Expand Editor">
+                                    <ExpandButton />
+                                </FloatingToggleButton>
+                            </div>
+                        </TextAreaContainer>
+                    )}
+                />
+            </S.Container>
+            <ExpandedEditor
+                isOpen={isExpandedModalOpen}
+                field={field}
+                value={watch(field.key)}
+                onClose={() => setIsExpandedModalOpen(false)}
+                onSave={handleSaveExpandedMode}
             />
-        </S.Container>
+        </>
     );
 }
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 435546ea077..caedb550d91 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/TypeEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/TypeEditor.tsx
@@ -39,14 +39,18 @@ import { debounce } from "lodash";
 import styled from "@emotion/styled";
 import ReactMarkdown from "react-markdown";
 import { NodeProperties } from "@wso2/ballerina-core";
+import TypeModeSwitcher, { TypeInputMode } from "../TypeModeSwitcher";
 
 interface TypeEditorProps {
     field: FormField;
     openRecordEditor: (open: boolean, newType?: string | NodeProperties) => void;
+    openFormTypeEditor?: (open: boolean, newType?: string) => void;
     handleOnFieldFocus?: (key: string) => void;
     handleOnTypeChange?: (value?: string) => void;
     handleNewTypeSelected?: (type: string | CompletionItem) => void;
+    isContextTypeEditorSupported?: boolean;
     autoFocus?: boolean;
+    onBlur?: () => void | Promise<void>;
 }
 
 const Ribbon = styled.div({
@@ -92,7 +96,14 @@ const getDefaultCompletion = (newType: string) => {
 }
 
 export function TypeEditor(props: TypeEditorProps) {
-    const { field, openRecordEditor, handleOnFieldFocus, handleOnTypeChange, autoFocus, handleNewTypeSelected } = props;
+    const { field,
+        openRecordEditor,
+        openFormTypeEditor,
+        isContextTypeEditorSupported,
+        handleOnFieldFocus,
+        handleOnTypeChange, autoFocus,
+        handleNewTypeSelected
+    } = props;
     const { form, expressionEditor } = useFormContext();
     const { control } = form;
     const {
@@ -115,14 +126,23 @@ export function TypeEditor(props: TypeEditorProps) {
     const cursorPositionRef = useRef<number | undefined>(undefined);
     const [showDefaultCompletion, setShowDefaultCompletion] = useState<boolean>(false);
     const [focused, setFocused] = useState<boolean>(false);
+    const [isTypeEditorHovered, setIsTypeEditorHovered] = useState<boolean>(false);
+    const [typeInputMode, setTypeInputMode] = useState<TypeInputMode>(isContextTypeEditorSupported ? TypeInputMode.GUIDED : undefined);
 
     const [isTypeHelperOpen, setIsTypeHelperOpen] = useState<boolean>(false);
 
     const handleFocus = async (value: string) => {
         setFocused(true);
+
+        // In guided mode, open FormTypeEditor instead of TypeHelper
+        if (isContextTypeEditorSupported && typeInputMode === TypeInputMode.GUIDED && openFormTypeEditor) {
+            openFormTypeEditor(true, value);
+            return;
+        }
+
         // Trigger actions on focus
         await onFocus?.();
-        await retrieveVisibleTypes(value, value.length, true, field.valueTypeConstraint as string);
+        await retrieveVisibleTypes(value, value.length, true, field.valueTypeConstraint as string, field.key);
         handleOnFieldFocus?.(field.key);
     };
 
@@ -133,6 +153,8 @@ export function TypeEditor(props: TypeEditorProps) {
         setShowDefaultCompletion(undefined);
         // Clean up memory
         cursorPositionRef.current = undefined;
+        // Trigger the on Blur from parent
+        await props.onBlur?.();
     };
 
     const handleCompletionSelect = async (value: string) => {
@@ -167,6 +189,13 @@ export function TypeEditor(props: TypeEditorProps) {
     };
 
     const toggleTypeHelperPaneState = () => {
+        // In guided mode, open FormTypeEditor
+        if (isContextTypeEditorSupported && typeInputMode === TypeInputMode.GUIDED && openFormTypeEditor) {
+            const currentValue = form.getValues(field.key);
+            openFormTypeEditor(true, currentValue);
+            return;
+        }
+
         if (!isTypeHelperOpen) {
             exprRef.current?.focus();
         } else {
@@ -174,6 +203,10 @@ export function TypeEditor(props: TypeEditorProps) {
         }
     };
 
+    const handleModeChange = (value: TypeInputMode) => {
+        setTypeInputMode(value);
+    };
+
     const handleGetTypeHelper = (
         value: string,
         onChange: (value: string, updatedCursorPosition: number) => void,
@@ -221,19 +254,37 @@ export function TypeEditor(props: TypeEditorProps) {
     }, [exprRef.current]);
 
     return (
-        <S.Container>
+        <S.Container
+            onMouseEnter={() => setIsTypeEditorHovered(true)}
+            onMouseLeave={() => setIsTypeEditorHovered(false)}
+        >
             <S.HeaderContainer>
-                <S.Header>
-                    <S.LabelContainer>
-                        <S.Label>{field.label}</S.Label>
-                        {!field.optional && <RequiredFormInput />}
-                    </S.LabelContainer>
-                    <S.EditorMdContainer>
-                        {field.documentation && <ReactMarkdown>{field.documentation}</ReactMarkdown>}
-                    </S.EditorMdContainer>
+                <S.Header style={{ width: '100%' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: '8px', width: '100%' }}>
+                        <div style={{ flex: 1 }}>
+                            <S.LabelContainer>
+                                <S.Label>{field.label}</S.Label>
+                                {!field.optional && <RequiredFormInput />}
+                                {field.valueTypeConstraint && (
+                                    <S.Type style={{ marginLeft: '5px' }} isVisible={focused} title={field.valueTypeConstraint as string}>
+                                        {sanitizeType(field.valueTypeConstraint as string)}
+                                    </S.Type>
+                                )}
+                            </S.LabelContainer>
+                            <S.EditorMdContainer>
+                                {field.documentation && <ReactMarkdown>{field.documentation}</ReactMarkdown>}
+                            </S.EditorMdContainer>
+                        </div>
+                        <div style={{ flexShrink: 0 }}>
+                            {(focused || isTypeEditorHovered) && isContextTypeEditorSupported && openFormTypeEditor && (
+                                <TypeModeSwitcher
+                                    value={typeInputMode}
+                                    onChange={handleModeChange}
+                                />
+                            )}
+                        </div>
+                    </div>
                 </S.Header>
-                {field.valueTypeConstraint &&
-                    <S.Type isVisible={focused} title={field.valueTypeConstraint as string}>{sanitizeType(field.valueTypeConstraint as string)}</S.Type>}
             </S.HeaderContainer>
             <Controller
                 control={control}
@@ -252,7 +303,12 @@ export function TypeEditor(props: TypeEditorProps) {
                             ref={exprRef}
                             anchorRef={typeBrowserRef}
                             name={name}
-                            startAdornment={<EditorRibbon onClick={toggleTypeHelperPaneState} />}
+                            startAdornment={
+                                (!isContextTypeEditorSupported || (isContextTypeEditorSupported
+                                    && typeInputMode === TypeInputMode.ADVANCED)) ?
+                                    <EditorRibbon onClick={toggleTypeHelperPaneState} /> :
+                                    undefined
+                            }
                             completions={types}
                             showDefaultCompletion={showDefaultCompletion}
                             getDefaultCompletion={() => getDefaultCompletion(value)}
@@ -265,11 +321,12 @@ export function TypeEditor(props: TypeEditorProps) {
 
                                 onChange(updatedValue);
                                 debouncedTypeEdit(updatedValue);
+                                field.onValueChange?.(updatedValue);
                                 cursorPositionRef.current = updatedCursorPosition;
 
                                 // Set show default completion
                                 const typeExists = referenceTypes.find((type) => type.label === updatedValue);
-                                handleNewTypeSelected && handleNewTypeSelected(typeExists? typeExists : updatedValue)
+                                handleNewTypeSelected && handleNewTypeSelected(typeExists ? typeExists : updatedValue)
                                 const validTypeForCreation = updatedValue.match(/^[a-zA-Z_'][a-zA-Z0-9_]*$/);
                                 if (updatedValue && !typeExists && validTypeForCreation) {
                                     setShowDefaultCompletion(true);
@@ -282,16 +339,17 @@ export function TypeEditor(props: TypeEditorProps) {
                                     updatedValue,
                                     updatedCursorPosition,
                                     false,
-                                    field.valueTypeConstraint as string
+                                    field.valueTypeConstraint as string,
+                                    field.key
                                 );
                             }}
                             onCompletionSelect={handleCompletionSelect}
                             onDefaultCompletionSelect={() => handleDefaultCompletionSelect(value)}
                             onFocus={() => handleFocus(value)}
                             enableExIcon={false}
-                            isHelperPaneOpen={isTypeHelperOpen}
-                            changeHelperPaneState={handleChangeTypeHelperState}
-                            getHelperPane={handleGetTypeHelper}
+                            isHelperPaneOpen={isContextTypeEditorSupported && typeInputMode === TypeInputMode.GUIDED ? false : isTypeHelperOpen}
+                            changeHelperPaneState={isContextTypeEditorSupported && typeInputMode === TypeInputMode.GUIDED ? () => { } : handleChangeTypeHelperState}
+                            getHelperPane={isContextTypeEditorSupported && typeInputMode === TypeInputMode.GUIDED ? () => null : handleGetTypeHelper}
                             helperPaneOrigin={typeHelperOrigin}
                             helperPaneHeight={typeHelperHeight}
                             onBlur={handleBlur}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/utils.ts b/workspaces/ballerina/ballerina-side-panel/src/components/editors/utils.ts
index 8deda607b8b..ca68a700116 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/utils.ts
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/utils.ts
@@ -26,9 +26,18 @@ export function isDropdownField(field: FormField) {
 
 export function getValueForDropdown(field: FormField, multiSelectIndex: number = 0) {
     if (field.type === "MULTIPLE_SELECT") {
-        return field.value?.length > 0 ? field.value[multiSelectIndex] : field.items[0];
+        // For multiple select, check if field.value is an array with values
+        if (Array.isArray(field.value) && field.value.length > 0 && field.value[multiSelectIndex]) {
+            return field.value[multiSelectIndex];
+        }
+        // Return first item as default if available
+        return field.items && field.items.length > 0 ? field.items[0] : undefined;
     }
-    return field.value !== "" ? field.value : field.items[0];
+    // For single select, return the value if it exists and is not empty, otherwise return first item
+    if (field.value && field.value !== "") {
+        return field.value;
+    }
+    return field.items && field.items.length > 0 ? field.items[0] : undefined;
 }
 
 export function getValueFromArrayField(field: FormField, valueIndex: number = 0) {
@@ -63,7 +72,11 @@ export function getPropertyFromFormField(field: FormField): ExpressionProperty {
         placeholder: field.placeholder,
         valueTypeConstraint: field.valueTypeConstraint,
         codedata: field.codedata,
-        imports: field.imports
+        imports: field.imports,
+        diagnostics: {
+            hasDiagnostics: field.diagnostics?.length > 0 ? true : false,
+            diagnostics: field.diagnostics
+        }
     }
 }
 
@@ -81,3 +94,10 @@ export const getFieldKeyForAdvanceProp = (fieldKey: string, advancePropKey: stri
 
     return `${fieldKey}.advanceProperties.${advancePropKey}`;
 }
+
+export const getValueForTextModeEditor = (value: string) => {
+     if (value) {
+        return value.replace(/"/g, "");
+    }
+    return value;
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/context/form.tsx b/workspaces/ballerina/ballerina-side-panel/src/context/form.tsx
index f5339b3ea52..37bac4fcb63 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/context/form.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/context/form.tsx
@@ -16,15 +16,15 @@
  * under the License.
  */
 
-import { LineRange } from '@wso2/ballerina-core';
+import { LineRange, NodeKind } from '@wso2/ballerina-core';
 import React, { createContext, FC, useContext } from 'react';
-import { 
+import {
     Control,
-    FieldValues, 
-    UseFormWatch, 
-    UseFormRegister, 
-    UseFormSetValue, 
-    UseFormUnregister, 
+    FieldValues,
+    UseFormWatch,
+    UseFormRegister,
+    UseFormSetValue,
+    UseFormUnregister,
     UseFormSetError,
     UseFormClearErrors,
     FieldErrors,
@@ -47,6 +47,15 @@ export interface FormContext {
     expressionEditor?: FormExpressionEditorProps;
     targetLineRange: LineRange;
     fileName: string;
+    popupManager: {
+        addPopup: (modal: React.ReactNode, id: string, title: string, height?: number, width?: number, onClose?: () => void) => void;
+        removeLastPopup: () => void;
+        closePopup: (id: string) => void;
+
+    },
+    nodeInfo: {
+        kind: NodeKind
+    }
 }
 
 const defaultState: any = {};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/utils/formatMethodName.ts b/workspaces/ballerina/ballerina-side-panel/src/utils/formatMethodName.ts
new file mode 100644
index 00000000000..14df9934238
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/utils/formatMethodName.ts
@@ -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.
+ */
+
+/**
+* Converts a camelCase or snake_case method name into a user-friendly display format.
+*
+* @param methodName - The raw method name (e.g., "basicAck", "'commit", "onMessage")
+* @returns A formatted, human-readable name (e.g., "Basic Ack", "Commit", "On Message")
+*
+* @example
+* formatMethodName("basicAck") // Returns "Basic Ack"
+* formatMethodName("'commit") // Returns "Commit"
+* formatMethodName("onMessage") // Returns "On Message"
+* formatMethodName("HTTPRequest") // Returns "HTTP Request"
+* formatMethodName("method2Call") // Returns "Method 2 Call"
+*/
+export function formatMethodName(methodName: string): string {
+    // Handle null, undefined, or empty strings
+    if (!methodName || typeof methodName !== "string") {
+        return "";
+    }
+
+    // Remove leading special characters like apostrophes, underscores, etc.
+    let cleaned = methodName.trim().replace(/^[^\w]/g, "");
+
+    // Handle edge case where all characters were special
+    if (!cleaned) {
+        return methodName;
+    }
+
+    // Convert camelCase and snake_case to space-separated words
+    // This regex:
+    // 1. Inserts space before uppercase letters that follow lowercase letters (camelCase)
+    // 2. Inserts space before uppercase letters that are followed by lowercase (e.g., "HTTPRequest" -> "HTTP Request")
+    // 3. Handles underscores by replacing them with spaces
+    let formatted = cleaned
+        .replace(/([a-z])([A-Z])/g, "$1 $2") // Insert space before uppercase after lowercase
+        .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2") // Insert space before last uppercase in sequence
+        .replace(/_/g, " ") // Replace underscores with spaces
+        .replace(/\s+/g, " ") // Normalize multiple spaces to single space
+        .trim();
+
+    // Capitalize first letter of each word
+    const words = formatted.split(" ");
+    const capitalized = words
+        .map((word) => {
+            if (!word) return "";
+            // Keep existing capitalization for acronyms (all caps) but capitalize first letter otherwise
+            return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+        })
+        .filter((word) => word.length > 0) // Remove empty strings from split
+        .join(" ");
+
+    return capitalized;
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/utils/localStorage.ts b/workspaces/ballerina/ballerina-side-panel/src/utils/localStorage.ts
index 1eb35ff3f9f..9ba44fab950 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/utils/localStorage.ts
+++ b/workspaces/ballerina/ballerina-side-panel/src/utils/localStorage.ts
@@ -53,7 +53,7 @@ export const getDefaultExpandedState = (categories: string[]): ExpandedCategorie
         "Model Providers",
         "Vector Stores",
         "Embedding Providers",
-        "Vector Knowledge Bases",
+        "Knowledge Bases",
         "Data Loaders",
         "Chunkers",
     ];
diff --git a/workspaces/ballerina/ballerina-side-panel/src/utils/path-validations.ts b/workspaces/ballerina/ballerina-side-panel/src/utils/path-validations.ts
index 9c800c10aad..8596a9c89e4 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/utils/path-validations.ts
+++ b/workspaces/ballerina/ballerina-side-panel/src/utils/path-validations.ts
@@ -244,23 +244,19 @@ function isValidInitial(c: string): boolean {
 }
 
 function isValidFollowing(c: string): boolean {
-    // Allow ASCII letters, digits, underscores, and Unicode identifier characters
-    return /^[a-zA-Z0-9_]$/.test(c) || isUnicodeIdentifierChar(c);
+    // Allow ASCII letters, digits, underscores, dashes, and dots
+    return /^[a-zA-Z0-9_.-]$/.test(c) || isUnicodeIdentifierChar(c);
 }
 
 function isValidIdentifier(value: string): boolean {
-    // Check for unquoted identifiers
-    if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(value)) {
+    // Check for unquoted identifiers with letters, digits, underscores, dashes, and dots
+    if (/^[a-zA-Z_][a-zA-Z0-9_.-]*$/.test(value)) {
         return true;
     }
     // Check for quoted identifiers
     if (/^'[^']*'$/.test(value)) {
         return true;
     }
-    // Check for escaped hyphens
-    if (value.includes('-') && !value.includes('\\-')) {
-        return false; // Hyphen is not escaped
-    }
     return false;
 }
 
diff --git a/workspaces/ballerina/ballerina-visualizer/package.json b/workspaces/ballerina/ballerina-visualizer/package.json
index 8d94ec3fba4..03f7fc8fe6c 100644
--- a/workspaces/ballerina/ballerina-visualizer/package.json
+++ b/workspaces/ballerina/ballerina-visualizer/package.json
@@ -81,6 +81,7 @@
     "webpack": "^5.99.8",
     "@types/react-lottie": "^1.2.5",
     "@types/lodash.debounce": "^4.0.6",
+    "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.1"
   },
   "author": "wso2",
diff --git a/workspaces/ballerina/ballerina-visualizer/src/Context.tsx b/workspaces/ballerina/ballerina-visualizer/src/Context.tsx
index f2d6483239f..04d5591d8e5 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/Context.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/Context.tsx
@@ -138,6 +138,8 @@ export const POPUP_IDS = {
   FUNCTION: "FUNCTION",
   CONFIGURABLES: "CONFIGURABLES",
   RECORD_CONFIG: "RECORD_CONFIG",
+  LIBRARY_BROWSER: "LIBRARY_BROWSER",
+  ATTACH_LISTENER: "ATTACH_LISTENER",
 } as const;
 
 type ModalStackItem = {
@@ -146,11 +148,12 @@ type ModalStackItem = {
     title: string;
     height?: number;
     width?: number;
+    onClose?: () => void;
 }
 
 interface ModalStackContext {
     modalStack: ModalStackItem[];
-    addModal: (modal: ReactNode, id: string, title: string, height?: number, width?: number) => void;
+    addModal: (modal: ReactNode, id: string, title: string, height?: number, width?: number, onClose?: () => void) => void;
     popModal: () => void;
     closeModal: (id: string) => void;
 }
@@ -165,8 +168,8 @@ export const ModalStackContext = createContext({
 export const ModalStackProvider = ({children}: {children: ReactNode}) => {
     const [modalStack, setModalStack] = useState<ModalStackItem[]>([]);
 
-    const addModal = (modal: ReactNode, id: string, title: string, height?: number, width?: number) => {
-        setModalStack((prevStack) => [...prevStack, { modal, id, title, height, width }]);
+    const addModal = (modal: ReactNode, id: string, title: string, height?: number, width?: number, onClose?: () => void) => {
+        setModalStack((prevStack) => [...prevStack, { modal, id, title, height, width, onClose }]);
     };
 
     const popModal = () => {
diff --git a/workspaces/ballerina/ballerina-visualizer/src/Hooks.tsx b/workspaces/ballerina/ballerina-visualizer/src/Hooks.tsx
index e05b886b71d..1505bef523e 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/Hooks.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/Hooks.tsx
@@ -42,6 +42,8 @@ export const useDataMapperModel = (
                     offset: codedata.lineRange.startLine.offset
                 }
             };
+            console.log('>>> [Data Mapper] Model Parameters:', modelParams);
+
             const res = await rpcClient
                 .getDataMapperRpcClient()
                 .getDataMapperModel(modelParams);
diff --git a/workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx b/workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx
index d39d1f93fe5..6ea30f3e309 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx
@@ -65,7 +65,6 @@ import { TypeDiagram } from "./views/TypeDiagram";
 import { Overview as OverviewBI } from "./views/BI/Overview/index";
 import EditConnectionWizard from "./views/BI/Connection/EditConnectionWizard";
 import ViewConfigurableVariables from "./views/BI/Configurables/ViewConfigurableVariables";
-import { ServiceWizard } from "./views/BI/ServiceDesigner/ServiceWizard";
 import { ServiceEditView } from "./views/BI/ServiceDesigner/ServiceEditView";
 import { ListenerEditView } from "./views/BI/ServiceDesigner/ListenerEditView";
 import { ServiceClassDesigner } from "./views/BI/ServiceClassEditor/ServiceClassDesigner";
@@ -76,7 +75,10 @@ import { BallerinaUpdateView } from "./views/BI/BallerinaUpdateView";
 import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { DataMapper } from "./views/DataMapper";
 import { ImportIntegration } from "./views/BI/ImportIntegration";
+import { ServiceCreationView } from "./views/BI/ServiceDesigner/ServiceCreationView";
 import Popup from "./components/Popup";
+import { ServiceFunctionForm } from "./views/BI/ServiceFunctionForm";
+import ServiceConfigureView from "./views/BI/ServiceDesigner/ServiceConfigureView";
 
 const globalStyles = css`
     *,
@@ -450,7 +452,7 @@ const MainPanel = () => {
                         setViewComponent(<AIChatAgentWizard />);
                         break;
                     case MACHINE_VIEW.BIServiceWizard:
-                        setViewComponent(<ServiceWizard type={value.serviceType} />);
+                        setViewComponent(<ServiceCreationView orgName={value?.artifactInfo.org} packageName={value?.artifactInfo.packageName} moduleName={value?.artifactInfo.moduleName} version={value?.artifactInfo.version} />);
                         break;
                     case MACHINE_VIEW.BIServiceClassDesigner:
                         setViewComponent(
@@ -463,7 +465,7 @@ const MainPanel = () => {
                         );
                         break;
                     case MACHINE_VIEW.BIServiceConfigView:
-                        setViewComponent(<ServiceEditView filePath={value.documentUri} position={value?.position} />);
+                        setViewComponent(<ServiceConfigureView filePath={value.documentUri} position={value?.position} listenerName={value?.identifier} />);
                         break;
                     case MACHINE_VIEW.BIServiceClassConfigView:
                         setViewComponent(
@@ -532,6 +534,15 @@ const MainPanel = () => {
                             />
                         );
                         break;
+                    case MACHINE_VIEW.ServiceFunctionForm:
+                        setViewComponent(
+                            <ServiceFunctionForm
+                                position={value?.position}
+                                currentFilePath={value.documentUri}
+                                projectPath={value.projectUri}
+                            />
+                        );
+                        break;
                     default:
                         setNavActive(false);
                         setViewComponent(<LoadingRing />);
@@ -622,7 +633,10 @@ const MainPanel = () => {
                 )}
                 {
                     modalStack.map((modal) => (
-                        <Popup title={modal.title} onClose={() => handlePopupClose(modal.id)} key={modal.id} width={modal.width} height={modal.height}>{modal.modal}</Popup>
+                        <Popup title={modal.title} onClose={() => {
+                            modal.onClose && modal.onClose();
+                            handlePopupClose(modal.id)
+                        }} key={modal.id} width={modal.width} height={modal.height}>{modal.modal}</Popup>
                     ))
                 }
             </VisualizerContainer>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionConfig.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionConfig.tsx
index 57601bece0e..f54964fb137 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionConfig.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionConfig.tsx
@@ -17,7 +17,7 @@
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { FlowNode } from "@wso2/ballerina-core";
+import { FlowNode, LineRange } 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";
@@ -26,9 +26,11 @@ import { ConnectionConfigProps } from "./types";
 import { getConnectionKindConfig } from "./config";
 import { createConnectionSelectField, fetchConnectionForNode, updateNodeWithConnectionVariable } from "./utils";
 import { LoaderContainer } from "../RelativeLoader/styles";
+import { URI, Utils } from "vscode-uri";
+import { CONNECTIONS_FILE } from "../../constants";
 
 export function ConnectionConfig(props: ConnectionConfigProps): JSX.Element {
-    const { connectionKind, selectedNode, onSave, onNavigateToSelectionList } = props;
+    const { fileName, connectionKind, selectedNode, onSave, onNavigateToSelectionList } = props;
     const config = useMemo(() => getConnectionKindConfig(connectionKind), [connectionKind]);
     const { rpcClient } = useRpcContext();
 
@@ -38,6 +40,8 @@ export function ConnectionConfig(props: ConnectionConfigProps): JSX.Element {
     const [savingForm, setSavingForm] = useState<boolean>(false);
 
     const projectPath = useRef<string>("");
+    const currentFilePath = useRef<string>("");
+    const targetLineRangeRef = useRef<LineRange | undefined>(undefined);
 
     useEffect(() => {
         initPanel();
@@ -52,6 +56,22 @@ export function ConnectionConfig(props: ConnectionConfigProps): JSX.Element {
     const initPanel = async () => {
         setLoading(true);
         projectPath.current = await rpcClient.getVisualizerLocation().then((location) => location.projectUri);
+        currentFilePath.current = fileName;
+
+        const endPosition = await rpcClient.getBIDiagramRpcClient().getEndOfFile({
+            filePath: currentFilePath.current
+        });
+        targetLineRangeRef.current = {
+            startLine: {
+                line: endPosition.line,
+                offset: endPosition.offset
+            },
+            endLine: {
+                line: endPosition.line,
+                offset: endPosition.offset
+            }
+        };
+
         await fetchSelectedConnection();
         setLoading(false);
     };
@@ -87,7 +107,8 @@ export function ConnectionConfig(props: ConnectionConfigProps): JSX.Element {
                 <>
                     <FormGeneratorNew
                         key={selectedConnection?.id}
-                        fileName={projectPath.current}
+                        fileName={currentFilePath.current || projectPath.current}
+                        targetLineRange={targetLineRangeRef.current}
                         fields={selectedConnectionFields}
                         onSubmit={handleOnSave}
                         disableSaveButton={savingForm}
@@ -95,8 +116,7 @@ export function ConnectionConfig(props: ConnectionConfigProps): JSX.Element {
                         helperPaneSide="left"
                     />
                 </>
-            )
-            }
+            )}
         </>
     );
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionCreator.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionCreator.tsx
index 30a4eef7c6e..b2a48023f8b 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionCreator.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionCreator.tsx
@@ -29,6 +29,8 @@ import { updateFormFieldsWithData, updateNodeTemplateProperties, updateNodeWithC
 import { cloneDeep } from "lodash";
 import { LineRange } from "@wso2/ballerina-core";
 import { LoaderContainer } from "../RelativeLoader/styles";
+import { URI, Utils } from "vscode-uri";
+import { CONNECTIONS_FILE } from "../../constants";
 
 export function ConnectionCreator(props: ConnectionCreatorProps): JSX.Element {
     const { connectionKind, selectedNode, nodeFormTemplate, onSave } = props;
@@ -43,6 +45,7 @@ export function ConnectionCreator(props: ConnectionCreatorProps): JSX.Element {
     const [savingForm, setSavingForm] = useState<boolean>(false);
 
     const projectPath = useRef<string>("");
+    const connectionsFilePath = useRef<string>("");
     const targetLineRangeRef = useRef<LineRange | undefined>(undefined);
 
     useEffect(() => {
@@ -52,15 +55,18 @@ export function ConnectionCreator(props: ConnectionCreatorProps): JSX.Element {
     const initPanel = async () => {
         setLoading(true);
         projectPath.current = await rpcClient.getVisualizerLocation().then((location) => location.projectUri);
-        const currentPosition = await rpcClient.getVisualizerLocation().then((location) => location.position);
+        connectionsFilePath.current = Utils.joinPath(URI.file(projectPath.current), CONNECTIONS_FILE).fsPath;
+        const endPosition = await rpcClient.getBIDiagramRpcClient().getEndOfFile({
+            filePath: connectionsFilePath.current
+        });
         targetLineRangeRef.current = {
             startLine: {
-                line: currentPosition.startLine,
-                offset: currentPosition.startColumn
+                line: endPosition.line,
+                offset: endPosition.offset
             },
             endLine: {
-                line: currentPosition.endLine,
-                offset: currentPosition.endColumn
+                line: endPosition.line,
+                offset: endPosition.offset
             }
         }
 
@@ -100,7 +106,7 @@ export function ConnectionCreator(props: ConnectionCreatorProps): JSX.Element {
             {!loading && connectionFields?.length > 0 && (
                 <>
                     <FormGeneratorNew
-                        fileName={selectedNode?.codedata?.lineRange?.fileName || projectPath.current}
+                        fileName={connectionsFilePath.current || projectPath.current}
                         fields={connectionFields}
                         onSubmit={handleOnSave}
                         submitText={savingForm ? "Saving..." : "Save"}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/config.ts b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/config.ts
index 10b585220f3..3ad872f13e2 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/config.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/config.ts
@@ -21,6 +21,7 @@ import { GET_DEFAULT_MODEL_PROVIDER, BALLERINAX } from "../../constants";
 import {
     convertChunkerCategoriesToSidePanelCategories,
     convertEmbeddingProviderCategoriesToSidePanelCategories,
+    convertMemoryStoreCategoriesToSidePanelCategories,
     convertModelProviderCategoriesToSidePanelCategories,
     convertVectorStoreCategoriesToSidePanelCategories
 } from "../../utils/bi";
@@ -53,6 +54,16 @@ export const CONNECTION_TYPE_CONFIGS: Record<ConnectionKind, ConnectionKindConfi
         valueTypeConstraint: "ai:Chunker",
         nodePropertyKey: "chunker",
         categoryConverter: convertChunkerCategoriesToSidePanelCategories,
+    },
+    MEMORY_STORE: {
+        displayName: "Memory Store",
+        valueTypeConstraint: "ai:MemoryStore",
+        nodePropertyKey: "store",
+        categoryConverter: convertMemoryStoreCategoriesToSidePanelCategories,
+        searchConfig: (): ConnectionSearchConfig => ({
+            query: "",
+            searchKind: "MEMORY_STORE"
+        })
     }
 };
 
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/types.ts b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/types.ts
index 29b773a5835..d4fe9c49db7 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/types.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/types.ts
@@ -18,7 +18,7 @@
 
 import { FlowNode, SearchKind } from "@wso2/ballerina-core";
 
-export type ConnectionKind = 'MODEL_PROVIDER' | 'VECTOR_STORE' | 'EMBEDDING_PROVIDER' | 'CHUNKER';
+export type ConnectionKind = 'MODEL_PROVIDER' | 'VECTOR_STORE' | 'EMBEDDING_PROVIDER' | 'CHUNKER' | 'MEMORY_STORE';
 
 export interface ConnectionKindConfig {
     displayName: string;
@@ -40,8 +40,9 @@ export interface ConnectionSpecialConfig {
 }
 
 export interface ConnectionConfigProps {
+    fileName: string;
     connectionKind: ConnectionKind;
-    selectedNode?: FlowNode;
+    selectedNode: FlowNode;
     onSave?: (selectedCallNode: FlowNode) => void;
     onNavigateToSelectionList?: () => void;
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/utils.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/utils.tsx
index 8a64759bd10..cab0e775a66 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/utils.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/utils.tsx
@@ -116,7 +116,7 @@ export const fetchConnectionForNode = async (
     const targetPropertyValue = propertyKey ? targetNode.properties?.[propertyKey as keyof typeof targetNode.properties]?.value : undefined;
 
     const connection = connections.find((node: FlowNode) =>
-        node.properties.variable?.value === targetPropertyValue
+        node.properties.variable?.value === targetPropertyValue.toString().trim()
     );
 
     if (!connection)
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/EntryPointTypeCreator/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/EntryPointTypeCreator/index.tsx
new file mode 100644
index 00000000000..163ebe07c6d
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/EntryPointTypeCreator/index.tsx
@@ -0,0 +1,324 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { Type, TypeNodeKind, Member, PayloadContext } from "@wso2/ballerina-core";
+import { ThemeColors } from "@wso2/ui-toolkit";
+import styled from "@emotion/styled";
+import DynamicModal from "../../components/Modal";
+
+import { EditorContext, StackItem } from "@wso2/type-editor";
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbSeparator } from "../../views/BI/Forms/FormGenerator";
+import { FormTypeEditor } from "../../views/BI/TypeEditor";
+
+export const Title = styled.div`
+    color: ${ThemeColors.ON_SURFACE};
+`;
+
+interface EntryPointTypeCreatorProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onTypeCreate: (type: Type | string) => void;
+    initialTypeName?: string;
+    modalTitle?: string;
+    modalWidth?: number;
+    modalHeight?: number;
+    payloadContext?: PayloadContext;
+
+}
+
+interface TypeEditorState {
+    isTypeCreatorOpen: boolean;
+    editingTypeId: string | undefined;
+    newTypeName: string | undefined;
+    editingType: Type;
+}
+
+
+export function EntryPointTypeCreator(props: EntryPointTypeCreatorProps) {
+    const { modalTitle, initialTypeName, modalWidth, modalHeight, payloadContext, isOpen, onClose, onTypeCreate } = props;
+
+    const [typeEditorState, setTypeEditorState] = React.useState<TypeEditorState>({
+        isTypeCreatorOpen: false,
+        editingTypeId: undefined,
+        newTypeName: undefined,
+        editingType: undefined,
+    });
+
+    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) => {
+            const newStack = prev.slice(0, -1);
+            // If stack becomes empty, reset to initial state
+            if (newStack.length === 0) {
+                return [{
+                    isDirty: false,
+                    type: undefined
+                }];
+            }
+            return newStack;
+        });
+        setRefetchStates((prev) => {
+            const newStates = [...prev];
+            const currentState = newStates.pop();
+            if (currentState && newStates.length > 0) {
+                newStates[newStates.length - 1] = true;
+            }
+            // If no states left, add initial state
+            if (newStates.length === 0) {
+                newStates.push(false);
+            }
+            return newStates;
+        });
+    };
+
+    const peekTypeStack = (): StackItem | null => {
+        return stack.length > 0 ? stack[stack.length - 1] : null;
+    };
+
+    const replaceTop = (item: StackItem) => {
+        if (stack.length <= 1) return;
+        setStack((prev) => {
+            const newStack = [...prev];
+            newStack[newStack.length - 1] = item;
+            return newStack;
+        });
+    }
+
+    useEffect(() => {
+        if (isOpen) {
+            setTypeEditorState((prevState) => ({
+                ...prevState,
+                isTypeCreatorOpen: true,
+            }));
+        }
+    }, [isOpen]);
+
+    const setRefetchForCurrentModal = (shouldRefetch: boolean) => {
+        setRefetchStates((prev) => {
+            const newStates = [...prev];
+            if (newStates.length > 0) {
+                newStates[newStates.length - 1] = shouldRefetch;
+            }
+            return newStates;
+        });
+    };
+
+    const handleTypeEditorStateChange = (state: boolean) => {
+        if (!state) {
+            if (stack.length > 1) {
+                popTypeStack();
+                return;
+            }
+        }
+        setTypeEditorState((prevState) => ({
+            ...prevState,
+            isTypeCreatorOpen: state,
+        }));
+    };
+
+    const onSaveType = (type: Type | string) => {
+        // here on saveType if its the rootTypeEditor which is the rootFormTypeEditor we should trrigger onTypeCreate
+        if (stack.length === 1) {
+            // This is the root type editor, trigger onTypeCreate
+            onTypeCreate(type);
+            // Close the modal by updating the state
+            setTypeEditorState({
+                editingTypeId: undefined,
+                editingType: undefined,
+                isTypeCreatorOpen: false,
+                newTypeName: undefined,
+            });
+            setStack([{
+                isDirty: false,
+                type: undefined
+            }]);
+            onClose();
+            return;
+        }
+
+        if (stack.length > 0) {
+            setRefetchForCurrentModal(true);
+            popTypeStack();
+        }
+        setTypeEditorState({
+            ...typeEditorState,
+            isTypeCreatorOpen: stack.length !== 1,
+        });
+    }
+
+    const createNewType = (): Type => ({
+        name: "NewType",
+        members: [] as Member[],
+        editable: true,
+        metadata: {
+            description: "",
+            label: ""
+        },
+        properties: {},
+        codedata: {
+            node: "RECORD" as TypeNodeKind
+        },
+        includes: [] as string[],
+        allowAdditionalFields: false
+    });
+
+    const getNewTypeCreateForm = () => {
+        pushTypeStack({
+            type: createNewType(),
+            isDirty: false
+        });
+        setTypeEditorState({
+            ...typeEditorState,
+            isTypeCreatorOpen: true,
+        })
+    }
+
+
+    const onTypeEditorClosed = () => {
+        setTypeEditorState({
+            editingTypeId: undefined,
+            editingType: undefined,
+            isTypeCreatorOpen: false,
+            newTypeName: undefined,
+        });
+        setStack([{
+            isDirty: false,
+            type: undefined
+        }])
+        onClose();
+    };
+
+    const newTypeModel = (): Type => {
+        return {
+            name: initialTypeName || "MyType",
+            editable: true,
+            metadata: {
+                label: "",
+                description: "",
+            },
+            codedata: {
+                node: "RECORD",
+            },
+            properties: {},
+            members: [],
+            includes: [] as string[],
+            allowAdditionalFields: false
+        };
+    };
+
+
+    const onTypeChange = async (type: Type, rename?: boolean) => {
+        if (rename) {
+            setTypeEditorState({
+                editingTypeId: type.name,
+                editingType: type,
+                isTypeCreatorOpen: false,
+                newTypeName: undefined,
+            });
+            return;
+        }
+        setTypeEditorState({
+            ...typeEditorState,
+            isTypeCreatorOpen: true,
+        });
+    };
+
+
+    return (
+        <>
+            <DynamicModal
+                width={modalWidth}
+                height={modalHeight}
+                anchorRef={undefined}
+                title={modalTitle}
+                openState={typeEditorState.isTypeCreatorOpen}
+                setOpenState={onTypeEditorClosed}
+            >
+                <div style={{ height: '525px', overflow: 'auto' }}>
+                    <FormTypeEditor
+                        key={typeEditorState.editingTypeId ?? typeEditorState.newTypeName ?? 'new-type'}
+                        type={newTypeModel()}
+                        newType={typeEditorState.editingTypeId ? false : true}
+                        onTypeChange={onTypeChange}
+                        onTypeCreate={() => { }}
+                        isPopupTypeForm={true}
+                        onSaveType={onSaveType}
+                        getNewTypeCreateForm={getNewTypeCreateForm}
+                        refetchTypes={false}
+                        isContextTypeForm={true}
+                        payloadContext={payloadContext}
+                    />
+                </div>
+            </DynamicModal>
+            <EditorContext.Provider value={{ stack, push: pushTypeStack, pop: popTypeStack, peek: peekTypeStack, replaceTop: replaceTop }}>
+
+                {stack.slice(1).map((item, i) => {
+                    return (
+                        <DynamicModal
+                            key={i}
+                            width={584}
+                            height={564}
+                            anchorRef={undefined}
+                            title="Create New Type"
+                            openState={typeEditorState.isTypeCreatorOpen}
+                            sx={i === 0 ? { background: 'rgba(0, 0, 0, 0.1)' } : undefined}
+                            setOpenState={handleTypeEditorStateChange}>
+                            <>
+                                <BreadcrumbContainer>
+                                    {stack.slice(1, i + 2).map((stackItem, index) => (
+                                        <React.Fragment key={index}>
+                                            {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
+                                            <BreadcrumbItem>
+                                                {stackItem?.type?.name || "NewType"}
+                                            </BreadcrumbItem>
+                                        </React.Fragment>
+                                    ))}
+                                </BreadcrumbContainer>
+                                <div style={{ height: '500px', overflow: 'auto' }}>
+                                    <FormTypeEditor
+                                        key={typeEditorState.editingTypeId ?? typeEditorState.newTypeName ?? 'new-type'}
+                                        type={peekTypeStack()?.type}
+                                        newType={peekTypeStack()?.isDirty}
+                                        isPopupTypeForm={true}
+                                        onTypeChange={onTypeChange}
+                                        onTypeCreate={() => { }}
+                                        onSaveType={onSaveType}
+                                        getNewTypeCreateForm={getNewTypeCreateForm}
+                                        refetchTypes={refetchStates[i + 1]}
+                                    />
+                                </div>
+                            </>
+                        </DynamicModal>
+                    )
+                })}
+            </EditorContext.Provider>
+        </>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/Modal/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/Modal/index.tsx
index c0cc02e87de..57c5e327462 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/Modal/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/Modal/index.tsx
@@ -31,32 +31,37 @@ export type DynamicModalProps = {
     height?: number;
     openState: boolean;
     setOpenState: (state: boolean) => void;
+    sx?: any;
 };
 
-const ModalContainer = styled.div`
+const ModalContainer = styled.div<{ sx?: any }>`
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 30000;
+    z-index: 2001; 
     display: flex;
     justify-content: center;
     align-items: center;
+    ${(props: { sx?: any }) => props.sx};
 `;
 
+
 const ModalBox = styled.div<{ width?: number; height?: number }>`
-  width: ${({ width }: { width?: number }) => (width ? `${width}px` : 'auto')};
-  height: ${({ height }: { height?: number }) => (height ? `${height}px` : 'auto')};
+  width: ${({ width }: { width: number }) => (width ? `${width}px` : 'auto')};
+  height: ${({ height }: { height: number }) => (height ? `${height}px` : 'auto')};
+  max-width: 90vw;
+  max-height: 90vh;
   position: relative;
   display: flex;
   flex-direction: column;
-  overflow-y: hidden;
+  overflow: 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;
+  z-index: 30001;
 `;
 
 const InvisibleButton = styled.button`
@@ -80,7 +85,6 @@ const ModalHeaderSection = styled.header`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding-inline: 16px;
 `;
 
 type TriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & { children: ReactNode };
@@ -95,6 +99,7 @@ const DynamicModal: React.FC<DynamicModalProps> & { Trigger: typeof Trigger } =
     height,
     openState,
     setOpenState,
+    sx,
 }) => {
     const { setShowOverlay } = useVisualizerContext();
     let trigger: ReactElement | null = null;
@@ -115,7 +120,7 @@ const DynamicModal: React.FC<DynamicModalProps> & { Trigger: typeof Trigger } =
         setShowOverlay(false);
         onClose && onClose();
     };
-    
+
     useEffect(() => {
         setShowOverlay(openState === true);
     });
@@ -130,7 +135,7 @@ const DynamicModal: React.FC<DynamicModalProps> & { Trigger: typeof Trigger } =
         <>
             {trigger}
             {openState && createPortal(
-                <ModalContainer ref={anchorRef} className="unq-modal-overlay">
+                <ModalContainer ref={anchorRef} className="unq-modal-overlay" sx={sx}>
                     <ModalBox width={width} height={height}>
                         <ModalHeaderSection>
                             <Typography variant="h2" sx={{ margin: 0 }}>
@@ -139,7 +144,7 @@ const DynamicModal: React.FC<DynamicModalProps> & { Trigger: typeof Trigger } =
                             <Codicon name="close" onClick={handleClose} />
                         </ModalHeaderSection>
                         <Divider />
-                        <div>{content}</div>
+                        {content}
                     </ModalBox>
                 </ModalContainer>,
                 document.body
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/Popup/Form/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/Popup/Form/index.tsx
index 35d24a63d37..996e803a043 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/Popup/Form/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/Popup/Form/index.tsx
@@ -33,17 +33,19 @@ const PopupFormContainer = styled.div`
 `;
 
 const PopupFormBox = styled.div<{ width?: number; height?: number }>`
-  width: ${({ width }: { width?: number }) => (width ? `${width}px` : 'auto')};
-  height: ${({ height }: { height?: number }) => (height ? `${height}px` : 'auto')};
+  width: ${({width}:{width:number}) => (width ? `${width}px` : 'auto')};
+  height: ${({height}:{height:number}) => (height ? `${height}px` : 'auto')};
+  max-width: 90vw;
+  max-height: 90vh;
   position: relative;
   display: flex;
   flex-direction: column;
-  overflow-y: hidden;
+  overflow: 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;
+  z-index: 30001;
 `;
 
 const PopupFormHeader = styled.header`
@@ -61,6 +63,15 @@ export type PopupFormProps = {
     onClose?: () => void;
 };
 
+
+const PopupFormContent = styled.div`
+    flex: 1;
+    min-height: 0; /* Critical for nested flex scroll areas */
+    display: flex;
+    flex-direction: column;
+`;
+
+
 export const PopupForm = (props: PopupFormProps) => {
     const { width, height, title, children, onClose } = props;
 
@@ -74,7 +85,9 @@ export const PopupForm = (props: PopupFormProps) => {
                      <Codicon name="close" onClick={onClose} />
                 </PopupFormHeader>
                 <Divider />
-                <div><ScrollableContainer>{children}</ScrollableContainer></div>
+                <PopupFormContent>
+                    <ScrollableContainer>{children}</ScrollableContainer>
+                </PopupFormContent>
             </PopupFormBox>
         </PopupFormContainer>
     )
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/Popup/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/Popup/index.tsx
index f2aded9a4db..ee6b22e30ce 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/Popup/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/Popup/index.tsx
@@ -34,7 +34,7 @@ const PopupContentContainer = styled.div`
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 30000;
+    z-index: 2001;
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/TitleBar/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/TitleBar/index.tsx
index 083d88a92d1..91f7ff6bb56 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/TitleBar/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/TitleBar/index.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import { Icon } from "@wso2/ui-toolkit";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
@@ -113,7 +113,17 @@ export function TitleBar(props: TitleBarProps) {
     const { title, subtitle, subtitleElement, actions, hideBack, onBack, isBetaFeature } = props;
     const { rpcClient } = useRpcContext();
 
-    const isDiagramView = rpcClient.getVisualizerLocation().then((res) => res.view === MACHINE_VIEW.BIDiagram);
+    const [isDiagramView, setIsDiagramView] = useState(false);
+
+    useEffect(() => {
+        rpcClient.getVisualizerLocation().then((res) => {
+            if (res.view === MACHINE_VIEW.BIDiagram) {
+                setIsDiagramView(true);
+            } else {
+                setIsDiagramView(false);
+            }
+        });
+    }, [title]);
 
     const handleBackButtonClick = () => {
         if (onBack) {
@@ -131,7 +141,6 @@ export function TitleBar(props: TitleBarProps) {
                         <Icon name="bi-arrow-back" iconSx={{ fontSize: "20px", color: "var(--vscode-foreground)" }} />
                     </IconButton>
                 )}
-                {(actions || isDiagramView) && <UndoRedoGroup key={Date.now()} />}
                 <TitleSection>
                     <Title>{title}</Title>
                     {subtitle && <SubTitle>{subtitle}</SubTitle>}
@@ -144,6 +153,7 @@ export function TitleBar(props: TitleBarProps) {
                 )}
             </LeftContainer>
             <RightContainer>
+                {(actions || isDiagramView) && <UndoRedoGroup key={Date.now()} />}
                 {actions && <ActionsContainer>{actions}</ActionsContainer>}
             </RightContainer>
         </TitleBarContainer>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/TopNavigationBar/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/TopNavigationBar/index.tsx
index 65db8c07a93..4dedc557717 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/TopNavigationBar/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/TopNavigationBar/index.tsx
@@ -16,11 +16,11 @@
  * under the License.
  */
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import styled from "@emotion/styled";
-import { Icon } from "@wso2/ui-toolkit";
+import { Codicon, Icon } from "@wso2/ui-toolkit";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { MACHINE_VIEW } from "@wso2/ballerina-core";
+import { HistoryEntry, MACHINE_VIEW, WorkspaceTypeResponse } from "@wso2/ballerina-core";
 
 const NavContainer = styled.div`
     display: flex;
@@ -60,7 +60,14 @@ const IconButton = styled.div`
     }
 `;
 
-const BreadcrumbItem = styled.span<{ clickable?: boolean }>`
+const BreadcrumbItem = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+`;
+
+const BreadcrumbText = styled.span<{ clickable?: boolean }>`
     ${({ clickable }: { clickable?: boolean }) =>
         clickable &&
         `
@@ -71,6 +78,26 @@ const BreadcrumbItem = styled.span<{ clickable?: boolean }>`
     `}
 `;
 
+const PackageContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--vscode-foreground);
+    background-color: var(--vscode-editor-inactiveSelectionBackground);
+    max-width: 120px;
+    overflow: hidden;
+    padding: 3px 4px;
+    font-size: 10px;
+    border-radius: 5px;
+    line-height: 1;
+`;
+
+const PackageName = styled.span`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+
 interface TopNavigationBarProps {
     onBack?: () => void;
     onHome?: () => void;
@@ -79,16 +106,18 @@ interface TopNavigationBarProps {
 export function TopNavigationBar(props: TopNavigationBarProps) {
     const { onBack, onHome } = props;
     const { rpcClient } = useRpcContext();
-    const [history, setHistory] = useState<any[]>([]);
+    const [history, setHistory] = useState<HistoryEntry[]>([]);
+    const [workspaceType, setWorkspaceType] = useState<WorkspaceTypeResponse>(null);
 
     useEffect(() => {
-        rpcClient
-            .getVisualizerRpcClient()
-            .getHistory()
-            .then((history) => {
-                console.log(">>> history", history);
-                setHistory(history);
-            });
+        Promise.all([
+            rpcClient.getVisualizerRpcClient().getHistory(),
+            rpcClient.getCommonRpcClient().getWorkspaceType()
+        ]).then(([history, workspaceType]) => {
+            console.log(">>> history", history);
+            setHistory(history);
+            setWorkspaceType(workspaceType);
+        });
     }, []);
 
     const handleBack = () => {
@@ -106,6 +135,13 @@ export function TopNavigationBar(props: TopNavigationBarProps) {
             rpcClient.getVisualizerRpcClient().goSelected(index);
         }
     };
+
+    const hasMultiplePackages = useMemo(() => {
+        return workspaceType?.type === "BALLERINA_WORKSPACE" ||
+            workspaceType?.type === "MULTIPLE_PROJECTS" ||
+            workspaceType?.type === "VSCODE_WORKSPACE";
+    }, [workspaceType]);
+
     // HACK: To remove forms from breadcrumb. Will have to fix from the state machine side
     const hackToSkipForms = ["overview", "automation", "service", "function", "add natural function", "data mapper", "connection"];
     const existingLabels = new Set<string>();
@@ -126,12 +162,34 @@ export function TopNavigationBar(props: TopNavigationBarProps) {
                         existingLabels.add(shortName);
                         return (
                             <React.Fragment key={index}>
-                                {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
-                                <BreadcrumbItem
-                                    clickable={index < history.length - 1}
-                                    onClick={() => index < history.length - 1 && handleCrumbClick(index)}
-                                >
-                                    {shortName}
+                                {index > 0 && (
+                                    <Icon 
+                                        name="wide-chevron" 
+                                        iconSx={{
+                                            color: "var(--vscode-foreground)",
+                                            fontSize: hasMultiplePackages ? "20px" : "15px",
+                                            opacity: 0.5 
+                                        }} 
+                                        sx={{ alignSelf: "center" }}
+                                    />
+                                )}
+                                <BreadcrumbItem>
+                                    <BreadcrumbText
+                                        clickable={index < history.length - 1}
+                                        onClick={() => index < history.length - 1 && handleCrumbClick(index)}
+                                    >
+                                        {shortName}
+                                    </BreadcrumbText>
+                                    {hasMultiplePackages && crumb.location.package && (
+                                        <PackageContainer>
+                                            <Codicon 
+                                                name="project" 
+                                                sx={{ height: "10px", width: "10px", display: "flex", alignItems: "center" }}
+                                                iconSx={{ fontSize: "10px", lineHeight: "1" }} 
+                                            />
+                                            <PackageName>{crumb.location.package}</PackageName>
+                                        </PackageContainer>
+                                    )}
                                 </BreadcrumbItem>
                             </React.Fragment>
                         );
diff --git a/workspaces/ballerina/ballerina-visualizer/src/constants.ts b/workspaces/ballerina/ballerina-visualizer/src/constants.ts
index e1a7a4bf755..7246f9a8d98 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/constants.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/constants.ts
@@ -29,6 +29,12 @@ export const BALLERINAX = "ballerinax";
 
 export const AI = "ai";
 
+export enum TypeHelperContext {
+    GRAPHQL_FIELD_TYPE = 'GRAPHQL_FIELD_TYPE',
+    GRAPHQL_INPUT_TYPE = 'GRAPHQL_INPUT_TYPE',
+    HTTP_STATUS_CODE = 'HTTP_STATUS_CODE',
+}
+
 export const GET_DEFAULT_MODEL_PROVIDER = "getDefaultModelProvider";
 export const WSO2_MODEL_PROVIDER = "Default Model Provider (WSO2)";
 
@@ -49,3 +55,5 @@ export const METHOD_CALL = "METHOD_CALL";
 export const LOADING_MESSAGE = "Loading...";
 export const AI_COMPONENT_PROGRESS_MESSAGE_TIMEOUT = 3000; // Timeout (ms) before showing the 'fetching from Central' progress message
 export const AI_COMPONENT_PROGRESS_MESSAGE = "Fetching resources from Ballerina Central. This may take a few moments...";
+
+export const CONNECTIONS_FILE = "connections.bal";
diff --git a/workspaces/ballerina/ballerina-visualizer/src/utils/bi.tsx b/workspaces/ballerina/ballerina-visualizer/src/utils/bi.tsx
index 3f30b7b3c4e..85ac0de64da 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/utils/bi.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/utils/bi.tsx
@@ -55,7 +55,8 @@ import {
     CompletionInsertText,
     SubPanel,
     SubPanelView,
-    NodeMetadata
+    NodeMetadata,
+    Type,
 } from "@wso2/ballerina-core";
 import {
     HelperPaneVariableInfo,
@@ -174,17 +175,22 @@ export function convertModelProviderCategoriesToSidePanelCategories(categories:
 }
 
 export function convertVectorStoreCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
-    return convertCategoriesToSidePanelCategoriesWithIcon(categories, (codedata) => (
-        <NodeIcon type={codedata?.node} size={24} />
-    ));
+    return convertCategoriesToSidePanelCategoriesWithIcon(categories, (codedata) => {
+        return <AIModelIcon type={codedata?.module} codedata={codedata} />;
+    });
 }
 
 export function convertEmbeddingProviderCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
     return convertModelProviderCategoriesToSidePanelCategories(categories);
 }
 
-export function convertVectorKnowledgeBaseCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
-    return convertModelProviderCategoriesToSidePanelCategories(categories);
+export function convertKnowledgeBaseCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
+    return convertCategoriesToSidePanelCategoriesWithIcon(categories, (codedata) => {
+        if ((codedata?.module as string).includes("azure")) {
+            return <AIModelIcon type="ai.azure" />;
+        }
+        return <NodeIcon type={codedata?.node} size={24} />
+    });
 }
 
 export function convertCategoriesToSidePanelCategoriesWithIcon(
@@ -218,6 +224,12 @@ export function convertChunkerCategoriesToSidePanelCategories(categories: Catego
     ));
 }
 
+export function convertMemoryStoreCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
+    return convertCategoriesToSidePanelCategoriesWithIcon(categories, (codedata) => (
+        <NodeIcon type={codedata?.node} size={24} />
+    ));
+}
+
 export function convertNodePropertiesToFormFields(
     nodeProperties: NodeProperties,
     connections?: FlowNode[],
@@ -371,8 +383,6 @@ export function getContainerTitle(view: SidePanelView, activeNode: FlowNode, cli
     switch (view) {
         case SidePanelView.NODE_LIST:
             return ""; // Show switch instead of title
-        case SidePanelView.NEW_AGENT:
-            return "AI Agent";
         case SidePanelView.CONNECTION_CONFIG:
             return `Configure ${getConnectionDisplayName(connectionKind)}`;
         case SidePanelView.CONNECTION_SELECT:
@@ -395,12 +405,13 @@ export function getContainerTitle(view: SidePanelView, activeNode: FlowNode, cli
             return "Create Tool from Connection";
         case SidePanelView.NEW_TOOL_FROM_FUNCTION:
             return "Create Tool from Function";
-        case SidePanelView.AGENT_CONFIG:
-            return "Configure Agent";
         case SidePanelView.FORM:
             if (!activeNode) {
                 return "";
             }
+            if (activeNode.codedata?.node === "KNOWLEDGE_BASE" && activeNode.codedata?.object === "VectorKnowledgeBase") {
+                return `ai: Vector Knowledge Base`;
+            }
             if (
                 activeNode.codedata?.node === "REMOTE_ACTION_CALL" ||
                 activeNode.codedata?.node === "RESOURCE_ACTION_CALL"
@@ -470,6 +481,15 @@ export function enrichFormTemplatePropertiesWithValues(
             ) {
                 // Copy the value from formProperties to formTemplateProperties
                 enrichedFormTemplateProperties[key as NodePropertyKey].value = formProperty.value;
+                
+                if (formProperty.hasOwnProperty('editable')) {
+                    enrichedFormTemplateProperties[key as NodePropertyKey].editable = formProperty.editable;
+                    enrichedFormTemplateProperties[key as NodePropertyKey].codedata = formProperty?.codedata;
+                }
+
+                if (formProperty.diagnostics) {
+                    enrichedFormTemplateProperties[key as NodePropertyKey].diagnostics = formProperty.diagnostics;
+               }
             }
         }
     }
@@ -500,10 +520,7 @@ export function convertBalCompletion(completion: ExpressionCompletionItem): Comp
     const description = completion.detail;
     const sortText = completion.sortText;
     const additionalTextEdits = completion.additionalTextEdits;
-    const labelDetails = {
-        description,
-        detail: completion.detail,
-    };
+    const labelDetails = completion.labelDetails;
 
     return {
         tag,
@@ -730,6 +747,26 @@ export function convertToVisibleTypes(types: VisibleTypeItem[], isFetchingTypesF
     }));
 }
 
+export function convertRecordTypeToCompletionItem(type: Type): CompletionItem {
+    const label = type?.name ?? "";
+    const value = label; 
+    const kind = "struct";
+    const description = type?.metadata?.description;
+    const labelDetails = (() => {
+        const descriptionText = "Record";
+        return descriptionText ? { description: descriptionText } : undefined;
+    })();
+
+    return {
+        label,
+        value,
+        kind,
+        description,
+        labelDetails,
+        sortText: label?.toLowerCase?.() || label,
+    };
+}
+
 export const clearDiagramZoomAndPosition = () => {
     localStorage.removeItem("diagram-file-path");
     localStorage.removeItem("diagram-zoom-level");
@@ -918,9 +955,9 @@ function handleRepeatableProperty(property: Property, formField: FormField): voi
     }
 }
 
-export function convertConfig(properties: NodeProperties, skipKeys: string[] = []): FormField[] {
+export function convertConfig(properties: NodeProperties, skipKeys: string[] = [], sortKeys: boolean = true): FormField[] {
     const formFields: FormField[] = [];
-    const sortedKeys = Object.keys(properties).sort();
+    const sortedKeys = sortKeys ? Object.keys(properties).sort() : Object.keys(properties);
 
     for (const key of sortedKeys) {
         if (skipKeys.includes(key)) {
diff --git a/workspaces/ballerina/ballerina-visualizer/src/utils/utils.ts b/workspaces/ballerina/ballerina-visualizer/src/utils/utils.ts
index ef6c9344e10..e7735d79d93 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/utils/utils.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/utils/utils.ts
@@ -155,88 +155,9 @@ export const getFunctionParametersList = (params: Parameter[]) => {
     return paramList;
 }
 
-export const getDataMapperParametersList = (params: string[]) => {
-    const paramList: FunctionParameters[] = [];
-    const paramNames: string[] = [];
-
-    params.forEach(param => {
-        const varName = lowercaseFirstLetter(param);
-        const generatedName = createUniqueName(varName);
-        paramNames.push(generatedName);
-
-        paramList.push({
-            type: param,
-            name: generatedName
-        });
-    })
-    return paramList;
-
-    function lowercaseFirstLetter(input: string): string {
-        if (!input) return input;
-        return input.charAt(0).toLowerCase() + input.slice(1);
-    }
-
-    function createUniqueName(name: string): string {
-        let newName = name;
-        let counter = 1;
-        while (paramNames.includes(newName)) {
-            newName = name + counter;
-            counter++;
-        }
-        return newName;
-    }
-}
-
-export function findRegexMatches(input: string): MatchResult[] {
-    // Define the regular expression using a RegExp literal
-    const regex = /\<(c(o(d(e((?:[ ]+(f(i(l(e(n(a(m(e(=("([^ "\n]+("(\>)?([ \n]+(`(`(`)?)?)?)?)?)?)?)?)?)?)?)?)?)?)?)?)?)?)?)?)?)?/g;
-
-    const matches: MatchResult[] = [];
-    let match: RegExpExecArray | null;
-
-    // Use exec in a loop to find all matches
-    while ((match = regex.exec(input)) !== null) {
-        // Avoid infinite loops with zero-length matches
-        if (match.index === regex.lastIndex) {
-            regex.lastIndex++;
-        }
-
-        matches.push({
-            start: match.index,
-            end: regex.lastIndex,
-            matchedText: match[0],
-        });
-    }
-
-    return matches;
-}
-
 export const isPositionChanged = (prev: NodePosition, current: NodePosition) => {
     return prev.startLine !== current.startLine ||
         prev.startColumn !== current.startColumn ||
         prev.endLine !== current.endLine ||
         prev.endColumn !== current.endColumn;
 };
-
-export function formatWithProperIndentation(content: string, baseIndent: number = 1): string {
-    const lines = content.split('\n');
-    let currentIndent = baseIndent;
-
-    return lines.map(line => {
-        const trimmedLine = line.trim();
-
-        // Decrease indent for closing braces/brackets
-        if (trimmedLine.startsWith('}') || trimmedLine.startsWith(']')) {
-            currentIndent = Math.max(1, currentIndent - 1);
-        }
-
-        const indentedLine = '    '.repeat(currentIndent) + trimmedLine;
-
-        // Increase indent for opening braces/brackets
-        if (trimmedLine.endsWith('{') || trimmedLine.endsWith('[')) {
-            currentIndent++;
-        }
-
-        return indentedLine;
-    }).join('\n');
-}
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 6cf1eb320e5..8c99fe25f0e 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
@@ -22,12 +22,9 @@ import {
     ProjectSource,
     SourceFile,
     MappingParameters,
-    DataMappingRecord,
     TestGenerationTarget,
     LLMDiagnostics,
-    ImportStatement,
     DiagnosticEntry,
-    ExistingFunction,
     AIPanelPrompt,
     Command,
     TemplateId,
@@ -42,7 +39,6 @@ import {
     GENERATE_TEST_AGAINST_THE_REQUIREMENT,
     GENERATE_CODE_AGAINST_THE_REQUIREMENT,
     ComponentInfo,
-    ImportInfo,
     MetadataWithAttachments,
     ExtendedDataMapperMetadata,
     DocGenerationRequest,
@@ -51,14 +47,13 @@ import {
 } from "@wso2/ballerina-core";
 
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { Button, Icon, Codicon, Typography } from "@wso2/ui-toolkit";
+import { Button, Codicon } from "@wso2/ui-toolkit";
 
 import { AIChatInputRef } from "../AIChatInput";
 import ProgressTextSegment from "../ProgressTextSegment";
 import ToolCallSegment from "../ToolCallSegment";
 import RoleContainer from "../RoleContainter";
 import { Attachment, AttachmentStatus } from "@wso2/ballerina-core";
-import { formatWithProperIndentation } from "../../../../utils/utils";
 
 import { AIChatView, Header, HeaderButtons, ChatMessage, Badge } from "../../styles";
 import ReferenceDropdown from "../ReferenceDropdown";
@@ -77,7 +72,7 @@ import {
     upsertTemplate,
 } from "../../commandTemplates/utils/utils";
 import { acceptResolver, handleAttachmentSelection } from "../../utils/attachment/attachmentManager";
-import { abortFetchWithAuth, fetchWithAuth } from "../../utils/networkUtils";
+import { fetchWithAuth } from "../../utils/networkUtils";
 import { SYSTEM_ERROR_SECRET } from "../AIChatInput/constants";
 import { CodeSegment } from "../CodeSegment";
 import AttachmentBox, { AttachmentsContainer } from "../AttachmentBox";
@@ -89,6 +84,7 @@ import { getOnboardingOpens, incrementOnboardingOpens } from "./utils/utils";
 
 import FeedbackBar from "./../FeedbackBar";
 import { useFeedback } from "./utils/useFeedback";
+import { URI } from "vscode-uri";
 
 interface ChatIndexes {
     integratedChatIndex: number;
@@ -116,9 +112,6 @@ var remainingTokenPercentage: string | number;
 var remaingTokenLessThanOne: boolean = false;
 
 var timeToReset: number;
-const INVALID_RECORD_REFERENCE: Error = new Error(
-    "Invalid record reference. Follow <org-name>/<package-name>:<record-name> format when referencing to record in another package."
-);
 const NO_DRIFT_FOUND = "No drift identified between the code and the documentation.";
 const DRIFT_CHECK_ERROR = "Failed to check drift between the code and the documentation. Please try again.";
 const RATE_LIMIT_ERROR = ` Cause: Your usage limit has been exceeded. This should reset in the beggining of the next month.`;
@@ -149,6 +142,7 @@ const AIChat: React.FC = () => {
     const [isAddingToWorkspace, setIsAddingToWorkspace] = useState(false);
 
     const [showSettings, setShowSettings] = useState(false);
+    const [currentFileArray, setCurrentFileArray] = useState<SourceFile[]>([]);
 
     //TODO: Need a better way of storing data related to last generation to be in the repair state.
     const currentDiagnosticsRef = useRef<DiagnosticEntry[]>([]);
@@ -205,8 +199,8 @@ const AIChat: React.FC = () => {
             chatLocation = (await rpcClient.getVisualizerLocation()).projectUri;
             setIsReqFileExists(
                 chatLocation != null &&
-                    chatLocation != undefined &&
-                    (await rpcClient.getAiPanelRpcClient().isRequirementsSpecificationFileExist(chatLocation))
+                chatLocation != undefined &&
+                (await rpcClient.getAiPanelRpcClient().isRequirementsSpecificationFileExist(chatLocation))
             );
 
             generateNaturalProgrammingTemplate(isReqFileExists);
@@ -334,6 +328,8 @@ const AIChat: React.FC = () => {
             } else {
                 setTestGenIntermediaryState(state as TestGeneratorIntermediaryState);
             }
+        } else if (type === "generated_sources") {
+            setCurrentFileArray(response.fileArray);
         } else if (type === "diagnostics") {
             const content = response.diagnostics;
             currentDiagnosticsRef.current = content;
@@ -345,12 +341,19 @@ const AIChat: React.FC = () => {
             setIsCodeLoading(false);
             setIsLoading(false);
             const command = response.command;
-            addChatEntry(
-                "user",
-                messages[messages.length - 2].content,
-                command != undefined && command == Command.Code
-            ); // Handle this in input layer?
-            addChatEntry("assistant", messages[messages.length - 1].content);
+
+            // Use functional update to access current state (avoid stale closure)
+            setMessages((prevMessages) => {
+                if (prevMessages.length >= 2) {
+                    addChatEntry(
+                        "user",
+                        prevMessages[prevMessages.length - 2].content,
+                        command != undefined && command == Command.Code
+                    );
+                    addChatEntry("assistant", prevMessages[prevMessages.length - 1].content);
+                }
+                return prevMessages;
+            });
         } else if (type === "error") {
             console.log("Received error signal");
             const errorTemplate = `\n\n<error data-system="true" data-auth="${SYSTEM_ERROR_SECRET}">${response.content}</error>`;
@@ -473,6 +476,7 @@ const AIChat: React.FC = () => {
         currentDiagnosticsRef.current = [];
         functionsRef.current = [];
         lastAttatchmentsRef.current = null;
+        setCurrentFileArray([]);
 
         try {
             await processContent(content);
@@ -653,7 +657,6 @@ const AIChat: React.FC = () => {
                             }
 
                             await processMappingParameters(
-                                inputText,
                                 {
                                     inputRecord: parsedInput.placeholderValues.inputRecords
                                         .split(",")
@@ -667,7 +670,6 @@ const AIChat: React.FC = () => {
                             break;
                         case "mappings-for-function":
                             await processMappingParameters(
-                                inputText,
                                 {
                                     inputRecord: [],
                                     outputRecord: "",
@@ -679,7 +681,6 @@ const AIChat: React.FC = () => {
                             break;
                         case "inline-mappings":
                             await processInlineMappingParameters(
-                                inputText,
                                 metadata as ExtendedDataMapperMetadata,
                                 attachments
                             );
@@ -691,7 +692,7 @@ const AIChat: React.FC = () => {
                     switch (parsedInput.templateId) {
                         case "types-for-attached":
                             if (attachments) {
-                                await processContextTypeCreation(inputText, attachments);
+                                await processContextTypeCreation(attachments);
                                 break;
                             } else {
                                 throw new Error("Error: Missing Attach context");
@@ -786,68 +787,11 @@ const AIChat: React.FC = () => {
         await rpcClient.getAiPanelRpcClient().generateCode(requestBody);
     }
 
-    // Helper function to escape regex special characters in a string
-    function escapeRegexString(str: string): string {
-        return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    }
-
-    // Function to create regex for finding a function without error type
-    function createFunctionWithoutErrorTypeRegex(functionName: string, returnType: string): RegExp {
-        const escapedReturnType = escapeRegexString(returnType);
-        return new RegExp(
-            `function\\s+${functionName}\\s*\\([^)]+\\)\\s*returns\\s+${escapedReturnType}(?!\\|error)\\s*(?:=>|\\{)`,
-            "s"
-        );
-    }
-
-    // Function to create regex for adding error type to a function signature
-    function createAddErrorTypeRegex(functionName: string, returnType: string): RegExp {
-        const escapedReturnType = escapeRegexString(returnType);
-        return new RegExp(
-            `(function\\s+${functionName}\\s*\\([^)]+\\)\\s*returns\\s+${escapedReturnType})\\s*(=>|\\{)`,
-            "s"
-        );
-    }
-
-    // Function to create regex for arrow function signatures
-    function createArrowFunctionSignatureRegex(functionName: string, returnType: string): RegExp {
-        const escapedReturnType = escapeRegexString(returnType);
-        return new RegExp(
-            `(function\\s+${functionName}\\s*\\([^)]+\\)\\s*returns\\s+${escapedReturnType}(?:\\|error)?)\\s*=>\\s*\\{[^}]*\\}`,
-            "s"
-        );
-    }
-
-    // Function to create regex for regular function signatures
-    function createRegularFunctionSignatureRegex(functionName: string, returnType: string): RegExp {
-        const escapedReturnType = escapeRegexString(returnType);
-        return new RegExp(
-            `(function\\s+${functionName}\\s*\\([^)]+\\)\\s*returns\\s+${escapedReturnType}(?:\\|error)?)\\s*\\{[^}]*\\}`,
-            "s"
-        );
-    }
-
-    // Fucntion to create regex to match function signatures without capturing the function body.
-    function createExistingFunctionSignatureRegex(functionName: string) {
-        return new RegExp(`function\\s+${functionName}\\s*\\([^)]*\\)\\s*returns\\s+[^=]+\\s*=>\\s*(?:\\{|)`, "s");
-    }
-
-    // Function to remove the body of a specified function while keeping the rest of the code unchanged.
-    function removeFunctionBody(content: string, functionName: string) {
-        // Regular expression to match the function signature and body
-        const functionRegex = new RegExp(
-            `(function\\s+${functionName}\\s*\\([^)]*\\)\\s*returns\\s+[^=]+\\s*=>)\\s*(?:\\{[^]*?\\}|[^;]*);`,
-            "s"
-        );
-
-        // Replace the matched function body with an empty function body `{}` while keeping the signature
-        return content.replace(functionRegex, `$1 {};`);
-    }
-
     const handleAddAllCodeSegmentsToWorkspace = async (
         codeSegments: any,
         setIsCodeAdded: React.Dispatch<React.SetStateAction<boolean>>,
-        command: string
+        command: string,
+        filePaths?: SourceFile[]
     ) => {
         console.log("Add to integration called. Command: ", command);
         setIsAddingToWorkspace(true);
@@ -871,108 +815,12 @@ const AIChat: React.FC = () => {
                 }
 
                 if (command === "ai_map") {
-                    const importRegex = /import\s+[^;]+;/g;
-                    const commentRegex = /^(?:(\/\/.*|#.*)\n)+/; // Matches both `//` and `#` comment blocks at the top
-                    const functionRegex =
-                        /function\s+(\w+)\s*\(([^)]*)\)\s*returns\s+([^={|]+)(?:\|error)?\s*=>\s*(?:\{([\s\S]*?)\}|([\s\S]*?));/;
-
-                    let existingFunctionRegex;
-
-                    // Check if we're dealing with a function that should be merged
-                    const functionMatch = segmentText.match(functionRegex);
-                    let shouldMergeFunction = false;
-                    let functionName = "";
-                    let functionBody = "";
-                    let returnType = "";
-                    let hasErrorType = false;
-                    let updatedContent = "";
-
-                    if (functionMatch) {
-                        functionName = functionMatch[1];
-                        const params = functionMatch[2];
-                        returnType = functionMatch[3].trim();
-                        functionBody = functionMatch[4] ? functionMatch[4].trim() : functionMatch[5]?.trim();
-
-                        // Check if new function has error return type
-                        hasErrorType = segmentText.includes(`returns ${returnType}|error`);
-                        existingFunctionRegex = createExistingFunctionSignatureRegex(functionName);
-                        const existingFunctionMatch = originalContent.match(existingFunctionRegex);
-
-                        if (existingFunctionMatch) {
-                            shouldMergeFunction = true;
-                        }
-                    }
-
-                    const imports = segmentText.match(importRegex) || [];
-                    const codeWithoutImports = segmentText.replace(importRegex, "").trim();
-
-                    updatedContent = removeFunctionBody(originalContent, functionName);
-
-                    // Extract existing comments at the top
-                    const commentMatch = updatedContent.match(commentRegex);
-                    const existingComments = commentMatch ? commentMatch[0].trim() + "\n\n" : "";
-                    updatedContent = updatedContent.replace(commentRegex, "").trim();
-
-                    // Find any additional `#` comments that may exist before imports
-                    const additionalCommentMatch = updatedContent.match(commentRegex);
-                    const additionalComments = additionalCommentMatch ? additionalCommentMatch[0].trim() + "\n\n" : "";
-                    updatedContent = updatedContent.replace(commentRegex, "").trim();
-
-                    // Ensure new imports are added after all comments
-                    let updatedImports = "";
-                    imports.forEach((imp: string) => {
-                        if (!updatedContent.includes(imp)) {
-                            updatedImports += `${imp}\n`;
-                        }
-                    });
-
-                    if (shouldMergeFunction) {
-                        const existingFunctionWithoutErrorRegex = createFunctionWithoutErrorTypeRegex(
-                            functionName,
-                            returnType
-                        );
-                        const missingErrorType = existingFunctionWithoutErrorRegex.test(updatedContent) && hasErrorType;
-
-                        if (missingErrorType) {
-                            const addErrorTypeRegex = createAddErrorTypeRegex(functionName, returnType);
-                            updatedContent = updatedContent.replace(addErrorTypeRegex, `$1|error $2`);
-                        }
-
-                        const arrowFunctionSignatureRegex = createArrowFunctionSignatureRegex(functionName, returnType);
-                        const regularFunctionSignatureRegex = createRegularFunctionSignatureRegex(
-                            functionName,
-                            returnType
-                        );
-                        const isExpressionBody = /^\s*from\b/.test(functionBody);
-
-                        if (arrowFunctionSignatureRegex.test(updatedContent)) {
-                            updatedContent = updatedContent.replace(arrowFunctionSignatureRegex, (match, signature) => {
-                                return isExpressionBody
-                                    ? `${signature} => ${functionBody}`
-                                    : `${signature} => {\n    ${functionBody}\n}`;
-                            });
-                        } else if (regularFunctionSignatureRegex.test(updatedContent)) {
-                            updatedContent = updatedContent.replace(
-                                regularFunctionSignatureRegex,
-                                (match, signature) => {
-                                    return `${signature} {\n    ${functionBody}\n}`;
-                                }
-                            );
-                        }
-
-                        updatedContent = `${existingComments}${additionalComments}${updatedImports}${updatedContent}`;
-                    } else {
-                        updatedContent = `${existingComments}${additionalComments}${updatedImports}${updatedContent}\n${codeWithoutImports}`;
-                    }
-
-                    segmentText = updatedContent.trim();
-                } else if (command === "ai_map_inline") {
-                    rpcClient.getAiPanelRpcClient().addInlineCodeSegmentToWorkspace({
-                        segmentText,
-                        filePath,
+                    const matchingFile = filePaths?.find(file => {
+                        const filePathName = file.filePath.split('/').pop();
+                        return filePathName === filePath;
                     });
-                    continue;
-                } else if (command === "test") {
+                    segmentText = matchingFile.content
+                } else if (command === "test" || command === "type_creator") {
                     segmentText = `${originalContent}\n\n${segmentText}`;
                 } else {
                     segmentText = `${segmentText}`;
@@ -1151,461 +999,36 @@ const AIChat: React.FC = () => {
         }
     }
 
-    // Process records from another package
-    function processRecordReference(
-        recordName: string,
-        recordMap: Map<string, any>,
-        allImports: Array<ImportInfo>,
-        importsMap: Map<string, ImportInfo>
-    ): DataMappingRecord | Error {
-        const isArray = recordName.endsWith("[]");
-        const cleanedRecordName = recordName.replace(/\[\]$/, "");
-
-        // Check for primitive types
-        const primitiveTypes = ["string", "int", "boolean", "float", "decimal"];
-        if (primitiveTypes.includes(cleanedRecordName)) {
-            return { type: `${cleanedRecordName}`, isArray, filePath: null };
-        }
-        const rec = recordMap.get(cleanedRecordName);
-
-        if (!rec) {
-            if (cleanedRecordName.includes(":")) {
-                if (!cleanedRecordName.includes("/")) {
-                    const [moduleName, recordName] = cleanedRecordName.split(":");
-                    const matchedImport = allImports.find((imp) => {
-                        if (imp.alias) {
-                            return cleanedRecordName.startsWith(imp.alias);
-                        }
-                        const moduleNameParts = imp.moduleName.split(/[./]/);
-                        const inferredAlias = moduleNameParts[moduleNameParts.length - 1];
-                        return cleanedRecordName.startsWith(inferredAlias);
-                    });
-
-                    if (!matchedImport) {
-                        return INVALID_RECORD_REFERENCE;
-                    }
-                    importsMap.set(cleanedRecordName, {
-                        moduleName: matchedImport.moduleName,
-                        alias: matchedImport.alias,
-                        recordName: recordName,
-                    });
-                } else {
-                    const [moduleName, recordName] = cleanedRecordName.split(":");
-                    importsMap.set(cleanedRecordName, {
-                        moduleName: moduleName,
-                        recordName: recordName,
-                    });
-                }
-                return { type: `${cleanedRecordName}`, isArray, filePath: null };
-            } else {
-                throw new Error(`${cleanedRecordName} is not defined.`);
-            }
-        }
-        return { ...rec, isArray };
-    }
-
-    // Processes existing functions to find a matching function by name
-    async function processExistingFunctions(
-        existingFunctions: ExistingFunction[],
-        functionName: string
-    ): Promise<{
-        match: RegExpMatchArray | null;
-        functionNameMatch: boolean;
-        matchingFunctionFile: string | null;
-    }> {
-        for (const func of existingFunctions) {
-            const functionContent = await rpcClient.getAiPanelRpcClient().getContentFromFile({
-                filePath: func.filePath,
-            });
-
-            const fileName = func.filePath.split("/").pop();
-            const contentLines = functionContent.split("\n");
-            // Filter out commented lines (both // and # style comments)
-            const nonCommentedLines = contentLines.filter((line) => {
-                const trimmedLine = line.trim();
-                return !(trimmedLine.startsWith("//") || trimmedLine.startsWith("#"));
-            });
-            const cleanContent = nonCommentedLines.join("\n");
-
-            const signatureRegex = /function\s+(\w+)\s*\(([^)]*)\)\s*returns\s+([^{=]+)(?:\s*=>\s*)?/g;
-
-            // Use matchAll to find all function signatures in the content
-            const matches = [...cleanContent.matchAll(signatureRegex)];
-
-            // Check if any of the function signatures match the target function name
-            for (const match of matches) {
-                const funcName = match[1];
-                if (funcName === functionName) {
-                    return {
-                        match,
-                        functionNameMatch: true,
-                        matchingFunctionFile: fileName,
-                    };
-                }
-            }
-        }
-
-        // If no match is found
-        return {
-            match: null,
-            functionNameMatch: false,
-            matchingFunctionFile: null,
-        };
-    }
-
-    // Process input parameters
-    function processInputs(
-        inputParams: string[],
-        recordMap: Map<any, any>,
-        allImports: ImportStatement[],
-        importsMap: Map<any, any>
-    ) {
-        let results = inputParams.map((param: string) =>
-            processRecordReference(param, recordMap, allImports, importsMap)
-        );
-        return results.filter((result): result is DataMappingRecord => {
-            if (result instanceof Error) {
-                throw INVALID_RECORD_REFERENCE;
-            }
-            return true;
-        });
-    }
-
-    // Process Output parameters
-    function processOutput(
-        outputParam: string,
-        recordMap: Map<any, any>,
-        allImports: ImportInfo[],
-        importsMap: Map<any, any>
-    ) {
-        const parts = outputParam.split("|");
-        const validParts = parts.filter((name: string) => name !== "error");
-        if (validParts.length > 1) {
-            throw new Error(
-                `Invalid output parameter: "${outputParam}". Union types are not supported. Please provide a single valid record name.`
-            );
-        }
-        const cleanedOutputRecordName = validParts.length > 0 ? validParts[0] : "error";
-        const outputResult = processRecordReference(cleanedOutputRecordName, recordMap, allImports, importsMap);
-        if (outputResult instanceof Error) {
-            throw INVALID_RECORD_REFERENCE;
-        }
-        return outputResult;
-    }
-
     async function processMappingParameters(
-        message: string,
         parameters: MappingParameters,
         metadata?: ExtendedDataMapperMetadata,
         attachments?: Attachment[]
     ) {
-        let assistant_response = "";
-        let newImports;
-        const recordMap = new Map();
-        const importsMap = new Map();
-        let inputs: DataMappingRecord[];
-        let output;
-        let inputParams;
-        let outputParam;
-        let inputNames: string[] = [];
-        let result;
-        let finalContent: string = "";
-        setIsLoading(true);
-
-        const functionName = parameters.functionName;
-
-        const projectImports = await rpcClient.getBIDiagramRpcClient().getAllImports();
-        const activeFile = await rpcClient.getAiPanelRpcClient().getActiveFile();
-        const projectComponents = await rpcClient.getBIDiagramRpcClient().getProjectComponents();
-
-        const allImports: ImportStatement[] = [];
-        projectImports.imports.forEach((file) => {
-            if (file.statements && file.statements.length > 0) {
-                file.statements.forEach((statement) => {
-                    allImports.push(statement);
-                });
-            }
-        });
-
-        const existingFunctions: ComponentInfo[] = [];
-
-        for (const pkg of projectComponents.components.packages || []) {
-            for (const mod of pkg.modules || []) {
-                let filepath = pkg.filePath;
-                if (mod.name !== undefined) {
-                    const modDir = await rpcClient.getAiPanelRpcClient().getModuleDirectory({
-                        moduleName: mod.name,
-                        filePath: filepath,
-                    });
-                    filepath += `${modDir}/${mod.name}/`;
-                }
-                mod.records.forEach((rec) => {
-                    const recFilePath = filepath + rec.filePath;
-                    recordMap.set(rec.name, { type: rec.name, isArray: false, filePath: recFilePath });
-                });
-
-                // Collect functions
-                mod.functions?.forEach((func) => {
-                    existingFunctions.push({
-                        name: func.name,
-                        filePath: filepath + func.filePath,
-                        startLine: func.startLine,
-                        startColumn: func.startColumn,
-                        endLine: func.endLine,
-                        endColumn: func.endColumn,
-                    });
-                });
-            }
-        }
-
-        if (parameters.inputRecord.length > 0 || parameters.outputRecord !== "") {
-            result = await processExistingFunctions(existingFunctions, functionName);
-            if (result.functionNameMatch) {
-                throw new Error(
-                    `A function named "${functionName}" exists in '${result.matchingFunctionFile}'. Please provide a valid function name.`
-                );
-            }
-            inputParams = parameters.inputRecord;
-            outputParam = parameters.outputRecord;
-        } else {
-            if (existingFunctions.length === 0) {
-                throw new Error(
-                    `A function named "${functionName}" was not found in the project. Please provide a valid function name.`
-                );
-            }
-            result = await processExistingFunctions(existingFunctions, functionName);
-            if (!result.functionNameMatch) {
-                throw new Error(
-                    `A function named "${functionName}" was not found in the project. Please provide a valid function name.`
-                );
-            }
-
-            if (result.match[2] === "") {
-                throw new Error(
-                    `A function named "${functionName}" is not a valid datamapper function.`
-                );
-            }
-            const params = result.match[2].split(/,\s*/).map((param) => param.trim().split(/\s+/));
-            inputParams = params.map((parts) => parts[0]);
-            inputNames = params.map((parts) => parts[1]);
-            outputParam = result.match[3].trim();
-        }
-
-        inputs = processInputs(inputParams, recordMap, allImports, importsMap);
-        output = processOutput(outputParam, recordMap, allImports, importsMap);
-
-        const requestPayload: any = {
-            inputRecordTypes: inputs,
-            outputRecordType: output,
-            functionName,
-            imports: Array.from(importsMap.values()),
-            inputNames: inputNames,
-            model: metadata,
-        };
-        if (attachments && attachments.length > 0) {
-            requestPayload.attachment = attachments;
-        }
-
-        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,
-        });
-
-        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) {
-            filePath = result.matchingFunctionFile;
-        } else if (activeFile && activeFile.endsWith(".bal")) {
-            filePath = activeFile;
-        } else {
-            filePath = "data_mappings.bal";
-        }
-        const needsImports = Array.from(importsMap.values()).length > 0;
-
-        if (needsImports) {
-            let fileContent = await rpcClient.getAiPanelRpcClient().getFromFile({ filePath: filePath });
-            const existingImports = new Set(
-                fileContent.match(/import\s+([a-zA-Z0-9._]+)/g)?.map((imp) => imp.split(" ")[1]) || []
-            );
-
-            newImports = Array.from(importsMap.values())
-                .filter((imp) => !existingImports.has(imp.moduleName))
-                .map((imp) => {
-                    const moduleName = imp.moduleName.trim();
-                    return imp.alias ? `import ${moduleName} as ${imp.alias};` : `import ${moduleName};`;
-                })
-                .join("\n");
-
-            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>`;
-
-        setMessages((prevMessages) => {
-            const newMessages = [...prevMessages];
-            newMessages[newMessages.length - 1].content = assistant_response;
-            return newMessages;
+        await rpcClient.getAiPanelRpcClient().generateMappingCode({
+            parameters,
+            metadata,
+            attachments
         });
-        addChatEntry("user", message);
-        addChatEntry("assistant", assistant_response);
     }
 
     async function processInlineMappingParameters(
-        message: string,
-        metadata?: ExtendedDataMapperMetadata,
+        metadata: ExtendedDataMapperMetadata,
         attachments?: Attachment[]
     ) {
-        let assistant_response = "";
-        let finalContent = "";
-
-        if (!metadata || Object.keys(metadata).length === 0) {
-            throw new Error(`Please make sure variables are initialized, and then try again.`);
-        }
-
-        let fileName = metadata.codeData.lineRange.fileName;
-        const variableName = metadata.name;
-        const typeName = metadata.mappingsModel.output.typeName;
-
-        setIsLoading(true);
-
-        try {
-            const requestPayload: MetadataWithAttachments = {
-                metadata,
-                useTemporaryFile: false,
-            };
-            if (attachments && attachments.length > 0) {
-                requestPayload.attachments = attachments;
-            }
-            const allMappingsRequest = await rpcClient.getAiPanelRpcClient().generateMappings(requestPayload);
-            const sourceResponse = await rpcClient.getDataMapperRpcClient().getAllDataMapperSource(allMappingsRequest);
-
-            setIsLoading(false);
-
-            finalContent = sourceResponse.textEdits[allMappingsRequest.filePath]?.[0]?.newText;
-
-            assistant_response = `Here are the data mappings:\n\n`;
-            assistant_response += `\n**Note**: When you click **Add to Integration**, it will override your existing mappings.\n`;
-
-            const moduleInfo = metadata.mappingsModel.output.typeInfo;
-            const hasModuleInfo = moduleInfo && moduleInfo.moduleName;
-
-            const typePrefix = hasModuleInfo ? `${moduleInfo.moduleName.split(".").pop()}:${typeName}` : typeName;
-
-            const formattedContent = `${typePrefix} ${variableName} = {\n${formatWithProperIndentation(
-                finalContent
-            )}\n};`;
-
-            assistant_response += `<code filename="${fileName}" type="ai_map_inline">\n\`\`\`ballerina\n${formattedContent}\n\`\`\`\n</code>`;
-
-            setMessages((prevMessages) => {
-                const newMessages = [...prevMessages];
-                newMessages[newMessages.length - 1].content = assistant_response;
-                return newMessages;
-            });
-            addChatEntry("user", message);
-            addChatEntry("assistant", assistant_response);
-
-            return { success: true, response: assistant_response };
-        } catch (error) {
-            setIsLoading(false);
-            return { error: error instanceof Error ? error.message : "An unexpected error occurred" };
-        }
-    }
-
-    async function processContextTypeCreation(message: string, attachments: Attachment[]) {
-        let assistant_response = "";
-        const recordMap = new Map();
-        setIsLoading(true);
-        let filePath = "types.bal";
-
-        const projectComponents = await rpcClient.getBIDiagramRpcClient().getProjectComponents();
-
-        projectComponents.components.packages?.forEach((pkg) => {
-            pkg.modules?.forEach((mod) => {
-                let filepath = pkg.filePath;
-                if (mod.name !== undefined) {
-                    filepath += `modules/${mod.name}/`;
-                }
-                mod.records.forEach((rec) => {
-                    const recFilePath = filepath + rec.filePath;
-                    recordMap.set(rec.name, { type: rec.name, isArray: false, filePath: recFilePath });
-                });
-            });
+        await rpcClient.getAiPanelRpcClient().generateInlineMappingCode({
+            metadata,
+            attachments
         });
+    }
 
+    async function processContextTypeCreation(attachments: Attachment[]) {
         if (!attachments || attachments.length === 0) {
             throw new Error(`Missing attachment`);
         }
 
-        const requestPayload: any = {
-            backendUri: "",
-            attachment: attachments,
-        };
-
-        const response = await rpcClient.getAiPanelRpcClient().getTypesFromRecord(requestPayload);
-        let typeContent = response.typesCode;
-        const newRecords = extractRecordTypes(typeContent);
-
-        let fileContent = "";
-        let fileExists = await rpcClient.getAiPanelRpcClient().getFileExists({ filePath: filePath });
-        if (fileExists) {
-            fileContent = await rpcClient.getAiPanelRpcClient().getFromFile({ filePath: filePath });
-            typeContent = `${fileContent}\n${response.typesCode}`;
-        }
-
-        for (const record of newRecords) {
-            if (recordMap.has(record.name)) {
-                throw new Error(`Record "${record.name}" already exists in the workspace.`);
-            }
-        }
-
-        assistant_response = `Record types generated from the ${attachments[0].name} file shown below.\n`;
-        assistant_response += `<code filename="${filePath}" type="ai_map">\n\`\`\`ballerina\n${response.typesCode}\n\`\`\`\n</code>`;
-
-        setMessages((prevMessages) => {
-            const newMessages = [...prevMessages];
-            newMessages[newMessages.length - 1].content = assistant_response;
-            return newMessages;
+        await rpcClient.getAiPanelRpcClient().generateContextTypes({
+            attachments
         });
-        setIsLoading(false);
-        addChatEntry("user", message);
-        addChatEntry("assistant", assistant_response);
     }
 
     async function findInDocumentation(messageBody: string, message: string) {
@@ -2007,6 +1430,7 @@ const AIChat: React.FC = () => {
                                                         }
                                                         isErrorChunkReceived={isErrorChunkReceivedRef.current}
                                                         isAddingToWorkspace={isAddingToWorkspace}
+                                                        fileArray={currentFileArray}
                                                     />
                                                 );
                                             }
@@ -2338,7 +1762,7 @@ function getCommand(command: string) {
 function splitHalfGeneratedCode(content: string): Segment[] {
     const segments: Segment[] = [];
     // Regex to capture filename and optional test attribute
-    const regex = /<code\s+filename="([^"]+)"(?:\s+type=("test"|"ai_map"|"ai_map_inline"))?>\s*```(\w+)\s*([\s\S]*?)$/g;
+    const regex = /<code\s+filename="([^"]+)"(?:\s+type=("test"|"ai_map"|"type_creator"))?>\s*```(\w+)\s*([\s\S]*?)$/g;
     let match;
     let lastIndex = 0;
 
@@ -2384,7 +1808,7 @@ export function splitContent(content: string): Segment[] {
 
     // Combined regex to capture either <code ...>```<language> code ```</code> or <progress>Text</progress>
     const regex =
-        /<code\s+filename="([^"]+)"(?:\s+type=("test"|"ai_map"|"ai_map_inline"))?>\s*```(\w+)\s*([\s\S]*?)```\s*<\/code>|<progress>([\s\S]*?)<\/progress>|<toolcall>([\s\S]*?)<\/toolcall>|<attachment>([\s\S]*?)<\/attachment>|<scenario>([\s\S]*?)<\/scenario>|<button\s+type="([^"]+)">([\s\S]*?)<\/button>|<inlineCode>([\s\S]*?)<inlineCode>|<references>([\s\S]*?)<references>/g;
+        /<code\s+filename="([^"]+)"(?:\s+type=("test"|"ai_map"|"type_creator"))?>\s*```(\w+)\s*([\s\S]*?)```\s*<\/code>|<progress>([\s\S]*?)<\/progress>|<toolcall>([\s\S]*?)<\/toolcall>|<attachment>([\s\S]*?)<\/attachment>|<scenario>([\s\S]*?)<\/scenario>|<button\s+type="([^"]+)">([\s\S]*?)<\/button>|<inlineCode>([\s\S]*?)<inlineCode>|<references>([\s\S]*?)<references>/g;
     let match;
     let lastIndex = 0;
 
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 234478751a7..6217ece5f89 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/CodeSection.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/CodeSection.tsx
@@ -23,6 +23,7 @@ import { Button, Codicon } from "@wso2/ui-toolkit";
 import { Spinner } from "./ProgressTextSegment";
 import { Collapse } from "react-collapse";
 import { SegmentType, splitContent } from "./AIChat";
+import { SourceFile } from "@wso2/ballerina-core";
 
 interface CodeSectionProps {
     codeSegments: CodeSegmentProps[];
@@ -31,7 +32,8 @@ interface CodeSectionProps {
     handleAddAllCodeSegmentsToWorkspace: (
         codeSegment: any,
         setIsCodeAdded: React.Dispatch<React.SetStateAction<boolean>>,
-        command: string
+        command: string,
+        fileArray: SourceFile[]
     ) => void;
     handleRevertChanges: (
         codeSegment: any,
@@ -47,6 +49,7 @@ interface CodeSectionProps {
     isPromptExecutedInCurrentWindow: boolean;
     isErrorChunkReceived: boolean;
     isAddingToWorkspace: boolean;
+    fileArray: SourceFile[];
 }
 
 const EntryContainer = styled.div<{ hasErrors: boolean; isOpen: boolean; isHovered: boolean }>(
@@ -83,7 +86,8 @@ export const CodeSection: React.FC<CodeSectionProps> = ({
     onRetryRepair = () => {},
     isPromptExecutedInCurrentWindow,
     isErrorChunkReceived,
-    isAddingToWorkspace
+    isAddingToWorkspace,
+    fileArray
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isCodeAdded, setIsCodeAdded] = useState(false);
@@ -148,7 +152,7 @@ export const CodeSection: React.FC<CodeSectionProps> = ({
                                 appearance="icon"
                                 onClick={(e) => {
                                     e.stopPropagation();
-                                    handleAddAllCodeSegmentsToWorkspace(allCodeSegments, setIsCodeAdded, command);
+                                    handleAddAllCodeSegmentsToWorkspace(allCodeSegments, setIsCodeAdded, command, fileArray);
                                 }}
                                 tooltip={
                                     isSyntaxError
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/AgentChatPanel/Components/ChatInterface.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/AgentChatPanel/Components/ChatInterface.tsx
index d9385dd4338..0c83b180d1a 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/AgentChatPanel/Components/ChatInterface.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/AgentChatPanel/Components/ChatInterface.tsx
@@ -162,13 +162,47 @@ const FooterText = styled.div`
     width: calc(100% - 40px);
 `;
 
+const ShowLogsButton = styled.button`
+    background: none;
+    border: none;
+    color: var(--vscode-textLink-foreground);
+    font-size: 11px;
+    padding: 0;
+    margin: -4px 0 8px 24px;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+
+    &:hover {
+        text-decoration: underline;
+        color: var(--vscode-textLink-activeForeground);
+    }
+`;
+
 const ChatInterface: React.FC = () => {
     const { rpcClient } = useRpcContext();
     const [messages, setMessages] = useState<ChatMessage[]>([]);
     const [isLoading, setIsLoading] = useState(false);
+    const [isTracingEnabled, setIsTracingEnabled] = useState(false);
 
     const messagesEndRef = useRef<HTMLDivElement>(null);
 
+    // Check tracing status once on mount
+    useEffect(() => {
+        const checkTracingStatus = async () => {
+            try {
+                const status = await rpcClient.getAgentChatRpcClient().getTracingStatus();
+                setIsTracingEnabled(status.enabled);
+            } catch (error) {
+                console.error('Failed to get tracing status:', error);
+                setIsTracingEnabled(false);
+            }
+        };
+        checkTracingStatus();
+    }, [rpcClient]);
+
     // Auto scroll to the bottom when messages change
     useEffect(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -204,6 +238,31 @@ const ChatInterface: React.FC = () => {
         setIsLoading(false);
     };
 
+    const handleShowLogs = async (messageIndex: number) => {
+        try {
+            // Find the corresponding user message
+            // Look backwards from the current index to find the last user message
+            let userMessage = '';
+
+            for (let i = messageIndex - 1; i >= 0; i--) {
+                if (messages[i].isUser) {
+                    userMessage = messages[i].text;
+                    break;
+                }
+            }
+
+            if (!userMessage) {
+                console.error('Could not find user message for this response');
+                return;
+            }
+
+            // Call the RPC method to show the trace view
+            await rpcClient.getAgentChatRpcClient().showTraceView({ message: userMessage });
+        } catch (error) {
+            console.error('Failed to show trace view:', error);
+        }
+    };
+
     return (
         <ChatWrapper>
             <ChatContainer>
@@ -220,37 +279,45 @@ const ChatInterface: React.FC = () => {
                 <Messages>
                     {/* Render each message */}
                     {messages.map((msg, idx) => (
-                        <MessageContainer isUser={msg.isUser}>
-                            {!msg.isUser && (
-                                <ProfilePic>
-                                    <Icon
-                                        name="bi-ai-agent"
-                                        sx={{ width: 18, height: 18 }}
-                                        iconSx={{
-                                            fontSize: "18px",
-                                            color: "var(--vscode-foreground)",
-                                            cursor: "default",
-                                        }}
-                                    />
-                                </ProfilePic>
-                            )}
-                            <MessageBubble isUser={msg.isUser} isError={false}>
-                                <ReactMarkdown>{msg.text}</ReactMarkdown>
-                            </MessageBubble>
-                            {msg.isUser && (
-                                <ProfilePic>
-                                    <Codicon
-                                        name="account"
-                                        sx={{ width: 18, height: 18 }}
-                                        iconSx={{
-                                            fontSize: "18px",
-                                            color: "var(--vscode-foreground)",
-                                            cursor: "default",
-                                        }}
-                                    />
-                                </ProfilePic>
+                        <React.Fragment key={idx}>
+                            <MessageContainer isUser={msg.isUser}>
+                                {!msg.isUser && (
+                                    <ProfilePic>
+                                        <Icon
+                                            name="bi-ai-agent"
+                                            sx={{ width: 18, height: 18 }}
+                                            iconSx={{
+                                                fontSize: "18px",
+                                                color: "var(--vscode-foreground)",
+                                                cursor: "default",
+                                            }}
+                                        />
+                                    </ProfilePic>
+                                )}
+                                <MessageBubble isUser={msg.isUser} isError={msg.type === ChatMessageType.ERROR}>
+                                    <ReactMarkdown>{msg.text}</ReactMarkdown>
+                                </MessageBubble>
+                                {msg.isUser && (
+                                    <ProfilePic>
+                                        <Codicon
+                                            name="account"
+                                            sx={{ width: 18, height: 18 }}
+                                            iconSx={{
+                                                fontSize: "18px",
+                                                color: "var(--vscode-foreground)",
+                                                cursor: "default",
+                                            }}
+                                        />
+                                    </ProfilePic>
+                                )}
+                            </MessageContainer>
+                            {/* Show "Show logs" button after agent responses (not user messages) */}
+                            {!msg.isUser && isTracingEnabled && (
+                                <ShowLogsButton onClick={() => handleShowLogs(idx)}>
+                                    Show logs
+                                </ShowLogsButton>
                             )}
-                        </MessageContainer>
+                        </React.Fragment>
                     ))}
 
                     {/* If waiting on a response, show the loading bubble */}
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 19b357b08a3..d9455765eca 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AIChatAgentWizard.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AIChatAgentWizard.tsx
@@ -16,12 +16,11 @@
  * under the License.
  */
 
-import { useRef, useState } from 'react';
-import { AvailableNode, EVENT_TYPE, FlowNode, LinePosition, ListenerModel } from '@wso2/ballerina-core';
+import { useEffect, useRef, useState } from 'react';
+import { AvailableNode, CDModel, CodeData, EVENT_TYPE } 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 { TitleBar } from '../../../components/TitleBar';
 import { TopNavigationBar } from '../../../components/TopNavigationBar';
 import { RelativeLoader } from '../../../components/RelativeLoader';
@@ -60,6 +59,13 @@ const FormFields = styled.div`
 export interface AIChatAgentWizardProps {
 }
 
+const LISTENER = "Listener";
+const MODEL = "Model";
+
+const OPEN_AI_PROVIDER = "OpenAiProvider";
+const MODEL_PROVIDER = "MODEL_PROVIDER";
+const CLASS_INIT = "CLASS_INIT";
+
 export function AIChatAgentWizard(props: AIChatAgentWizardProps) {
     // module name for ai agent
     const type = "ai";
@@ -70,7 +76,7 @@ export function AIChatAgentWizard(props: AIChatAgentWizardProps) {
     const [currentStep, setCurrentStep] = useState<number>(0);
     const steps = [
         { label: "Creating Agent", description: "Creating the AI chat agent" },
-        { label: "Initializing", description: "Setting up the agent configuration" },
+        { label: "Creating Model Provider", description: "Creating the model provider for the AI chat agent" },
         { label: "Pulling Modules", description: "Pulling the required modules. This may take a few moments." },
         { label: "Creating Listener", description: "Configuring the service listener" },
         { label: "Creating Service", description: "Setting up the AI chat service" },
@@ -80,6 +86,16 @@ export function AIChatAgentWizard(props: AIChatAgentWizardProps) {
     const projectPath = useRef<string>("");
     const aiModuleOrg = useRef<string>("");
     const progressTimeoutRef = useRef<number | null>(null);
+    const designModelRef = useRef<CDModel>(null);
+
+    const init = async () => {
+        const designModelResponse = await rpcClient.getBIDiagramRpcClient().getDesignModel();
+        designModelRef.current = designModelResponse.designModel;
+    }
+
+    useEffect(() => {
+        init();
+    }, []);
 
     const validateName = (name: string): boolean => {
         if (!name) {
@@ -90,10 +106,19 @@ export function AIChatAgentWizard(props: AIChatAgentWizardProps) {
             setNameError("Name cannot start with a number");
             return false;
         }
-        if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(name)) {
+        if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(name)) {
             setNameError("Name can only contain letters, numbers, and underscores");
             return false;
         }
+        if (designModelRef.current) {
+            const isNameExists = designModelRef.current.services.some(
+                service => service.absolutePath?.trim() === `/${name}`
+            );
+            if (isNameExists) {
+                setNameError("An AI Chat Agent with this name already exists. Please choose a different name.");
+                return false;
+            }
+        }
         setNameError("");
         return true;
     };
@@ -107,30 +132,11 @@ export function AIChatAgentWizard(props: AIChatAgentWizardProps) {
             // Initialize wizard data when user clicks create
             setCurrentStep(0);
 
-            // get agent org
+            // Get AI module organization
             aiModuleOrg.current = await getAiModuleOrg(rpcClient);
 
-            // 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"
-            });
-
-            // Validate search response structure
-            if (!agentSearchResponse?.categories?.[0]?.items?.[0]) {
-                throw new Error('No agent node found in search response');
-            }
-
-            const agentNode = agentSearchResponse.categories[0].items[0] as AvailableNode;
-            console.log(">>> agentNode", agentNode);
-
-            // Generate template from agent node
-            const agentNodeTemplate = await getNodeTemplate(rpcClient, agentNode.codedata, projectPath.current);
+            const visualizerLocation = await rpcClient.getVisualizerLocation();
+            projectPath.current = visualizerLocation.projectUri;
 
             // hack: fetching from Central to build module dependency map in LS may take time
             progressTimeoutRef.current = setTimeout(() => {
@@ -138,102 +144,83 @@ export function AIChatAgentWizard(props: AIChatAgentWizardProps) {
                 progressTimeoutRef.current = null;
             }, AI_COMPONENT_PROGRESS_MESSAGE_TIMEOUT);
 
+            setCurrentStep(1);
+
             // 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"
+                queryMap: { q: aiModuleOrg.current === BALLERINA ? AI : OPEN_AI_PROVIDER },
+                searchKind: aiModuleOrg.current === BALLERINA ? MODEL_PROVIDER : CLASS_INIT
             });
-
             const modelNodes = modelProviderSearchResponse.categories[0].items as AvailableNode[];
-            console.log(">>> modelNodes", modelNodes);
 
-            // get default model
+            // Get default model provider
             const defaultModelNode = modelNodes.find((model) =>
-                model.codedata.object === "OpenAiProvider" || (model.codedata.org === BALLERINA && model.codedata.module === AI)
+                model.codedata.object === OPEN_AI_PROVIDER || (model.codedata.org === BALLERINA && model.codedata.module === AI)
             );
             if (!defaultModelNode) {
                 console.log(">>> no default model found");
                 throw new Error("No default model found");
             }
 
-            // get model node template
+            // Get model node template
             const modelNodeTemplate = await getNodeTemplate(rpcClient, defaultModelNode.codedata, projectPath.current);
 
-            // Get listener model
-            const listenerName = agentName + "Listener";
-            const listenerModelResponse = await rpcClient.getServiceDesignerRpcClient().getListenerModel({
+            // Generate source code for model provider
+            const modelVarName = `${agentName}` + MODEL;
+            modelNodeTemplate.properties.variable.value = modelVarName;
+            await rpcClient.getBIDiagramRpcClient().getSourceCode({ filePath: projectPath.current, flowNode: modelNodeTemplate });
+
+            setCurrentStep(3);
+
+            const listenerVariableName = agentName + LISTENER;
+            const listenerResponse = await rpcClient.getServiceDesignerRpcClient().getListenerModel({
                 moduleName: type,
                 orgName: aiModuleOrg.current
             });
-            console.log(">>> listenerModelResponse", listenerModelResponse);
 
-            const listener = listenerModelResponse.listener;
-            // Update the listener name and create the listener
-            listener.properties['name'].value = listenerName;
-            listener.properties['listenOn'].value = "check http:getDefaultListener()";
+            const listenerConfiguration = listenerResponse.listener;
+            listenerConfiguration.properties['variableNameKey'].value = listenerVariableName;
+            listenerConfiguration.properties['listenOn'].value = "check http:getDefaultListener()";
 
-            setCurrentStep(1);
+            await rpcClient.getServiceDesignerRpcClient().addListenerSourceCode({
+                filePath: "",
+                listener: listenerConfiguration
+            });
 
-            await rpcClient.getServiceDesignerRpcClient().addListenerSourceCode({ filePath: "", listener });
+            setCurrentStep(4);
 
-            setCurrentStep(3);
-            // Update the service name and create the service
-            const serviceModelResponse = await rpcClient.getServiceDesignerRpcClient().getServiceModel({
+            const serviceResponse = await rpcClient.getServiceDesignerRpcClient().getServiceModel({
                 filePath: "",
                 moduleName: type,
-                listenerName: listenerName,
+                listenerName: listenerVariableName,
                 orgName: aiModuleOrg.current,
             });
 
-            const serviceModel = serviceModelResponse.service;
-            console.log("Service Model: ", serviceModel);
-            serviceModel.properties["listener"].editable = true;
-            serviceModel.properties["listener"].items = [listenerName];
-            serviceModel.properties["listener"].values = [listenerName];
-            serviceModel.properties["basePath"].value = `/${agentName}`;
+            const serviceConfiguration = serviceResponse.service;
+            serviceConfiguration.properties["listener"].editable = true;
+            serviceConfiguration.properties["listener"].items = [listenerVariableName];
+            serviceConfiguration.properties["listener"].values = [listenerVariableName];
+            serviceConfiguration.properties["basePath"].value = `/${agentName}`;
+            serviceConfiguration.properties["agentName"].value = agentName;
 
-            const sourceCode = await rpcClient.getServiceDesignerRpcClient().addServiceSourceCode({
+            const serviceSourceCodeResult = await rpcClient.getServiceDesignerRpcClient().addServiceSourceCode({
                 filePath: "",
-                service: serviceModelResponse.service
+                service: serviceConfiguration
             });
 
-            setCurrentStep(4);
-            const newArtifact = sourceCode.artifacts.find(res => res.isNew);
-            console.log(">>> agent service sourceCode", sourceCode);
-            console.log(">>> newArtifact", newArtifact);
-
-            // save model node
-            const modelVarName = `_${agentName}Model`;
-            modelNodeTemplate.properties.variable.value = modelVarName;
-            const modelResponse = await rpcClient
-                .getBIDiagramRpcClient()
-                .getSourceCode({ filePath: projectPath.current, flowNode: modelNodeTemplate });
-            console.log(">>> modelResponse getSourceCode", { modelResponse });
-
-            // save the agent node
-            const systemPromptValue = `{role: "", instructions: string \`\`}`;
-            const agentVarName = `_${agentName}Agent`;
-            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: projectPath.current, flowNode: agentNodeTemplate });
-            console.log(">>> agentResponse getSourceCode", { agentResponse });
+            const newServiceArtifact = serviceSourceCodeResult.artifacts.find(artifact => artifact.isNew);
 
             // If the selected model is the default WSO2 model provider, configure it
             if (defaultModelNode?.codedata?.symbol === GET_DEFAULT_MODEL_PROVIDER) {
                 await rpcClient.getAIAgentRpcClient().configureDefaultModelProvider();
             }
 
-            if (newArtifact) {
+            if (newServiceArtifact) {
                 setCurrentStep(5);
                 rpcClient.getVisualizerRpcClient().openView({
                     type: EVENT_TYPE.OPEN_VIEW,
-                    location: { documentUri: newArtifact.path, position: newArtifact.position }
+                    location: { documentUri: newServiceArtifact.path, position: newServiceArtifact.position }
                 });
             }
         } catch (error) {
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 49569bb6626..3957b96f77e 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AddMcpServer.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AddMcpServer.tsx
@@ -7,698 +7,305 @@
  * You may not alter or remove any copyright or other notice from copies of this content.
  */
 
-import { useEffect, useRef, useState } from "react";
-import styled from "@emotion/styled";
-import { AvailableNode, DataMapperDisplayMode, FlowNode, NodeMetadata } from "@wso2/ballerina-core";
+import { FlowNode, LineRange } from "@wso2/ballerina-core";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { Button, ThemeColors } from "@wso2/ui-toolkit";
+import { debounce } from "lodash";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { RelativeLoader } from "../../../components/RelativeLoader";
 import FormGenerator from "../Forms/FormGenerator";
-import { findAgentNodeFromAgentCallNode, getAgentFilePath } from "./utils";
-import { CheckBox } from '@wso2/ui-toolkit';
-import { FormValues } from "@wso2/ballerina-side-panel";
-
-
-export const ContentWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-`;
-
-const Container = styled.div`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 100%;
-    box-sizing: border-box;
-`;
-
-const LoaderContainer = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-`;
-
-const ToolsContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-top: 12px;
-    padding: 12px;
-    border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
-    border-radius: 8px;
-`;
-
-const ToolsHeader = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 8px;
-`;
-
-const ToolsTitle = styled.div`
-    font-size: 14px;
-    font-family: GilmerBold;
-    color: ${ThemeColors.ON_SURFACE};
-`;
-
-const ToolCheckboxContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    max-height: 200px;
-    overflow-y: auto;
-`;
-
-const ToolCheckboxItem = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 0;
-`;
-
-const ErrorMessage = styled.div`
-    color: ${ThemeColors.ERROR};
-    font-size: 12px;
-    margin-top: 4px;
-`;
-
-const LoadingMessage = styled.div`
-    color: ${ThemeColors.ON_SURFACE_VARIANT};
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-`;
+import { McpToolsSelection } from "./McpToolsSelection";
+import { cleanServerUrl } from "./formUtils";
+import { Container, LoaderContainer } from "./styles";
+import { extractAccessToken, findAgentNodeFromAgentCallNode, getAgentFilePath, getEndOfFileLineRange, parseToolsString, resolveVariableValue, resolveAuthConfig } from "./utils";
 
 interface Tool {
     name: string;
     description?: string;
 }
 
-interface AddToolProps {
+interface AddMcpServerProps {
     editMode?: boolean;
     name?: string;
     agentCallNode: FlowNode;
-    onAddMcpServer: () => void;
     onSave?: () => void;
     onBack?: () => void;
 }
 
-export function AddMcpServer(props: AddToolProps): JSX.Element {
-    const { agentCallNode, onAddMcpServer, onSave, editMode = false } = props;
-    console.log(">>> Add Mcp Server props", props);
-    const { rpcClient } = useRpcContext();
-    const [mcpToolkitCount, setMcpToolkitCount] = useState<number>(0);
-    const [agentNode, setAgentNode] = useState<FlowNode | null>(null);
-    const [existingTools, setExistingTools] = useState<string[]>([]);
-    const [toolsStringList, setToolsStringList] = useState<string>("");
-    const [selectedTool, setSelectedTool] = useState<string | null>(null);
-    const [urlError, setUrlError] = useState<string>("");
-    const [nameError, setNameError] = useState<string>("");
-    const [mcpToolResponse, setMcpToolResponse] = useState<FlowNode>(null);
-    const [allVariables, setAllVariables] = useState<FlowNode[]>(null);
-
-    const [serviceUrl, setServiceUrl] = useState("");
-    const [pendingServiceUrl, setPendingServiceUrl] = useState("");
-    const [errorInputs, setErrorInputs] = useState(false);
-    const [configs, setConfigs] = useState({});
-    const [toolSelection, setToolSelection] = useState("All");
-    const [name, setName] = useState(props.name || "");
-    const [hasUserTyped, setHasUserTyped] = useState(false);
-
-    // New state for MCP server tools
-    const [mcpTools, setMcpTools] = useState<Tool[]>([]);
-    const [selectedMcpTools, setSelectedMcpTools] = useState<Set<string>>(new Set());
-    const [loadingMcpTools, setLoadingMcpTools] = useState(false);
-    const [mcpToolsError, setMcpToolsError] = useState<string>("");
+const SERVER_URL_FIELD_KEY = "serverUrl";
+const AUTH_FIELD_KEY = "auth";
 
-    const [loading, setLoading] = useState<boolean>(false);
-    const [savingForm, setSavingForm] = useState<boolean>(false);
+export function AddMcpServer(props: AddMcpServerProps): JSX.Element {
+    const { agentCallNode, onSave, editMode = false } = props;
+    const { rpcClient } = useRpcContext();
 
-    const projectPath = useRef<string>("");
-    const agentFilePath = useRef<string>("");
-    const hasUpdatedToolsField = useRef(false);
-    const formRef = useRef<any>(null);
+    const [serverUrl, setServerUrl] = useState("");
+    const [auth, setAuth] = useState("");
 
-    useEffect(() => {
-        initPanel();
-    }, [agentCallNode]);
+    const [availableMcpTools, setAvailableMcpTools] = useState<Tool[]>([]);
+    const [selectedMcpTools, setSelectedMcpTools] = useState<Set<string>>(new Set());
+    const [loadingMcpTools, setLoadingMcpTools] = useState<boolean>(false);
+    const [mcpToolsError, setMcpToolsError] = useState<string>("");
 
-    useEffect(() => {
-        if (mcpToolResponse && !hasUpdatedToolsField.current) {
-            console.log("Running updateMcpToolResponseWithToolsField", mcpToolResponse);
-            updateMcpToolResponseWithToolsField();
-            hasUpdatedToolsField.current = true;
-        }
-    }, [mcpToolResponse]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isSaving, setIsSaving] = useState<boolean>(false);
 
-    // Effect to fetch MCP tools when serviceUrl changes and toolSelection is "Selected"
-    useEffect(() => {
-        if (toolSelection === "Selected" && serviceUrl.trim()) {
-            fetchMcpTools(serviceUrl);
-        } else {
-            // Clear tools when not in selected mode or no URL
-            setMcpTools([]);
-            setSelectedMcpTools(new Set());
-            setMcpToolsError("");
-        }
-    }, [toolSelection, serviceUrl]);
+    const mcpToolKitNodeTemplateRef = useRef<FlowNode>(null);
+    const mcpToolKitNodeRef = useRef<FlowNode>(null);
+    const agentNodeRef = useRef<FlowNode>(null);
 
-    // Effect to fetch MCP tools when mcpToolResponse serviceUrl changes
-    useEffect(() => {
-        console.log(">>> mcpToolResponse serverUrl changed", (mcpToolResponse?.properties as any)?.['serverUrl']?.value);
-        const serverUrlProp = (mcpToolResponse?.properties as any)?.['serverUrl']?.value;
-        if (typeof serverUrlProp === "string" && serverUrlProp.trim() !== "") {
-            fetchMcpTools(serverUrlProp);
-        }
-    }, [(mcpToolResponse?.properties as any)?.['serverUrl']?.value]);
+    const agentFilePathRef = useRef<string>("");
+    const agentFileEndLineRangeRef = useRef<LineRange | null>(null);
+    const formRef = useRef<any>(null);
+    const moduleVariablesRef = useRef<FlowNode[]>([]);
+    const projectPathUriRef = useRef<string>("");
 
     const fetchAgentNode = async () => {
-        const agentNode = await findAgentNodeFromAgentCallNode(agentCallNode, rpcClient);
-        setAgentNode(agentNode);
+        agentNodeRef.current = await findAgentNodeFromAgentCallNode(agentCallNode, rpcClient);
+    };
 
-        const mcpToolResponse = await rpcClient
+    const fetchMcpToolKitTemplate = async () => {
+        const response = await rpcClient
             .getBIDiagramRpcClient()
             .getNodeTemplate({
-                position: { line: 0, offset: 0 },
-                filePath: agentFilePath.current,
+                position: { line: agentFileEndLineRangeRef.current.endLine.line, offset: agentFileEndLineRangeRef.current.endLine.offset },
+                filePath: agentFilePathRef.current,
                 id: {
-                    node: "NEW_CONNECTION",
-                    org: "ballerina",
-                    module: "mcp",
-                    "packageName": "mcp",
-                    version: "0.9.1",
-                    symbol: "init",
-                    object: "Client"
+                    node: "MCP_TOOL_KIT",
                 }
             });
-        // Remove defaultValue from info if it exists
-        removeDefaultValueFromInfo(mcpToolResponse.flowNode.properties);
-        if (!editMode) {
-            setMcpToolResponse(mcpToolResponse.flowNode);
-        }
-        console.log(">>> response getSourceCode with template ", { mcpToolResponse });
-        console.log(">>> agent node ", { agentNode });
-        const variableNodes = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
-        console.log(">>> variableNodes", variableNodes);
-        setAllVariables(variableNodes.flowModel.variables);
-        if (editMode) {
-            // Find the variable with type 'ai:McpToolKit'
-            const mcpVariable = variableNodes.flowModel?.variables?.find(
-                (v) => v.properties?.type?.value === "ai:McpToolKit" && v.properties.variable?.value === name
-            );
-            console.log(">>> mcpVariable", mcpVariable);
-            // Properly add toolsToInclude to the properties object
-            const updatedProperties = { ...(mcpVariable.properties || {}) };
-            let permittedToolsValue = (mcpVariable.properties as any)?.permittedTools?.value;
-            if (!permittedToolsValue) {
-                fieldVal.value = "All";
-            } else {
-                fieldVal.value = permittedToolsValue === "()" ? "All" : "Selected";
-            }
-            (updatedProperties as any)["toolsToInclude"] = fieldVal;
-
-            const updatedMcpToolResponse = {
-                ...mcpVariable,
-                properties: updatedProperties,
-                codedata: mcpVariable.codedata,
-            };
-            removeDefaultValueFromInfo(updatedMcpToolResponse.properties);
-            setMcpToolResponse(updatedMcpToolResponse);
-        }
-        if (agentNode?.properties?.tools?.value) {
-            const toolsString = agentNode.properties.tools.value.toString();
-            const mcpToolkits = extractMcpToolkits(toolsString);
-            console.log(">>> toolsString", toolsString);
-            console.log(">>> mcpToolkits", mcpToolkits);
-            if (mcpToolkits.length > 0) {
-                setMcpToolkitCount(mcpToolkits.length);
-            }
-            setToolsStringList(toolsString);
-
-            if (name.trim() !== "") {
-                const tools = (props.agentCallNode?.metadata?.data as NodeMetadata)?.tools || [];
-                console.log(">>> tools", tools);
-                if (tools.length > 0) {
-                    const matchingTool = tools.find(tool => tool.name.includes(name));
-                    console.log(">>> matching tool", matchingTool);
-                    console.log(">>> existing mcp toolkit", toolsString);
-                    
-                    if (matchingTool) {
-                        // Escape special regex characters in the tool name
-                        const escapedToolName = matchingTool.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-                        
-                        // Improved regex pattern to capture URL and permittedTools
-                        const mcpToolkitPattern = `McpToolKit\\(\\s*"([^"]+)"\\s*,\\s*permittedTools\\s*=\\s*(\\([^)]*\\)|\\[[^\\]]*\\])\\s*,\\s*info\\s*=\\s*\\{[^}]*name:\\s*"${escapedToolName}[^"]*"`;
-                        const mcpToolkitRegex = new RegExp(mcpToolkitPattern);
-                        
-                        const match = toolsString.match(mcpToolkitRegex);
-                        console.log(">>> regex match", match);
-                        
-                        if (match) {
-                            // Extract the URL (first capture group)
-                            const url = match[1];
-                            setServiceUrl(url);
-                            
-                            const permittedToolsStr = match[2];
-                            if (permittedToolsStr && permittedToolsStr.trim() !== "()") {
-                                setToolSelection("Selected");
-                                const toolNames = permittedToolsStr
-                                    .replace(/[\[\]()]/g, '')
-                                    .split(',')
-                                    .map(t => t.trim().replace(/"/g, ''))
-                                    .filter(t => t !== '');
-                                setSelectedMcpTools(new Set(toolNames));
-                            } else {
-                                setToolSelection("All");
-                                setSelectedMcpTools(new Set());
-                            }
-                        }
-                    }
-                }
-            }
-        }
+        return response.flowNode;
     };
 
-    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
-        await fetchExistingTools();
-        await fetchAgentNode();
-        setLoading(false);
+    const fetchModuleNodes = async () => {
+        const moduleNodes = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
+        return moduleNodes;
     };
 
-    useEffect(() => {
+    const setupEditMode = (variables: FlowNode[]) => {
+        const mcpToolKitVariable = variables?.find(
+            (v) => v.codedata?.node === "MCP_TOOL_KIT" && v.properties.variable?.value === props.name
+        );
+        if (!mcpToolKitVariable) return;
+        mcpToolKitNodeRef.current = mcpToolKitVariable;
+    };
 
-    }, [name, (props.agentCallNode?.metadata?.data as NodeMetadata)?.tools, toolsStringList]);
+    const initPanel = useCallback(async () => {
+        setIsLoading(true);
 
-    const extractMcpToolkits = (toolsString: string): string[] => {
-        // Remove brackets and whitespace, then split by comma
-        return toolsString
-            .replace(/[\[\]\s]/g, '') // Remove [ ] and whitespace
-            .split(',')
-            .filter(Boolean); // Remove empty strings
-    };
-    
-    const fetchExistingTools = async () => {
-        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);
-    };
+        agentFilePathRef.current = await getAgentFilePath(rpcClient);
+        const endLineRange = await getEndOfFileLineRange("agents.bal", rpcClient);
+        agentFileEndLineRangeRef.current = endLineRange;
 
-    const fetchMcpTools = async (url: string) => {
-        // Remove leading/trailing double quotes if present
-        const cleanUrl = url.replace(/^"|"$/g, '');
-        if (!cleanUrl.trim()) {
-            return;
-        }
-        setLoadingMcpTools(true);
-        setMcpToolsError("");
-        setMcpTools([]);
-        if (!editMode) {
-            setSelectedMcpTools(new Set());
-        }
-        try {
-            const languageServerClient = rpcClient.getAIAgentRpcClient();
-            if (typeof languageServerClient.getMcpTools === 'function') {
-                const response = await languageServerClient.getMcpTools({ 
-                    serviceUrl: cleanUrl.trim(),
-                    configs: configs
-                });
-                if (response.tools && Array.isArray(response.tools)) {
-                    setMcpTools(response.tools);
-                } else {
-                    setMcpToolsError("No tools found in MCP server response");
-                }
-            }
-        } catch (error) {
-            setMcpToolsError(`Failed to fetch tools from MCP server: ${error || 'Unknown error'}`);
-        } finally {
-            setLoadingMcpTools(false);
-        }
-    };
+        // Get project path URI
+        const visualizerLocation = await rpcClient.getVisualizerLocation();
+        projectPathUriRef.current = visualizerLocation.projectUri;
 
-    // useEffect to fetch tools when pendingServiceUrl changes
-    useEffect(() => {
-        if (pendingServiceUrl.trim()) {
-            fetchMcpTools(pendingServiceUrl);
-        }
-    }, [pendingServiceUrl]);
+        const moduleNodes = await fetchModuleNodes();
+        // Store module variables for later use
+        moduleVariablesRef.current = moduleNodes.flowModel.variables || [];
 
-    const handleToolSelectionChange = (toolName: string, isSelected: boolean) => {
-        const newSelectedTools = new Set(selectedMcpTools);
-        if (isSelected) {
-            newSelectedTools.add(toolName);
-        } else {
-            newSelectedTools.delete(toolName);
-        }
-        setSelectedMcpTools(newSelectedTools);
-    };
+        await fetchAgentNode();
+        const template = await fetchMcpToolKitTemplate();
 
-    const extractMcpToolkitNames = (toolsString: string): string[] => {
-        const names: string[] = [];
-        
-        // Regex to match McpToolKit with name in info object
-        const mcpToolkitPattern = /McpToolKit\([^}]*info\s*=\s*\{[^}]*name:\s*"([^"]+)"/g;
-        let match;
-        
-        while ((match = mcpToolkitPattern.exec(toolsString)) !== null) {
-            names.push(match[1]);
-        }
-        
-        return names;
-    };
+        mcpToolKitNodeTemplateRef.current = template;
 
-    const handleSelectAllTools = () => {
-        if (selectedMcpTools.size === mcpTools.length) {
-            // Deselect all
-            setSelectedMcpTools(new Set());
+        if (editMode) {
+            setupEditMode(moduleNodes.flowModel.variables);
         } else {
-            // Select all
-            setSelectedMcpTools(new Set(mcpTools.map(tool => tool.name)));
+            mcpToolKitNodeRef.current = template;
         }
-    };
 
-    // Update handleOnSave to accept all submitted form values
-    const handleOnSave = async (
-        node?: FlowNode,
-        dataMapperMode?: DataMapperDisplayMode,
-        formImports?: any,
-        rawFormValues?: FormValues
-    ) => {
-        console.log(">>> selected tools", selectedTools)
-        console.log("All submitted form values:", rawFormValues);
-        console.log("handle on save node:", node);
-
-        // Use the same logic as the display to determine the name
-        let finalName;
-        if (name.trim() !== "") {
-            finalName = name.trim();
-        } else {
-            finalName = mcpToolkitCount > 1 ? `MCP Server 0${mcpToolkitCount}` : "MCP Server";
-        }
+        setIsLoading(false);
+    }, [editMode, rpcClient]);
 
-        const payload = {
-            name: finalName,
-            serviceUrl: serviceUrl.trim(),
-            configs: configs,
-            toolSelection,
-            selectedTools: selectedTools,
-            mcpTools
-        };
-        // Update node.properties so that each key is an object with a value property
-        if (rawFormValues && node && node.properties) {
-            const props = node.properties as Record<string, any>;
-            Object.entries(rawFormValues).forEach(([key, value]) => {
-                if (props[key] && typeof props[key] === "object" && "value" in props[key]) {
-                    props[key].value = value;
-                } else {
-                    props[key] = { value };
-                }
-            });
-            node.properties = props;
-        }
-        console.log(">>> Saving with payload:", payload);
+    const fetchToolListFromMcpServer = useCallback(async (url: string, authValue: string = "") => {
+        // Resolve the URL variable if needed
+        const resolvedUrl = await resolveVariableValue(
+            url,
+            moduleVariablesRef.current,
+            rpcClient,
+            projectPathUriRef.current
+        );
 
-        setSavingForm(true);
-        try {
-            await rpcClient.getAIAgentRpcClient().updateMCPToolKit({
-                agentFlowNode: agentNode,
-                serviceUrl: `"${payload.serviceUrl}"`,
-                serverName: finalName,
-                selectedTools: selectedTools,
-                updatedNode: node,
-                codedata: mcpToolResponse.codedata,
-                mcpTools: payload.mcpTools
-            });
-            setServiceUrl(payload.serviceUrl);
-            onSave?.();
-        } catch (error) {
-            console.error(">>> Error saving MCP server", error);
-        } finally {
-            setSavingForm(false);
+        const cleanUrl = cleanServerUrl(resolvedUrl);
+        if (!cleanUrl) {
+            return [];
         }
-    };
 
-    const existingMcpToolkits = extractMcpToolkitNames(toolsStringList);
-
-    const generateUniqueValue = () => {
-        if (hasUserTyped || editMode) {
-            return name;
-        }
-        
-        let counter = mcpToolkitCount;
-        let candidateValue = counter > 1 ? `MCP Server 0${counter}` : "MCP Server";
-        while (existingMcpToolkits.some(existingName => 
-            existingName.toLowerCase() === candidateValue.trim().toLowerCase()
-        )) {
-            counter++;
-            candidateValue = `MCP Server 0${counter}`;
-        }
-        
-        return candidateValue;
-    };
+        // Reset state
+        setAvailableMcpTools([]);
+        setSelectedMcpTools(new Set());
+        setLoadingMcpTools(true);
+        setMcpToolsError("");
 
-    // Refactored: Accept variables as parameter
-    const generateUniqueVariable = (variables: FlowNode[] = allVariables) => {
-        if (hasUserTyped || editMode) {
-            return name;
-        }
+        // Resolve auth config variables if needed
+        const resolvedAuthValue = await resolveAuthConfig(
+            authValue,
+            moduleVariablesRef.current,
+            rpcClient,
+            projectPathUriRef.current
+        );
 
-        let counter = mcpToolkitCount;
-        let candidateValue = counter >= 1 ? `mcpServer${counter}` : "mcpServer";
-        // Loop until candidateValue is unique among variables
-        while ((variables || []).some(v => {
-            const val = v.properties?.variable?.value;
-            return typeof val === 'string' && val.trim().toLowerCase() === candidateValue.trim().toLowerCase();
-        })) {
-            counter++;
-            candidateValue = `mcpServer${counter}`;
-        }
-        return candidateValue;
-    };
+        const accessToken = extractAccessToken(resolvedAuthValue);
 
+        try {
+            const response = await rpcClient.getAIAgentRpcClient().getMcpTools({
+                serviceUrl: cleanUrl,
+                accessToken
+            });
 
-    const hasExistingTools = existingTools.length > 0;
-    const isToolSelected = selectedTool !== null;
-    const canSave = serviceUrl.trim() && (toolSelection !== "Selected" || selectedMcpTools.size > 0);
+            if (response.errorMsg) {
+                const errorMessage = `Failed to fetch tools from MCP server: ${response.errorMsg}`;
+                console.error(errorMessage);
+                setMcpToolsError(response.errorMsg);
+                setLoadingMcpTools(false);
+                return [];
+            }
 
-    console.log(">>> rendering conditions", { hasExistingTools, isToolSelected, canSave, editMode });
+            if (!response.tools || !Array.isArray(response.tools)) {
+                setLoadingMcpTools(false);
+                return [];
+            }
 
-    // Change renderToolsSelection to accept mcpTools as a parameter
-    const renderToolsSelection = (tools = mcpTools) => {
-        if (toolSelection !== "Selected") {
-            return null;
-        }
+            setAvailableMcpTools(response.tools);
 
-        return (
-            <ToolsContainer>
-                <ToolsHeader>
-                    <ToolsTitle>Available Tools</ToolsTitle>
-                    {tools.length > 0 && (
-                        <Button
-                            onClick={handleSelectAllTools}
-                            disabled={loadingMcpTools}
-                        >
-                            {selectedMcpTools.size === tools.length ? "Deselect All" : "Select All"}
-                        </Button>
-                    )}
-                </ToolsHeader>
-                
-                {loadingMcpTools && (
-                    <LoadingMessage>
-                        <RelativeLoader />
-                        Loading tools from MCP server...
-                    </LoadingMessage>
-                )}
-
-                {mcpToolsError && (
-                    <ErrorMessage>{mcpToolsError}</ErrorMessage>
-                )}
-
-                {tools.length > 0 && (
-                    <ToolCheckboxContainer>
-                        {tools.map((tool) => (
-                            <ToolCheckboxItem key={tool.name}>
-                                <CheckBox
-                                    label=""
-                                    checked={selectedMcpTools.has(tool.name)}
-                                    disabled={loadingMcpTools}
-                                    onChange={() => !loadingMcpTools && handleToolSelectionChange(tool.name, !selectedMcpTools.has(tool.name))}
-                                >
-                                </CheckBox>
-                                <div>
-                                    <div style={{ fontWeight: 'bold' }}>{tool.name}</div>
-                                    {tool.description && (
-                                        <div style={{ fontSize: '12px', color: ThemeColors.ON_SURFACE_VARIANT }}>
-                                            {tool.description}
-                                        </div>
-                                    )}
-                                </div>
-                            </ToolCheckboxItem>
-                        ))}
-                    </ToolCheckboxContainer>
-                )}
-
-                {!loadingMcpTools && !mcpToolsError && tools.length === 0 && serviceUrl.trim() && (
-                    <div style={{ color: ThemeColors.ON_SURFACE_VARIANT, fontSize: '12px' }}>
-                        No tools available from this MCP server
-                    </div>
-                )}
-            </ToolsContainer>
-        );
-    };
-    console.log(">>> agentNode", agentCallNode);
-
-    const fieldVal = {
-        key: "scope",
-        advanced: false,
-        codedata: {
-            kind: 'REQUIRED',
-            originalName: 'scope',
-        },
-        editable: true,
-        hidden: false,
-        metadata: {
-            label: "Tools to Include",
-            description: "Select the tools to include in the MCP server."
-        },
-        optional: false,
-        placeholder: "",
-        valueType: "SINGLE_SELECT",
-        valueTypeConstraint: "string",
-        value: "All", // <-- add this line to fix the linter error
-        typeMembers: [
-            {
-                type: "string",
-                packageInfo: "",
-                packageName: "",
-                kind: "BASIC_TYPE",
-                selected: false
+            // Restore previously selected tools if in edit mode and URL matches
+            const shouldRestoreTools = editMode && url === mcpToolKitNodeRef.current?.properties?.serverUrl?.value;
+            const permittedToolsValue = mcpToolKitNodeRef.current?.properties?.permittedTools?.value;
+            if (shouldRestoreTools && permittedToolsValue) {
+                const permittedTools = parseToolsString(permittedToolsValue as string, true);
+                setSelectedMcpTools(new Set(permittedTools));
+            } else {
+                // Select all tools by default when not in edit mode or when URL changed
+                setSelectedMcpTools(new Set(response.tools.map(tool => tool.name)));
             }
-        ],
-        imports: {},
-        defaultValue: "All",
-        itemOptions: [    {
-        "id": "All",
-        "content": "All",
-        "value": "All"
-    },
-    {
-        "id": "Selected",
-        "content": "Selected",
-        "value": "Selected"
-    }]
-    };
 
-    function removeDefaultValueFromInfo(properties: any) {
-        if (properties && properties.info && typeof properties.info === 'object' && 'defaultValue' in properties.info) {
-            delete properties.info.defaultValue;
+            setLoadingMcpTools(false);
+            return response.tools;
+        } catch (error) {
+            console.error(`Failed to fetch tools from MCP server: ${error || 'Unknown error'}`);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            setMcpToolsError(errorMessage);
+            setLoadingMcpTools(false);
+            return [];
         }
-    }
+    }, [editMode, rpcClient]);
 
-    // Refactor to accept variableName as parameter
-    const updateMcpToolResponseWithToolsField = (variableName?: string) => {
-        if (mcpToolResponse) {
-            // Clone properties to avoid mutating state directly
-            const updatedProperties = { ...(mcpToolResponse.properties || {}) };
+    useEffect(() => {
+        initPanel();
+    }, [initPanel]);
 
-            if (editMode) {
-                if ("serverUrl" in updatedProperties && updatedProperties["serverUrl"]) {
-                    (updatedProperties["serverUrl"] as { value: string }).value = serviceUrl;
-                }
-                // Only update 'info' if it exists in updatedProperties and has a 'value' property
-                if ("info" in updatedProperties && typeof (updatedProperties["info"] as any)?.value === "string") {
-                    (updatedProperties["info"] as { value: string }).value = ((mcpToolResponse.properties as any)?.info?.value) || "";
-                }
+    const debouncedFetchTools = useMemo(
+        () => debounce((url: string, authValue: string) => {
+            if (url.trim()) {
+                fetchToolListFromMcpServer(url, authValue);
+            } else {
+                setAvailableMcpTools([]);
+                setSelectedMcpTools(new Set());
+                setLoadingMcpTools(false);
+                setMcpToolsError("");
             }
+        }, 500),
+        [fetchToolListFromMcpServer]
+    );
 
-            if ("variable" in updatedProperties && updatedProperties["variable"]) {
-                (updatedProperties["variable"] as { value: string }).value = variableName || generateUniqueVariable(allVariables);
-            }
-            let permittedToolsValue = (mcpToolResponse.properties as any)?.permittedTools?.value;
-            if (!permittedToolsValue) {
-                fieldVal.value = "All";
+    useEffect(() => {
+        debouncedFetchTools(serverUrl, auth);
+    }, [serverUrl, auth, debouncedFetchTools]);
+
+    const handleToolSelectionChange = useCallback((toolName: string, isSelected: boolean) => {
+        setSelectedMcpTools(prev => {
+            const newSet = new Set(prev);
+            if (isSelected) {
+                newSet.add(toolName);
             } else {
-                fieldVal.value = permittedToolsValue === "()" ? "All" : "Selected";
+                newSet.delete(toolName);
             }
-            // Add fieldVal as a property named 'scope', wrapped as a Property object
-            (updatedProperties as any)["toolsToInclude"] = fieldVal;
-
-            const updatedMcpToolResponse = {
-                ...mcpToolResponse,
-                properties: updatedProperties,
-            };
-            removeDefaultValueFromInfo(updatedMcpToolResponse.properties);
-            setMcpToolResponse(updatedMcpToolResponse);
-        }
-    };
+            return newSet;
+        });
+    }, []);
 
-    const [selectedTools, setSelectedTools] = useState<string[]>([]);
+    const handleSelectAllTools = useCallback(() => {
+        if (selectedMcpTools.size === availableMcpTools.length) {
+            setSelectedMcpTools(new Set());
+        } else {
+            setSelectedMcpTools(new Set(availableMcpTools.map(t => t.name)));
+        }
+    }, [selectedMcpTools.size, availableMcpTools]);
 
-    const handleToolsChange = (tools: string[]) => {
-        setSelectedTools(tools);
-        // You can do other things here as needed
+    const handleSave = async (node?: FlowNode) => {
+        setIsSaving(true);
+        try {
+            await rpcClient.getAIAgentRpcClient().updateMCPToolKit({
+                agentFlowNode: agentNodeRef.current,
+                selectedTools: Array.from(selectedMcpTools),
+                updatedNode: node,
+            });
+            onSave?.();
+        } catch (error) {
+            console.error("Error saving MCP server:", error);
+            rpcClient.getCommonRpcClient().showErrorMessage({
+                message: "Failed to save MCP server configuration. Please try again."
+            });
+        } finally {
+            setIsSaving(false);
+        }
     };
 
-    useEffect(() => {
-        if (allVariables && Array.isArray(allVariables)) {
-            const uniqueVar = generateUniqueVariable(allVariables);
-            updateMcpToolResponseWithToolsField(uniqueVar);
-            console.log('Generated unique variable:', uniqueVar);
-        }
-    }, [allVariables]);
+    const isSaveDisabled = useMemo(() => {
+        return availableMcpTools.length > 0 && selectedMcpTools.size === 0;
+    }, [availableMcpTools.length, selectedMcpTools.size]);
+
+    const injectedComponents = useMemo(() => {
+        return [{
+            component: (
+                <McpToolsSelection
+                    key="mcp-tools-selection"
+                    tools={availableMcpTools}
+                    selectedTools={selectedMcpTools}
+                    loading={loadingMcpTools}
+                    error={mcpToolsError}
+                    onToolSelectionChange={handleToolSelectionChange}
+                    onSelectAll={handleSelectAllTools}
+                    serviceUrl={serverUrl}
+                    showValidationError={isSaveDisabled}
+                />
+            ),
+            index: 1
+        }];
+    }, [availableMcpTools, selectedMcpTools, loadingMcpTools, mcpToolsError, serverUrl, handleToolSelectionChange, handleSelectAllTools, isSaveDisabled]);
 
     return (
         <Container>
-            
-            {loading && (
+            {isLoading && (
                 <LoaderContainer>
                     <RelativeLoader />
                 </LoaderContainer>
             )}
 
-            {mcpToolResponse && (
+            {mcpToolKitNodeTemplateRef && (
                 <FormGenerator
                     ref={formRef}
-                    fileName={agentFilePath.current}
-                    targetLineRange={{ startLine: { line: 0, offset: 0 }, endLine: { line: 0, offset: 0 } }}
-                    nodeFormTemplate={mcpToolResponse}
-                    submitText={"Save Tool"}
-                    node={mcpToolResponse}
-                    onSubmit={handleOnSave}
-                    scopeFieldAddon={renderToolsSelection(mcpTools)}
-                    newServerUrl={serviceUrl}
+                    fileName={mcpToolKitNodeRef.current?.codedata?.lineRange?.fileName ? mcpToolKitNodeRef.current.codedata.lineRange?.fileName : agentFileEndLineRangeRef.current?.fileName}
+                    targetLineRange={mcpToolKitNodeRef.current?.codedata?.lineRange ? mcpToolKitNodeRef.current.codedata.lineRange : agentFileEndLineRangeRef.current}
+                    nodeFormTemplate={mcpToolKitNodeTemplateRef.current}
+                    submitText={"Save"}
+                    node={mcpToolKitNodeRef.current}
+                    onSubmit={handleSave}
                     onChange={(fieldKey, value) => {
-                        if (fieldKey === "serverUrl") {
-                            setPendingServiceUrl(value);
-                            setServiceUrl(value);
+                        if (fieldKey === SERVER_URL_FIELD_KEY) {
+                            setServerUrl(value);
+                        }
+                        if (fieldKey === AUTH_FIELD_KEY) {
+                            setAuth(value);
                         }
                     }}
-                    mcpTools={mcpTools}
-                    // Pass the handler to FormGenerator
-                    onToolsChange={handleToolsChange}
-                    showProgressIndicator={savingForm}
+                    showProgressIndicator={isSaving}
+                    disableSaveButton={isSaveDisabled}
+                    injectedComponents={injectedComponents}
+                    fieldPriority={{ auth: 1 }}
                 />
             )}
         </Container>
     );
 }
-
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AgentConfig.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AgentConfig.tsx
deleted file mode 100644
index d9d02611f3b..00000000000
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AgentConfig.tsx
+++ /dev/null
@@ -1,230 +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 { useEffect, useRef, useState } from "react";
-import styled from "@emotion/styled";
-import { FlowNode, 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 ConfigForm from "./ConfigForm";
-import { cloneDeep } from "lodash";
-import { findAgentNodeFromAgentCallNode, getAgentFilePath, getMainFilePath } from "./utils";
-
-const Container = styled.div`
-    padding: 16px;
-`;
-
-const Row = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-`;
-
-interface AgentConfigProps {
-    agentCallNode: FlowNode;
-    fileName: string; // file name of the agent call node
-    onSave?: () => void;
-}
-
-export function AgentConfig(props: AgentConfigProps): JSX.Element {
-    const { agentCallNode, fileName, onSave } = props;
-    console.log(">>> AgentConfig props", props);
-    const { rpcClient } = useRpcContext();
-
-    const [agentNode, setAgentNode] = useState<FlowNode | null>(null);
-    const [agentCallNodeTemplate, setAgentCallNodeTemplate] = useState<FlowNode | null>(null);
-    const [formFields, setFormFields] = useState<FormField[]>([]);
-    const [savingForm, setSavingForm] = useState<boolean>(false);
-
-    const agentFilePath = useRef<string>("");
-    const mainFilePath = useRef<string>("");
-
-    useEffect(() => {
-        initPanel();
-    }, [agentCallNode]);
-
-    useEffect(() => {
-        if (agentNode && agentCallNodeTemplate) {
-            configureFormFields();
-        }
-    }, [agentNode, agentCallNodeTemplate]);
-
-    const initPanel = async () => {
-        // get agent file path
-        agentFilePath.current = await getAgentFilePath(rpcClient);
-        // get main file path
-        mainFilePath.current = await getMainFilePath(rpcClient);
-        // fetch agent node
-        await fetchAgentNode();
-        await fetchAgentCallNode();
-    };
-
-    const fetchAgentNode = async () => {
-        const agentNode = await findAgentNodeFromAgentCallNode(agentCallNode, rpcClient);
-        setAgentNode(agentNode);
-    };
-
-    const fetchAgentCallNode = async () => {
-        console.log(">>> agentCallNode", agentCallNode);
-        // TODO: fetch the agent call node template and validate with the agent node
-        setAgentCallNodeTemplate(agentCallNode);
-    };
-
-    const configureFormFields = () => {
-        const agentCallFormFields = convertConfig(agentCallNodeTemplate.properties);
-        const systemPromptProperty = agentNode.properties.systemPrompt;
-        if (systemPromptProperty) {
-            let roleValue = "";
-            let instructionValue = "";
-            if (systemPromptProperty.value) {
-                const valueStr = systemPromptProperty.value.toString();
-                const roleMatch = valueStr.match(/role:\s*"([^"]*)"/);
-                if (roleMatch && roleMatch[1]) {
-                    roleValue = roleMatch[1];
-                }
-
-                const instructionsMatch = valueStr.match(/instructions:\s*string\s*`([^`]*)`/);
-                if (instructionsMatch && instructionsMatch[1]) {
-                    instructionValue = instructionsMatch[1];
-                }
-            }
-
-            const customFields: FormField[] = [
-                {
-                    key: "role",
-                    label: "Role",
-                    type: "STRING",
-                    optional: true,
-                    advanced: false,
-                    placeholder: "e.g. Customer Support Assistant",
-                    editable: true,
-                    enabled: true,
-                    documentation: "The role of the AI agent",
-                    valueType: "STRING",
-                    value: roleValue,
-                    valueTypeConstraint: "string",
-                    diagnostics: [],
-                    metadata: {
-                        label: "Role",
-                        description: "The role of the AI agent",
-                    },
-                },
-                {
-                    key: "instruction",
-                    label: "Instructions",
-                    type: "TEXTAREA",
-                    optional: false,
-                    advanced: false,
-                    placeholder: "Detailed instructions for the agent...",
-                    editable: true,
-                    enabled: true,
-                    documentation: "Detailed instructions for the agent",
-                    valueType: "STRING",
-                    value: instructionValue,
-                    valueTypeConstraint: "string",
-                    diagnostics: [],
-                    metadata: {
-                        label: "Instructions",
-                        description: "Detailed instructions for the agent",
-                    },
-                },
-            ];
-            const queryFieldIndex = agentCallFormFields.findIndex((field) => field.key === "query");
-            if (queryFieldIndex !== -1) {
-                agentCallFormFields.splice(queryFieldIndex, 0, ...customFields);
-            } else {
-                agentCallFormFields.push(...customFields);
-            }
-        }
-
-        // add verbose, maxIter and agentType fields from agent node
-        const otherAgentProperties: NodeProperties = {};
-        if (agentNode.properties.verbose) {
-            otherAgentProperties.verbose = cloneDeep(agentNode.properties.verbose);
-        }
-        if (agentNode.properties.maxIter) {
-            otherAgentProperties.maxIter = cloneDeep(agentNode.properties.maxIter);
-        }
-        if (agentNode.properties.agentType) {
-            otherAgentProperties.agentType = cloneDeep(agentNode.properties.agentType);
-        }
-        const otherAgentFormFields = convertConfig(otherAgentProperties);
-        agentCallFormFields.push(...otherAgentFormFields);
-
-        // let's hide connection field
-        const connectionField = agentCallFormFields.find((field) => field.key === "connection");
-        if (connectionField) {
-            connectionField.enabled = false;
-        }
-        setFormFields(agentCallFormFields);
-    };
-
-    const handleOnSave = async (data: FormField[], rawData: FormValues) => {
-        console.log(">>> save value", { data, rawData });
-        setSavingForm(true);
-        // update the agent node
-        const updatedAgentNode = cloneDeep(agentNode);
-        const roleValue = (rawData["role"] || "").replace(/"/g, '\\"');
-        const instructionValue = (rawData["instruction"] || "").replace(/"/g, '\\"');
-        const systemPromptValue = `{role: "${roleValue}", instructions: string \`${instructionValue}\`}`;
-        updatedAgentNode.properties.systemPrompt.value = systemPromptValue;
-        updatedAgentNode.properties.verbose.value = rawData["verbose"];
-        updatedAgentNode.properties.maxIter.value = rawData["maxIter"];
-        if ("agentType" in rawData) {
-            updatedAgentNode.properties.agentType.value = rawData["agentType"];
-        }
-
-        const agentResponse = await rpcClient
-            .getBIDiagramRpcClient()
-            .getSourceCode({ filePath: agentFilePath.current, flowNode: updatedAgentNode });
-        console.log(">>> response getSourceCode with template ", { agentResponse });
-
-        // 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.query.value = rawData["query"];
-        console.log(">>> request getSourceCode", { filePath: fileName, flowNode: updatedAgentCallNode });
-        const agentCallResponse = await rpcClient
-            .getBIDiagramRpcClient()
-            .getSourceCode({ filePath: fileName, flowNode: updatedAgentCallNode });
-        console.log(">>> response getSourceCode with template ", { agentCallResponse });
-
-        onSave?.();
-        setSavingForm(false);
-    };
-
-    return (
-        <Container>
-            {agentCallNode?.codedata?.lineRange && (
-                <ConfigForm
-                    fileName={mainFilePath.current}
-                    formFields={formFields}
-                    targetLineRange={agentCallNode.codedata.lineRange}
-                    onSubmit={handleOnSave}
-                    disableSaveButton={savingForm}
-                    isSaving={savingForm}
-                />
-            )}
-        </Container>
-    );
-}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/McpToolsSelection.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/McpToolsSelection.tsx
new file mode 100644
index 00000000000..71f1212cf1b
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/McpToolsSelection.tsx
@@ -0,0 +1,508 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { createPortal } from "react-dom";
+import styled from "@emotion/styled";
+import { Button, CheckBox, ThemeColors, SearchBox, Codicon, Divider, Typography } from "@wso2/ui-toolkit";
+
+export interface McpTool {
+    name: string;
+    description?: string;
+}
+
+// Utility function to clean up error messages
+const formatErrorMessage = (error: string): string => {
+    if (!error) return error;
+    
+    // Check if it's an HTML response (GitHub 404, etc.)
+    if (error.includes('<!DOCTYPE') || error.includes('<html>')) {
+        // Try to extract meaningful info from HTML
+        const httpMatch = error.match(/HTTP (\d+):/i);
+        if (httpMatch) {
+            const statusCode = httpMatch[1];
+            if (statusCode === '404') {
+                return 'Server URL not found (404). Please check the URL and try again.';
+            }
+            if (statusCode === '422') {
+                return 'Invalid request (422). The server URL may not be a valid MCP server.';
+            }
+            return `Server returned HTTP ${statusCode}. Please check the URL and try again.`;
+        }
+        return 'The server returned an HTML page instead of MCP tools. Please verify the URL is correct.';
+    }
+    
+    // Check for network errors
+    if (error.includes('Network error') || error.includes('Failed to fetch')) {
+        return 'Network error. Please check your connection and the server URL.';
+    }
+    
+    // Truncate very long error messages
+    if (error.length > 500) {
+        return error.substring(0, 500) + '...';
+    }
+    
+    return error;
+};
+
+interface McpToolsSelectionProps {
+    tools: McpTool[];
+    selectedTools: Set<string>;
+    loading: boolean;
+    error: string;
+    onToolSelectionChange: (toolName: string, isSelected: boolean) => void;
+    onSelectAll: () => void;
+    serviceUrl?: string;
+    showValidationError?: boolean;
+}
+
+interface ToolsListProps {
+    tools: McpTool[];
+    selectedTools: Set<string>;
+    loading: boolean;
+    onToolSelectionChange: (toolName: string, isSelected: boolean) => void;
+    searchQuery?: string;
+    maxHeight?: string;
+}
+
+const ToolsContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+    border-radius: 8px;
+    width: 100%;
+`;
+const ToolsHeader = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 12px 6px 12px;
+`;
+const ToolsTitle = styled.div`
+    font-size: 14px;
+    font-family: GilmerBold;
+    margin-bottom: 2px;
+    color: ${ThemeColors.ON_SURFACE};
+`;
+const ToolCheckboxContainer = styled.div<{ maxHeight?: string }>`
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-height: ${(props: { maxHeight?: string }) => props.maxHeight || '200px'};
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 0 12px 12px;
+`;
+const ToolCheckboxItem = styled.div<{ disabled?: boolean }>`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 0;
+    cursor: ${(props: { disabled?: boolean }) => props.disabled ? 'default' : 'pointer'};
+`;
+const ErrorMessage = styled.div`
+    color: ${ThemeColors.ERROR};
+    font-size: 12px;
+    padding: 0 0 12px 12px;
+    max-height: 100px;
+    overflow-y: auto;
+    word-break: break-word;
+    white-space: pre-wrap;
+`;
+const WarningMessage = styled.div`
+    color: ${ThemeColors.HIGHLIGHT};
+    font-size: 12px;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+`;
+const LoadingMessage = styled.div`
+    color: ${ThemeColors.ON_SURFACE_VARIANT};
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    padding: 0 0 12px 12px;
+    gap: 8px;
+`;
+const InlineSpinner = styled.span`
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid ${ThemeColors.ON_SURFACE_VARIANT};
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+`;
+
+const ToolDescription = styled.div<{ expanded: boolean }>`
+    font-size: 12px;
+    color: ${ThemeColors.ON_SURFACE_VARIANT};
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: ${(props: { expanded: boolean }) => props.expanded ? 'unset' : '2'};
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;
+
+const ReadMoreButton = styled.button`
+    background: none;
+    border: none;
+    color: ${ThemeColors.PRIMARY};
+    font-size: 12px;
+    cursor: pointer;
+    padding: 0;
+    margin-top: 4px;
+    text-decoration: underline;
+    &:hover {
+        color: ${ThemeColors.PRIMARY};
+        opacity: 0.8;
+    }
+    &:focus {
+        outline: none;
+    }
+`;
+
+const InfoMessage = styled.div`
+    color: ${ThemeColors.ON_SURFACE_VARIANT};
+    font-size: 12px;
+    padding: 0 12px;
+`;
+
+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;
+    background-color: color-mix(in srgb, ${ThemeColors.SECONDARY_CONTAINER} 70%, transparent);
+    font-family: GilmerRegular;
+`;
+
+const ModalBox = styled.div`
+    width: 650px;
+    max-height: 80vh;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: ${ThemeColors.SURFACE_DIM};
+    box-shadow: 0 3px 8px rgb(0 0 0 / 0.2);
+    z-index: 30001;
+`;
+
+const ModalHeaderSection = styled.header`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: 16px;
+    margin-bottom: 8px;
+`;
+
+const ModalContent = styled.div`
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 16px;
+`;
+
+const SearchContainer = styled.div`
+    padding: 12px 16px;
+    border-bottom: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+`;
+
+const ExpandButton = styled.button`
+    background: none;
+    border: none;
+    color: ${ThemeColors.ON_SURFACE};
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    &:hover {
+        background-color: ${ThemeColors.SURFACE_CONTAINER};
+    }
+`;
+
+const ToolItem: React.FC<{ tool: McpTool }> = ({ tool }) => {
+    const [expanded, setExpanded] = useState(false);
+    const [needsExpansion, setNeedsExpansion] = useState(false);
+    const descriptionRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        if (descriptionRef.current && tool.description) {
+            const lineHeight = 1.4;
+            const fontSize = 12;
+            const maxLines = 2;
+            const maxHeight = fontSize * lineHeight * maxLines;
+            setNeedsExpansion(descriptionRef.current.scrollHeight > maxHeight + 2);
+        }
+    }, [tool.description]);
+
+    return (
+        <div>
+            <ToolsTitle>{tool.name}</ToolsTitle>
+            {tool.description && (
+                <div>
+                    <ToolDescription ref={descriptionRef} expanded={expanded}>
+                        {tool.description}
+                    </ToolDescription>
+                    {needsExpansion && (
+                        <ReadMoreButton onClick={(e) => {
+                            e.stopPropagation();
+                            setExpanded(!expanded);
+                        }}>
+                            {expanded ? 'Read less' : 'Read more'}
+                        </ReadMoreButton>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+// Reusable Tools List Component
+const ToolsList: React.FC<ToolsListProps> = ({
+    tools,
+    selectedTools,
+    loading,
+    onToolSelectionChange,
+    searchQuery = '',
+    maxHeight = '200px'
+}) => {
+    const filteredTools = useMemo(() => {
+        if (!searchQuery.trim()) {
+            return tools;
+        }
+        const query = searchQuery.toLowerCase();
+        return tools.filter(tool =>
+            tool.name.toLowerCase().includes(query) ||
+            tool.description?.toLowerCase().includes(query)
+        );
+    }, [tools, searchQuery]);
+
+    return (
+        <ToolCheckboxContainer maxHeight={maxHeight}>
+            {filteredTools.map((tool) => (
+                <ToolCheckboxItem
+                    key={tool.name}
+                    disabled={loading}
+                    onClick={() => !loading && onToolSelectionChange(tool.name, !selectedTools.has(tool.name))}
+                >
+                    <CheckBox
+                        label=""
+                        checked={selectedTools.has(tool.name)}
+                        disabled={loading}
+                        onChange={() => { }}
+                    >
+                    </CheckBox>
+                    <ToolItem tool={tool} />
+                </ToolCheckboxItem>
+            ))}
+            {filteredTools.length === 0 && searchQuery.trim() && (
+                <div style={{ color: ThemeColors.ON_SURFACE_VARIANT, fontSize: '12px', padding: '8px 0' }}>
+                    No tools found matching &quot;{searchQuery}&quot;
+                </div>
+            )}
+        </ToolCheckboxContainer>
+    );
+};
+
+// Tools Selection Modal Component
+const ToolsSelectionModal: React.FC<{
+    isOpen: boolean;
+    onClose: () => void;
+    tools: McpTool[];
+    selectedTools: Set<string>;
+    loading: boolean;
+    onToolSelectionChange: (toolName: string, isSelected: boolean) => void;
+    onSelectAll: () => void;
+    showValidationError?: boolean;
+}> = ({ isOpen, onClose, tools, selectedTools, loading, onToolSelectionChange, onSelectAll, showValidationError = false }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    if (!isOpen) return null;
+
+    return createPortal(
+        <ModalContainer onClick={onClose}>
+            <ModalBox onClick={(e) => e.stopPropagation()}>
+                <ModalHeaderSection>
+                    <Typography sx={{ margin: "10px 0" }}>
+                        Select MCP Tools
+                    </Typography>
+                    <div onClick={onClose} style={{ cursor: 'pointer' }}>
+                        <Codicon name="close" />
+                    </div>
+                </ModalHeaderSection>
+                <Divider sx={{ margin: 0 }} />
+                <SearchContainer>
+                    <SearchBox
+                        placeholder="Search tools..."
+                        onChange={(val: string) => setSearchQuery(val)}
+                        value={searchQuery}
+                        iconPosition="end"
+                        aria-label="search-tools"
+                        sx={{ width: '100%' }}
+                    />
+                </SearchContainer>
+                <div style={{ padding: '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    {showValidationError && selectedTools.size === 0 ? (
+                        <div style={{ fontSize: '14px', color: ThemeColors.HIGHLIGHT }}>
+                            Select at least one tool to continue
+                        </div>
+                    ) : (
+                        <div style={{ fontSize: '14px', color: ThemeColors.ON_SURFACE_VARIANT }}>
+                            {selectedTools.size} of {tools.length} selected
+                        </div>
+                    )}
+                    {tools.length > 0 && (
+                        <Button
+                            onClick={onSelectAll}
+                            disabled={loading}
+                        >
+                            {selectedTools.size === tools.length ? "Deselect All" : "Select All"}
+                        </Button>
+                    )}
+                </div>
+                <ModalContent>
+                    <ToolsList
+                        tools={tools}
+                        selectedTools={selectedTools}
+                        loading={loading}
+                        onToolSelectionChange={onToolSelectionChange}
+                        searchQuery={searchQuery}
+                        maxHeight="50vh"
+                    />
+                </ModalContent>
+            </ModalBox>
+        </ModalContainer>,
+        document.body
+    );
+};
+
+export const McpToolsSelection: React.FC<McpToolsSelectionProps> = ({
+    tools,
+    selectedTools,
+    loading,
+    error,
+    onToolSelectionChange,
+    onSelectAll,
+    serviceUrl,
+    showValidationError = false
+}) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const formattedError = useMemo(() => formatErrorMessage(error), [error]);
+
+    return (
+        <>
+            <ToolsContainer>
+                <ToolsHeader>
+                    <ToolsTitle>Available Tools</ToolsTitle>
+                    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                        {tools.length > 0 && (
+                            <>
+                                <ExpandButton
+                                    onClick={() => setIsModalOpen(true)}
+                                    title="Expand view"
+                                    aria-label="Expand tools selection"
+                                >
+                                    <Codicon name="screen-full" sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} />
+                                </ExpandButton>
+                                <Button
+                                    onClick={onSelectAll}
+                                    disabled={loading}
+                                >
+                                    {selectedTools.size === tools.length ? "Deselect All" : "Select All"}
+                                </Button>
+                            </>
+                        )}
+                    </div>
+                </ToolsHeader>
+                {loading && (
+                    <LoadingMessage>
+                        <InlineSpinner />
+                        Loading tools from MCP server...
+                    </LoadingMessage>
+                )}
+                {error && (
+                    <>
+                        <InfoMessage>
+                            Unable to load tools from MCP server.
+                        </InfoMessage>
+                        <ErrorMessage>{formattedError}</ErrorMessage>
+                    </>
+                )}
+                {!loading && tools.length > 0 && (
+                    <>
+                        {showValidationError && selectedTools.size === 0 ? (
+                            <WarningMessage style={{ marginBottom: "6px" }}>
+                                Select at least one tool to continue
+                            </WarningMessage>
+                        ) : (
+                            <InfoMessage style={{ marginBottom: "6px" }}>
+                                {selectedTools.size} of {tools.length} selected
+                            </InfoMessage>
+                        )}
+                        <ToolsList
+                            tools={tools}
+                            selectedTools={selectedTools}
+                            loading={loading}
+                            onToolSelectionChange={onToolSelectionChange}
+                        />
+                    </>
+                )}
+                {!loading && !error && tools.length === 0 && serviceUrl?.trim() && (
+                    <InfoMessage style={{ marginBottom: "12px" }}>
+                        No tools available from this MCP server
+                    </InfoMessage>
+                )}
+                {!loading && !error && tools.length === 0 && !serviceUrl?.trim() && (
+                    <InfoMessage style={{ marginBottom: "12px" }}>
+                        Enter a server URL to view available tools
+                    </InfoMessage>
+                )}
+            </ToolsContainer>
+
+            <ToolsSelectionModal
+                isOpen={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                tools={tools}
+                selectedTools={selectedTools}
+                loading={loading}
+                onToolSelectionChange={onToolSelectionChange}
+                onSelectAll={onSelectAll}
+                showValidationError={showValidationError}
+            />
+        </>
+    );
+}; 
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 eb5866a8192..d71a22b180e 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/MemoryManagerConfig.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/MemoryManagerConfig.tsx
@@ -16,21 +16,22 @@
  * under the License.
  */
 
-import React, { useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import { CodeData, FlowNode, NodeMetadata } 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 { Codicon, Dropdown } from "@wso2/ui-toolkit";
 import { cloneDeep } from "lodash";
+import { useEffect, useRef, useState } from "react";
 import { RelativeLoader } from "../../../components/RelativeLoader";
+import { FormGenerator } from "../Forms/FormGenerator";
 import { getAgentFilePath, getAiModuleOrg, getNodeTemplate } from "./utils";
+import { usePanelOverlay } from "../FlowDiagram/hooks/usePanelOverlay";
+import { ConnectionSelectionList } from "../../../components/ConnectionSelector/ConnectionSelectionList";
+import { ConnectionCreator } from "../../../components/ConnectionSelector/ConnectionCreator";
+import { getNodeTemplateForConnection } from "../FlowDiagram/utils";
 
 const Container = styled.div`
-    padding: 16px;
-    height: 100%;
+    padding: 24px 16px 0;
 `;
 
 const LoaderContainer = styled.div`
@@ -45,287 +46,405 @@ const Row = styled.div`
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    margin-bottom: 16px;
 `;
 
-interface MemoryManagerConfigProps {
-    agentCallNode: FlowNode;
+const WarningMessage = styled.div`
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    margin-top: 12px;
+    background-color: var(--vscode-inputValidation-warningBackground);
+    border: 1px solid var(--vscode-inputValidation-warningBorder);
+    border-radius: 4px;
+    color: var(--vscode-inputValidation-warningForeground);
+    font-size: 13px;
+    line-height: 1.4;
+`;
+
+interface MemoryConfigProps {
+    memoryNode: FlowNode;
+    agentNode: FlowNode;
     onSave?: () => void;
 }
 
-export function MemoryManagerConfig(props: MemoryManagerConfigProps): JSX.Element {
-    const { agentCallNode, onSave } = props;
+export function MemoryManagerConfig(props: MemoryConfigProps): JSX.Element {
+    const { agentNode, memoryNode: existingMemoryVariable, onSave } = props;
 
     const { rpcClient } = useRpcContext();
-    // use selected memory manager
-    const [memoryManagersCodeData, setMemoryManagersCodeData] = useState<CodeData[]>([]);
-    const [selectedMemoryManagerCodeData, setSelectedMemoryManagerCodeData] = useState<CodeData>();
-    // already assigned memory manager
-    const [selectedMemoryManager, setSelectedMemoryManager] = useState<FlowNode>();
-    const [selectedMemoryManagerFields, setSelectedMemoryManagerFields] = useState<FormField[]>([]);
+    const { openOverlay, closeTopOverlay } = usePanelOverlay();
+
+    const [availableMemory, setAvailableMemory] = useState<CodeData[]>([]);
+    const [memoryNodeTemplate, setMemoryNodeTemplate] = useState<FlowNode>();
+    const [memoryNode, setMemoryNode] = useState<FlowNode>();
+    const [selectedMemoryType, setSelectedMemoryType] = useState<string>("");
 
-    const [loading, setLoading] = useState<boolean>(false);
-    const [savingForm, setSavingForm] = useState<boolean>(false);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isSaving, setIsSaving] = useState<boolean>(false);
 
     const agentFilePath = useRef<string>("");
     const aiModuleOrg = useRef<string>("");
     const agentNodeRef = useRef<FlowNode>();
-    const moduleConnectionNodes = useRef<FlowNode[]>([]);
+    const targetLineRange = useRef<any>();
+    const currentOverlayId = useRef<string | null>(null);
 
     useEffect(() => {
         initPanel();
     }, []);
 
-    useEffect(() => {
-        if (memoryManagersCodeData?.length > 0 && selectedMemoryManager && !selectedMemoryManagerCodeData) {
-            fetchMemoryManagerNodeTemplate(selectedMemoryManager.codedata);
-        }
-    }, [memoryManagersCodeData, selectedMemoryManager]);
-
     const initPanel = async () => {
-        setLoading(true);
-        agentFilePath.current = await getAgentFilePath(rpcClient);
-        aiModuleOrg.current = await getAiModuleOrg(rpcClient);
-        // fetch all memory managers
-        const memoryManagers = await fetchMemoryManagers();
-        // fetch selected agent memory manager
-        await fetchSelectedAgentMemoryManager(memoryManagers);
-        setLoading(false);
-    };
+        setIsLoading(true);
 
-    const fetchMemoryManagers = async () => {
-        console.log(">>> agent call node", agentCallNode);
-        const agentName = agentCallNode?.properties.connection.value;
-        if (!agentName) {
-            console.error("Agent name not found", agentCallNode);
-            return;
+        try {
+            // Fetch initial configuration data
+            agentFilePath.current = await getAgentFilePath(rpcClient);
+            aiModuleOrg.current = await getAiModuleOrg(rpcClient);
+
+            // Load available memory
+            const memoryTypes = await fetchAvailableMemory();
+            if (memoryTypes.length > 0) {
+                await loadSelectedMemory(memoryTypes);
+            }
+        } catch (error) {
+            console.error("Error initializing memory config panel", error);
+        } finally {
+            setIsLoading(false);
         }
+    };
+
+    const fetchAvailableMemory = async (): Promise<CodeData[]> => {
         try {
-            const memoryManagerSearchResponse = await rpcClient.getBIDiagramRpcClient().search({
+            const searchResponse = await rpcClient.getBIDiagramRpcClient().search({
                 filePath: agentFilePath.current,
                 queryMap: { orgName: aiModuleOrg.current },
-                searchKind: "MEMORY_MANAGER"
+                searchKind: "MEMORY"
             });
 
-            if (!memoryManagerSearchResponse?.categories?.[0]?.items) {
-                console.error("No memory managers found in search response");
+            if (!searchResponse?.categories?.[0]?.items) {
+                console.error("No memory 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;
+            const memoryTypes = searchResponse.categories[0].items.map((item: any) => item.codedata);
+            setAvailableMemory(memoryTypes);
+            return memoryTypes;
         } catch (error) {
-            console.error("Error fetching memory managers", error);
+            console.error("Error fetching memory", error);
+            return [];
         }
-        return [];
     };
 
-    const fetchSelectedAgentMemoryManager = async (memoryManagers: CodeData[]) => {
-        // get module nodes
-        const moduleNodes = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
-        if (!moduleNodes.flowModel.connections.length) {
-            console.error("No module connections found");
+    const loadSelectedMemory = async (memoryTypes: CodeData[]): Promise<void> => {
+        if (!agentNode) {
+            console.error("Agent node reference not found");
             return;
         }
 
-        moduleConnectionNodes.current = moduleNodes.flowModel.connections;
+        // Get the memory type from agent metadata
+        let currentMemoryType = (agentNode.metadata?.data as NodeMetadata)?.memory?.type as string;
 
-        // get agent name
-        const agentName = agentCallNode.properties.connection.value;
-        if (!agentName) {
-            console.error("Agent name not found in agent call node");
-            return;
+        // Remove "ai:" prefix if present
+        if (currentMemoryType?.startsWith("ai:")) {
+            currentMemoryType = currentMemoryType.substring(3);
+        }
+
+        // Find the corresponding memory code data
+        let memoryCodeData: CodeData;
+        if (currentMemoryType) {
+            memoryCodeData = memoryTypes.find(
+                (memory) => memory.object === currentMemoryType
+            );
+
+            if (!memoryCodeData) {
+                console.error("Current memory not found in available memory");
+                memoryCodeData = memoryTypes[0];
+            }
+        } else {
+            console.log("No memory associated with this agent, using first available");
+            memoryCodeData = memoryTypes[0];
         }
 
-        // get agent node
-        const agentNode = moduleConnectionNodes.current.find((node) => node.properties.variable.value === agentName);
+        await loadMemoryTemplate(memoryCodeData);
+    };
+
+    const extractMemorySizeFromAgent = (): string | null => {
         if (!agentNode) {
-            console.error("Agent node not found", agentCallNode);
-            return;
+            return null;
+        }
+        const memoryValue = agentNode.properties?.memory?.value?.toString();
+        if (memoryValue) {
+            // Match patterns like "new ai:MessageWindowChatMemory(10)" or "MessageWindowChatMemory(10)"
+            const sizeMatch = memoryValue.match(/\((\d+)\)/);
+            if (sizeMatch && sizeMatch[1]) {
+                return sizeMatch[1];
+            }
         }
+        return null;
+    };
 
-        agentNodeRef.current = agentNode;
+    const loadMemoryTemplate = async (memoryCodeData: CodeData): Promise<void> => {
+        setIsLoading(true);
+        try {
+            // Fetch the node template for the selected memory
+            const nodeTemplate = await getNodeTemplate(
+                rpcClient,
+                memoryCodeData,
+                agentFilePath.current
+            );
+
+            if (!nodeTemplate) {
+                console.error("Failed to get node template for memory");
+                return;
+            }
 
-        // get memory manager name
-        const memoryManagerName = (agentNode.properties?.memory?.value as string) || ""; // "new ai:MessageWindowChatMemory(33)"
-        if (!memoryManagerName) {
-            console.log("No memory manager associated with this agent");
-            return;
+            // Extract size from agent's memory configuration if available
+            const memorySizeFromAgent = extractMemorySizeFromAgent();
+            if (memorySizeFromAgent !== null && nodeTemplate.properties?.['size']) {
+                nodeTemplate.properties['size'].value = memorySizeFromAgent;
+            }
+
+            if (existingMemoryVariable) {
+                // Existing memory variable found - use its line range for editing/replacing
+                const existingType = existingMemoryVariable.properties.type.value.toString();
+                const isSameType = existingType.includes(memoryCodeData.object);
+
+                targetLineRange.current = existingMemoryVariable.codedata?.lineRange;
+                setMemoryNode(isSameType ? existingMemoryVariable : undefined);
+
+                nodeTemplate.codedata.lineRange = targetLineRange.current;
+                nodeTemplate.codedata.isNew = false;
+                setMemoryNodeTemplate(nodeTemplate);
+            } else {
+                // No existing memory - insert new one at end of file
+                const endOfFilePosition = await rpcClient
+                    .getBIDiagramRpcClient()
+                    .getEndOfFile({ filePath: agentFilePath.current });
+
+                targetLineRange.current = {
+                    fileName: agentFilePath.current,
+                    startLine: endOfFilePosition,
+                    endLine: endOfFilePosition
+                };
+
+                setMemoryNode(undefined);
+                setMemoryNodeTemplate(nodeTemplate);
+            }
+
+            // Update the selected memory type and remove "ai:" prefix if present
+            let memoryType = memoryCodeData.object;
+            if (memoryType?.startsWith("ai:")) {
+                memoryType = memoryType.substring(3);
+            }
+            setSelectedMemoryType(memoryType);
+        } catch (error) {
+            console.error("Error loading memory template", error);
+        } finally {
+            setIsLoading(false);
         }
+    };
 
-        // get memory manager from available ones
-        const memoryManagerCodeData = memoryManagers.find((memory) => {
-            // Extract the memory manager type from the expression like "new ai:MessageWindowChatMemory(33)"
-            const memoryType = memoryManagerName.includes(":")
-                ? memoryManagerName.split(":")[1]?.split("(")[0]?.trim()
-                : memoryManagerName.split("(")[0]?.replace("new ", "")?.trim();
-            return memory.object === memoryType;
-        });
-        if (!memoryManagerCodeData) {
-            console.error("Memory manager not found in available memory managers");
+    const handleMemoryChange = async (memoryType: string): Promise<void> => {
+        const memoryCodeData = availableMemory.find(
+            (memory) => memory.object === memoryType
+        );
+
+        if (!memoryCodeData) {
+            console.error(`Memory not found: ${memoryType}`);
             return;
         }
 
-        setSelectedMemoryManagerCodeData(memoryManagerCodeData);
+        await loadMemoryTemplate(memoryCodeData);
+    };
 
-        const selectedMemoryManagerNodeTemplate = await getNodeTemplate(
-            rpcClient,
-            memoryManagerCodeData,
-            agentFilePath.current
-        );
-        if (!selectedMemoryManagerNodeTemplate) {
-            console.error("Failed to get node template for memory manager");
+    const handleOnSave = async (updatedNode?: FlowNode): Promise<void> => {
+        if (!agentNode) {
+            console.error("Agent node not found", { agentNode, agentNodeRef });
             return;
         }
 
-        // set properties size value
-        const sizeValue = memoryManagerName.split("(")[1]?.split(")")[0]?.trim();
-        if (sizeValue) {
-            selectedMemoryManagerNodeTemplate.properties.size.value = sizeValue;
-        }
+        setIsSaving(true);
+
+        try {
+            // Save the memory configuration
+            await rpcClient.getBIDiagramRpcClient().getSourceCode({
+                filePath: agentFilePath.current,
+                flowNode: updatedNode,
+            });
 
-        // set properties variable
-        selectedMemoryManagerNodeTemplate.properties.variable.hidden = true;
+            // Update the agent node with the memory reference
+            const updatedAgentNode = cloneDeep(agentNode);
+            const filePath = await rpcClient.getVisualizerRpcClient().joinProjectPath(updatedAgentNode?.codedata?.lineRange?.fileName);
+            updatedAgentNode.properties.memory.value = updatedNode?.properties.variable.value || "";
+
+            await rpcClient.getBIDiagramRpcClient().getSourceCode({
+                filePath: filePath,
+                flowNode: updatedAgentNode,
+            });
 
-        setSelectedMemoryManager(selectedMemoryManagerNodeTemplate);
-        const memoryManagerFields = convertConfig(selectedMemoryManagerNodeTemplate.properties);
-        setSelectedMemoryManagerFields(memoryManagerFields);
+            onSave?.();
+        } catch (error) {
+            console.error("Error saving memory configuration", error);
+        } finally {
+            setIsSaving(false);
+        }
     };
 
-    // fetch selected memory manager code data - node template
-    const fetchMemoryManagerNodeTemplate = async (memoryManagerCodeData: CodeData) => {
-        setLoading(true);
-        const selectedMemoryManagerNodeTemplate = await getNodeTemplate(
-            rpcClient,
-            memoryManagerCodeData,
-            agentFilePath.current
-        );
-        if (!selectedMemoryManagerNodeTemplate) {
-            console.error("Failed to get node template for memory manager");
+
+    const handleStoreCreated = (createdNode: FlowNode) => {
+        // Extract the store reference from the created node
+        const storeReference = createdNode.properties?.store?.value as string;
+
+        if (!storeReference) {
+            console.error("No store reference found in created node");
             return;
         }
-        // set properties variable
-        selectedMemoryManagerNodeTemplate.properties.variable.hidden = true;
 
-        setSelectedMemoryManager(selectedMemoryManagerNodeTemplate);
-        const memoryManagerFields = convertConfig(selectedMemoryManagerNodeTemplate.properties);
-        setSelectedMemoryManagerFields(memoryManagerFields);
-        setLoading(false);
+        // Update the memory template with the new store reference
+        if (memoryNodeTemplate) {
+            const updatedTemplate = cloneDeep(memoryNodeTemplate);
+            const storeProperty = (updatedTemplate.properties as any)['store'];
+            if (storeProperty) {
+                storeProperty.value = storeReference;
+            }
+            setMemoryNodeTemplate(updatedTemplate);
+
+            // If there's an existing memory node, update it too
+            if (memoryNode) {
+                const updatedNode = cloneDeep(memoryNode);
+                const nodeStoreProperty = (updatedNode.properties as any)['store'];
+                if (nodeStoreProperty) {
+                    nodeStoreProperty.value = storeReference;
+                }
+                setMemoryNode(updatedNode);
+            }
+        }
+
+        // Close the overlay
+        closeTopOverlay();
     };
 
-    const handleOnSave = async (data: FormField[], rawData: FormValues) => {
-        console.log(">>> save value", { data, rawData });
-        setSavingForm(true);
-        // update agent node memory manager
-        if (!agentNodeRef.current) {
-            console.error("Agent node not found", { agentCallNode, agentNodeRef });
+    const handleSelectStore = async (nodeId: string, metadata?: any) => {
+        if (!currentOverlayId.current) {
             return;
         }
-        const updatedAgentNode = cloneDeep(agentNodeRef.current);
-        // HACK: This is a hack to add the memory manager field to the agent node
-        // TODO: Remove this once the new apis are available
-        if (!updatedAgentNode.properties.memory) {
-            updatedAgentNode.properties.memory = {
-                metadata: {
-                    label: "Memory Manager",
-                    description: "",
-                },
-                valueType: "EXPRESSION",
-                valueTypeConstraint: "ai:MemoryManager|()",
-                value: "",
-                placeholder: "()",
-                optional: true,
-                editable: true,
-                advanced: true,
-                hidden: false,
-                codedata: {
-                    node: "INCLUDED_FIELD",
-                    symbol: "memory",
-                },
-                typeMembers: [
-                    {
-                        type: "MemoryManager",
-                        packageInfo: "ballerinax:ai:1.0.1",
-                        kind: "OBJECT_TYPE",
-                        selected: false,
-                    },
-                    {
-                        type: "()",
-                        packageInfo: "",
-                        kind: "BASIC_TYPE",
-                        selected: false,
-                    },
-                ],
-            };
+
+        try {
+            const { flowNode } = await getNodeTemplateForConnection(
+                nodeId,
+                metadata,
+                targetLineRange.current,
+                agentFilePath.current,
+                rpcClient
+            );
+
+            // Close the selection overlay and open the creation overlay
+            closeTopOverlay();
+
+            // Open the creation overlay
+            currentOverlayId.current = openOverlay({
+                title: "Create Memory Store",
+                content: (
+                    <ConnectionCreator
+                        connectionKind="MEMORY_STORE"
+                        selectedNode={memoryNode || memoryNodeTemplate}
+                        nodeFormTemplate={flowNode}
+                        onSave={handleStoreCreated}
+                    />
+                ),
+                onBack: handleBackToSelection,
+            });
+        } catch (error) {
+            console.error("Error selecting memory store:", error);
         }
+    };
 
-        const type = rawData.type || "ai:MessageWindowChatMemory";
-        const size = rawData.size || 10;
-        updatedAgentNode.properties.memory.value = `new ${type}(${size})`;
-        console.log(">>> updated agent node", updatedAgentNode);
-        const updatedAgentNodeResponse = await rpcClient.getBIDiagramRpcClient().getSourceCode({
-            filePath: agentFilePath.current,
-            flowNode: updatedAgentNode,
-        });
-        console.log(">>> updated agent node response", updatedAgentNodeResponse);
-        onSave?.();
-        setSavingForm(false);
+    const handleBackToSelection = () => {
+        // Close the current overlay (Create Memory Store) before opening the previous one
+        closeTopOverlay();
+        // Then open the selection overlay
+        handleOpenStoreSelection();
     };
 
-    const memoryManagerDropdownPlaceholder = "Select a memory manager...";
+    const handleOpenStoreSelection = () => {
+        currentOverlayId.current = openOverlay({
+            title: "Select Memory Store",
+            content: (
+                <ConnectionSelectionList
+                    connectionKind="MEMORY_STORE"
+                    onSelect={handleSelectStore}
+                />
+            ),
+            onBack: closeTopOverlay,
+        });
+    };
 
     return (
-        <Container>
-            {memoryManagersCodeData?.length > 0 && (
-                <Row>
-                    <Dropdown
-                        isRequired
-                        errorMsg=""
-                        id="agent-memory-dropdown"
-                        items={[
-                            ...memoryManagersCodeData.map((memory) => ({
+        <>
+            {availableMemory.length > 0 && (
+                <Container>
+                    <Row>
+                        <Dropdown
+                            isRequired
+                            errorMsg=""
+                            id="agent-memory-dropdown"
+                            items={availableMemory.map((memory) => ({
                                 value: memory.object,
-                                content: memory.object,
-                            })),
-                        ]}
-                        label="Select Memory Manager"
-                        description={"Available Memory Managers"}
-                        onValueChange={(value) => {
-                            if (value === memoryManagerDropdownPlaceholder) {
-                                return; // Skip the init option
-                            }
-                            const selectedMemoryManagerCodeData = memoryManagersCodeData.find(
-                                (memory) => memory.object === value
-                            );
-                            setSelectedMemoryManagerCodeData(selectedMemoryManagerCodeData);
-                            fetchMemoryManagerNodeTemplate(selectedMemoryManagerCodeData);
-                        }}
-                        value={
-                            selectedMemoryManagerCodeData?.object ||
-                            ((agentCallNode?.metadata?.data as NodeMetadata)?.memory?.type as string) ||
-                            memoryManagerDropdownPlaceholder
-                        }
-                        containerSx={{ width: "100%" }}
-                    />
-                </Row>
+                                content: memory.object.replace(/([A-Z])/g, ' $1').trim(), // Convert camel case to words
+                            }))}
+                            label="Select Memory"
+                            description="Available Memory"
+                            onValueChange={handleMemoryChange}
+                            value={selectedMemoryType}
+                            containerSx={{ width: "100%" }}
+                        />
+                    </Row>
+                    {selectedMemoryType === "MessageWindowChatMemory" && availableMemory.length > 1 && (
+                        <WarningMessage>
+                            <Codicon name="warning" />
+                            <div>
+                                <strong>Note:</strong> Message Window Chat Memory is deprecated and may
+                                not be supported in future versions. Please use <strong>Short Term Memory</strong> instead.
+                            </div>
+                        </WarningMessage>
+                    )}
+                </Container>
             )}
-            {loading && (
+            {isLoading && (
                 <LoaderContainer>
                     <RelativeLoader />
                 </LoaderContainer>
             )}
-            {!loading && selectedMemoryManagerFields?.length > 0 && agentNodeRef.current?.codedata?.lineRange && (
-                <ConfigForm
+            {!isLoading && memoryNodeTemplate && targetLineRange.current && (
+                <FormGenerator
                     fileName={agentFilePath.current}
-                    formFields={selectedMemoryManagerFields}
-                    targetLineRange={agentNodeRef.current.codedata.lineRange}
+                    node={memoryNode || memoryNodeTemplate}
+                    nodeFormTemplate={memoryNodeTemplate}
+                    targetLineRange={targetLineRange.current}
                     onSubmit={handleOnSave}
-                    disableSaveButton={savingForm}
-                    isSaving={savingForm}
+                    disableSaveButton={isSaving}
+                    submitText={isSaving ? "Saving..." : "Save"}
+                    showProgressIndicator={isSaving}
+                    fieldOverrides={{
+                        store: {
+                            type: "ACTION_EXPRESSION",
+                            actionCallback: handleOpenStoreSelection,
+                            defaultValue: "In-Memory Short Term Memory Store",
+                            actionLabel: (
+                                <>
+                                    <Codicon name="add" />
+                                    Create New Memory Store
+                                </>
+                            ),
+                        },
+                        overflowConfiguration: {
+                            defaultValue: "Overflow Trim Configuration"
+                        },
+                        type: {
+                            hidden: true
+                        }
+                    }}
                 />
             )}
-        </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
deleted file mode 100644
index 64ad91ab210..00000000000
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/NewAgent.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.
- */
-
-import { useEffect, useRef, useState } from "react";
-import styled from "@emotion/styled";
-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 ConfigForm from "./ConfigForm";
-import { cloneDeep } from "lodash";
-import { RelativeLoader } from "../../../components/RelativeLoader";
-import { getAiModuleOrg, getNodeTemplate } from "./utils";
-import { AI, AI_COMPONENT_PROGRESS_MESSAGE, AI_COMPONENT_PROGRESS_MESSAGE_TIMEOUT, BALLERINA, GET_DEFAULT_MODEL_PROVIDER, LOADING_MESSAGE } from "../../../constants";
-import { LoaderContainer } from "../../../components/RelativeLoader/styles";
-
-const Container = styled.div`
-    padding: 16px;
-    height: 100%;
-`;
-
-interface NewAgentProps {
-    agentCallNode: FlowNode;
-    fileName: string; // file name of the agent call node
-    lineRange: LineRange;
-    onSave?: () => void;
-}
-
-export function NewAgent(props: NewAgentProps): JSX.Element {
-    const { agentCallNode, fileName, lineRange, onSave } = props;
-    console.log(">>> NewAgent props", props);
-    const { rpcClient } = useRpcContext();
-
-    const [agentNode, setAgentNode] = useState<FlowNode | null>(null);
-    const [formFields, setFormFields] = useState<FormField[]>([]);
-
-    const [loading, setLoading] = useState<boolean>(false);
-    const [savingForm, setSavingForm] = useState<boolean>(false);
-    const [progressMessage, setProgressMessage] = useState<string>(LOADING_MESSAGE);
-
-    const projectPath = useRef<string>("");
-    const aiModuleOrg = useRef<string>("");
-    const modelNodes = useRef<AvailableNode[]>([]);
-    const progressTimeoutRef = useRef<number | null>(null);
-
-    useEffect(() => {
-        initPanel();
-        return () => {
-            if (progressTimeoutRef.current) {
-                clearTimeout(progressTimeoutRef.current);
-                progressTimeoutRef.current = null;
-            }
-        };
-    }, []);
-
-    const initPanel = async () => {
-        setLoading(true);
-        // get project path
-        const filePath = await rpcClient.getVisualizerLocation();
-        projectPath.current = filePath.projectUri;
-        // get agent org
-        aiModuleOrg.current = await getAiModuleOrg(rpcClient);
-        // fetch agent node
-        await fetchAgentNode();
-        setLoading(false);
-    };
-
-    useEffect(() => {
-        if (agentNode) {
-            configureFormFields();
-        }
-    }, [agentNode]);
-
-    const fetchAgentNode = async () => {
-        // 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 = (agentSearchResponse.categories[0].items[0] as AvailableNode).codedata;
-        // get agent node template
-        const agentNodeTemplate = await getNodeTemplate(rpcClient, agentCodeData, projectPath.current);
-        setAgentNode(agentNodeTemplate);
-
-        // hack: fetching from Central to build module dependency map in LS may take time
-        progressTimeoutRef.current = setTimeout(() => {
-            setProgressMessage(AI_COMPONENT_PROGRESS_MESSAGE);
-            progressTimeoutRef.current = null;
-        }, AI_COMPONENT_PROGRESS_MESSAGE_TIMEOUT);
-
-        // 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);
-
-        modelNodes.current = modelProviderSearchResponse.categories[0].items as AvailableNode[];
-    };
-
-    const configureFormFields = () => {
-        if (!(agentNode && agentCallNode)) {
-            return;
-        }
-        // overwrite the agent call node properties
-        agentCallNode.codedata.org = aiModuleOrg.current;
-
-        const agentCallFormFields = convertConfig(agentCallNode.properties);
-        const systemPromptProperty = agentNode.properties.systemPrompt;
-        if (systemPromptProperty) {
-            let roleValue = "";
-            let instructionValue = "";
-            if (systemPromptProperty.value) {
-                const valueStr = systemPromptProperty.value.toString();
-                const roleMatch = valueStr.match(/role:\s*"([^"]*)"/);
-                if (roleMatch && roleMatch[1]) {
-                    roleValue = roleMatch[1];
-                }
-
-                const instructionsMatch = valueStr.match(/instructions:\s*string\s*`([^`]*)`/);
-                if (instructionsMatch && instructionsMatch[1]) {
-                    instructionValue = instructionsMatch[1];
-                }
-            }
-
-            const customFields: FormField[] = [
-                {
-                    key: "role",
-                    label: "Role",
-                    type: "STRING",
-                    optional: true,
-                    advanced: false,
-                    placeholder: "e.g. Customer Support Assistant",
-                    editable: true,
-                    enabled: true,
-                    documentation: "The role of the AI agent",
-                    valueType: "STRING",
-                    value: roleValue,
-                    valueTypeConstraint: "string",
-                    diagnostics: [],
-                    metadata: {
-                        label: "Role",
-                        description: "The role of the AI agent",
-                    },
-                },
-                {
-                    key: "instruction",
-                    label: "Instructions",
-                    type: "TEXTAREA",
-                    optional: false,
-                    advanced: false,
-                    placeholder: "Detailed instructions for the agent...",
-                    editable: true,
-                    enabled: true,
-                    documentation: "Detailed instructions for the agent",
-                    valueType: "STRING",
-                    value: instructionValue,
-                    valueTypeConstraint: "string",
-                    diagnostics: [],
-                    metadata: {
-                        label: "Instructions",
-                        description: "Detailed instructions for the agent",
-                    },
-                },
-            ];
-            const queryFieldIndex = agentCallFormFields.findIndex((field) => field.key === "query");
-            if (queryFieldIndex !== -1) {
-                agentCallFormFields.splice(queryFieldIndex, 0, ...customFields);
-            } else {
-                agentCallFormFields.push(...customFields);
-            }
-        }
-
-        // add verbose, maxIter and agentType fields from agent node
-        const otherAgentProperties: NodeProperties = {};
-        if (agentNode.properties.verbose) {
-            otherAgentProperties.verbose = cloneDeep(agentNode.properties.verbose);
-        }
-        if (agentNode.properties.maxIter) {
-            otherAgentProperties.maxIter = cloneDeep(agentNode.properties.maxIter);
-        }
-        if (agentNode.properties.agentType) {
-            otherAgentProperties.agentType = cloneDeep(agentNode.properties.agentType);
-        }
-        const otherAgentFormFields = convertConfig(otherAgentProperties);
-        agentCallFormFields.push(...otherAgentFormFields);
-
-        // let's hide connection field
-        const connectionField = agentCallFormFields.find((field) => field.key === "connection");
-        if (connectionField) {
-            connectionField.enabled = false;
-        }
-        setFormFields(agentCallFormFields);
-    };
-
-    const handleOnSave = async (data: FormField[], rawData: FormValues) => {
-        console.log(">>> save value", { data, rawData });
-        setSavingForm(true);
-
-        // get openai model
-        const defaultModelNode = modelNodes.current.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: projectPath.current, flowNode: defaultModelNodeTemplate });
-        console.log(">>> modelResponse getSourceCode", { modelResponse });
-        const modelVarName = defaultModelNodeTemplate.properties.variable.value as string;
-
-        // save the agent node
-        const updatedAgentNode = cloneDeep(agentNode);
-        const roleValue = (rawData["role"] || "").replace(/"/g, '\\"');
-        const instructionValue = (rawData["instruction"] || "").replace(/"/g, '\\"');
-        const systemPromptValue = `{role: "${roleValue}", instructions: string \`${instructionValue}\`}`;
-        updatedAgentNode.properties.systemPrompt.value = systemPromptValue;
-        updatedAgentNode.properties.model.value = modelVarName;
-        updatedAgentNode.properties.tools.value = [];
-        updatedAgentNode.properties.verbose.value = rawData["verbose"];
-        updatedAgentNode.properties.maxIter.value = rawData["maxIter"];
-        if ("agentType" in rawData) {
-            updatedAgentNode.properties.agentType.value = rawData["agentType"];
-        }
-
-        const agentResponse = await rpcClient
-            .getBIDiagramRpcClient()
-            .getSourceCode({ filePath: projectPath.current, flowNode: updatedAgentNode });
-        console.log(">>> agentResponse getSourceCode", { agentResponse });
-        const agentVarName = agentNode.properties.variable.value as string;
-
-        // update the agent call node
-        const updatedAgentCallNode = cloneDeep(agentCallNode);
-        updatedAgentCallNode.properties.variable.value = rawData["variable"];
-        updatedAgentCallNode.properties.query.value = rawData["query"];
-        updatedAgentCallNode.properties.sessionId.value = rawData["sessionId"];
-        updatedAgentCallNode.properties.connection.value = agentVarName;
-        updatedAgentCallNode.codedata.parentSymbol = agentVarName;
-        // HACK: add line range
-        updatedAgentCallNode.codedata.lineRange = {
-            fileName: fileName,
-            startLine: lineRange.startLine,
-            endLine: lineRange.endLine,
-        };
-        console.log(">>> request getSourceCode", { filePath: fileName, flowNode: updatedAgentCallNode });
-        const agentCallResponse = await rpcClient
-            .getBIDiagramRpcClient()
-            .getSourceCode({ filePath: fileName, flowNode: updatedAgentCallNode });
-        console.log(">>> response getSourceCode with template ", { agentCallResponse });
-
-        // If the selected model is the default WSO2 model provider, configure it
-        if (defaultModelNode?.codedata?.symbol === GET_DEFAULT_MODEL_PROVIDER) {
-            await rpcClient.getAIAgentRpcClient().configureDefaultModelProvider();
-        }
-
-        onSave?.();
-        setSavingForm(false);
-    };
-
-    return (
-        <Container>
-            {loading && (
-                <LoaderContainer>
-                    <RelativeLoader message={progressMessage} />
-                </LoaderContainer>
-            )}
-            {!loading && (
-                <ConfigForm
-                    fileName={fileName}
-                    isSaving={savingForm}
-                    formFields={formFields}
-                    targetLineRange={{
-                        fileName: fileName,
-                        ...lineRange,
-                    }}
-                    onSubmit={handleOnSave}
-                    disableSaveButton={savingForm}
-                />
-            )}
-        </Container>
-    );
-}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/NewTool.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/NewTool.tsx
index 4e34ed4c025..cfd273fe4f6 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/NewTool.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/NewTool.tsx
@@ -70,6 +70,7 @@ export function NewTool(props: NewToolProps): JSX.Element {
 
     const fetchAgentNode = async () => {
         const agentNode = await findAgentNodeFromAgentCallNode(agentCallNode, rpcClient);
+        console.log(">>> agent node found", { agentNode });
         setAgentNode(agentNode);
     };
 
@@ -82,10 +83,11 @@ export function NewTool(props: NewToolProps): JSX.Element {
         }
         try {
             const updatedAgentNode = await addToolToAgentNode(agentNode, data.toolName);
+            const filePath = await rpcClient.getVisualizerRpcClient().joinProjectPath(updatedAgentNode.codedata.lineRange.fileName);
             // generate the source code
             const agentResponse = await rpcClient
                 .getBIDiagramRpcClient()
-                .getSourceCode({ filePath: agentFilePath.current, flowNode: updatedAgentNode });
+                .getSourceCode({ filePath: filePath, flowNode: updatedAgentNode });
             console.log(">>> response getSourceCode with template ", { agentResponse });
 
             // wait for 2 seconds
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/formUtils.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/formUtils.ts
index 9ab772946da..02da2f0289c 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/formUtils.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/formUtils.ts
@@ -223,3 +223,7 @@ export function createToolParameters(): ToolParameters {
         hidden: false
     };
 }
+
+export const cleanServerUrl = (url: string): string => {
+    return url.replace(/^"|"$/g, '').trim();
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/iconUtils.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/iconUtils.tsx
new file mode 100644
index 00000000000..09a05ae9bc6
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/iconUtils.tsx
@@ -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 { Icon } from "@wso2/ui-toolkit";
+import { ReactElement } from "react";
+
+
+export enum HelperPaneIconType {
+    VARIABLE = "variable",
+    FUNCTION = "function",
+    INPUT = "input",
+    CONFIGURABLE = "configurable",
+    VALUE = "value",
+}
+
+const ICON_NAME_MAP: Record<HelperPaneIconType, string> = {
+    [HelperPaneIconType.VARIABLE]: "bi-variable",
+    [HelperPaneIconType.FUNCTION]: "bi-function",
+    [HelperPaneIconType.INPUT]: "bi-input",
+    [HelperPaneIconType.CONFIGURABLE]: "bi-settings",
+    [HelperPaneIconType.VALUE]: "bi-code",
+};
+
+export const getHelperPaneIcon = (
+    iconType: HelperPaneIconType,
+    fontSize: string = "16px"
+): ReactElement => {
+    const iconName = ICON_NAME_MAP[iconType];
+    return <Icon name={iconName} sx={{ fontSize }} />;
+};
+
+export const getIconByKind = (
+    kind: string,
+    fontSize: string = "16px"
+): ReactElement => {
+    // Map kind strings to HelperPaneIconType
+    const kindMap: Record<string, HelperPaneIconType> = {
+        "variable": HelperPaneIconType.VARIABLE,
+        "field": HelperPaneIconType.VARIABLE,
+        "function": HelperPaneIconType.FUNCTION,
+        "method": HelperPaneIconType.FUNCTION,
+        "constant": HelperPaneIconType.CONFIGURABLE,
+        "value": HelperPaneIconType.VALUE,
+    };
+
+    const iconType = kindMap[kind.toLowerCase()] || HelperPaneIconType.VALUE;
+    return getHelperPaneIcon(iconType, fontSize);
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/VariableTypeIndicator.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/styles.ts
similarity index 57%
rename from workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/VariableTypeIndicator.tsx
rename to workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/styles.ts
index 0fce643d82d..49ddb9a7fd3 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/VariableTypeIndicator.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/styles.ts
@@ -17,23 +17,18 @@
  */
 
 import styled from "@emotion/styled";
-import { VSCodeTag } from "@vscode/webview-ui-toolkit/react";
-import { ThemeColors } from "@wso2/ui-toolkit";
 
-export const VariableTypeIndicator = styled(VSCodeTag)`
-    ::part(control) {
-        text-transform: none;
-        font-size: 10px;
-        height: 11px;
-        max-width: 60px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        padding: 0px 2px 5px 2px;
-    }
+export const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 100%;
+    box-sizing: border-box;
+`;
 
-    &:hover::part(control) {
-        background-color: ${ThemeColors.PRIMARY};
-        cursor: pointer;
-    }
+export const LoaderContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
 `;
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 ffd17f11bd1..5ee298d9ee3 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/utils.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/utils.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { CodeData, FlowNode, LinePosition, NodeKind } from "@wso2/ballerina-core";
+import { CodeData, ConfigVariable, FlowNode, LinePosition, LineRange, NodeKind, SearchNodesQueryParams } from "@wso2/ballerina-core";
 import { BallerinaRpcClient } from "@wso2/ballerina-rpc-client";
 import { cloneDeep } from "lodash";
 import { URI, Utils } from "vscode-uri";
@@ -70,18 +70,29 @@ export const getMainFilePath = async (rpcClient: BallerinaRpcClient) => {
 
 export const findFlowNodeByModuleVarName = async (variableName: string, rpcClient: BallerinaRpcClient) => {
     try {
-        // Get all module nodes
-        const moduleNodes = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
+        const sanitizedVarName = variableName.trim().replace(/\n/g, "");
+
+        // Get connections either from parameter or by fetching module nodes
+        const nodeList = (await rpcClient.getBIDiagramRpcClient().getModuleNodes()).flowModel;
+
         // Find the node with matching variable name
-        const flowNode = moduleNodes.flowModel.connections.find((node) => {
+        let flowNode = nodeList?.connections.find((node) => {
             const value = node.properties?.variable?.value;
-            const sanitizedVarName = variableName.trim().replace(/\n/g, "");
             return typeof value === "string" && value === sanitizedVarName;
         });
+
+        // If not found in connections, search in variables
+        if (!flowNode) {
+            flowNode = nodeList?.variables.find((node) => {
+                const value = node.properties?.variable?.value;
+                return typeof value === "string" && value === sanitizedVarName;
+            });
+        }
         if (!flowNode) {
             console.error(`Flow node with variable name '${variableName}' not found`);
             return null;
         }
+
         return flowNode;
     } catch (error) {
         console.error("Error finding flow node by variable name:", error);
@@ -89,18 +100,75 @@ export const findFlowNodeByModuleVarName = async (variableName: string, rpcClien
     }
 };
 
+export const findFlowNode = async (
+    rpcClient: BallerinaRpcClient,
+    filePath: string,
+    position?: LinePosition,
+    queryMap?: SearchNodesQueryParams
+) => {
+    try {
+        const searchResult = await rpcClient.getBIDiagramRpcClient().searchNodes({
+            filePath,
+            position,
+            queryMap
+        });
+
+        if (!searchResult?.output?.length) {
+            console.error("Flow node not found");
+            return null;
+        }
+
+        return searchResult.output;
+    } catch (error) {
+        console.error("Error finding flow node:", error);
+        return null;
+    }
+};
+
 export const findAgentNodeFromAgentCallNode = async (agentCallNode: FlowNode, rpcClient: BallerinaRpcClient) => {
-    if (!agentCallNode || agentCallNode.codedata?.node !== "AGENT_CALL") return null;
+    // Validate input node type
+    if (!agentCallNode || agentCallNode.codedata?.node !== "AGENT_CALL") {
+        return null;
+    }
 
-    // get agent name
-    const connectionValue = agentCallNode.properties?.connection?.value;
-    if (typeof connectionValue !== "string") {
+    // Extract and validate agent name from connection property
+    let agentName = agentCallNode.properties?.connection?.value;
+    if (typeof agentName !== "string") {
         console.error("Agent connection value is not a string");
         return null;
     }
 
-    // use the new function to find the node
-    return await findFlowNodeByModuleVarName(connectionValue, rpcClient);
+    // Resolve file path from agent call node location
+    const fileName = agentCallNode.codedata?.lineRange?.fileName;
+    if (!fileName) {
+        console.error("File name not found in agent call node");
+        return null;
+    }
+
+    const filePath = await rpcClient.getVisualizerRpcClient().joinProjectPath(fileName);
+
+    // Extract line position for search context
+    const startLine = agentCallNode.codedata?.lineRange?.startLine;
+    const linePosition: LinePosition | undefined = startLine
+        ? {
+            line: startLine.line,
+            offset: startLine.offset
+        }
+        : undefined;
+
+    // Search for the agent node by name
+    const queryMap: SearchNodesQueryParams = {
+        kind: "AGENT",
+        exactMatch: agentName
+    };
+
+    const nodes = await findFlowNode(rpcClient, filePath, linePosition, queryMap);
+    console.log(">>> agent nodes found", { nodes });
+    if (nodes && nodes.length > 0) {
+        return nodes[0];
+    }
+
+    return;
 };
 
 export const removeToolFromAgentNode = async (agentNode: FlowNode, toolName: string) => {
@@ -138,6 +206,9 @@ export const addToolToAgentNode = async (agentNode: FlowNode, toolName: string)
     let toolsValue = updatedAgentNode.properties.tools.value;
     // remove new lines and normalize whitespace from the tools value
     // toolsValue = toolsValue.toString().replace(/\s+/g, "");
+    if (toolsValue == undefined) {
+        toolsValue = `[]`;
+    }
     if (typeof toolsValue === "string") {
         const toolsArray = parseToolsString(toolsValue);
         if (toolsArray.length > 0) {
@@ -345,39 +416,61 @@ export const removeMcpServerFromAgentNode = (
 // remove agent node, model node when removing ag
 export const removeAgentNode = async (agentCallNode: FlowNode, rpcClient: BallerinaRpcClient): Promise<boolean> => {
     if (!agentCallNode || agentCallNode.codedata?.node !== "AGENT_CALL") return false;
-    // get module nodes
-    const moduleNodes = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
-    // get agent name
-    const agentName = agentCallNode.properties.connection.value;
     // get agent node
-    const agentNode = moduleNodes.flowModel.connections.find((node) => node.properties.variable.value === agentName);
+    const agentNode = await findAgentNodeFromAgentCallNode(agentCallNode, rpcClient);
     console.log(">>> agent node", agentNode);
     if (!agentNode) {
         console.error("Agent node not found", agentCallNode);
         return false;
     }
+
+    // get file path
+    const agentFileName = agentNode.codedata.lineRange.fileName;
+    const agentFilePath = await rpcClient.getVisualizerRpcClient().joinProjectPath(agentFileName);
+
+    // delete the agent node
+    await rpcClient.getBIDiagramRpcClient().deleteFlowNode({
+        filePath: agentFilePath,
+        flowNode: agentNode,
+    });
+
     // get model name
     const modelName = agentNode?.properties.model.value;
     console.log(">>> model name", modelName);
+
+    if (typeof modelName !== "string") {
+        console.error("Model name is not a string");
+        return false;
+    }
+
     // get model node
-    const modelNode = moduleNodes.flowModel.connections.find((node) => node.properties.variable.value === modelName);
+    const startLine = agentNode.codedata?.lineRange?.startLine;
+    const linePosition: LinePosition | undefined = startLine
+        ? {
+            line: startLine.line,
+            offset: startLine.offset
+        }
+        : undefined;
+
+    const queryMap: SearchNodesQueryParams = {
+        kind: "MODEL_PROVIDER",
+        exactMatch: modelName
+    };
+    const modelNodes = await findFlowNode(rpcClient, agentFilePath, linePosition, queryMap);
+    const modelNode = modelNodes && modelNodes.length > 0 ? modelNodes[0] : null;
     console.log(">>> model node", modelNode);
     if (!modelNode) {
         console.error("Model node not found", agentCallNode);
         return false;
     }
+
     // get file path
-    const projectPath = await rpcClient.getVisualizerLocation();
-    const agentFileName = agentNode.codedata.lineRange.fileName;
-    const filePath = await rpcClient.getVisualizerRpcClient().joinProjectPath(agentFileName);
-    // delete the agent node
-    await rpcClient.getBIDiagramRpcClient().deleteFlowNode({
-        filePath: filePath,
-        flowNode: agentNode,
-    });
+    const modelFileName = modelNode.codedata?.lineRange?.fileName;
+    const modelFilePath = await rpcClient.getVisualizerRpcClient().joinProjectPath(modelFileName);
+
     // delete the model node
     await rpcClient.getBIDiagramRpcClient().deleteFlowNode({
-        filePath: filePath,
+        filePath: modelFilePath,
         flowNode: modelNode,
     });
     return true;
@@ -392,17 +485,270 @@ export const updateFlowNodePropertyValuesWithKeys = (flowNode: FlowNode) => {
     }
 };
 
-const parseToolsString = (toolsStr: string): string[] => {
+export const parseToolsString = (toolsStr: string, removeQuotes: boolean = false): string[] => {
     // Remove brackets and split by comma
     const trimmed = toolsStr.trim();
     if (!trimmed.startsWith("[") || !trimmed.endsWith("]")) {
         return [];
     }
-    const inner = trimmed.substring(1, trimmed.length - 1);
+    const inner = trimmed.substring(1, trimmed.length - 1).trim();
     // Handle empty array case
-    if (!inner.trim()) {
+    if (!inner) {
         return [];
     }
-    // Split by comma and trim each element
-    return inner.split(",").map((tool) => tool.trim());
+    // Split by comma and process each element
+    return inner.split(",").map((tool) => {
+        const trimmedTool = tool.trim();
+        // Remove surrounding single or double quotes if requested
+        if (
+            removeQuotes &&
+            ((trimmedTool.startsWith('"') && trimmedTool.endsWith('"')) ||
+                (trimmedTool.startsWith("'") && trimmedTool.endsWith("'")))
+        ) {
+            return trimmedTool.substring(1, trimmedTool.length - 1);
+        }
+        return trimmedTool;
+    });
+};
+
+/**
+ * Extracts access token from auth value string.
+ * Expected format: {token: "..."}
+ */
+export const extractAccessToken = (authValue: string): string => {
+    if (!authValue) return "";
+
+    try {
+        const tokenMatch = authValue.match(/token:\s*"([^"]*)"/);
+        return tokenMatch?.[1] ?? "";
+    } catch (error) {
+        console.error("Failed to parse auth token:", error);
+        return "";
+    }
+};
+
+/**
+ * Gets the end of file line range for a given file.
+ * Returns a LineRange object pointing to the end of the file.
+ */
+export const getEndOfFileLineRange = async (
+    fileName: string,
+    rpcClient: BallerinaRpcClient
+): Promise<LineRange> => {
+    try {
+        // Get the full file path by joining with project path
+        const filePath = await rpcClient.getVisualizerRpcClient().joinProjectPath(fileName);
+
+        // Get the end of file position using the BIDiagram RPC client
+        const endPosition = await rpcClient.getBIDiagramRpcClient().getEndOfFile({
+            filePath: filePath
+        });
+
+        // Return a LineRange object with both start and end at the file's end position
+        return {
+            fileName: fileName,
+            startLine: endPosition,
+            endLine: endPosition
+        };
+    } catch (error) {
+        console.error(`Error getting end of file line range for ${fileName}:`, error);
+        // Return a default LineRange at position 0,0 if there's an error
+        return {
+            fileName: fileName,
+            startLine: { line: 0, offset: 0 },
+            endLine: { line: 0, offset: 0 }
+        };
+    }
+};
+
+/**
+ * Checks if a value is a string literal (enclosed in double quotes).
+ */
+export const isStringLiteral = (value: string): boolean => {
+    const trimmed = value.trim();
+    return trimmed.startsWith('"') && trimmed.endsWith('"');
+};
+
+/**
+ * Removes enclosing double quotes from a string literal.
+ */
+export const removeQuotes = (value: string): string => {
+    const trimmed = value.trim();
+    if (isStringLiteral(trimmed)) {
+        return trimmed.substring(1, trimmed.length - 1);
+    }
+    return trimmed;
+};
+
+/**
+ * Finds a variable value in module variables.
+ */
+export const findValueInModuleVariables = (
+    variableName: string,
+    moduleVariables: FlowNode[]
+): string | null => {
+    if (!moduleVariables || !Array.isArray(moduleVariables)) {
+        return null;
+    }
+
+    const variable = moduleVariables.find(
+        (varNode) => varNode.properties?.variable?.value === variableName
+    );
+
+    if (variable?.properties?.expression?.value && !variable?.codedata?.sourceCode?.includes("configurable")) {
+        return variable.properties.expression.value as string;
+    }
+
+    return null;
+};
+
+type ConfigVariablesState = {
+    [category: string]: {
+        [module: string]: ConfigVariable[];
+    };
+};
+
+/**
+ * Finds a variable value in configurable variables using the API.
+ */
+export const findValueInConfigVariables = async (
+    variableName: string,
+    rpcClient: BallerinaRpcClient,
+    projectPathUri: string
+): Promise<string | null> => {
+    try {
+        const response = await rpcClient
+            .getBIDiagramRpcClient()
+            .getConfigVariablesV2({
+                includeLibraries: false,
+                projectPath: projectPathUri
+            });
+
+        if (!response?.configVariables) {
+            return null;
+        }
+
+        const configVars = (response as any).configVariables as ConfigVariablesState;
+
+        for (const category in configVars) {
+            for (const module in configVars[category]) {
+                const variable = configVars[category][module].find(
+                    (v: ConfigVariable) => v.properties?.variable?.value === variableName
+                );
+                if (variable) {
+                    // Return the value from configValue or defaultValue
+                    const configValue = variable.properties?.configValue?.value as string;
+                    const defaultValue = variable.properties?.defaultValue?.value as string;
+                    return configValue || defaultValue || null;
+                }
+            }
+        }
+
+        return null;
+    } catch (error) {
+        console.error(`Error fetching config variables for ${variableName}:`, error);
+        return null;
+    }
+};
+
+export const isUrl = (value: string): boolean => {
+    const trimmed = value.trim();
+    try {
+        // Handle localhost without protocol
+        if (trimmed.startsWith('localhost:')) {
+            new URL('http://' + trimmed);
+            return true;
+        }
+        new URL(trimmed);
+        return true;
+    } catch {
+        return false;
+    }
+};
+
+export const resolveVariableValue = async (
+    value: string,
+    moduleVariables: FlowNode[],
+    rpcClient?: BallerinaRpcClient,
+    projectPathUri?: string
+): Promise<string> => {
+    if (!value) {
+        return "";
+    }
+
+    const trimmed = value.trim();
+
+    // String literal - remove quotes
+    if (isStringLiteral(trimmed)) {
+        return removeQuotes(trimmed);
+    }
+
+    // URL - return as-is to skip variable lookups
+    if (isUrl(trimmed)) {
+        return trimmed;
+    }
+
+    // Check module variables
+    const moduleValue = findValueInModuleVariables(trimmed, moduleVariables);
+    if (moduleValue) {
+        return removeQuotes(moduleValue);
+    }
+
+    // Check config variables
+    if (rpcClient && projectPathUri) {
+        const configValue = await findValueInConfigVariables(trimmed, rpcClient, projectPathUri);
+        if (configValue) {
+            return removeQuotes(configValue);
+        }
+    }
+
+    // Treat as literal value
+    return trimmed;
+};
+
+/**
+ * Extracts variable names from an auth config string and resolves them.
+ * Expected format: {token: "value"} or {token: variableName}
+ */
+export const resolveAuthConfig = async (
+    authValue: string,
+    moduleVariables: FlowNode[],
+    rpcClient?: BallerinaRpcClient,
+    projectPathUri?: string
+): Promise<string> => {
+    if (!authValue) {
+        return "";
+    }
+
+    let resolvedAuth = authValue;
+
+    // Find all variable references in the auth config
+    // Matches patterns like: token: variableName (without quotes)
+    const variablePattern = /(\w+):\s*([^",}\s]+)/g;
+    const matches = [...authValue.matchAll(variablePattern)];
+
+    for (const match of matches) {
+        const [fullMatch, key, variableOrValue] = match;
+
+        // Skip if it's already a quoted string
+        if (variableOrValue.startsWith('"') || variableOrValue.startsWith("'")) {
+            continue;
+        }
+
+        // Resolve the variable
+        const resolvedValue = await resolveVariableValue(
+            variableOrValue,
+            moduleVariables,
+            rpcClient,
+            projectPathUri
+        );
+
+        // Replace in the auth string with quoted value
+        resolvedAuth = resolvedAuth.replace(
+            fullMatch,
+            `${key}: "${resolvedValue}"`
+        );
+    }
+
+    return resolvedAuth;
 };
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/AIAgentPanel.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/AIAgentPanel.tsx
index 900ed454414..920fe47e6b1 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/AIAgentPanel.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/AIAgentPanel.tsx
@@ -15,29 +15,55 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import { Icon } from '@wso2/ui-toolkit';
-import { useRpcContext } from '@wso2/ballerina-rpc-client';
-import { EVENT_TYPE, MACHINE_VIEW, SCOPE } from '@wso2/ballerina-core';
 
-import { CardGrid, PanelViewMore, Title, TitleWrapper } from './styles';
-import { BodyText } from '../../styles';
-import ButtonCard from '../../../components/ButtonCard';
-import { OutOfScopeComponentTooltip } from './componentListUtils';
+import { Icon } from "@wso2/ui-toolkit";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import {
+    DIRECTORY_MAP,
+    EVENT_TYPE,
+    MACHINE_VIEW,
+    SCOPE,
+    ServiceModel,
+    TriggerModelsResponse,
+} from "@wso2/ballerina-core";
+
+import { CardGrid, PanelViewMore, Title, TitleWrapper } from "./styles";
+import { BodyText } from "../../styles";
+import ButtonCard from "../../../components/ButtonCard";
+import { isBetaModule, OutOfScopeComponentTooltip } from "./componentListUtils";
+import { RelativeLoader } from "../../../components/RelativeLoader";
+import { getEntryNodeIcon } from "./EventIntegrationPanel";
 
 interface AIAgentPanelProps {
     scope: SCOPE;
-};
+    triggers: TriggerModelsResponse;
+}
 
 export function AIAgentPanel(props: AIAgentPanelProps) {
     const { rpcClient } = useRpcContext();
-    const isDisabled = props.scope && (props.scope !== SCOPE.AI_AGENT && props.scope !== SCOPE.ANY);
+    const isDisabled = props.scope && props.scope !== SCOPE.AI_AGENT && props.scope !== SCOPE.ANY;
+
+    const handleMcpClick = async (key: DIRECTORY_MAP, model: ServiceModel) => {
+        console.log(">>>>> Model: ", model);
+        await rpcClient.getVisualizerRpcClient().openView({
+            type: EVENT_TYPE.OPEN_VIEW,
+            location: {
+                view: MACHINE_VIEW.BIServiceWizard,
+                artifactInfo: {
+                    org: model.orgName,
+                    packageName: model.packageName,
+                    moduleName: model.moduleName,
+                    version: model.version,
+                },
+            },
+        });
+    };
 
     const handleClick = async () => {
         await rpcClient.getVisualizerRpcClient().openView({
             type: EVENT_TYPE.OPEN_VIEW,
             location: {
-                view: MACHINE_VIEW.AIChatAgentWizard
+                view: MACHINE_VIEW.AIChatAgentWizard,
             },
         });
     };
@@ -45,8 +71,8 @@ export function AIAgentPanel(props: AIAgentPanelProps) {
     return (
         <PanelViewMore disabled={isDisabled}>
             <TitleWrapper>
-                <Title variant="h2">AI Agent</Title>
-                <BodyText>Create an agent that you can chat with or use as an API.</BodyText>
+                <Title variant="h2">AI Integration</Title>
+                <BodyText>Create an integration that connects your system with AI capabilities.</BodyText>
             </TitleWrapper>
             <CardGrid>
                 <ButtonCard
@@ -57,7 +83,26 @@ export function AIAgentPanel(props: AIAgentPanelProps) {
                     disabled={isDisabled}
                     tooltip={isDisabled ? OutOfScopeComponentTooltip : ""}
                 />
+                {props.triggers.local.length === 0 && <RelativeLoader />}
+                {props.triggers.local
+                    .filter((t) => t.type === "mcp")
+                    .map((item, index) => {
+                        return (
+                            <ButtonCard
+                                id={`trigger-${item.moduleName.replace(/\./g, "-")}`}
+                                key={item.id}
+                                title={item.name}
+                                icon={getEntryNodeIcon(item)}
+                                onClick={() => {
+                                    handleMcpClick(DIRECTORY_MAP.SERVICE, item);
+                                }}
+                                disabled={isDisabled}
+                                tooltip={isDisabled ? OutOfScopeComponentTooltip : ""}
+                                isBeta={isBetaModule(item.moduleName)}
+                            />
+                        );
+                    })}
             </CardGrid>
         </PanelViewMore>
     );
-};
\ No newline at end of file
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/EventIntegrationPanel.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/EventIntegrationPanel.tsx
index c25f47f32f1..c6b383252fb 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/EventIntegrationPanel.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/EventIntegrationPanel.tsx
@@ -35,12 +35,17 @@ export function EventIntegrationPanel(props: EventIntegrationPanelProps) {
     const { rpcClient } = useRpcContext();
     const isDisabled = props.scope && (props.scope !== SCOPE.EVENT_INTEGRATION && props.scope !== SCOPE.ANY);
 
-    const handleClick = async (key: DIRECTORY_MAP, serviceType?: string) => {
+    const handleClick = async (key: DIRECTORY_MAP, model: ServiceModel) => {
         await rpcClient.getVisualizerRpcClient().openView({
             type: EVENT_TYPE.OPEN_VIEW,
             location: {
                 view: MACHINE_VIEW.BIServiceWizard,
-                serviceType: serviceType,
+                artifactInfo: {
+                    org: model.orgName,
+                    packageName: model.packageName,
+                    moduleName: model.moduleName,
+                    version: model.version
+                }
             },
         });
     };
@@ -66,7 +71,7 @@ export function EventIntegrationPanel(props: EventIntegrationPanelProps) {
                                     title={item.name}
                                     icon={getEntryNodeIcon(item)}
                                     onClick={() => {
-                                        handleClick(DIRECTORY_MAP.SERVICE, item.moduleName);
+                                        handleClick(DIRECTORY_MAP.SERVICE, item);
                                     }}
                                     disabled={isDisabled}
                                     tooltip={isDisabled ? OutOfScopeComponentTooltip : ""}
@@ -108,6 +113,10 @@ export function getCustomEntryNodeIcon(type: string) {
             return <Icon name="bi-java" />;
         case "trigger.github":
             return <Icon name="bi-github" />;
+        case "mcp":
+            return <Icon name="bi-mcp" />;
+        case "solace":
+            return <Icon name="bi-solace" sx={{ color: "#00C895" }}/>;
         default:
             return null;
     }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/FileIntegrationPanel.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/FileIntegrationPanel.tsx
index cbcd5af2a40..c0e104382f5 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/FileIntegrationPanel.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/FileIntegrationPanel.tsx
@@ -36,12 +36,17 @@ export function FileIntegrationPanel(props: FileIntegrationPanelProps) {
 
     const isDisabled = props.scope && (props.scope !== SCOPE.FILE_INTEGRATION && props.scope !== SCOPE.ANY);
 
-    const handleOnSelect = async (trigger: ServiceModel) => {
+    const handleOnSelect = async (model: ServiceModel) => {
         await rpcClient.getVisualizerRpcClient().openView({
             type: EVENT_TYPE.OPEN_VIEW,
             location: {
                 view: MACHINE_VIEW.BIServiceWizard,
-                serviceType: trigger.moduleName,
+                artifactInfo: {
+                    org: model.orgName,
+                    packageName: model.packageName,
+                    moduleName: model.moduleName,
+                    version: model.version
+                }
             },
         });
     };
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/IntegrationApiPanel.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/IntegrationApiPanel.tsx
index 08197b8b860..e5edf03f8fc 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/IntegrationApiPanel.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/IntegrationApiPanel.tsx
@@ -15,7 +15,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
 import { Icon } from '@wso2/ui-toolkit';
 import { useRpcContext } from '@wso2/ballerina-rpc-client';
 import { EVENT_TYPE, MACHINE_VIEW, SCOPE } from '@wso2/ballerina-core';
@@ -29,16 +28,26 @@ interface IntegrationAPIPanelProps {
     scope: SCOPE;
 };
 
+interface ServiceModel {
+    orgName: string;
+    packageName: string;
+    moduleName: string;
+}
+
 export function IntegrationAPIPanel(props: IntegrationAPIPanelProps) {
     const { rpcClient } = useRpcContext();
     const isDisabled = props.scope && (props.scope !== SCOPE.INTEGRATION_AS_API && props.scope !== SCOPE.ANY);
 
-    const handleClick = async (serviceType: string) => {
+    const handleClick = async (model: ServiceModel) => {
         await rpcClient.getVisualizerRpcClient().openView({
             type: EVENT_TYPE.OPEN_VIEW,
             location: {
                 view: MACHINE_VIEW.BIServiceWizard,
-                serviceType: serviceType,
+                artifactInfo: {
+                    org: model.orgName,
+                    packageName: model.packageName,
+                    moduleName: model.moduleName,
+                }
             },
         });
     };
@@ -58,7 +67,11 @@ export function IntegrationAPIPanel(props: IntegrationAPIPanelProps) {
                         icon={<Icon name="bi-globe" />}
                         title="HTTP Service"
                         // description="Handle web requests and responses."
-                        onClick={() => handleClick("http")}
+                        onClick={() => handleClick({
+                            orgName: "ballerina",
+                            packageName: "http",
+                            moduleName: "http"
+                        })}
                         disabled={isDisabled}
                         tooltip={isDisabled ? OutOfScopeComponentTooltip : ""}
                     />
@@ -68,7 +81,11 @@ export function IntegrationAPIPanel(props: IntegrationAPIPanelProps) {
                         icon={<Icon name="bi-graphql" sx={{ color: "#e535ab" }} />}
                         title="GraphQL Service"
                         // description="Flexible and efficient data queries."
-                        onClick={() => handleClick("graphql")}
+                        onClick={() => handleClick({
+                            orgName: "ballerina",
+                            packageName: "graphql",
+                            moduleName: "graphql"
+                        })}
                         disabled={isDisabled}
                         tooltip={isDisabled ? OutOfScopeComponentTooltip : ""}
                         isBeta
@@ -79,7 +96,11 @@ export function IntegrationAPIPanel(props: IntegrationAPIPanelProps) {
                         icon={<Icon name="bi-tcp" />}
                         title="TCP Service"
                         // description="Process connection oriented messages."
-                        onClick={() => handleClick("tcp")}
+                        onClick={() => handleClick({
+                            orgName: "ballerina",
+                            packageName: "tcp",
+                            moduleName: "tcp"
+                        })}
                         disabled={isDisabled}
                         tooltip={isDisabled ? OutOfScopeComponentTooltip : ""}
                         isBeta
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/index.tsx
index 1e87a535b65..f02add6a4d0 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/index.tsx
@@ -74,7 +74,7 @@ export function ComponentListView(props: ComponentListViewProps) {
                 <Container>
                     <AddPanel>
                         <AutomationPanel scope={scope} />
-                        <AIAgentPanel scope={scope} />
+                        <AIAgentPanel scope={scope} triggers={triggers} />
                         <IntegrationAPIPanel scope={scope} />
                         <EventIntegrationPanel triggers={triggers} scope={scope} />
                         <FileIntegrationPanel triggers={triggers} scope={scope} />
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/DiagramWrapper/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/DiagramWrapper/index.tsx
index 81ba9dcdd6d..c5fb3c7776b 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/DiagramWrapper/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/DiagramWrapper/index.tsx
@@ -24,13 +24,16 @@ import { BISequenceDiagram } from "../SequenceDiagram";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import { TopNavigationBar } from "../../../components/TopNavigationBar";
 import { TitleBar } from "../../../components/TitleBar";
-import { EVENT_TYPE, FOCUS_FLOW_DIAGRAM_VIEW, FocusFlowDiagramView, ParentMetadata } from "@wso2/ballerina-core";
-import { VisualizerLocation } from "@wso2/ballerina-core";
+import { CodeData, EVENT_TYPE, FOCUS_FLOW_DIAGRAM_VIEW, FocusFlowDiagramView, FunctionModel, LineRange, ParentMetadata } from "@wso2/ballerina-core";
+import { VisualizerLocation, NodePosition } from "@wso2/ballerina-core";
 import { MACHINE_VIEW } from "@wso2/ballerina-core";
 import styled from "@emotion/styled";
 import { BIFocusFlowDiagram } from "../FocusFlowDiagram";
 import { getColorByMethod } from "../ServiceDesigner/components/ResourceAccordion";
 import { SwitchSkeleton, TitleBarSkeleton } from "../../../components/Skeletons";
+import { PanelContainer } from "@wso2/ballerina-side-panel";
+import { ResourceForm } from "../ServiceDesigner/Forms/ResourceForm";
+import { removeForwardSlashes } from "../ServiceDesigner/utils";
 
 const ActionButton = styled(Button)`
     display: flex;
@@ -178,6 +181,11 @@ export function DiagramWrapper(param: DiagramWrapperProps) {
     const [basePath, setBasePath] = useState("");
     const [listener, setListener] = useState("");
     const [parentMetadata, setParentMetadata] = useState<ParentMetadata>();
+    const [currentPosition, setCurrentPosition] = useState<NodePosition>();
+
+    const [functionModel, setFunctionModel] = useState<FunctionModel>();
+    const [servicePosition, setServicePosition] = useState<NodePosition>();
+    const [isSaving, setIsSaving] = useState(false);
 
     useEffect(() => {
         rpcClient.getVisualizerLocation().then((location) => {
@@ -215,6 +223,12 @@ export function DiagramWrapper(param: DiagramWrapperProps) {
                                 },
                             })
                             .then((serviceModel) => {
+                                setServicePosition({
+                                    startLine: serviceModel.service?.codedata.lineRange.startLine.line,
+                                    startColumn: serviceModel.service?.codedata.lineRange.startLine.offset,
+                                    endLine: serviceModel.service?.codedata.lineRange.endLine.line,
+                                    endColumn: serviceModel.service?.codedata.lineRange.endLine.offset,
+                                });
                                 setServiceType(serviceModel.service?.type);
                                 setBasePath(serviceModel.service?.properties?.basePath?.value?.trim());
                                 setListener(serviceModel.service?.properties?.listener?.value?.trim());
@@ -224,6 +238,11 @@ export function DiagramWrapper(param: DiagramWrapperProps) {
         });
     }, [rpcClient]);
 
+
+    const handleFunctionClose = () => {
+        setFunctionModel(undefined);
+    };
+
     const handleToggleDiagram = () => {
         setShowSequenceDiagram(!showSequenceDiagram);
     };
@@ -232,7 +251,7 @@ export function DiagramWrapper(param: DiagramWrapperProps) {
         setLoadingDiagram(true);
     };
 
-    const handleReadyDiagram = (fileName?: string, parentMetadata?: ParentMetadata) => {
+    const handleReadyDiagram = (fileName?: string, parentMetadata?: ParentMetadata, position?: NodePosition) => {
         setLoadingDiagram(false);
         if (fileName) {
             setFileName(fileName);
@@ -240,22 +259,66 @@ export function DiagramWrapper(param: DiagramWrapperProps) {
         if (parentMetadata) {
             setParentMetadata(parentMetadata);
         }
+        if (position) {
+            setCurrentPosition(position);
+        }
+    };
+
+
+    const getFunctionModel = async () => {
+        const location = (await rpcClient.getVisualizerLocation()).position;
+        const codeData: CodeData = {
+            lineRange: {
+                fileName: filePath,
+                startLine: { line: location.startLine, offset: location.startColumn },
+                endLine: { line: location.endLine, offset: location.endColumn },
+            }
+        }
+        const functionModel = await rpcClient.getServiceDesignerRpcClient().getFunctionFromSource({ filePath: filePath, codedata: codeData });
+        setFunctionModel(functionModel.function);
+    }
+
+
+    const handleResourceSubmit = async (value: FunctionModel) => {
+        setIsSaving(true);
+        handleUpdateDiagram();
+        const lineRange: LineRange = {
+            startLine: { line: servicePosition.startLine, offset: servicePosition.startColumn },
+            endLine: { line: servicePosition.endLine, offset: servicePosition.endColumn },
+        };
+        let res = undefined;
+        res = await rpcClient
+            .getServiceDesignerRpcClient()
+            .updateResourceSourceCode({ filePath, codedata: { lineRange }, function: value });
+        /**
+         * Update the artifact identifier to the current updated resource 
+         * Resource identifier pattern --> METHOD#PATH --> 'get#foo' OR METHOD#WITH_PARAMS ---> 'post#bar/[string car]]'
+         */
+        const accessor = value.accessor.value;
+        const path = value.name.value;
+        const resourceIdentifier = `${accessor}#${path}`;
+        await rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { identifier: resourceIdentifier } });
+
+        setIsSaving(false);
+        setFunctionModel(undefined);
     };
 
-    const handleEdit = (fileUri?: string) => {
+
+    const handleEdit = (fileUri?: string, position?: NodePosition) => {
         const context: VisualizerLocation = {
             view:
                 view === FOCUS_FLOW_DIAGRAM_VIEW.NP_FUNCTION
                     ? MACHINE_VIEW.BINPFunctionForm
-                    : MACHINE_VIEW.BIFunctionForm,
+                    : parentMetadata?.isServiceFunction ?
+                        MACHINE_VIEW.ServiceFunctionForm : MACHINE_VIEW.BIFunctionForm,
             identifier: parentMetadata?.label || "",
             documentUri: fileUri,
+            position: position || currentPosition
         };
         rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: context });
     };
 
     let isAutomation = parentMetadata?.kind === "Function" && parentMetadata?.label === "main";
-    let isFunction = parentMetadata?.kind === "Function" && parentMetadata?.label !== "main";
     let isResource = parentMetadata?.kind === "Resource";
     let isRemote = parentMetadata?.kind === "Remote Function";
     let isAgent = parentMetadata?.kind === "AI Chat Agent" && parentMetadata?.label === "chat";
@@ -286,20 +349,20 @@ export function DiagramWrapper(param: DiagramWrapperProps) {
                             {parentMetadata?.accessor || ""}
                         </AccessorType>
                     )}
-                    {!isAutomation && <Path>{parentMetadata?.label || ""}</Path>}
-                    {parameters && (
+                    {!isAutomation && <Path>{removeForwardSlashes(parentMetadata?.label || "")}</Path>}
+                    {/* {parameters && (
                         <WrappedTooltip content={parameters}>
                             <Parameters>({parameters})</Parameters>
                         </WrappedTooltip>
-                    )}
+                    )} */}
                 </LeftElementsWrapper>
-                {returnType && (
+                {/* {returnType && (
                     <WrappedTooltip content={returnType}>
                         <ReturnType>
                             <ReturnTypeIcon name="bi-return" /> {returnType}
                         </ReturnType>
                     </WrappedTooltip>
-                )}
+                )} */}
             </SubTitleWrapper>
         );
     };
@@ -324,21 +387,40 @@ export function DiagramWrapper(param: DiagramWrapperProps) {
 
         if (isResource && serviceType === "http") {
             return (
-                <ActionButton
-                    appearance="secondary"
-                    onClick={() => handleResourceTryIt(parentMetadata?.accessor || "", parentMetadata?.label || "")}
-                >
-                    <Icon name={"play"} isCodicon={true} sx={{ marginRight: 5, width: 16, height: 16, fontSize: 14 }} />
-                    {"Try It"}
-                </ActionButton>
+                <>
+                    <ActionButton id="bi-edit" appearance="secondary" onClick={() => getFunctionModel()}>
+                        <Icon
+                            name="bi-settings"
+                            sx={{
+                                marginRight: 5,
+                                fontSize: "16px",
+                                width: "16px",
+                            }}
+                        />
+                        Configure
+                    </ActionButton >
+                    <ActionButton
+                        appearance="secondary"
+                        onClick={() => handleResourceTryIt(parentMetadata?.accessor || "", parentMetadata?.label || "")}
+                    >
+                        <Icon name={"play"} isCodicon={true} sx={{ marginRight: 5, width: 16, height: 16, fontSize: 14 }} />
+                        {"Try It"}
+                    </ActionButton>
+                </>
             );
         }
 
         if (parentMetadata && !isResource && !isRemote) {
             return (
-                <ActionButton id="bi-edit" appearance="secondary" onClick={() => handleEdit(fileName)}>
-                    <Icon name="bi-edit" sx={{ marginRight: 5, width: 16, height: 16, fontSize: 14 }} />
-                    Edit
+                <ActionButton id="bi-edit" appearance="secondary" onClick={() => handleEdit(fileName, currentPosition)}>
+                    <Icon
+                        name="bi-settings"
+                        sx={{
+                            marginRight: 5,
+                            fontSize: "16px",
+                            width: "16px",
+                        }}
+                    /> Configure
                 </ActionButton>
             );
         }
@@ -411,6 +493,23 @@ export function DiagramWrapper(param: DiagramWrapperProps) {
                     />
                 )
             }
+            {/* This is for editing a http resource */}
+            {functionModel && isResource && functionModel.kind === "RESOURCE" && (
+                <PanelContainer
+                    title={"Resource Configuration"}
+                    show={!!functionModel}
+                    onClose={handleFunctionClose}
+                    width={400}
+                >
+                    <ResourceForm
+                        model={functionModel}
+                        isSaving={isSaving}
+                        filePath={filePath}
+                        onSave={handleResourceSubmit}
+                        onClose={handleFunctionClose}
+                    />
+                </PanelContainer>
+            )}
         </View >
     );
 }
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 58eb1396a83..04ee0f4069f 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/PanelManager.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/PanelManager.tsx
@@ -31,8 +31,6 @@ import { HelperView } from "../HelperView";
 import FormGenerator from "../Forms/FormGenerator";
 import { getContainerTitle, getSubPanelWidth } from "../../../utils/bi";
 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 { NewTool, NewToolSelectionMode } from "../AIChatAgent/NewTool";
@@ -65,7 +63,8 @@ export enum SidePanelView {
     DATA_LOADER_LIST = "DATA_LOADER_LIST",
     CHUNKERS = "CHUNKERS",
     CHUNKER_LIST = "CHUNKER_LIST",
-    VECTOR_KNOWLEDGE_BASE_LIST = "VECTOR_KNOWLEDGE_BASE_LIST",
+    KNOWLEDGE_BASES = "KNOWLEDGE_BASES",
+    KNOWLEDGE_BASE_LIST = "KNOWLEDGE_BASE_LIST",
     NEW_AGENT = "NEW_AGENT",
     ADD_TOOL = "ADD_TOOL",
     NEW_TOOL = "NEW_TOOL",
@@ -87,6 +86,7 @@ interface PanelManagerProps {
     subPanel: SubPanel;
     categories: any[];
     selectedNode?: FlowNode;
+    parentNode?: FlowNode;
     nodeFormTemplate?: FlowNode;
     selectedClientName?: string;
     showEditForm?: boolean;
@@ -133,6 +133,7 @@ interface PanelManagerProps {
     onEditAgent?: () => void;
     onNavigateToPanel?: (targetPanel: SidePanelView, connectionKind?: ConnectionKind) => void;
     setSidePanelView: (view: SidePanelView) => void;
+    onChangeSelectedNode?: (node: FlowNode) => void;
 
     // AI Agent handlers
     onSelectTool?: (tool: ToolData, node: FlowNode) => void;
@@ -151,6 +152,7 @@ export function PanelManager(props: PanelManagerProps) {
         subPanel,
         categories,
         selectedNode,
+        parentNode,
         nodeFormTemplate,
         selectedClientName,
         showEditForm,
@@ -195,20 +197,9 @@ export function PanelManager(props: PanelManagerProps) {
         onSelectNewConnection,
         onUpdateNodeWithConnection,
         onNavigateToPanel,
+        onChangeSelectedNode
     } = props;
 
-    const handleOnAddTool = () => {
-        setSidePanelView(SidePanelView.NEW_TOOL);
-    };
-
-    const handleOnAddMcpServer = () => {
-        setSidePanelView(SidePanelView.ADD_MCP_SERVER);
-    };
-
-    const handleOnEditMcpServer = () => {
-        setSidePanelView(SidePanelView.EDIT_MCP_SERVER);
-    };
-
     const handleOnBackToAddTool = () => {
         setSidePanelView(SidePanelView.ADD_TOOL);
     };
@@ -255,16 +246,6 @@ export function PanelManager(props: PanelManagerProps) {
                     />
                 );
 
-            case SidePanelView.NEW_AGENT:
-                return (
-                    <NewAgent
-                        agentCallNode={selectedNode}
-                        fileName={fileName}
-                        lineRange={targetLineRange}
-                        onSave={onClose}
-                    />
-                );
-
             case SidePanelView.ADD_TOOL:
                 return (
                     <AddTool
@@ -281,7 +262,6 @@ export function PanelManager(props: PanelManagerProps) {
                     <AddMcpServer
                         agentCallNode={selectedNode}
                         name={selectedMcpToolkitName}
-                        onAddMcpServer={onClose}
                         onSave={onClose}
                         onBack={handleOnBackToAddTool}
                     />
@@ -293,7 +273,6 @@ export function PanelManager(props: PanelManagerProps) {
                         editMode={true}
                         name={selectedClientName}
                         agentCallNode={selectedNode}
-                        onAddMcpServer={handleOnEditMcpServer}
                         onSave={onClose}
                     />
                 );
@@ -334,11 +313,8 @@ export function PanelManager(props: PanelManagerProps) {
                 );
                 return <ToolConfig agentCallNode={selectedNode} toolData={selectedTool} onSave={onClose} />;
 
-            case SidePanelView.AGENT_CONFIG:
-                return <AgentConfig agentCallNode={selectedNode} fileName={fileName} onSave={onClose} />;
-
             case SidePanelView.AGENT_MEMORY_MANAGER:
-                return <MemoryManagerConfig agentCallNode={selectedNode} onSave={onClose} />;
+                return <MemoryManagerConfig agentNode={parentNode} memoryNode={selectedNode} onSave={onClose} />;
 
             case SidePanelView.FUNCTION_LIST:
                 return (
@@ -464,16 +440,16 @@ export function PanelManager(props: PanelManagerProps) {
                     />
                 );
 
-            case SidePanelView.VECTOR_KNOWLEDGE_BASE_LIST:
+            case SidePanelView.KNOWLEDGE_BASE_LIST:
                 return (
                     <NodeList
                         categories={categories}
                         onSelect={onSelectNode}
                         onAdd={onAddVectorKnowledgeBase}
-                        addButtonLabel={"Add Vector Knowledge Base"}
+                        addButtonLabel={"Add Knowledge Base"}
                         onClose={onClose}
-                        title={"Vector Knowledge Bases"}
-                        searchPlaceholder={"Search vector knowledge bases"}
+                        title={"Knowledge Bases"}
+                        searchPlaceholder={"Search knowledge bases"}
                         onSearchTextChange={(searchText) =>
                             onSearchVectorKnowledgeBase?.(searchText, FUNCTION_TYPE.REGULAR)
                         }
@@ -481,6 +457,18 @@ export function PanelManager(props: PanelManagerProps) {
                     />
                 );
 
+            case SidePanelView.KNOWLEDGE_BASES:
+                return (
+                    <CardList
+                        categories={categories}
+                        onSelect={onSelectNode}
+                        onClose={onClose}
+                        title={"Knowledge Bases"}
+                        searchPlaceholder={"Search knowledge bases"}
+                        onBack={canGoBack ? onBack : undefined}
+                    />
+                );
+
             case SidePanelView.DATA_LOADER_LIST:
                 return (
                     <NodeList
@@ -542,6 +530,7 @@ export function PanelManager(props: PanelManagerProps) {
             case SidePanelView.CONNECTION_CONFIG:
                 return (
                     <ConnectionConfig
+                        fileName={fileName}
                         connectionKind={selectedConnectionKind}
                         selectedNode={selectedNode}
                         onSave={onUpdateNodeWithConnection}
@@ -599,7 +588,6 @@ export function PanelManager(props: PanelManagerProps) {
                 return handleOnBackToAddTool;
             case SidePanelView.CONNECTION_SELECT:
             case SidePanelView.CONNECTION_CREATE:
-            case SidePanelView.NEW_AGENT:
                 return onBack;
             case SidePanelView.FORM:
                 return !showEditForm ? onBack : undefined;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/PanelOverlayRenderer.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/PanelOverlayRenderer.tsx
new file mode 100644
index 00000000000..7c06d0af827
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/PanelOverlayRenderer.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 styled from "@emotion/styled";
+import { PanelContainer } from "@wso2/ballerina-side-panel";
+import { ThemeColors } from "@wso2/ui-toolkit";
+import { usePanelOverlay } from "./hooks/usePanelOverlay";
+
+const OverlayBackdrop = styled.div<{ zIndex: number }>`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: ${(props: { zIndex: number }) => props.zIndex};
+    background-color: color-mix(in srgb, ${ThemeColors.SECONDARY_CONTAINER} 30%, transparent);
+    display: flex;
+    justify-content: flex-end;
+`;
+
+const OverlayPanelWrapper = styled.div<{ zIndex: number }>`
+    position: relative;
+    z-index: ${(props: { zIndex: number }) => props.zIndex + 1};
+`;
+
+export function PanelOverlayRenderer() {
+    const { overlays, closeOverlay } = usePanelOverlay();
+
+    if (overlays.length === 0) {
+        return null;
+    }
+
+    // Base z-index for overlays (high enough to be above main panel)
+    const BASE_Z_INDEX = 10000;
+
+    return (
+        <>
+            {overlays.map((overlay, index) => {
+                const zIndex = BASE_Z_INDEX + index * 2;
+
+                return (
+                    <OverlayBackdrop
+                        key={overlay.id}
+                        zIndex={zIndex}
+                        onClick={() => closeOverlay(overlay.id)}
+                    >
+                        <OverlayPanelWrapper zIndex={zIndex} onClick={(e) => e.stopPropagation()}>
+                            <PanelContainer
+                                title={overlay.title}
+                                show={true}
+                                onClose={() => closeOverlay(overlay.id)}
+                                onBack={overlay.onBack}
+                                width={overlay.width || 400}
+                            >
+                                {overlay.content}
+                            </PanelContainer>
+                        </OverlayPanelWrapper>
+                    </OverlayBackdrop>
+                );
+            })}
+        </>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/context/PanelOverlayContext.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/context/PanelOverlayContext.tsx
new file mode 100644
index 00000000000..a581aa4d350
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/context/PanelOverlayContext.tsx
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, useState, useCallback, ReactNode } from "react";
+
+export interface PanelOverlayConfig {
+    id: string;
+    title: string;
+    content: ReactNode;
+    onClose?: () => void;
+    onBack?: () => void;
+    width?: number;
+}
+
+interface PanelOverlayContextValue {
+    overlays: PanelOverlayConfig[];
+    openOverlay: (config: Omit<PanelOverlayConfig, "id">) => string;
+    closeOverlay: (id: string) => void;
+    closeTopOverlay: () => void;
+    updateOverlay: (id: string, updates: Partial<Omit<PanelOverlayConfig, "id">>) => void;
+    clearAllOverlays: () => void;
+}
+
+export const PanelOverlayContext = createContext<PanelOverlayContextValue | undefined>(undefined);
+
+interface PanelOverlayProviderProps {
+    children: ReactNode;
+}
+
+export function PanelOverlayProvider({ children }: PanelOverlayProviderProps) {
+    const [overlays, setOverlays] = useState<PanelOverlayConfig[]>([]);
+
+    const openOverlay = useCallback((config: Omit<PanelOverlayConfig, "id">) => {
+        const id = `overlay-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+        const newOverlay: PanelOverlayConfig = { ...config, id };
+
+        setOverlays((prev) => [...prev, newOverlay]);
+        return id;
+    }, []);
+
+    const closeOverlay = useCallback((id: string) => {
+        setOverlays((prev) => {
+            const overlay = prev.find((o) => o.id === id);
+            if (overlay?.onClose) {
+                overlay.onClose();
+            }
+            return prev.filter((o) => o.id !== id);
+        });
+    }, []);
+
+    const closeTopOverlay = useCallback(() => {
+        setOverlays((prev) => {
+            if (prev.length === 0) return prev;
+            const topOverlay = prev[prev.length - 1];
+            if (topOverlay.onClose) {
+                topOverlay.onClose();
+            }
+            return prev.slice(0, -1);
+        });
+    }, []);
+
+    const updateOverlay = useCallback((id: string, updates: Partial<Omit<PanelOverlayConfig, "id">>) => {
+        setOverlays((prev) =>
+            prev.map((overlay) => (overlay.id === id ? { ...overlay, ...updates } : overlay))
+        );
+    }, []);
+
+    const clearAllOverlays = useCallback(() => {
+        setOverlays([]);
+    }, []);
+
+    const value: PanelOverlayContextValue = {
+        overlays,
+        openOverlay,
+        closeOverlay,
+        closeTopOverlay,
+        updateOverlay,
+        clearAllOverlays,
+    };
+
+    return <PanelOverlayContext.Provider value={value}>{children}</PanelOverlayContext.Provider>;
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/hooks/usePanelOverlay.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/hooks/usePanelOverlay.tsx
new file mode 100644
index 00000000000..4b516c3e116
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/hooks/usePanelOverlay.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { useContext } from "react";
+import { PanelOverlayContext, PanelOverlayConfig } from "../context/PanelOverlayContext";
+
+export function usePanelOverlay() {
+    const context = useContext(PanelOverlayContext);
+
+    if (!context) {
+        throw new Error("usePanelOverlay must be used within a PanelOverlayProvider");
+    }
+
+    return {
+        /**
+         * Opens a new overlay panel
+         * @returns The ID of the opened overlay
+         */
+        openOverlay: context.openOverlay,
+
+        /**
+         * Closes a specific overlay by ID
+         */
+        closeOverlay: context.closeOverlay,
+
+        /**
+         * Closes the topmost overlay in the stack
+         */
+        closeTopOverlay: context.closeTopOverlay,
+
+        /**
+         * Updates an existing overlay's configuration
+         */
+        updateOverlay: context.updateOverlay,
+
+        /**
+         * Clears all overlays from the stack
+         */
+        clearAllOverlays: context.clearAllOverlays,
+
+        /**
+         * Current overlay stack
+         */
+        overlays: context.overlays,
+    };
+}
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 35d978e63fa..d05cd28a07a 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/index.tsx
@@ -19,7 +19,7 @@
 import { useEffect, useRef, useState, useMemo, useCallback } from "react";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import styled from "@emotion/styled";
-import { removeMcpServerFromAgentNode } from "../AIChatAgent/utils";
+import { removeMcpServerFromAgentNode, findAgentNodeFromAgentCallNode, findFlowNode } from "../AIChatAgent/utils";
 import { MemoizedDiagram } from "@wso2/bi-diagram";
 import {
     BIAvailableNodesRequest,
@@ -45,6 +45,7 @@ import {
     NodeMetadata,
     SearchKind,
     DataMapperDisplayMode,
+    CodeData,
 } from "@wso2/ballerina-core";
 
 import {
@@ -55,6 +56,7 @@ import {
     convertEmbeddingProviderCategoriesToSidePanelCategories,
     convertDataLoaderCategoriesToSidePanelCategories,
     convertChunkerCategoriesToSidePanelCategories,
+    convertKnowledgeBaseCategoriesToSidePanelCategories,
 } from "../../../utils/bi";
 import { useDraftNodeManager } from "./hooks/useDraftNodeManager";
 import { NodePosition, STNode } from "@wso2/syntax-tree";
@@ -62,13 +64,14 @@ import { View, ProgressIndicator, ThemeColors } from "@wso2/ui-toolkit";
 import { applyModifications, textToModifications } from "../../../utils/utils";
 import { PanelManager, SidePanelView } from "./PanelManager";
 import { findFunctionByName, transformCategories, getNodeTemplateForConnection } from "./utils";
+import { PanelOverlayProvider } from "./context/PanelOverlayContext";
+import { PanelOverlayRenderer } from "./PanelOverlayRenderer";
 import { ExpressionFormField, Category as PanelCategory } from "@wso2/ballerina-side-panel";
 import { cloneDeep, debounce } from "lodash";
 import { ConnectionKind } from "../../../components/ConnectionSelector";
 import {
     findFlowNodeByModuleVarName,
     getAgentFilePath,
-    findAgentNodeFromAgentCallNode,
     removeAgentNode,
     removeToolFromAgentNode,
 } from "../AIChatAgent/utils";
@@ -85,7 +88,7 @@ export interface BIFlowDiagramProps {
     breakpointState?: boolean;
     syntaxTree?: STNode;
     onUpdate: () => void;
-    onReady: (fileName: string, parentMetadata?: ParentMetadata) => void;
+    onReady: (fileName: string, parentMetadata?: ParentMetadata, position?: NodePosition) => void;
     onSave?: () => void;
 }
 
@@ -123,6 +126,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
     const [selectedConnectionKind, setSelectedConnectionKind] = useState<ConnectionKind>();
     const [selectedNodeId, setSelectedNodeId] = useState<string>();
     const [projectOrg, setProjectOrg] = useState<string>("");
+    const [isUserAuthenticated, setIsUserAuthenticated] = useState<boolean>(false);
 
     // Navigation stack for back navigation
     const [navigationStack, setNavigationStack] = useState<NavigationStackItem[]>([]);
@@ -139,6 +143,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
     } = useDraftNodeManager(model);
 
     const selectedNodeRef = useRef<FlowNode>();
+    const parentNodeRef = useRef<FlowNode>();
     const nodeTemplateRef = useRef<FlowNode>();
     const topNodeRef = useRef<FlowNode | Branch>();
     const targetRef = useRef<LineRange>();
@@ -194,6 +199,15 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         rpcClient.getVisualizerLocation().then((location) => {
             setProjectOrg(location.org);
         });
+
+        // Check user authentication status
+        rpcClient.getAiPanelRpcClient().isUserAuthenticated()
+            .then((isAuth) => {
+                setIsUserAuthenticated(isAuth);
+            })
+            .catch(() => {
+                setIsUserAuthenticated(false);
+            });
     }, [rpcClient]);
 
     const updateConnectionWithNewItem = (recentIdentifier: string) => {
@@ -372,8 +386,8 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
     };
 
     const handleVectorKnowledgeBaseAdded = async () => {
-        // Try to navigate back to VECTOR_KNOWLEDGE_BASE_LIST in the stack
-        const foundInStack = popNavigationStackUntilView(SidePanelView.VECTOR_KNOWLEDGE_BASE_LIST);
+        // Try to navigate back to KNOWLEDGE_BASE_LIST in the stack
+        const foundInStack = popNavigationStackUntilView(SidePanelView.KNOWLEDGE_BASE_LIST);
 
         if (foundInStack) {
             setShowProgressIndicator(true);
@@ -388,15 +402,15 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                         FUNCTION_TYPE.REGULAR
                     )
                 );
-                setSidePanelView(SidePanelView.VECTOR_KNOWLEDGE_BASE_LIST);
+                setSidePanelView(SidePanelView.KNOWLEDGE_BASE_LIST);
                 setShowSidePanel(true);
             } catch (error) {
-                console.error(">>> Error refreshing vector knowledge bases", error);
+                console.error(">>> Error refreshing knowledge bases", error);
             } finally {
                 setShowProgressIndicator(false);
             }
         } else {
-            console.log(">>> VECTOR_KNOWLEDGE_BASE_LIST not found in navigation stack, closing panel");
+            console.log(">>> KNOWLEDGE_BASE_LIST not found in navigation stack, closing panel");
             closeSidePanelAndFetchUpdatedFlowModel();
         }
     };
@@ -454,6 +468,16 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
     const getFlowModel = () => {
         setShowProgressIndicator(true);
         onUpdate();
+
+        // Re-check authentication status
+        rpcClient.getAiPanelRpcClient().isUserAuthenticated()
+            .then((isAuth) => {
+                setIsUserAuthenticated(isAuth);
+            })
+            .catch(() => {
+                setIsUserAuthenticated(false);
+            });
+
         rpcClient
             .getBIDiagramRpcClient()
             .getBreakpointInfo()
@@ -470,7 +494,12 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                             const parentMetadata = model.flowModel.nodes.find(
                                 (node) => node.codedata.node === "EVENT_START"
                             )?.metadata.data as ParentMetadata | undefined;
-                            onReady(model.flowModel.fileName, parentMetadata);
+
+                            // Get visualizer location and pass position to onReady
+                            rpcClient.getVisualizerLocation().then((location: VisualizerLocation) => {
+                                console.log(">>> Visualizer location", location?.position);
+                                onReady(model.flowModel.fileName, parentMetadata, location?.position);
+                            });
                             if (shouldUpdateLineRangeRef.current) {
                                 const varName = typeof updatedNodeRef.current?.properties?.variable?.value === "string"
                                     ? updatedNodeRef.current.properties.variable.value
@@ -486,7 +515,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                     .finally(() => {
                         setShowProgressIndicator(false);
                         setShowProgressSpinner(false);
-                        onReady(undefined);
+                        onReady(undefined, undefined, undefined);
                         if (hasDraft) {
                             completeDraft();
                         }
@@ -696,7 +725,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
 
                 setCategories(convertedCategories);
                 initialCategoriesRef.current = convertedCategories; // Store initial categories
-                
+
                 setShowSidePanel(true);
                 setSidePanelView(SidePanelView.NODE_LIST);
             })
@@ -815,8 +844,8 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                     case "EMBEDDING_PROVIDER":
                         panelView = SidePanelView.EMBEDDING_PROVIDER_LIST;
                         break;
-                    case "VECTOR_KNOWLEDGE_BASE":
-                        panelView = SidePanelView.VECTOR_KNOWLEDGE_BASE_LIST;
+                    case "KNOWLEDGE_BASE":
+                        panelView = SidePanelView.KNOWLEDGE_BASE_LIST;
                         break;
                     case "DATA_LOADER":
                         panelView = SidePanelView.DATA_LOADER_LIST;
@@ -857,7 +886,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
     };
 
     const handleSearchVectorKnowledgeBase = async (searchText: string, functionType: FUNCTION_TYPE) => {
-        // await handleSearch(searchText, functionType, "VECTOR_KNOWLEDGE_BASE");
+        // await handleSearch(searchText, functionType, "KNOWLEDGE_BASE");
     };
 
     const handleSearchDataLoader = async (searchText: string, functionType: FUNCTION_TYPE) => {
@@ -868,71 +897,28 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         // 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
-        const currentIdentifier = (await rpcClient.getVisualizerLocation()).identifier;
-        const currentType = (await rpcClient.getVisualizerLocation()).type;
-        const parentIdentifier = (await rpcClient.getVisualizerLocation()).parentIdentifier;
-        // Find the correct artifact by currentIdentifier (id)
-        let currentArtifact = artifacts.artifacts.at(0);
-        for (const artifact of artifacts.artifacts) {
-            if (currentType && currentType.codedata.node === "CLASS" && currentType.name === artifact.name) {
-                currentArtifact = artifact;
-                if (artifact.resources && artifact.resources.length > 0) {
-                    const resource = artifact.resources.find(
-                        (resource) => resource.id === currentIdentifier || resource.name === currentIdentifier
-                    );
-                    if (resource) {
-                        currentArtifact = resource;
-                        break;
-                    }
-                }
-
-            } else if (artifact.id === currentIdentifier || artifact.name === currentIdentifier) {
-                currentArtifact = artifact;
-            }
-
-            // Check if parent artifact is matched and has resources and find within those
-            if (parentIdentifier && artifact.name === parentIdentifier && artifact.resources && artifact.resources.length > 0) {
-                const resource = artifact.resources.find(
-                    (resource) => resource.id === currentIdentifier || resource.name === currentIdentifier
-                );
-                if (resource) {
-                    currentArtifact = resource;
-                }
-            }
+    const updateArtifactLocation = async (artifacts: UpdatedArtifactsResponse) => {
+        await rpcClient.getVisualizerRpcClient().updateCurrentArtifactLocation(artifacts);
+        
+        if (isCreatingNewModelProvider.current) {
+            isCreatingNewModelProvider.current = false;
+            await handleModelProviderAdded();
+            return;
         }
-        if (currentArtifact) {
-            console.log(">>> currentArtifact", currentArtifact);
-            if (isCreatingNewModelProvider.current) {
-                isCreatingNewModelProvider.current = false;
-                await handleModelProviderAdded();
-                return;
-            }
-            if (isCreatingNewVectorStore.current) {
-                isCreatingNewVectorStore.current = false;
-                await handleVectorStoreAdded();
-                return;
-            }
-            if (isCreatingNewEmbeddingProvider.current) {
-                isCreatingNewEmbeddingProvider.current = false;
-                await handleEmbeddingProviderAdded();
-                return;
-            }
-            if (isCreatingNewVectorKnowledgeBase.current) {
-                isCreatingNewVectorKnowledgeBase.current = false;
-                await handleVectorKnowledgeBaseAdded();
-                return;
-            }
-            await rpcClient.getVisualizerRpcClient().openView({
-                type: EVENT_TYPE.UPDATE_PROJECT_LOCATION,
-                location: {
-                    documentUri: currentArtifact.path,
-                    position: currentArtifact.position,
-                    identifier: currentIdentifier,
-                },
-            });
+        if (isCreatingNewVectorStore.current) {
+            isCreatingNewVectorStore.current = false;
+            await handleVectorStoreAdded();
+            return;
+        }
+        if (isCreatingNewEmbeddingProvider.current) {
+            isCreatingNewEmbeddingProvider.current = false;
+            await handleEmbeddingProviderAdded();
+            return;
+        }
+        if (isCreatingNewVectorKnowledgeBase.current) {
+            isCreatingNewVectorKnowledgeBase.current = false;
+            await handleVectorKnowledgeBaseAdded();
+            return;
         }
         if (isCreatingNewDataLoader.current) {
             isCreatingNewDataLoader.current = false;
@@ -1099,7 +1085,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                     });
                 break;
 
-            case "VECTOR_KNOWLEDGE_BASES":
+            case "KNOWLEDGE_BASES":
                 setShowProgressIndicator(true);
                 rpcClient
                     .getBIDiagramRpcClient()
@@ -1114,7 +1100,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                                 FUNCTION_TYPE.REGULAR
                             )
                         );
-                        setSidePanelView(SidePanelView.VECTOR_KNOWLEDGE_BASE_LIST);
+                        setSidePanelView(SidePanelView.KNOWLEDGE_BASE_LIST);
                         setShowSidePanel(true);
                     })
                     .finally(() => {
@@ -1173,13 +1159,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                         selectedNodeRef.current = response.flowNode;
                         nodeTemplateRef.current = response.flowNode;
                         showEditForm.current = false;
-
-                        // if agent_call node, then show agent config panel
-                        if (node.codedata.node === "AGENT_CALL") {
-                            setSidePanelView(SidePanelView.NEW_AGENT);
-                        } else {
-                            setSidePanelView(SidePanelView.FORM);
-                        }
+                        setSidePanelView(SidePanelView.FORM);
                         setShowSidePanel(true);
                     })
                     .finally(() => {
@@ -1284,12 +1264,13 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             })
             .then(async (response) => {
                 if (response.artifacts.length > 0) {
-                    if (updatedNode?.codedata?.symbol === GET_DEFAULT_MODEL_PROVIDER) {
+                    if (updatedNode?.codedata?.symbol === GET_DEFAULT_MODEL_PROVIDER
+                        || (updatedNode?.codedata?.node === "AGENT_CALL" && updatedNode?.properties?.model?.value === "")) {
                         await rpcClient.getAIAgentRpcClient().configureDefaultModelProvider();
                     }
                     if (noFormSubmitOptions) {
                         selectedNodeRef.current = undefined;
-                        await updateCurrentArtifactLocation(response);
+                        await updateArtifactLocation(response);
                     }
                     if (options?.closeSidePanel) {
                         selectedNodeRef.current = undefined;
@@ -1333,7 +1314,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             }
         }
 
-        await updateCurrentArtifactLocation(deleteNodeResponse);
+        await updateArtifactLocation(deleteNodeResponse);
 
         selectedNodeRef.current = undefined;
         closeSidePanelAndFetchUpdatedFlowModel();
@@ -1382,7 +1363,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             .then(async (response) => {
                 if (response.artifacts.length > 0) {
                     selectedNodeRef.current = undefined;
-                    await updateCurrentArtifactLocation(response);
+                    await updateArtifactLocation(response);
                     closeSidePanelAndFetchUpdatedFlowModel();
                 } else {
                     console.error(">>> Error updating source code", response);
@@ -1404,13 +1385,6 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             return;
         }
 
-        // if agent_call node, then show agent config panel
-        if (node.codedata.node === "AGENT_CALL") {
-            setSidePanelView(SidePanelView.AGENT_CONFIG);
-            setShowSidePanel(true);
-            return;
-        }
-
         setShowProgressIndicator(true);
         rpcClient
             .getBIDiagramRpcClient()
@@ -1468,6 +1442,14 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 );
                 setCategories([]);
                 setSidePanelView(SidePanelView.DATA_LOADER_LIST);
+            } else if (sidePanelView === SidePanelView.KNOWLEDGE_BASES) {
+                handleOnSelectNode(
+                    selectedNodeMetadata.current.nodeId,
+                    selectedNodeMetadata.current.metadata,
+                    selectedNodeMetadata.current.fileName
+                );
+                setCategories([]);
+                setSidePanelView(SidePanelView.KNOWLEDGE_BASE_LIST);
             } else if (sidePanelView === SidePanelView.CHUNKERS) {
                 handleOnSelectNode(
                     selectedNodeMetadata.current.nodeId,
@@ -1478,7 +1460,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 setSidePanelView(SidePanelView.CHUNKER_LIST);
             } else if (
                 sidePanelView === SidePanelView.FORM &&
-                selectedNodeMetadata.current.metadata.node.codedata.node === "VECTOR_KNOWLEDGE_BASE"
+                selectedNodeMetadata.current.metadata.node.codedata.node === "KNOWLEDGE_BASE"
             ) {
                 handleOnSelectNode(
                     selectedNodeMetadata.current.nodeId,
@@ -1486,7 +1468,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                     selectedNodeMetadata.current.fileName
                 );
                 setCategories([]);
-                setSidePanelView(SidePanelView.VECTOR_KNOWLEDGE_BASE_LIST);
+                setSidePanelView(SidePanelView.KNOWLEDGE_BASE_LIST);
             } else if (
                 sidePanelView === SidePanelView.FUNCTION_LIST ||
                 sidePanelView === SidePanelView.DATA_MAPPER_LIST ||
@@ -1494,7 +1476,7 @@ 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.KNOWLEDGE_BASE_LIST ||
                 sidePanelView === SidePanelView.DATA_LOADER_LIST ||
                 sidePanelView === SidePanelView.CHUNKER_LIST
             ) {
@@ -1684,22 +1666,18 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         // Push current state to navigation stack
         pushToNavigationStack(sidePanelView, categories, selectedNodeRef.current, selectedClientName.current);
 
-        // Update the node type to VECTOR_KNOWLEDGE_BASE and get the template
-        const updatedMetadata = { ...selectedNodeMetadata.current.metadata };
-        updatedMetadata.node.codedata.node = "VECTOR_KNOWLEDGE_BASE";
-        selectedNodeMetadata.current.metadata = updatedMetadata;
-
+        // Use search to get available knowledge base types
         rpcClient
             .getBIDiagramRpcClient()
-            .getNodeTemplate({
-                position: targetRef.current.startLine,
+            .search({
+                position: { startLine: targetRef.current.startLine, endLine: targetRef.current.endLine },
                 filePath: model?.fileName,
-                id: updatedMetadata.node.codedata,
+                queryMap: undefined,
+                searchKind: "KNOWLEDGE_BASE",
             })
             .then((response) => {
-                selectedNodeRef.current = response.flowNode;
-                showEditForm.current = false;
-                setSidePanelView(SidePanelView.FORM);
+                setCategories(convertKnowledgeBaseCategoriesToSidePanelCategories(response.categories as Category[]));
+                setSidePanelView(SidePanelView.KNOWLEDGE_BASES);
                 setShowSidePanel(true);
             })
             .finally(() => {
@@ -1857,10 +1835,10 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
 
     // AI Agent callback handlers
     const handleOnEditAgentModel = async (agentCallNode: FlowNode) => {
-        const moduleNodes = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
-        const agentNode = moduleNodes.flowModel.connections.find((node) => node.properties.variable.value === agentCallNode.properties.connection.value);
+        const agentNode = await findAgentNodeFromAgentCallNode(agentCallNode, rpcClient);
         if (!agentNode) {
             console.error(`Agent node not found`, agentCallNode);
+            return;
         }
 
         selectedNodeRef.current = agentNode;
@@ -1870,8 +1848,53 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         setShowSidePanel(true);
     };
 
-    const handleOnSelectMemoryManager = (node: FlowNode) => {
-        selectedNodeRef.current = node;
+    const handleOnSelectMemoryManager = async (agentCallNode: FlowNode) => {
+        // Use the helper function to find the agent node from agent call node
+        const agentNode = await findAgentNodeFromAgentCallNode(agentCallNode, rpcClient);
+
+        if (!agentNode) {
+            console.error(`Agent node not found for agent call node`, agentCallNode);
+            return;
+        }
+
+        // Check if agent already has a configured memory manager
+        const agentMemoryValue = agentNode?.properties?.memory?.value;
+
+        // Find the existing memory manager node using searchNodes API
+        let existingMemoryVariable;
+        if (agentMemoryValue) {
+            const fileName = agentNode.codedata?.lineRange?.fileName;
+            if (fileName) {
+                const filePath = await rpcClient.getVisualizerRpcClient().joinProjectPath(fileName);
+                const startLine = agentNode.codedata?.lineRange?.startLine;
+                const linePosition = startLine
+                    ? {
+                        line: startLine.line,
+                        offset: startLine.offset
+                    }
+                    : undefined;
+
+                const queryMap = {
+                    kind: "MEMORY" as const,
+                    exactMatch: agentMemoryValue.toString().trim()
+                };
+
+                const memoryNodes = await findFlowNode(rpcClient, filePath, linePosition, queryMap);
+                existingMemoryVariable = memoryNodes && memoryNodes.length > 0 ? memoryNodes[0] : undefined;
+            }
+        }
+
+        // Initialize and sync memory metadata between nodes
+        agentNode.metadata.data = agentNode.metadata.data || {} as NodeMetadata;
+        const agentCallMetadata = agentCallNode.metadata.data as NodeMetadata;
+
+        if (agentCallMetadata?.memory) {
+            (agentNode.metadata.data as NodeMetadata).memory = agentCallMetadata.memory;
+        }
+
+        // Open memory manager panel
+        selectedNodeRef.current = existingMemoryVariable;
+        parentNodeRef.current = agentNode;
         showEditForm.current = true;
         setSidePanelView(SidePanelView.AGENT_MEMORY_MANAGER);
         setShowSidePanel(true);
@@ -1882,7 +1905,10 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         setShowProgressIndicator(true);
         try {
             const agentNode = await findAgentNodeFromAgentCallNode(node, rpcClient);
-            const agentFilePath = await getAgentFilePath(rpcClient);
+            if (!agentNode) {
+                console.error("Agent node not found for deleting memory manager:", node);
+                return;
+            }
 
             // remove memory manager statement if any
             if (agentNode.properties.memory && agentNode.properties.memory?.value !== "()") {
@@ -1890,39 +1916,22 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 if (memoryVar) {
                     const memoryNode = await findFlowNodeByModuleVarName(memoryVar, rpcClient);
                     if (memoryNode) {
+                        const memoryFilePath = await rpcClient.getVisualizerRpcClient().joinProjectPath(memoryNode.codedata.lineRange.fileName);
                         await rpcClient.getBIDiagramRpcClient().deleteFlowNode({
-                            filePath: agentFilePath,
+                            filePath: memoryFilePath,
                             flowNode: memoryNode,
                         });
                     }
                 }
             }
 
-            // Create a clone of the agent node to modify
-            const updatedAgentNode = cloneDeep(agentNode);
-
             // Remove memory manager from agent node
-            if (!updatedAgentNode.properties.memory) {
-                updatedAgentNode.properties.memory = {
-                    value: "",
-                    advanced: true,
-                    optional: true,
-                    editable: true,
-                    valueType: "EXPRESSION",
-                    valueTypeConstraint: "agent:MemoryManager",
-                    metadata: {
-                        label: "Memory Manager",
-                        description: "The memory manager used by the agent to store and manage conversation history",
-                    },
-                    placeholder: "object {}",
-                };
-            } else {
-                agentNode.properties.memory.value = "()";
-            }
-            // Generate the source code
-            const agentResponse = await rpcClient
+            agentNode.properties.memory.value = "()";
+            const agentFilePath = await rpcClient.getVisualizerRpcClient().joinProjectPath(agentNode.codedata.lineRange.fileName);
+            await rpcClient
                 .getBIDiagramRpcClient()
                 .getSourceCode({ filePath: agentFilePath, flowNode: agentNode });
+
         } catch (error) {
             console.error("Error deleting memory manager:", error);
             alert("Failed to remove memory manager. Please try again.");
@@ -2044,7 +2053,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
     };
 
     const updateNodeWithConnection = async (selectedNode: FlowNode) => {
-        if (selectedNode.codedata.node === "VECTOR_KNOWLEDGE_BASE") {
+        if (selectedNode.codedata.node === "KNOWLEDGE_BASE") {
             setSidePanelView(SidePanelView.FORM);
             return;
         }
@@ -2054,36 +2063,84 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         closeSidePanelAndFetchUpdatedFlowModel();
     };
 
+    const deleteMcpVariableAndClass = async (tool: ToolData) => {
+        const variableNodes = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
+        const mcpVariable = variableNodes.flowModel?.variables?.find(
+            (v) => v.codedata?.node === "MCP_TOOL_KIT" && v.properties.variable?.value === tool.name
+        );
+
+        if (!mcpVariable) {
+            return;
+        }
+
+        // Delete the MCP variable node
+        const mcpVariableFilePath = await rpcClient
+            .getVisualizerRpcClient()
+            .joinProjectPath(mcpVariable.codedata.lineRange.fileName);
+
+        await rpcClient.getBIDiagramRpcClient().deleteFlowNode({
+            filePath: mcpVariableFilePath,
+            flowNode: mcpVariable,
+        });
+
+        // Delete the MCP class if it's a custom class (not the default ai:McpToolKit)
+        const isCustomMcpClass = mcpVariable?.properties?.type?.value !== "ai:McpToolKit";
+        if (!isCustomMcpClass) {
+            return;
+        }
+
+        const classDefinition = mcpVariable?.codedata?.data["mcpClassDefinition"] as CodeData;
+        const classLineRange = classDefinition?.lineRange;
+
+        if (!classLineRange) {
+            return;
+        }
+
+        const classFilePath = await rpcClient
+            .getVisualizerRpcClient()
+            .joinProjectPath(classLineRange.fileName);
+
+        await rpcClient.getBIDiagramRpcClient().deleteByComponentInfo({
+            filePath: classFilePath,
+            component: {
+                name: "CLASS",
+                filePath: classFilePath,
+                startLine: classLineRange.startLine.line,
+                startColumn: classLineRange.startLine.offset,
+                endLine: classLineRange.endLine.line,
+                endColumn: classLineRange.endLine.offset,
+            },
+        });
+    };
+
     const handleOnDeleteTool = async (tool: ToolData, node: FlowNode) => {
         selectedNodeRef.current = node;
         setShowProgressIndicator(true);
+
         try {
             const agentNode = await findAgentNodeFromAgentCallNode(node, rpcClient);
+            const agentFilePath = await rpcClient
+                .getVisualizerRpcClient()
+                .joinProjectPath(agentNode.codedata.lineRange.fileName);
+
+            // Remove the tool from the agent node
             const updatedAgentNode = await removeToolFromAgentNode(agentNode, tool.name);
-            const agentFilePath = await getAgentFilePath(rpcClient);
-            const toolType = tool.type ?? "";
-            if (toolType.includes("MCP Server")) {
-                const updateAgentNode = removeMcpServerFromAgentNode(updatedAgentNode, tool.name);
-
-                // Delete the MCP client variable node
-                const variableNodes = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
-                const mcpVariable = variableNodes.flowModel?.variables?.find(
-                    (v) => v.properties?.type?.value === "ai:McpToolKit" && v.properties.variable?.value === tool.name
-                );
 
-                if (mcpVariable) {
-                    await rpcClient.getBIDiagramRpcClient().deleteFlowNode({
-                        filePath: agentFilePath,
-                        flowNode: mcpVariable,
-                    });
-                }
+            const isMcpServerTool = tool.type?.includes("MCP Server");
+            if (isMcpServerTool) {
+                // Handle MCP Server deletion: clean up variable node and class definition
+                await deleteMcpVariableAndClass(tool);
 
-                const agentResponse = await rpcClient
+                // Update agent node to remove MCP server reference
+                const finalAgentNode = removeMcpServerFromAgentNode(updatedAgentNode, tool.name);
+                await rpcClient
                     .getBIDiagramRpcClient()
-                    .getSourceCode({ filePath: agentFilePath, flowNode: updateAgentNode });
+                    .getSourceCode({ filePath: agentFilePath, flowNode: finalAgentNode });
+
                 onSave?.();
             } else {
-                const agentResponse = await rpcClient
+                // Handle regular tool deletion
+                await rpcClient
                     .getBIDiagramRpcClient()
                     .getSourceCode({ filePath: agentFilePath, flowNode: updatedAgentNode });
             }
@@ -2179,6 +2236,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 visible: selectedNodeId !== undefined,
                 onClickOverlay: handleOnCloseSidePanel,
             },
+            isUserAuthenticated,
         }),
         [
             flowModel,
@@ -2191,11 +2249,12 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             hasDraft,
             selectedNodeId,
             rpcClient,
+            isUserAuthenticated,
         ]
     );
 
     return (
-        <>
+        <PanelOverlayProvider>
             <View>
                 {(showProgressIndicator || fetchingAiSuggestions) && model && (
                     <ProgressIndicator color={ThemeColors.PRIMARY} />
@@ -2212,6 +2271,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 subPanel={subPanel}
                 categories={categories}
                 selectedNode={selectedNodeRef.current}
+                parentNode={parentNodeRef.current}
                 nodeFormTemplate={nodeTemplateRef.current}
                 selectedClientName={selectedClientName.current}
                 showEditForm={showEditForm.current}
@@ -2266,6 +2326,8 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 selectedMcpToolkitName={selectedMcpToolkitName}
                 onNavigateToPanel={handleOnNavigateToPanel}
             />
-        </>
+
+            <PanelOverlayRenderer />
+        </PanelOverlayProvider>
     );
 }
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 3aa089e4854..aaf910ba3ee 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FocusFlowDiagram/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FocusFlowDiagram/index.tsx
@@ -42,7 +42,8 @@ import {
     TriggerCharacter,
     TextEdit,
     ParentMetadata,
-    UpdatedArtifactsResponse
+    UpdatedArtifactsResponse,
+    NodePosition
 } from "@wso2/ballerina-core";
 import { PanelContainer } from "@wso2/ballerina-side-panel";
 import { ConnectionConfig, ConnectionCreator, ConnectionSelectionList } from "../../../components/ConnectionSelector";
@@ -56,7 +57,6 @@ import {
     updateLineRange,
 } from "../../../utils/bi";
 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";
@@ -78,7 +78,7 @@ export interface BIFocusFlowDiagramProps {
     projectPath: string;
     filePath: string;
     onUpdate: () => void;
-    onReady: (fileName: string, parentMetadata?: ParentMetadata) => void;
+    onReady: (fileName: string, parentMetadata?: ParentMetadata, position?: NodePosition) => void;
 }
 
 export function BIFocusFlowDiagram(props: BIFocusFlowDiagramProps) {
@@ -164,13 +164,16 @@ export function BIFocusFlowDiagram(props: BIFocusFlowDiagramProps) {
                                 const parentMetadata = model.flowModel.nodes.find(
                                     (node) => node.codedata.node === "EVENT_START"
                                 )?.metadata.data as ParentMetadata | undefined;
-                                onReady(model.flowModel.fileName, parentMetadata);
+                                // Get visualizer location and pass position to onReady
+                                rpcClient.getVisualizerLocation().then((location: VisualizerLocation) => {
+                                    onReady(model.flowModel.fileName, parentMetadata, location?.position);
+                                });
                             }
                         }
                     })
                     .finally(() => {
                         setShowProgressIndicator(false);
-                        onReady(undefined);
+                        onReady(undefined, undefined, undefined);
                     });
             });
     };
@@ -330,41 +333,6 @@ export function BIFocusFlowDiagram(props: BIFocusFlowDiagramProps) {
             });
     };
 
-    const updateCurrentArtifactLocation = async (artifacts: UpdatedArtifactsResponse) => {
-        console.log(">>> Updating current artifact location", { artifacts });
-        // Get the updated component and update the location
-        const currentIdentifier = (await rpcClient.getVisualizerLocation()).identifier;
-        // Find the correct artifact by currentIdentifier (id)
-        let currentArtifact = artifacts.artifacts.at(0);
-        artifacts.artifacts.forEach((artifact: any) => {
-            if (artifact.id === currentIdentifier || artifact.name === currentIdentifier) {
-                currentArtifact = artifact;
-            }
-            // Check if artifact has resources and find within those
-            if (artifact.resources && artifact.resources.length > 0) {
-                const resource = artifact.resources.find(
-                    (resource: any) => resource.id === currentIdentifier || resource.name === currentIdentifier
-                );
-                if (resource) {
-                    currentArtifact = resource;
-                }
-            }
-        });
-        
-        if (currentArtifact) {
-            console.log(">>> currentArtifact", currentArtifact);
-            await rpcClient.getVisualizerRpcClient().openView({
-                type: EVENT_TYPE.UPDATE_PROJECT_LOCATION,
-                location: {
-                    documentUri: currentArtifact.path,
-                    position: currentArtifact.position,
-                    identifier: currentIdentifier,
-                },
-            });
-        }
-        debouncedGetFlowModel();
-    };
-
     const handleOnEditNode = (node: FlowNode) => {
         console.log(">>> on edit node", node);
         selectedNodeRef.current = node;
@@ -678,11 +646,11 @@ export function BIFocusFlowDiagram(props: BIFocusFlowDiagramProps) {
                 >
                     {connectionView === SidePanelView.CONNECTION_CONFIG && (
                         <ConnectionConfig
+                            fileName={filePath}
                             connectionKind={selectedConnectionKind}
                             selectedNode={selectedNodeRef.current}
                             onSave={handleUpdateNodeWithConnection}
                             onNavigateToSelectionList={handleNavigateToSelectionList}
-                            // onCreateNew={handleCreateNewConnection}
                         />
                     )}
                     {connectionView === SidePanelView.CONNECTION_SELECT && (
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/ForkForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/ForkForm/index.tsx
index 25707f4ff2a..1f8a1504e78 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/ForkForm/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/ForkForm/index.tsx
@@ -318,6 +318,7 @@ export function ForkForm(props: ForkFormProps) {
                                 control={control}
                                 field={field}
                                 watch={watch}
+                                setValue={setValue}
                                 openSubPanel={openSubPanel}
                                 targetLineRange={targetLineRange}
                                 fileName={fileName}
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 ba568aa4f2a..103296b78e2 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
@@ -49,6 +49,7 @@ import {
     FormExpressionEditorProps,
     PanelContainer,
     FormImports,
+    HelperpaneOnChangeOptions,
 } from "@wso2/ballerina-side-panel";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import {
@@ -73,6 +74,7 @@ import {
     injectHighlightTheme,
     removeDuplicateDiagnostics,
     updateLineRange,
+    convertRecordTypeToCompletionItem,
 } from "../../../../utils/bi";
 import IfForm from "../IfForm";
 import { cloneDeep, debounce } from "lodash";
@@ -90,13 +92,14 @@ import MatchForm from "../MatchForm";
 import { FormSubmitOptions } from "../../FlowDiagram";
 import { getHelperPaneNew } from "../../HelperPaneNew";
 import { VariableForm } from "../DeclareVariableForm";
-import VectorKnowledgeBaseForm from "../VectorKnowledgeBaseForm";
+import KnowledgeBaseForm from "../KnowledgeBaseForm";
 import { EditorContext, StackItem, TypeHelperItem } from "@wso2/type-editor";
 import DynamicModal from "../../../../components/Modal";
 import React from "react";
 import { SidePanelView } from "../../FlowDiagram/PanelManager";
 import { ConnectionKind } from "../../../../components/ConnectionSelector";
 import { getImportedTypes } from "../../TypeEditor/utils";
+import { useModalStack } from "../../../../Context";
 
 interface TypeEditorState {
     isOpen: boolean;
@@ -130,11 +133,14 @@ interface FormProps {
     handleOnFormSubmit?: (updatedNode?: FlowNode, dataMapperMode?: DataMapperDisplayMode, 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;
+    injectedComponents?: {
+        component: React.ReactNode;
+        index: number;
+    }[];
     navigateToPanel?: (panel: SidePanelView, connectionKind?: ConnectionKind) => void;
+    fieldPriority?: Record<string, number>; // Map of field keys to priority numbers (lower = rendered first)
+    fieldOverrides?: Record<string, Partial<FormField>>;
 }
 
 // Styled component for the action button description
@@ -206,9 +212,9 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         handleOnFormSubmit,
         isInModal,
         scopeFieldAddon,
-        newServerUrl,
         onChange,
-        mcpTools,
+        injectedComponents,
+        fieldPriority,
     } = props;
 
     const { rpcClient } = useRpcContext();
@@ -227,8 +233,22 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
     const [filteredTypes, setFilteredTypes] = useState<CompletionItem[]>([]);
     const expressionOffsetRef = useRef<number>(0); // To track the expression offset on adding import statements
 
+    const { addModal, closeModal, popModal } = useModalStack()
+
     const [selectedType, setSelectedType] = useState<CompletionItem | null>(null);
 
+    const skipFormValidation = useMemo(() => {
+        const isAgentNode = node && (
+            node.codedata.node === "AGENT_CALL" &&
+            node.codedata.org === "ballerina" &&
+            node.codedata.module === "ai" &&
+            node.codedata.packageName === "ai" &&
+            node.codedata.object === "Agent" &&
+            node.codedata.symbol === "run"
+        );
+        return isAgentNode;
+    }, [node]);
+
     const importsCodedataRef = useRef<any>(null); // To store codeData for getVisualizableFields
 
     //stack for recursive type creation
@@ -325,7 +345,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         if (node.codedata.node === "IF") {
             return;
         }
-        initForm();
+        initForm(node);
         handleFormOpen();
 
         return () => {
@@ -351,7 +371,27 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
             });
     };
 
-    const initForm = () => {
+    // Sorts form fields based on the fieldPriority prop.
+    //  Fields with lower priority numbers are rendered first.
+    const sortFieldsByPriority = (fields: FormField[]): FormField[] => {
+        if (!fieldPriority || Object.keys(fieldPriority).length === 0) {
+            return fields;
+        }
+
+        return [...fields].sort((a, b) => {
+            const priorityA = fieldPriority[a.key] ?? Number.MAX_SAFE_INTEGER;
+            const priorityB = fieldPriority[b.key] ?? Number.MAX_SAFE_INTEGER;
+
+            // If priorities are equal, maintain original order
+            if (priorityA === priorityB) {
+                return 0;
+            }
+
+            return priorityA - priorityB;
+        });
+    };
+
+    const initForm = (node: FlowNode) => {
         const formProperties = getFormProperties(node);
         let enrichedNodeProperties;
         if (nodeFormTemplate) {
@@ -379,31 +419,76 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         }
 
         // Extract fields with typeMembers where kind is RECORD_TYPE
-        const recordTypeFields = Object.entries(formProperties)
-            .filter(([_, property]) =>
-                property.typeMembers &&
-                property.typeMembers.some(member => member.kind === "RECORD_TYPE")
-            )
-            .map(([key, property]) => ({
-                key,
-                property,
-                recordTypeMembers: property.typeMembers.filter(member => member.kind === "RECORD_TYPE")
-            }));
-
-        setRecordTypeFields(recordTypeFields);
+        if (recordTypeFields?.length === 0) {
+            const recordTypeFields = Object.entries(formProperties)
+                .filter(([_, property]) =>
+                    property.typeMembers &&
+                    property.typeMembers.some(member => member.kind === "RECORD_TYPE")
+                )
+                .map(([key, property]) => ({
+                    key,
+                    property,
+                    recordTypeMembers: property.typeMembers.filter(member => member.kind === "RECORD_TYPE")
+                }));
+
+            setRecordTypeFields(recordTypeFields);
+        }
 
         // get node properties
-        const fields = convertNodePropertiesToFormFields(enrichedNodeProperties || formProperties, connections, clientName);
-        setFields(fields);
-        setFormImports(getImportsForFormFields(fields));
+        let fields = convertNodePropertiesToFormFields(enrichedNodeProperties || formProperties, connections, clientName);
+
+        // Apply field overrides if provided
+        if (props.fieldOverrides) {
+            fields = fields.map(field => {
+                const override = props.fieldOverrides[field.key];
+                if (override) {
+                    return { ...field, ...override };
+                }
+                return field;
+            });
+        }
+
+        const sortedFields = sortFieldsByPriority(fields);
+        setFields(sortedFields);
+        setFormImports(getImportsForFormFields(sortedFields));
     };
 
+    const setDiagnosticsToFields = (data: FormValues, nodeWithDiagnostics: FlowNode) => {
+        const updatedFields = fields.map((field) => {
+            const updatedField = { ...field };
+            
+            // Update value from current form data
+            if (data[field.key] !== undefined) {
+                updatedField.value = data[field.key];
+            }
+            
+            // Update diagnostics from nodeWithDiagnostics
+            const nodeProperties = nodeWithDiagnostics?.properties as any;
+            const propertyDiagnostics = nodeProperties?.[field.key]?.diagnostics?.diagnostics;
+            if (propertyDiagnostics && Array.isArray(propertyDiagnostics)) {
+                updatedField.diagnostics = propertyDiagnostics;
+            } else {
+                updatedField.diagnostics = [];
+            }
+            return updatedField;
+        });
+        setFields(updatedFields);
+    }
+
     const handleOnSubmit = (data: FormValues, dirtyFields: any) => {
         console.log(">>> FormGenerator handleOnSubmit", data);
         if (node && targetLineRange) {
             const updatedNode = mergeFormDataWithFlowNode(data, targetLineRange, dirtyFields);
             const dataMapperMode = data["openInDataMapper"] ? DataMapperDisplayMode.VIEW : DataMapperDisplayMode.NONE;
-            onSubmit( updatedNode, dataMapperMode, formImports);
+            onSubmit(updatedNode, dataMapperMode, formImports);
+        }
+    };
+
+    const handleOnBlur = async (data: FormValues, dirtyFields: any) => {
+        if (node && targetLineRange && !skipFormValidation) {
+            const updatedNode = mergeFormDataWithFlowNode(data, targetLineRange, dirtyFields);
+            const nodeWithDiagnostics = await getFormWithDiagnostics(updatedNode);
+            setDiagnosticsToFields(data, nodeWithDiagnostics!);
         }
     };
 
@@ -633,6 +718,40 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         return await convertToFnSignature(signatureHelp);
     };
 
+    const getFormWithDiagnostics = async (node: FlowNode): Promise<FlowNode | null> => {
+        try {
+            // Update node with new line range only for creation forms (not edit forms)
+            const nodeToProcess = props.editForm
+                ? node
+                : createNodeWithUpdatedLineRange(node, targetLineRange);
+            const response = await rpcClient.getBIDiagramRpcClient().getFormDiagnostics({
+                flowNode: nodeToProcess,
+                filePath: fileName
+            });
+
+            if (response.flowNode) {
+                return response.flowNode as FlowNode;
+            }
+            return node;
+        } catch (error) {
+            console.error(">>> Error getting form diagnostics", error);
+            return null;
+        }
+    };
+
+    const handleFormValidation = async (data: FormValues, dirtyFields?: any): Promise<boolean> => {
+        if (node && targetLineRange && !skipFormValidation) {
+            const updatedNode = mergeFormDataWithFlowNode(data, targetLineRange, dirtyFields);
+            const nodeWithDiagnostics = await getFormWithDiagnostics(updatedNode);
+            setDiagnosticsToFields(data, nodeWithDiagnostics!);
+
+            if (nodeWithDiagnostics?.diagnostics?.hasDiagnostics) {
+                return false
+            }
+        }
+        return true;
+    };
+
     const handleExpressionFormDiagnostics = useCallback(
         debounce(
             async (
@@ -720,7 +839,9 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
             }
             return field;
         });
-        handleSelectedTypeByName(type.name);
+        if (type.codedata.node === "RECORD") {
+            handleSelectedTypeChange(convertRecordTypeToCompletionItem(type));
+        }
         setFields(updatedFields);
     };
 
@@ -772,7 +893,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         anchorRef: RefObject<HTMLDivElement>,
         defaultValue: string,
         value: string,
-        onChange: (value: string, updatedCursorPosition: number) => void,
+        onChange: (value: string, options?: HelperpaneOnChangeOptions) => void,
         changeHelperPaneState: (isOpen: boolean) => void,
         helperPaneHeight: HelperPaneHeight,
         recordTypeField?: RecordTypeField,
@@ -789,7 +910,6 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
             fieldKey: fieldKey,
             fileName: fileName,
             targetLineRange: updateLineRange(targetLineRange, expressionOffsetRef.current),
-            exprRef: exprRef,
             anchorRef: anchorRef,
             onClose: handleHelperPaneClose,
             defaultValue: defaultValue,
@@ -854,14 +974,31 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         });
     }
 
+    const getExpressionTokens = async (expression: string, filePath: string, position: LinePosition): Promise<number[]> => {
+        return rpcClient.getBIDiagramRpcClient().getExpressionTokens({
+            expression: expression,
+            filePath: filePath,
+            position: position
+        })
+    }
+
+    const popupManager = {
+        addPopup: addModal,
+        removeLastPopup: popModal,
+        closePopup: closeModal
+    }
+
     const expressionEditor = useMemo(() => {
         return {
-            completions: filteredCompletions,
+            completions: completions,
             triggerCharacters: TRIGGER_CHARACTERS,
             retrieveCompletions: handleRetrieveCompletions,
             extractArgsFromFunction: extractArgsFromFunction,
             types: filteredTypes,
             referenceTypes: types,
+            rpcManager: {
+                getExpressionTokens: getExpressionTokens
+            },
             retrieveVisibleTypes: handleGetVisibleTypes,
             getHelperPane: handleGetHelperPane,
             getTypeHelper: handleGetTypeHelper,
@@ -896,12 +1033,13 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         importsCodedataRef.current = null;
     };
 
-    const onSaveType = (type: Type) => {
-        handleValueTypeConstChange(type.name);
+    const onSaveType = (type: Type | string) => {
+        handleValueTypeConstChange(typeof type === 'string' ? type : (type as Type).name);
         if (stack.length > 0) {
             setRefetchForCurrentModal(true);
             popTypeStack();
         }
+        handleSelectedTypeChange(typeof type === 'string' ? type : (type as Type).name);
         setTypeEditorState({ ...typeEditorState, isOpen: stack.length !== 1 });
     }
 
@@ -942,8 +1080,8 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
 
         // If not a Record, remove the 'expression' entry from recordTypeFields and return
         if (type?.labelDetails?.description !== "Record") {
-            if (type.labelDetails.detail === "Structural Types" 
-                || type.labelDetails.detail === "Behaviour Types" 
+            if (type.labelDetails.detail === "Structural Types"
+                || type.labelDetails.detail === "Behaviour Types"
                 || isTypeExcludedFromValueTypeConstraint(type.label)
             ) {
                 setValueTypeConstraints('');
@@ -1083,10 +1221,10 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         });
     };
 
-    const getDefaultValue = () => {
+    const getDefaultValue = (typeName?: string) => {
         return ({
             type: {
-                name: "MyType",
+                name: typeName || "MyType",
                 members: [] as Member[],
                 editable: true,
                 metadata: {
@@ -1104,8 +1242,8 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         })
     }
 
-    const getNewTypeCreateForm = () => {
-        pushTypeStack(getDefaultValue());
+    const getNewTypeCreateForm = (typeName?: string) => {
+        pushTypeStack(getDefaultValue(typeName));
     }
 
     // handle if node form
@@ -1163,9 +1301,9 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
     }
 
     // handle vector knowledge base form
-    if (node?.codedata.node === "VECTOR_KNOWLEDGE_BASE") {
+    if (node?.codedata.node === "KNOWLEDGE_BASE") {
         return (
-            <VectorKnowledgeBaseForm
+            <KnowledgeBaseForm
                 fileName={fileName}
                 node={node}
                 targetLineRange={targetLineRange}
@@ -1206,6 +1344,12 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
 
     // handle declare variable node form
     if (node?.codedata.node === "VARIABLE") {
+        // HACK: make the type field optional for variable declaration form
+        const typeField = fields.find(field => field.key === "type");
+        if (typeField) {
+            typeField.optional = true;
+        }
+
         return (
             <EditorContext.Provider value={{ stack, push: pushTypeStack, pop: popTypeStack, peek: peekTypeStack, replaceTop: replaceTop }}>
                 <VariableForm
@@ -1214,6 +1358,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                     selectedNode={node.codedata.node}
                     openRecordEditor={handleOpenTypeEditor}
                     onSubmit={handleOnSubmit}
+                    onBlur={handleOnBlur}
                     openView={handleOpenView}
                     openSubPanel={openSubPanel}
                     subPanelView={subPanelView}
@@ -1221,6 +1366,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                     targetLineRange={targetLineRange}
                     fileName={fileName}
                     isSaving={showProgressIndicator}
+                    onFormValidation={handleFormValidation}
                     submitText={submitText}
                     updatedExpressionField={updatedExpressionField}
                     resetUpdatedExpressionField={resetUpdatedExpressionField}
@@ -1245,19 +1391,19 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                         title="Create New Type"
                         openState={typeEditorState.isOpen}
                         setOpenState={handleTypeEditorStateChange}>
-                        <div style={{ padding: '0px 15px' }}>
-                            {stack.slice(0, i + 1).length > 1 && (
-                                <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>
-                            )}
+                        {stack.slice(0, i + 1).length > 1 && (
+                            <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>
+                        )}
+                        <div style={{ height: '560px', overflow: 'auto' }}>
                             <FormTypeEditor
                                 type={peekTypeStack()?.type}
                                 newType={peekTypeStack() ? peekTypeStack().isDirty : false}
@@ -1289,7 +1435,9 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                     projectPath={projectPath}
                     selectedNode={node.codedata.node}
                     openRecordEditor={handleOpenTypeEditor}
+                    popupManager={popupManager}
                     onSubmit={handleOnSubmit}
+                    onBlur={handleOnBlur}
                     openView={handleOpenView}
                     openSubPanel={openSubPanel}
                     subPanelView={subPanelView}
@@ -1297,6 +1445,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                     targetLineRange={targetLineRange}
                     fileName={fileName}
                     isSaving={showProgressIndicator}
+                    onFormValidation={handleFormValidation}
                     submitText={submitText}
                     updatedExpressionField={updatedExpressionField}
                     resetUpdatedExpressionField={resetUpdatedExpressionField}
@@ -1316,10 +1465,8 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                         node.codedata.node === ("ASSIGN" as NodeKind)
                     }
                     scopeFieldAddon={scopeFieldAddon}
-                    newServerUrl={newServerUrl}
                     onChange={onChange}
-                    mcpTools={mcpTools}
-                    onToolsChange={props.onToolsChange}
+                    injectedComponents={injectedComponents}
                 />
             )}
             {stack.map((item, i) => (
@@ -1332,17 +1479,17 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                     openState={typeEditorState.isOpen}
                     setOpenState={handleTypeEditorStateChange}
                 >
-                    <div style={{ padding: "0px 20px" }}>
-                        {stack.slice(0, i + 1).length > 2 && (
-                            <BreadcrumbContainer>
-                                {stack.slice(0, i + 1).map((stackItem, index) => (
-                                    <React.Fragment key={index}>
-                                        {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
-                                        <BreadcrumbItem>{stackItem?.type?.name || "NewType"}</BreadcrumbItem>
-                                    </React.Fragment>
-                                ))}
-                            </BreadcrumbContainer>
-                        )}
+                    {stack.slice(0, i + 1).length > 2 && (
+                        <BreadcrumbContainer>
+                            {stack.slice(0, i + 1).map((stackItem, index) => (
+                                <React.Fragment key={index}>
+                                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
+                                    <BreadcrumbItem>{stackItem?.type?.name || "NewType"}</BreadcrumbItem>
+                                </React.Fragment>
+                            ))}
+                        </BreadcrumbContainer>
+                    )}
+                    <div style={{ height: '560px', overflow: 'auto' }}>
                         <FormTypeEditor
                             type={peekTypeStack()?.type}
                             newType={peekTypeStack() ? peekTypeStack().isDirty : false}
@@ -1351,7 +1498,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                             isGraphql={isGraphql}
                             onTypeChange={onTypeChange}
                             onSaveType={onSaveType}
-                            onTypeCreate={() => {}}
+                            onTypeCreate={() => { }}
                             getNewTypeCreateForm={getNewTypeCreateForm}
                             refetchTypes={refetchStates[i]}
                         />
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 80d64beda71..e3a0b3dc3f0 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
@@ -42,7 +42,8 @@ import {
     Form,
     ExpressionFormField,
     FormExpressionEditorProps,
-    FormImports
+    FormImports,
+    HelperpaneOnChangeOptions
 } from "@wso2/ballerina-side-panel";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import { CompletionItem, FormExpressionEditorRef, HelperPaneHeight, Overlay, ThemeColors } from "@wso2/ui-toolkit";
@@ -61,12 +62,13 @@ import {
 import { debounce } from "lodash";
 import { FormTypeEditor } from "../../TypeEditor";
 import { getTypeHelper } from "../../TypeHelper";
-import { EXPRESSION_EXTRACTION_REGEX } from "../../../../constants";
+import { EXPRESSION_EXTRACTION_REGEX, TypeHelperContext } 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";
+import { useModalStack } from "../../../../Context";
 
 interface TypeEditorState {
     isOpen: boolean;
@@ -105,6 +107,9 @@ interface FormProps {
         component: ReactNode;
         index: number;
     }[];
+    changeOptionalFieldTitle?: string;
+    onChange?: (fieldKey: string, value: any, allValues: FormValues) => void;
+    hideSaveButton?: boolean;
 }
 
 export function FormGeneratorNew(props: FormProps) {
@@ -134,6 +139,9 @@ export function FormGeneratorNew(props: FormProps) {
         description,
         preserveFieldOrder,
         injectedComponents,
+        changeOptionalFieldTitle,
+        onChange,
+        hideSaveButton
     } = props;
 
     const { rpcClient } = useRpcContext();
@@ -148,6 +156,7 @@ export function FormGeneratorNew(props: FormProps) {
     const prevCompletionFetchText = useRef<string>("");
     const [completions, setCompletions] = useState<CompletionItem[]>([]);
     const [filteredCompletions, setFilteredCompletions] = useState<CompletionItem[]>([]);
+    const typesCache = useRef<Map<string, CompletionItem[]>>(new Map());
     const [types, setTypes] = useState<CompletionItem[]>([]);
     const [filteredTypes, setFilteredTypes] = useState<CompletionItem[]>([]);
     const expressionOffsetRef = useRef<number>(0); // To track the expression offset on adding import statements
@@ -158,12 +167,45 @@ export function FormGeneratorNew(props: FormProps) {
     const [selectedType, setSelectedType] = useState<CompletionItem | null>(null);
     const [refetchStates, setRefetchStates] = useState<boolean[]>([false]);
     const [valueTypeConstraints, setValueTypeConstraints] = useState<string>();
+
+    const { addModal, closeModal, popModal } = useModalStack();
+
     //stack for recursive type creation
     const [stack, setStack] = useState<StackItem[]>([{
         isDirty: false,
         type: undefined
     }]);
 
+    const [isTypeEditorOpen, setIsTypeEditorOpen] = useState<boolean>(false);
+    const [editingTypeName, setEditingTypeName] = useState<string>("");
+
+    const handleOpenFormTypeEditor = (open: boolean, typeName?: string) => {
+        setIsTypeEditorOpen(open);
+        if (typeName) {
+            setEditingTypeName(typeName);
+        } else {
+            setEditingTypeName("");
+        }
+    };
+
+    const handleTypeEditorClose = () => {
+        setIsTypeEditorOpen(false);
+    };
+
+    const handleTypeCreated = (type: Type | string) => {
+        setIsTypeEditorOpen(false);
+        setEditingTypeName("");
+        if (type) {
+            const typeName = typeof type === 'string' ? type : (type as Type).name;
+            setFields(fields.map((field) => {
+                if (field.key === 'type') {
+                    return { ...field, value: typeName };
+                }
+                return field;
+            }));
+        }
+    };
+
     const pushTypeStack = (item: StackItem) => {
         setStack((prev) => [...prev, item]);
         setRefetchStates((prev) => [...prev, false]);
@@ -247,8 +289,8 @@ export function FormGeneratorNew(props: FormProps) {
         });
         const matchedReferenceType = newTypes.find(t => t.label === valueTypeConstraint);
         if (matchedReferenceType) {
-            if (matchedReferenceType.labelDetails.detail === "Structural Types" 
-                || matchedReferenceType.labelDetails.detail === "Behaviour Types" 
+            if (matchedReferenceType.labelDetails.detail === "Structural Types"
+                || matchedReferenceType.labelDetails.detail === "Behaviour Types"
                 || isTypeExcludedFromValueTypeConstraint(matchedReferenceType.label)
             ) {
                 setValueTypeConstraints('');
@@ -258,10 +300,20 @@ export function FormGeneratorNew(props: FormProps) {
         setValueTypeConstraints(valueTypeConstraint);
     }
 
-    const defaultType = (): Type => {
+    const addPopupTester = (modal: ReactNode, id: string, title: string, height?: number, width?: number, onClose?: () => void) => {
+        addModal(modal, id, title, height, width, onClose);
+    }
+
+    const popupManager = {
+        addPopup: addPopupTester,
+        removeLastPopup: popModal,
+        closePopup: closeModal
+    }
+
+    const defaultType = (typeName?: string): Type => {
         if (!isGraphqlEditor || typeEditorState.field?.type === 'PARAM_MANAGER') {
             return {
-                name: typeEditorState.newTypeValue || "MyType",
+                name: typeName || typeEditorState.newTypeValue || "MyType",
                 editable: true,
                 metadata: {
                     label: "",
@@ -276,7 +328,7 @@ export function FormGeneratorNew(props: FormProps) {
                 allowAdditionalFields: false
             };
         } return {
-            name: typeEditorState.newTypeValue || "MyType",
+            name: typeName || typeEditorState.newTypeValue || "MyType",
             editable: true,
             metadata: {
                 label: "",
@@ -292,20 +344,6 @@ export function FormGeneratorNew(props: FormProps) {
         };
     }
 
-    const getPatchedFields = (oldFields: FormField[], newFields: FormField[]) => {
-        const updatedFields = newFields.map((field) => {
-            if (field.type === 'TYPE') {
-                const oldField = oldFields.find(f => f.key === field.key);
-                if (oldField) {
-                    return { ...field, value: oldField.value };
-                }
-            }
-            return field;
-        });
-        return updatedFields;
-    }
-
-
     useEffect(() => {
         if (rpcClient) {
             // Set current theme
@@ -325,9 +363,8 @@ export function FormGeneratorNew(props: FormProps) {
 
     useEffect(() => {
         if (fields) {
-            const patchedFields = getPatchedFields(fieldsValues, fields);
-            setFields(patchedFields);
-            setFormImports(getImportsForFormFields(patchedFields));
+            setFields(fields);
+            setFormImports(getImportsForFormFields(fields));
         }
     }, [fields]);
 
@@ -462,26 +499,45 @@ export function FormGeneratorNew(props: FormProps) {
         }
     }, [debouncedRetrieveCompletions]);
 
+    /**
+     * Debounced function that fetches and filters visible types based on user input, with caching support and special handling for GraphQL contexts.
+     */
     const debouncedGetVisibleTypes = useCallback(
         debounce(
             async (
                 value: string,
                 cursorPosition: number,
                 fetchReferenceTypes?: boolean,
-                valueTypeConstraint?: string
+                valueTypeConstraint?: string,
+                fieldKey?: string
             ) => {
-                let visibleTypes: CompletionItem[] = types;
-                if (!types.length) {
-                    const types = await rpcClient.getBIDiagramRpcClient().getVisibleTypes({
-                        filePath: fileName,
-                        position: getAdjustedStartLine(targetLineRange, expressionOffsetRef.current),
-                        ...(valueTypeConstraint && { typeConstraint: valueTypeConstraint })
-                    });
+                let context: TypeHelperContext | undefined;
+                if (isGraphqlEditor) {
+                    context = fieldKey === 'returnType' ? TypeHelperContext.GRAPHQL_FIELD_TYPE : TypeHelperContext.GRAPHQL_INPUT_TYPE;
+                }
+                let typesCacheKey = fieldKey || 'default';
+                let visibleTypes = typesCache.current.get(typesCacheKey);
+
+                if (!visibleTypes) {
+                    let types;
+                    if (isGraphqlEditor && fieldKey && context) {
+                        types = await rpcClient.getServiceDesignerRpcClient().getResourceReturnTypes({
+                            filePath: fileName,
+                            context: context,
+                        });
+                    } else {
+                        types = await rpcClient.getBIDiagramRpcClient().getVisibleTypes({
+                            filePath: fileName,
+                            position: getAdjustedStartLine(targetLineRange, expressionOffsetRef.current),
+                            ...(valueTypeConstraint && { typeConstraint: valueTypeConstraint })
+                        });
+                    }
 
                     const isFetchingTypesForDM = valueTypeConstraint === "json";
                     visibleTypes = convertToVisibleTypes(types, isFetchingTypesForDM);
-                    setTypes(visibleTypes);
+                    typesCache.current.set(typesCacheKey, visibleTypes);
                 }
+                setTypes(visibleTypes);
 
                 if (!fetchReferenceTypes) {
                     const effectiveText = value.slice(0, cursorPosition);
@@ -496,12 +552,12 @@ export function FormGeneratorNew(props: FormProps) {
             },
             250
         ),
-        [rpcClient, types, fileName, targetLineRange]
+        [rpcClient, fileName, targetLineRange, isGraphqlEditor]
     );
 
     const handleGetVisibleTypes = useCallback(
-        async (value: string, cursorPosition: number, fetchReferenceTypes?: boolean, valueTypeConstraint?: string) => {
-            await debouncedGetVisibleTypes(value, cursorPosition, fetchReferenceTypes, valueTypeConstraint);
+        async (value: string, cursorPosition: number, fetchReferenceTypes?: boolean, valueTypeConstraint?: string, fieldKey?: string) => {
+            await debouncedGetVisibleTypes(value, cursorPosition, fetchReferenceTypes, valueTypeConstraint, fieldKey);
         },
         [debouncedGetVisibleTypes]
     );
@@ -589,7 +645,7 @@ export function FormGeneratorNew(props: FormProps) {
         anchorRef: RefObject<HTMLDivElement>,
         defaultValue: string,
         value: string,
-        onChange: (value: string, updatedCursorPosition: number) => void,
+        onChange: (value: string, options?: HelperpaneOnChangeOptions) => void,
         changeHelperPaneState: (isOpen: boolean) => void,
         helperPaneHeight: HelperPaneHeight,
         recordTypeField?: RecordTypeField,
@@ -606,7 +662,6 @@ export function FormGeneratorNew(props: FormProps) {
             fieldKey: fieldKey,
             fileName: fileName,
             targetLineRange: targetLineRange ? updateLineRange(targetLineRange, expressionOffsetRef.current) : undefined,
-            exprRef: exprRef,
             anchorRef: anchorRef,
             onClose: handleHelperPaneClose,
             defaultValue: defaultValue,
@@ -655,6 +710,11 @@ export function FormGeneratorNew(props: FormProps) {
             handleExpressionEditorCancel();
         }
 
+        const typeHelperContext = isGraphqlEditor ?
+            (fieldKey === 'returnType' ? TypeHelperContext.GRAPHQL_FIELD_TYPE
+                : TypeHelperContext.GRAPHQL_INPUT_TYPE)
+            : TypeHelperContext.HTTP_STATUS_CODE;
+
         return getTypeHelper({
             fieldKey: fieldKey,
             valueTypeConstraint: valueTypeConstraint,
@@ -671,6 +731,7 @@ export function FormGeneratorNew(props: FormProps) {
             onTypeCreate: handleCreateNewType,
             onCloseCompletions: handleCloseCompletions,
             exprRef: exprRef,
+            typeHelperContext: typeHelperContext,
         });
     }
 
@@ -757,14 +818,14 @@ export function FormGeneratorNew(props: FormProps) {
         setTypeEditorState({ ...typeEditorState, isOpen: state });
     }
 
-    const getNewTypeCreateForm = () => {
+    const getNewTypeCreateForm = (typeName?: string) => {
         pushTypeStack({
-            type: defaultType(),
+            type: defaultType(typeName),
             isDirty: false
         })
     }
 
-    const onSaveType = (type: Type) => {
+    const onSaveType = () => {
         if (stack.length > 0) {
             setRefetchForCurrentModal(true);
             popTypeStack();
@@ -793,6 +854,14 @@ export function FormGeneratorNew(props: FormProps) {
         return await convertToFnSignature(signatureHelp);
     };
 
+    const getExpressionTokens = async (expression: string, filePath: string, position: LinePosition): Promise<number[]> => {
+        return rpcClient.getBIDiagramRpcClient().getExpressionTokens({
+            expression: expression,
+            filePath: filePath,
+            position: position
+        })
+    }
+
     const expressionEditor = useMemo(() => {
         return {
             completions: filteredCompletions,
@@ -801,6 +870,9 @@ export function FormGeneratorNew(props: FormProps) {
             extractArgsFromFunction: extractArgsFromFunction,
             types: filteredTypes,
             referenceTypes: types,
+            rpcManager: {
+                getExpressionTokens: getExpressionTokens
+            },
             retrieveVisibleTypes: handleGetVisibleTypes,
             getHelperPane: handleGetHelperPane,
             getTypeHelper: handleGetTypeHelper,
@@ -837,7 +909,9 @@ export function FormGeneratorNew(props: FormProps) {
                     formFields={fieldsValues}
                     projectPath={projectPath}
                     openRecordEditor={handleOpenTypeEditor}
+                    openFormTypeEditor={handleOpenFormTypeEditor}
                     onCancelForm={onBack || onCancel}
+                    popupManager={popupManager}
                     submitText={submitText}
                     cancelText={cancelText}
                     onSubmit={handleSubmit}
@@ -859,6 +933,9 @@ export function FormGeneratorNew(props: FormProps) {
                     formImports={formImports}
                     preserveOrder={preserveFieldOrder}
                     injectedComponents={injectedComponents}
+                    changeOptionalFieldTitle={changeOptionalFieldTitle}
+                    onChange={onChange}
+                    hideSaveButton={hideSaveButton}
                 />
             )}
             {
@@ -870,19 +947,19 @@ export function FormGeneratorNew(props: FormProps) {
                     title="Create New Type"
                     openState={typeEditorState.isOpen}
                     setOpenState={handleTypeEditorStateChange}>
-                    <div style={{ padding: '0px 20px' }}>
-                        {stack.slice(0, i + 1).length > 1 && (
-                            <BreadcrumbContainer>
-                                {stack.slice(0, i + 1).map((stackItem, index) => (
-                                    <React.Fragment key={index}>
-                                        {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
-                                        <BreadcrumbItem>
-                                            {stackItem?.type?.name || "NewType"}
-                                        </BreadcrumbItem>
-                                    </React.Fragment>
-                                ))}
-                            </BreadcrumbContainer>
-                        )}
+                    {stack.slice(0, i + 1).length > 1 && (
+                        <BreadcrumbContainer>
+                            {stack.slice(0, i + 1).map((stackItem, index) => (
+                                <React.Fragment key={index}>
+                                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
+                                    <BreadcrumbItem>
+                                        {stackItem?.type?.name || "NewType"}
+                                    </BreadcrumbItem>
+                                </React.Fragment>
+                            ))}
+                        </BreadcrumbContainer>
+                    )}
+                    <div style={{ height: '560px', overflow: 'auto' }}>
                         <FormTypeEditor
                             type={peekTypeStack() && peekTypeStack().type ? peekTypeStack().type : defaultType()}
                             newType={peekTypeStack() ? peekTypeStack().isDirty : false}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/IfForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/IfForm/index.tsx
index 01aaf53c1d8..e70172a33fb 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/IfForm/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/IfForm/index.tsx
@@ -372,6 +372,7 @@ export function IfForm(props: IfFormProps) {
                                 control={control}
                                 field={field}
                                 watch={watch}
+                                setValue={setValue}
                                 openSubPanel={openSubPanel}
                                 targetLineRange={targetLineRange}
                                 fileName={fileName}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/VectorKnowledgeBaseForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/KnowledgeBaseForm/index.tsx
similarity index 91%
rename from workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/VectorKnowledgeBaseForm/index.tsx
rename to workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/KnowledgeBaseForm/index.tsx
index 27b6a496f76..81bb50466c5 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/VectorKnowledgeBaseForm/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/KnowledgeBaseForm/index.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Codicon } from "@wso2/ui-toolkit";
 import styled from "@emotion/styled";
 
@@ -40,6 +40,7 @@ import {
 } from "../form-utils";
 import { SidePanelView } from "../../FlowDiagram/PanelManager";
 import { ConnectionKind } from "../../../../components/ConnectionSelector";
+import { URI, Utils } from "vscode-uri";
 
 const DEFAULT_CHUNKER_VALUE = "\"AUTO\"";
 
@@ -72,7 +73,7 @@ namespace S {
     `;
 }
 
-interface VectorKnowledgeBaseFormProps {
+interface KnowledgeBaseFormProps {
     fileName: string;
     node: FlowNode;
     targetLineRange: LineRange;
@@ -92,7 +93,7 @@ interface VectorKnowledgeBaseFormProps {
     navigateToPanel?: (panel: SidePanelView, connectionKind?: ConnectionKind) => void;
 }
 
-export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
+export function KnowledgeBaseForm(props: KnowledgeBaseFormProps) {
     const {
         fileName,
         node,
@@ -126,7 +127,7 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
             .getBIDiagramRpcClient()
             .formDidOpen({ filePath: fileName })
             .then(() => {
-                console.log(">>> Vector Knowledge Base form opened");
+                console.log(">>> Knowledge Base form opened");
             });
     };
 
@@ -135,7 +136,7 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
             .getBIDiagramRpcClient()
             .formDidClose({ filePath: fileName })
             .then(() => {
-                console.log(">>> Vector Knowledge Base form closed");
+                console.log(">>> Knowledge Base form closed");
             });
     };
 
@@ -152,7 +153,7 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
         }
     };
 
-    const initializeForm = () => {
+    const initializeForm = async () => {
         const formProperties = getFormProperties(node);
         const fields = convertNodePropertiesToFormFields(formProperties);
         const actionFields = ["vectorStore", "embeddingModel", "chunker"];
@@ -170,13 +171,19 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
             if (originalName === "chunker") {
                 // hack: set default value for chunker field
                 field.defaultValue = DEFAULT_CHUNKER_VALUE;
-                field.value ??= field.defaultValue;
+                field.advanced = true;
             }
         });
         setKnowledgeBaseFields(fields);
         setFormImports(getImportsForFormFields(fields));
     };
 
+    const updateNodePropertyValue = (fieldKey: string, value: any): void => {
+        if (node.properties && node.properties[fieldKey as keyof typeof node.properties]) {
+            node.properties[fieldKey as keyof typeof node.properties].value = value;
+        }
+    };
+
     const mergeFormDataWithFlowNode = (data: FormValues, targetLineRange: LineRange): FlowNode => {
         const clonedNode = cloneDeep(node);
         const updatedNode = createNodeWithUpdatedLineRange(clonedNode, targetLineRange);
@@ -219,6 +226,7 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
                                 disableSaveButton={!isFormValid}
                                 isSaving={showProgressIndicator || saving}
                                 onChange={(fieldKey, value, allValues) => {
+                                    updateNodePropertyValue(fieldKey, value);
                                     const isValid = allValues["vectorStore"] !== "" && allValues["embeddingModel"] !== "";
                                     setIsFormValid(isValid);
                                     setKnowledgeBaseFormValues(allValues);
@@ -232,4 +240,4 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
     );
 }
 
-export default VectorKnowledgeBaseForm;
+export default KnowledgeBaseForm;
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 055fea307f8..7434e729f68 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
@@ -522,6 +522,7 @@ export function MatchForm(props: MatchFormProps) {
                     {...expressionEditor}
                     control={control}
                     field={targetField}
+                    setValue={setValue}
                     watch={watch}
                     openSubPanel={openSubPanel}
                     targetLineRange={targetLineRange}
@@ -550,6 +551,7 @@ export function MatchForm(props: MatchFormProps) {
                                 {...expressionEditor}
                                 control={control}
                                 field={field}
+                                setValue={setValue}
                                 watch={watch}
                                 openSubPanel={openSubPanel}
                                 targetLineRange={targetLineRange}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FunctionForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FunctionForm/index.tsx
index be4f697059d..81090b18717 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FunctionForm/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FunctionForm/index.tsx
@@ -282,7 +282,7 @@ export function FunctionForm(props: FunctionFormProps) {
                 rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { documentUri: newArtifact.path, position: newArtifact.position } });
                 return;
             }
-            const updatedArtifact = sourceCode.artifacts.find(res => !res.isNew && (res.name === functionName || res.context === functionName));
+            const updatedArtifact = sourceCode.artifacts.find(res => !res.isNew && (res.name === functionName || res.context === functionName || res.name === data?.functionName));
             if (updatedArtifact) {
                 rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { documentUri: updatedArtifact.path, position: updatedArtifact.position } });
                 return;
@@ -402,6 +402,7 @@ export function FunctionForm(props: FunctionFormProps) {
                         {filePath && targetLineRange && functionFields.length > 0 &&
                             <FormGeneratorNew
                                 fileName={filePath}
+                                nestedForm={true}
                                 targetLineRange={targetLineRange}
                                 fields={functionFields}
                                 isSaving={saving}
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 4ef98c8b8ac..d6e578e378a 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/FunctionsPage.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/FunctionsPage.tsx
@@ -17,7 +17,7 @@
  */
 
 import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
-import { Codicon, COMPLETION_ITEM_KIND, getIcon, HelperPane, Overlay, ThemeColors } from '@wso2/ui-toolkit';
+import { Codicon, COMPLETION_ITEM_KIND, getIcon, HelperPane, Icon, Overlay, ThemeColors } from '@wso2/ui-toolkit';
 import { LibraryBrowser } from './LibraryBrowser';
 import { HelperPaneCompletionItem, HelperPaneFunctionInfo } from '@wso2/ballerina-side-panel';
 import { useRpcContext } from '@wso2/ballerina-rpc-client';
@@ -231,14 +231,12 @@ export const FunctionsPage = ({
             </HelperPane.Footer>
             {isLibraryBrowserOpen && (
                 <LibraryBrowser
-                    anchorRef={anchorRef}
-                    isLoading={isLoading}
-                    libraryBrowserInfo={libraryBrowserInfo as HelperPaneFunctionInfo}
-                    setFilterText={handleFunctionSearch}
-                    onBack={() => setIsLibraryBrowserOpen(false)}
+                    fileName={fileName}
+                    targetLineRange={targetLineRange}
                     onClose={onClose}
                     onChange={onChange}
                     onFunctionItemSelect={onFunctionItemSelect}
+            
                 />
             )}
             {isAddingFunction && createPortal(
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/LibraryBrowser.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/LibraryBrowser.tsx
index 7b8aa8021de..42a13bc56bf 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/LibraryBrowser.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/LibraryBrowser.tsx
@@ -16,45 +16,88 @@
  * under the License.
  */
 
-import { RefObject, useEffect, useRef, useState } from 'react';
-import { COMPLETION_ITEM_KIND, getIcon, HelperPane } from '@wso2/ui-toolkit';
+import { useEffect, useRef, useState, useCallback } from 'react';
+import {
+    SearchBox,
+    Typography,
+    BrowserContainer,
+    BrowserSearchContainer,
+    BrowserContentArea,
+    BrowserSectionContainer,
+    BrowserSectionBody,
+    BrowserItemContainer,
+    BrowserItemLabel,
+    BrowserEmptyMessage
+} from '@wso2/ui-toolkit';
 import { HelperPaneCompletionItem, HelperPaneFunctionInfo } from '@wso2/ballerina-side-panel';
 import { CompletionInsertText } from '@wso2/ballerina-core';
+import { HelperPaneIconType, getHelperPaneIcon } from '../HelperPaneNew/utils/iconUtils';
+import { useRpcContext } from '@wso2/ballerina-rpc-client';
+import { convertToHelperPaneFunction } from '../../../utils/bi';
+import { debounce } from 'lodash';
+import { LineRange } from '@wso2/ballerina-core';
 
 type LibraryBrowserProps = {
-    anchorRef: RefObject<HTMLDivElement>;
-    isLoading: boolean;
-    libraryBrowserInfo: HelperPaneFunctionInfo;
-    setFilterText: (filterText: string) => void;
-    onBack: () => void;
+    fileName: string;
+    targetLineRange: LineRange;
     onClose: () => void;
     onChange: (insertText: CompletionInsertText) => void;
     onFunctionItemSelect: (item: HelperPaneCompletionItem) => Promise<CompletionInsertText>;
 };
 
 export const LibraryBrowser = ({
-    anchorRef,
-    isLoading,
-    libraryBrowserInfo,
-    setFilterText,
-    onBack,
+    fileName,
+    targetLineRange,
     onClose,
     onChange,
     onFunctionItemSelect
 }: LibraryBrowserProps) => {
+    const { rpcClient } = useRpcContext();
     const firstRender = useRef<boolean>(true);
     const [searchValue, setSearchValue] = useState<string>('');
+    const [libraryBrowserInfo, setLibraryBrowserInfo] = useState<HelperPaneFunctionInfo | undefined>(undefined);
+
+    const debounceFetchLibraryInfo = useCallback(
+        debounce((searchText: string) => {
+            rpcClient
+                .getBIDiagramRpcClient()
+                .search({
+                    position: targetLineRange,
+                    filePath: fileName,
+                    queryMap: {
+                        q: searchText.trim(),
+                        limit: 12,
+                        offset: 0,
+                        includeAvailableFunctions: 'true'
+                    },
+                    searchKind: "FUNCTION"
+                })
+                .then((response) => {
+                    if (response.categories?.length) {
+                        setLibraryBrowserInfo(convertToHelperPaneFunction(response.categories));
+                    }
+                })
+        }, 150),
+        [rpcClient, fileName, targetLineRange]
+    );
+
+    const fetchLibraryInfo = useCallback(
+        (searchText: string) => {
+            debounceFetchLibraryInfo(searchText);
+        },
+        [debounceFetchLibraryInfo]
+    );
 
     useEffect(() => {
         if (firstRender.current) {
             firstRender.current = false;
-            setFilterText('');
+            fetchLibraryInfo('');
         }
-    }, []);
+    }, [fetchLibraryInfo]);
 
     const handleSearch = (searchText: string) => {
-        setFilterText(searchText);
         setSearchValue(searchText);
+        fetchLibraryInfo(searchText);
     };
 
     const handleFunctionItemSelect = async (item: HelperPaneCompletionItem) => {
@@ -64,51 +107,67 @@ export const LibraryBrowser = ({
     };
 
     return (
-        <HelperPane.LibraryBrowser
-            anchorRef={anchorRef}
-            loading={isLoading}
-            searchValue={searchValue}
-            onSearch={handleSearch}
-            onClose={onBack}
-            title='Function Browser'
-            titleSx={{ fontFamily: 'GilmerRegular' }}
-        >
-            {libraryBrowserInfo?.category.map((category) => (
-                <HelperPane.LibraryBrowserSection
-                    key={category.label}
-                    title={category.label}
-                    titleSx={{ fontFamily: 'GilmerMedium' }}
-                    {...(category.items?.length > 0 && category.subCategory?.length === 0 && {
-                        columns: 4
-                    })}
-                >
-                    {category.items?.map((item) => (
-                        <HelperPane.CompletionItem
-                            key={`${category.label}-${item.label}`}
-                            label={item.label}
-                            type={item.type}
-                            getIcon={() => getIcon(COMPLETION_ITEM_KIND.Function)}
-                            onClick={async () => await handleFunctionItemSelect(item)}
-                        />
-                    ))}
-                    {category.subCategory?.map((subCategory) => (
-                        <HelperPane.LibraryBrowserSubSection
-                            key={`${category.label}-${subCategory.label}`}
-                            title={subCategory.label}
-                            columns={4}
-                        >
-                            {subCategory.items?.map((item) => (
-                                <HelperPane.CompletionItem
-                                    key={`${category.label}-${subCategory.label}-${item.label}`}
-                                    label={item.label}
-                                    getIcon={() => getIcon(COMPLETION_ITEM_KIND.Function)}
-                                    onClick={async () => await handleFunctionItemSelect(item)}
-                                />
+        <BrowserContainer>
+            <BrowserSearchContainer>
+                <SearchBox id="library-browser-search" placeholder="Search" value={searchValue} onChange={handleSearch} />
+            </BrowserSearchContainer>
+            <BrowserContentArea>
+                {libraryBrowserInfo?.category
+                    .filter((category) => 
+                        (category.items && category.items.length > 0) || 
+                        (category.subCategory && category.subCategory.some(sub => sub.items && sub.items.length > 0))
+                    )
+                    .map((category) => (
+                    <BrowserSectionContainer key={category.label}>
+                        <Typography variant="h2" sx={{ margin: 0, fontFamily: 'GilmerMedium', fontSize: '16px', fontWeight: '600' }}>
+                            {category.label}
+                        </Typography>
+                        <BrowserSectionBody columns={category.items?.length > 0 && category.subCategory?.length === 0 ? 3 : 1}>
+                            {category.items?.length > 0 ? (
+                                category.items.map((item) => (
+                                    <BrowserItemContainer
+                                        key={`${category.label}-${item.label}`}
+                                        onClick={async () => await handleFunctionItemSelect(item)}
+                                    >
+                                        {getHelperPaneIcon(HelperPaneIconType.FUNCTION)}
+                                        <BrowserItemLabel>{item.label}()</BrowserItemLabel>
+                                    </BrowserItemContainer>
+                                ))
+                            ) : (
+                                !category.subCategory?.length && (
+                                    <BrowserEmptyMessage>
+                                        No items found
+                                    </BrowserEmptyMessage>
+                                )
+                            )}
+                            {category.subCategory?.filter(sub => sub.items && sub.items.length > 0).map((subCategory) => (
+                                <div key={`${category.label}-${subCategory.label}`} style={{ marginTop: '12px' }}>
+                                    <Typography variant="body3" sx={{ fontStyle: "italic", marginBottom: '8px' }}>
+                                        {subCategory.label}
+                                    </Typography>
+                                    <BrowserSectionBody columns={3}>
+                                        {subCategory.items?.length > 0 ? (
+                                            subCategory.items.map((item) => (
+                                                <BrowserItemContainer
+                                                    key={`${category.label}-${subCategory.label}-${item.label}`}
+                                                    onClick={async () => await handleFunctionItemSelect(item)}
+                                                >
+                                                    {getHelperPaneIcon(HelperPaneIconType.FUNCTION)}
+                                                    <BrowserItemLabel>{item.label}()</BrowserItemLabel>
+                                                </BrowserItemContainer>
+                                            ))
+                                        ) : (
+                                            <BrowserEmptyMessage>
+                                                No items found
+                                            </BrowserEmptyMessage>
+                                        )}
+                                    </BrowserSectionBody>
+                                </div>
                             ))}
-                        </HelperPane.LibraryBrowserSubSection>
-                    ))}
-                </HelperPane.LibraryBrowserSection>
-            ))}
-        </HelperPane.LibraryBrowser>
+                        </BrowserSectionBody>
+                    </BrowserSectionContainer>
+                ))}
+            </BrowserContentArea>
+        </BrowserContainer>
     );
 };
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/BreadcrumbNavigation.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/BreadcrumbNavigation.tsx
new file mode 100644
index 00000000000..01943bc9f02
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/BreadcrumbNavigation.tsx
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { BreadCrumbStep } from '../hooks/useHelperPaneNavigation';
+import { ThemeColors, Codicon } from '@wso2/ui-toolkit';
+
+interface BreadcrumbNavigationProps {
+    breadCrumbSteps: BreadCrumbStep[];
+    onNavigateToBreadcrumb: (step: BreadCrumbStep) => void;
+}
+
+export const BreadcrumbNavigation: React.FC<BreadcrumbNavigationProps> = ({
+    breadCrumbSteps,
+    onNavigateToBreadcrumb
+}) => {
+    if (breadCrumbSteps.length <= 1) {
+        return null;
+    }
+
+    // Show truncation if more than 4 items
+    const maxVisibleItems = 4;
+    const shouldTruncate = breadCrumbSteps.length > maxVisibleItems;
+    
+    const getVisibleSteps = () => {
+        if (!shouldTruncate) {
+            return breadCrumbSteps;
+        }
+        
+        // Show first item, ellipsis, and last few items
+        const firstItem = breadCrumbSteps[0];
+        const lastItems = breadCrumbSteps.slice(-(maxVisibleItems - 2)); // -2 for first item and ellipsis
+        
+        return [firstItem, { label: '...', replaceText: '', isTruncated: true }, ...lastItems];
+    };
+
+    const visibleSteps = getVisibleSteps();
+
+    const breadcrumbItemStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '2px 6px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        fontWeight: '500',
+        transition: 'background-color 0.15s ease',
+        cursor: 'pointer',
+        color: ThemeColors.HIGHLIGHT,
+    };
+
+    const breadcrumbItemHoverStyle = {
+        backgroundColor: ThemeColors.SURFACE_DIM,
+    };
+
+    const separatorStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        margin: '0 2px',
+        color: ThemeColors.ON_SURFACE,
+        fontSize: '10px',
+        opacity: 0.6,
+    };
+
+    return (
+        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            padding: '6px 8px',
+            backgroundColor: ThemeColors.SURFACE_DIM_2,
+            borderRadius: '6px',
+            margin: '0px 8px 4px',
+            gap: '2px',
+            fontSize: '12px',
+        }}>
+            {visibleSteps.map((step, index) => (
+                <React.Fragment key={`${step.label}-${index}`}>
+                    {(step as any).isTruncated ? (
+                        // Ellipsis item
+                        <span style={{
+                            ...breadcrumbItemStyle,
+                            cursor: 'default',
+                            color: ThemeColors.ON_SURFACE,
+                            opacity: 0.6,
+                        }}>
+                            ...
+                        </span>
+                    ) : (
+                        // Regular breadcrumb item
+                        <span
+                            style={breadcrumbItemStyle}
+                            onClick={() => onNavigateToBreadcrumb(step)}
+                            onMouseEnter={(e) => {
+                                Object.assign(e.currentTarget.style, breadcrumbItemHoverStyle);
+                            }}
+                            onMouseLeave={(e) => {
+                                e.currentTarget.style.backgroundColor = 'transparent';
+                            }}
+                        >
+                            {step.label}
+                        </span>
+                    )}
+                    
+                    {/* Show separator if not the last item */}
+                    {index < visibleSteps.length - 1 && (
+                        <span style={separatorStyle}>
+                            <Codicon name="chevron-right" />
+                        </span>
+                    )}
+                </React.Fragment>
+            ))}
+        </div>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/EmptyItemsPlaceHolder.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/EmptyItemsPlaceHolder.tsx
index e312567e6db..61600101b94 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/EmptyItemsPlaceHolder.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/EmptyItemsPlaceHolder.tsx
@@ -16,7 +16,11 @@
  * under the License.
  */
 
-export const EmptyItemsPlaceHolder = () => {
+type EmptyItemsPlaceHolderProps = {
+    message?: string;
+}
+
+export const EmptyItemsPlaceHolder = ({ message = "No items found" }: EmptyItemsPlaceHolderProps) => {
     return (
         <div style={{
             display: 'flex',
@@ -25,7 +29,7 @@ export const EmptyItemsPlaceHolder = () => {
             height: '100%',
             width: '100%'
         }}>
-            <span>No items found</span>
+            <span>{message}</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
index 354fdef072b..1c4b2f9a512 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/ExpandableList.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/ExpandableList.tsx
@@ -61,7 +61,7 @@ interface ExpandableListSectionProps {
 const Section = ({ children, title, level = 0, sx }: ExpandableListSectionProps) => {
     return (
         <ExpandableListSection level={level} style={{ ...sx , display: 'flex', flexDirection: 'column'}}>
-            <ExpandableListSectionTitle style={{marginLeft: '8px'}}>{title}</ExpandableListSectionTitle>
+            <ExpandableListSectionTitle style={{marginLeft: '16px', marginTop: '16px'}}>{title}</ExpandableListSectionTitle>
             {children}
         </ExpandableListSection>
     );
@@ -75,7 +75,7 @@ export default ExpandableList;
 
 
 const ExpandableListSection = styled.div<{ level?: number }>`
-   
+
 `;
 
 
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
index bb6f7839fd2..1d2e9b2f538 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/FooterButtons.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/FooterButtons.tsx
@@ -16,9 +16,27 @@
  * under the License.
  */
 
-import { Button, Codicon, ThemeColors } from "@wso2/ui-toolkit";
+import { Icon, ThemeColors } from "@wso2/ui-toolkit";
 import styled from '@emotion/styled';
 
+const FooterContainer = styled.div`
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 8px 12px;
+    margin-inline: 4px;
+    transition: background-color 0.2s ease;
+    border-radius: 6px;
+    height: 36px;
+    cursor: pointer;
+    
+    &:hover {
+        background-color: ${ThemeColors.SURFACE_DIM_2};
+        outline: 1px solid var(--dropdown-border);
+        outline-offset: -1px;
+    }
+`;
+
 const InvisibleButton = styled.button`
     background: none;
     border: none;
@@ -36,9 +54,9 @@ const InvisibleButton = styled.button`
 `;
 
 type FooterButtonProps = {
-    onClick?: () => void;
-    startIcon: string;
     title: string;
+    onClick: () => void;
+    startIcon?: string;
     sx?: React.CSSProperties;
     disabled?:boolean;
 }
@@ -46,14 +64,17 @@ type FooterButtonProps = {
 const FooterButtons = (props: FooterButtonProps) => {
     const { onClick, startIcon, title, sx } = props;
     return (
-        <div style={{ display: "flex", justifyContent: "left", alignItems: "center", padding: "8px", ...sx}}>
+        <FooterContainer style={sx} onClick={onClick}>
             <InvisibleButton 
             disabled={props.disabled}
-            onClick={onClick}>
-                <Codicon name={startIcon} sx={{color: ThemeColors.PRIMARY}}/>
+            onClick={(e) => {
+                e.stopPropagation();
+                onClick?.();
+            }}>
+                <Icon name={startIcon || "bi-plus"} sx={{color: ThemeColors.PRIMARY, fontSize: "16px"}}/>
                 <span style={{color: ThemeColors.PRIMARY, marginLeft: "10px" }}>{title}</span>
             </InvisibleButton>
-        </div>
+        </FooterContainer>
     )
 }
 
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/HelperPaneListItem.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/HelperPaneListItem.tsx
new file mode 100644
index 00000000000..e4a45711879
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/HelperPaneListItem.tsx
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { ThemeColors } from "@wso2/ui-toolkit";
+import React, { useState } from "react";
+
+type HelperPaneListItemProps = {
+    children: React.ReactNode;
+    onClick?: () => void;
+    endAction?: React.ReactNode;
+    onClickEndAction?: () => void;
+    className?: string;
+}
+
+const ItemContainer = styled.div`
+    display: flex;
+    align-items: center;
+    margin: 0 4px;
+`;
+
+const MainContent = styled.div<{ isHovered: boolean }>`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: 6px;
+    height: 32px;
+    &:hover {
+        background-color: ${ThemeColors.SURFACE_DIM_2};
+        outline: 1px solid var(--dropdown-border);
+        outline-offset: -1px;
+    }
+`;
+
+const ContentLeft = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+`;
+
+const EndActionContainer = styled.div<{ isHovered: boolean }>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    cursor: pointer;
+    border-radius: 6px;
+    
+    &:hover {
+        background-color: ${ThemeColors.SURFACE_DIM_2};
+        outline: 1px solid var(--dropdown-border);
+        outline-offset: -1px;
+    }
+`;
+
+export const HelperPaneListItem: React.FC<HelperPaneListItemProps> = ({
+    children,
+    onClick,
+    endAction,
+    onClickEndAction,
+    className
+}) => {
+    const [isMainHovered, setIsMainHovered] = useState(false);
+    const [isEndActionHovered, setIsEndActionHovered] = useState(false);
+
+    const handleOnClickEndAction = (event: React.MouseEvent) => {
+        event.stopPropagation();
+        onClickEndAction?.();
+    }
+
+    return (
+        <ItemContainer className={className}>
+            <MainContent
+                onMouseEnter={() => setIsMainHovered(true)}
+                onMouseLeave={() => setIsMainHovered(false)}
+                onClick={onClick}
+                isHovered={isMainHovered}
+            >
+                <ContentLeft>
+                    {children}
+                </ContentLeft>
+            </MainContent>
+            {endAction && (
+                <EndActionContainer
+                    onMouseEnter={() => setIsEndActionHovered(true)}
+                    onMouseLeave={() => setIsEndActionHovered(false)}
+                    onClick={handleOnClickEndAction}
+                    isHovered={isEndActionHovered}
+                >
+                    {endAction}
+                </EndActionContainer>
+            )}
+        </ItemContainer>
+    );
+};
+
+// Export the styled components for custom use cases
+export const HelperPaneItemContainer = ItemContainer;
+export const HelperPaneMainContent = MainContent;
+export const HelperPaneContentLeft = ContentLeft;
+export const HelperPaneEndAction = EndActionContainer;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Utils/types.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/TypeIndicator.tsx
similarity index 55%
rename from workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Utils/types.ts
rename to workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/TypeIndicator.tsx
index c82d680e59b..55f64da54e7 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Utils/types.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/TypeIndicator.tsx
@@ -16,27 +16,18 @@
  * under the License.
  */
 
-export const DEFAULT_VALUE_MAP: Record<string, string> = {
-    "struct": "{}",
-    "array": "[]",
-    "map": "{}",
-    "int": "0",
-    "float": "0.0",
-    "boolean": "false",
-    "any": "null",
-    "decimal": "0.0",
-    "byte": "0"
-}
+import styled from "@emotion/styled";
 
-export const isRowType = (type: string | string[]) => {
-    return type && type === "struct";
-}
-
-export const isUnionType = (type: string) => {
-    return type && type === "enum";
-}
-
-export const getDefaultValue = (type: string) => {
-    //TODO: handle this using API
-     return DEFAULT_VALUE_MAP[type] || "";
-}
+export const TypeIndicator = styled.div`
+    text-transform: none;
+    font-size: 10px;
+    max-width: 60px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: 16px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    background-color: var(--vscode-chat-slashCommandBackground);
+    color: var(--vscode-chat-slashCommandForeground);
+`;
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
index b6038b78b6c..eb87d3da873 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Configurables.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Configurables.tsx
@@ -20,14 +20,19 @@ import { CompletionInsertText, ConfigVariable, FlowNode, LineRange, TomlPackage
 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 { Divider, SearchBox, Typography } 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";
 import { POPUP_IDS, useModalStack } from "../../../../Context";
+import { HelperPaneIconType, getHelperPaneIcon } from "../utils/iconUtils";
+import { HelperPaneListItem } from "../Components/HelperPaneListItem";
+import { TypeIndicator } from "../Components/TypeIndicator";
+import { EmptyItemsPlaceHolder } from "../Components/EmptyItemsPlaceHolder";
+import { HelperPaneCustom } from "@wso2/ui-toolkit";
+import { useHelperPaneNavigation } from "../hooks/useHelperPaneNavigation";
+import { BreadcrumbNavigation } from "../Components/BreadcrumbNavigation";
 
 type ConfigVariablesState = {
     [category: string]: {
@@ -49,15 +54,12 @@ type ConfigurablesPageProps = {
     onClose?: () => void;
 }
 
-type AddNewConfigFormProps = {
-    isImportEnv: boolean;
-    title: string;
-}
 
 export const Configurables = (props: ConfigurablesPageProps) => {
     const { onChange, onClose, fileName, targetLineRange } = props;
 
     const { rpcClient } = useRpcContext();
+    const { breadCrumbSteps, navigateToNext, navigateToBreadcrumb, isAtRoot } = useHelperPaneNavigation("Configurables");
     const [configVariables, setConfigVariables] = useState<ConfigVariablesState>({});
     const [errorMessage, setErrorMessage] = useState<string>('');
     const [configVarNode, setCofigVarNode] = useState<FlowNode>();
@@ -65,6 +67,9 @@ export const Configurables = (props: ConfigurablesPageProps) => {
     const [packageInfo, setPackageInfo] = useState<TomlPackage>();
     const [isImportEnv, setIsImportEnv] = useState<boolean>(false);
     const [projectPathUri, setProjectPathUri] = useState<string>();
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [showContent, setShowContent] = useState<boolean>(false);
+    const [searchValue, setSearchValue] = useState<string>("");
 
     const { addModal, closeModal } = useModalStack();
 
@@ -110,16 +115,28 @@ export const Configurables = (props: ConfigurablesPageProps) => {
         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;
-            });
+        setIsLoading(true);
+        
+        // Only apply minimum loading time if we don't have any config variables yet
+        const shouldShowMinLoader = Object.keys(configVariables).length === 0 && !showContent;
+        const minLoadingTime = shouldShowMinLoader ? new Promise(resolve => setTimeout(resolve, 500)) : Promise.resolve();
+
+        await Promise.all([
+            rpcClient
+                .getBIDiagramRpcClient()
+                .getConfigVariablesV2({
+                    includeLibraries: false,
+                    projectPath: projectPathUri
+                })
+                .then((variables) => {
+                    data = (variables as any).configVariables;
+                    errorMsg = (variables as any).errorMsg;
+                }),
+            minLoadingTime
+        ]).finally(() => {
+            setIsLoading(false);
+            setShowContent(true);
+        });
 
         setConfigVariables(data);
         setErrorMessage(errorMsg);
@@ -152,10 +169,14 @@ export const Configurables = (props: ConfigurablesPageProps) => {
     }
 
     const handleItemClicked = (name: string) => {
-        onChange(name, true)
+        onChange(name, false)
         onClose && onClose();
     }
 
+    const handleSearch = (searchText: string) => {
+        setSearchValue(searchText);
+    };
+
     const handleAddNewConfigurable = () => {
         addModal(
             <FormGenerator
@@ -181,61 +202,128 @@ export const Configurables = (props: ConfigurablesPageProps) => {
             height: "100%",
             overflow: "hidden"
         }}>
-            <ScrollableContainer style={{ margin: '8px 0px' }}>
-                {translateToArrayFormat(configVariables)
+            <BreadcrumbNavigation
+                breadCrumbSteps={breadCrumbSteps}
+                onNavigateToBreadcrumb={(step) => navigateToBreadcrumb(step, onChange)}
+            />
+            {(() => {
+                const filteredCategories = 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
+                    );
+                
+                // Count total items across all categories
+                const totalItemsCount = filteredCategories.reduce((total, category) => {
+                    return total + category.items.reduce((subTotal, subCategory) => {
+                        return subTotal + (subCategory.items?.length || 0);
+                    }, 0);
+                }, 0);
+
+                return (
+                    <>
+                        {totalItemsCount >= 6 && (
+                            <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 || !showContent ? (
+                    <HelperPaneCustom.Loader />
+                ) : (
+                    <>
+                        {(() => {
+                            let filteredCategories = translateToArrayFormat(configVariables)
+                                .filter(category =>
+                                    Array.isArray(category.items) &&
+                                    category.items.some(sub => Array.isArray(sub.items) && sub.items.length > 0)
+                                );
+
+                            // Apply search filter if search value exists
+                            if (searchValue && searchValue.trim()) {
+                                filteredCategories = filteredCategories.map(category => ({
+                                    ...category,
+                                    items: category.items.map(subCategory => ({
+                                        ...subCategory,
+                                        items: subCategory.items.filter((item: ConfigVariable) =>
+                                            (item?.properties?.variable?.value as string)?.toLowerCase().includes(searchValue.toLowerCase())
+                                        )
+                                    })).filter(subCategory => subCategory.items.length > 0)
+                                })).filter(category => category.items.length > 0);
+                            }
+                            
+                            if (filteredCategories.length === 0) {
+                                return <EmptyItemsPlaceHolder message={searchValue ? "No configurables found for your search" : "No configurables found"} />;
+                            }
+                            
+                            return (
+                                <>
+                                    {filteredCategories.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}
                                                             >
-                                                                {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 style={{ marginTop: '10px' }}>
+                                                                    {subCategory.items.map((item: ConfigVariable) => (
+                                                                        <HelperPaneListItem
+                                                                            key={item.id}
+                                                                            onClick={() => { handleItemClicked(item?.properties?.variable?.value as string) }}
+                                                                        >
+                                                                            {getHelperPaneIcon(HelperPaneIconType.CONFIGURABLE)}
+                                                                            <Typography variant="body3" sx={{ flex: 1, mr: 1 }}>
+                                                                                {item?.properties?.variable?.value as ReactNode}
+                                                                            </Typography>
+                                                                            <TypeIndicator>
+                                                                                {item?.properties?.type?.value as ReactNode}
+                                                                            </TypeIndicator>
+                                                                        </HelperPaneListItem>
+                                                                    ))}
+                                                                </div>
+                                                            </ExpandableList.Section>
+                                                        ) : (
+                                                            <div>
+                                                                {subCategory.items.map((item: ConfigVariable) => (
+                                                                    <HelperPaneListItem 
+                                                                        key={item.id}
+                                                                        onClick={() => { handleItemClicked(item?.properties?.variable?.value as string) }}
+                                                                    >
+                                                                        {getHelperPaneIcon(HelperPaneIconType.CONFIGURABLE)}
+                                                                        <Typography variant="body3" sx={{ flex: 1, mr: 1 }}>
+                                                                            {item?.properties?.variable?.value as ReactNode}
+                                                                        </Typography>
+                                                                        <TypeIndicator>
+                                                                            {item?.properties?.type?.value as ReactNode}
+                                                                        </TypeIndicator>
+                                                                    </HelperPaneListItem>
+                                                                ))}
+                                                            </div>
+                                                        )}
+                                                    </div>
                                                 ))}
-                                            </div>
-                                        )}
-                                    </div>
-                                ))}
-                        </div>
-                    ))}
+                                        </div>
+                                    ))}
+                                </>
+                            );
+                        })()}
+                    </>
+                )}
             </ScrollableContainer>
 
             <Divider sx={{ margin: "0px" }} />
-            <FooterButtons onClick={handleAddNewConfigurable} startIcon='add' title="New Configurable" />
+            <div style={{ margin: '4px 0' }}>
+                <FooterButtons onClick={handleAddNewConfigurable} title="New Configurable" />
+            </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
index c8f4c64370e..e2bad4ac5d7 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/CreateValue.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/CreateValue.tsx
@@ -16,9 +16,8 @@
  * 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 { RecordTypeField } from "@wso2/ballerina-core";
+import { RefObject} from "react";
 import ExpandableList from "../Components/ExpandableList";
 import { SlidingPaneNavContainer } from "@wso2/ui-toolkit/lib/components/ExpressionEditor/components/Common/SlidingPane";
 import { ValueCreationOption } from "..";
@@ -33,78 +32,8 @@ type CreateValuePageProps = {
     valueCreationOptions?: ValueCreationOption[];
 }
 
-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, valueCreationOptions } = 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) ?
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
index d079620dde8..22207013355 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Functions.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Functions.tsx
@@ -24,18 +24,18 @@ import { convertToHelperPaneFunction, extractFunctionInsertText } from "../../..
 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 { CompletionItem, 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";
 import { POPUP_IDS, useModalStack } from "../../../../Context";
+import { HelperPaneIconType, getHelperPaneIcon } from "../utils/iconUtils";
+import { HelperPaneListItem } from "../Components/HelperPaneListItem";
 
 type FunctionsPageProps = {
     fieldKey: string;
@@ -62,15 +62,13 @@ export const FunctionsPage = ({
     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 [isLoading, setIsLoading] = useState<boolean>(true);
+    const [showContent, setShowContent] = useState<boolean>(false);
     const [functionInfo, setFunctionInfo] = useState<HelperPaneFunctionInfo | undefined>(undefined);
     const [libraryBrowserInfo, setLibraryBrowserInfo] = useState<HelperPaneFunctionInfo | undefined>(undefined);
     const [projectUri, setProjectUri] = useState<string>('');
 
-    const { addModal , closeModal} = useModalStack();
-
-
+    const { addModal, closeModal } = useModalStack();
 
     //TODO: get the correct filepath
     let defaultFunctionsFile = Utils.joinPath(URI.file(projectUri), 'functions.bal').fsPath;
@@ -78,32 +76,42 @@ export const FunctionsPage = ({
     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));
+
+            // Only apply minimum loading time if we don't have any function info yet
+            const shouldShowMinLoader = !functionInfo && !showContent;
+            const minLoadingTime = shouldShowMinLoader ? new Promise(resolve => setTimeout(resolve, 500)) : Promise.resolve();
+
+            Promise.all([
+                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));
+                        console.log(response);
+                    }),
+                minLoadingTime
+            ]).finally(() => {
+                setIsLoading(false);
+                setShowContent(true);
+            });
         }, 150),
-        [rpcClient, fileName, targetLineRange]
+        [rpcClient, fileName, targetLineRange, functionInfo, showContent]
     );
 
     const fetchFunctionInfo = useCallback(
@@ -113,7 +121,7 @@ export const FunctionsPage = ({
         [debounceFetchFunctionInfo, searchValue]
     );
 
-    const { mutateAsync: addFunction, isPending: isAddingFunction } = useMutation({
+    const { mutateAsync: addFunction } = useMutation({
         mutationFn: (item: HelperPaneCompletionItem) =>
             rpcClient.getBIDiagramRpcClient().addFunction({
                 filePath: fileName,
@@ -156,13 +164,7 @@ export const FunctionsPage = ({
 
     const handleFunctionSearch = (searchText: string) => {
         setSearchValue(searchText);
-
-        // Search functions
-        if (isLibraryBrowserOpen) {
-            fetchFunctionInfo(searchText, 'true');
-        } else {
-            fetchFunctionInfo(searchText);
-        }
+        fetchFunctionInfo(searchText);
     };
 
     const handleFunctionSave = (value: string) => {
@@ -190,6 +192,20 @@ export const FunctionsPage = ({
         onClose();
     }
 
+    const handleOpenLibraryBrowser = () => {
+        addModal(
+            <LibraryBrowser
+                fileName={fileName}
+                targetLineRange={targetLineRange}
+                onClose={() => closeModal(POPUP_IDS.LIBRARY_BROWSER)}
+                onChange={(insertText) => {
+                    onChange(insertText);
+                    onClose();
+                }}
+                onFunctionItemSelect={onFunctionItemSelect}
+            />, POPUP_IDS.LIBRARY_BROWSER, "Function Browser", 600, 550);
+    }
+
     return (
         <div style={{
             display: "flex",
@@ -197,96 +213,102 @@ export const FunctionsPage = ({
             height: "100%",
             overflow: "hidden"
         }}>
-            <div style={{ display: "flex", justifyContent: "center", alignItems: "center", margin: "3px 8px" }}>
+            <div style={{ display: "flex", justifyContent: "center", alignItems: "center", margin: "3px 5px", height: "20px" }}>
                 <SearchBox sx={{ width: "100%" }} placeholder='Search' value={searchValue} onChange={handleFunctionSearch} />
             </div>
+
             <ScrollableContainer style={{ margin: '8px 0px' }}>
                 {
 
-                    isLoading ? (
+                    isLoading || !showContent ? (
                         <HelperPaneCustom.Loader />
                     ) : (
                         <>
-                            {
-                                !functionInfo || !functionInfo.category || functionInfo.category.length === 0 ? (
-                                    <EmptyItemsPlaceHolder />
-                                ) : (
-                                    functionInfo.category.map((category) => {
-                                        if (!category.subCategory) {
-                                            if (!category.items || category.items.length === 0) {
+                            {(() => {
+                                // Check if we have any functions to display
+                                const hasAnyFunctions = functionInfo?.category?.some(category => {
+                                    if (category.items && category.items.length > 0) {
+                                        return true;
+                                    }
+                                    if (category.subCategory && category.subCategory.some(sub => sub.items && sub.items.length > 0)) {
+                                        return true;
+                                    }
+                                    return false;
+                                });
+
+                                if (!functionInfo || !functionInfo.category || functionInfo.category.length === 0 || !hasAnyFunctions) {
+                                    return <EmptyItemsPlaceHolder message={searchValue ? "No functions found for your search" : "No functions found"} />;
+                                }
+
+                                return (
+                                    <>
+                                        {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) => (
+                                                                    <HelperPaneListItem
+                                                                        key={item.label}
+                                                                        onClick={async () => await handleFunctionItemSelect(item)}
+                                                                    >
+                                                                        {getHelperPaneIcon(HelperPaneIconType.FUNCTION)}
+                                                                        <FunctionItemLabel>{`${item.label}()`}</FunctionItemLabel>
+                                                                    </HelperPaneListItem>
+                                                                ))}
+                                                            </div>
+                                                        </ExpandableList.Section>
+                                                    </ExpandableList>
+                                                )
+                                            }
+
+                                            //if sub category is empty
+                                            if (category.subCategory.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
+                                                    {category.subCategory.map((subCategory) => (
+                                                        <ExpandableList.Section key={subCategory.label} title={subCategory.label} level={0}>
+                                                            <div style={{ marginTop: '10px' }}>
+                                                                {subCategory.items.map((item) => (
+                                                                    <HelperPaneListItem
                                                                         key={item.label}
+                                                                        onClick={async () => await handleFunctionItemSelect(item)}
                                                                     >
-                                                                        {getIcon(COMPLETION_ITEM_KIND.Function)}
+                                                                        {getHelperPaneIcon(HelperPaneIconType.FUNCTION)}
                                                                         <FunctionItemLabel>{`${item.label}()`}</FunctionItemLabel>
-                                                                    </ExpandableList.Item>
-                                                                </SlidingPaneNavContainer>
-                                                            ))}
-                                                        </div>
-                                                    </ExpandableList.Section>
+                                                                    </HelperPaneListItem>
+                                                                ))}
+                                                            </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={{padding: '0px'}}>
-                <FooterButtons onClick={handleNewFunctionClick} startIcon='add' title="New Function" />
-                <FooterButtons sx={{ display: 'flex', justifyContent: 'space-between' }} startIcon='add' title="Open Function Browser" onClick={() => setIsLibraryBrowserOpen(true)} />
-
+            <div style={{ margin: '4px 0' }}>
+                <FooterButtons onClick={handleNewFunctionClick} title="New Function" />
+                <FooterButtons
+                    sx={{ display: "flex", justifyContent: "space-between" }}
+                    title="Open Function Browser"
+                    onClick={handleOpenLibraryBrowser}
+                    startIcon="bi-arrow-outward"
+                />            
             </div>
-            {isLibraryBrowserOpen && (
-                <LibraryBrowser
-                    anchorRef={anchorRef}
-                    isLoading={isLoading}
-                    libraryBrowserInfo={libraryBrowserInfo as HelperPaneFunctionInfo}
-                    setFilterText={handleFunctionSearch}
-                    onBack={() => setIsLibraryBrowserOpen(false)}
-                    onClose={onClose}
-                    onChange={onChange}
-                    onFunctionItemSelect={onFunctionItemSelect}
-                />
-            )}
         </div>
     )
 }
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
index e9f7df88ef0..e0a65ccd10c 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/GenerateBICopilot.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/GenerateBICopilot.tsx
@@ -35,15 +35,6 @@ const PromptBox = styled.div`
     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;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Inputs.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Inputs.tsx
new file mode 100644
index 00000000000..471e0a089de
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Inputs.tsx
@@ -0,0 +1,205 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { TypeIndicator } from "../Components/TypeIndicator"
+import { ExpressionProperty, LineRange } from "@wso2/ballerina-core"
+import { Codicon, CompletionItem, HelperPaneCustom, SearchBox, ThemeColors, Tooltip, Typography } from "@wso2/ui-toolkit"
+import { useEffect, useMemo, useState } from "react"
+import { getPropertyFromFormField, useFieldContext } from "@wso2/ballerina-side-panel"
+import { ScrollableContainer } from "../Components/ScrollableContainer"
+import { HelperPaneIconType, getHelperPaneIcon } from "../utils/iconUtils"
+import { EmptyItemsPlaceHolder } from "../Components/EmptyItemsPlaceHolder"
+import { shouldShowNavigationArrow } from "../utils/types"
+import { HelperPaneListItem } from "../Components/HelperPaneListItem"
+import { useHelperPaneNavigation, BreadCrumbStep } from "../hooks/useHelperPaneNavigation"
+import { BreadcrumbNavigation } from "../Components/BreadcrumbNavigation"
+
+type InputsPageProps = {
+    fileName: string;
+    onChange: (value: string, isRecordConfigureChange: boolean, shouldKeepHelper?: boolean) => void;
+    targetLineRange: LineRange;
+    anchorRef: React.RefObject<HTMLDivElement>;
+    filteredCompletions: CompletionItem[];
+    currentValue: string;
+    handleRetrieveCompletions: (value: string, property: ExpressionProperty, offset: number, triggerCharacter?: string) => Promise<void>;
+}
+
+type InputItemProps = {
+    item: CompletionItem;
+    onItemSelect: (value: string) => void;
+    onMoreIconClick: (value: string) => void;
+}
+
+const InputItem = ({ item, onItemSelect, onMoreIconClick }: InputItemProps) => {
+    const showArrow = shouldShowNavigationArrow(item);
+
+    const mainContent = (
+        <>
+            {getHelperPaneIcon(HelperPaneIconType.INPUT)}
+            <Typography variant="body3" sx={{ flex: 1, mr: 1 }}>
+                {item.label}
+            </Typography>
+            <Tooltip content={item.description} position="top">
+                <TypeIndicator>
+                    {item.description}
+                </TypeIndicator>
+            </Tooltip>
+        </>
+    );
+
+    const endAction = showArrow ? (
+        <Codicon 
+            name="chevron-right" 
+        />
+    ) : undefined;
+
+    return (
+        <HelperPaneListItem
+            onClick={() => onItemSelect(item.label)}
+            endAction={endAction}
+            onClickEndAction={() => onMoreIconClick(item.label)}
+        >
+            {mainContent}
+        </HelperPaneListItem>
+    );
+};
+
+export const Inputs = (props: InputsPageProps) => {
+    const { targetLineRange, onChange, filteredCompletions, currentValue, handleRetrieveCompletions } = props;
+    const [searchValue, setSearchValue] = useState<string>("");
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [showContent, setShowContent] = useState<boolean>(false);
+    const { breadCrumbSteps, navigateToNext, navigateToBreadcrumb, isAtRoot } = useHelperPaneNavigation("Inputs");
+
+    const { field, triggerCharacters } = useFieldContext();
+
+    useEffect(() => {
+        setIsLoading(true);
+        const triggerCharacter =
+            currentValue.length > 0
+                ? triggerCharacters.find((char) => currentValue[currentValue.length - 1] === char)
+                : undefined;
+
+        // Only apply minimum loading time if we don't have any completions yet
+        const shouldShowMinLoader = filteredCompletions.length === 0 && !showContent;
+        const minLoadingTime = shouldShowMinLoader ? new Promise(resolve => setTimeout(resolve, 500)) : Promise.resolve();
+
+        Promise.all([
+            handleRetrieveCompletions(currentValue, getPropertyFromFormField(field), 0, triggerCharacter),
+            minLoadingTime
+        ]).finally(() => {
+            setIsLoading(false);
+            setShowContent(true);
+        });
+    }, [targetLineRange])
+
+    const dropdownItems = useMemo(() => {
+        // If we're at the root level, only show parameters
+        if (isAtRoot()) {
+            return filteredCompletions.filter(
+                (completion) =>
+                completion.kind === "variable" &&
+                completion.labelDetails?.description?.includes("Parameter")
+            );
+        }
+        
+        // If we're navigating inside an object, show all fields and variables
+        return filteredCompletions.filter(
+            (completion) =>
+                (completion.kind === "field" || completion.kind === "variable") &&
+                completion.label !== "self"
+        );
+    }, [filteredCompletions, isAtRoot]);
+
+    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 handleInputsMoreIconClick = (value: string) => {
+        navigateToNext(value, currentValue, onChange);
+    }
+
+    const handleBreadCrumbItemClicked = (step: BreadCrumbStep) => {
+        navigateToBreadcrumb(step, onChange);
+    }
+
+    const ExpandableListItems = () => {
+        return (
+            <>
+                {
+                    filteredDropDownItems.map((item) => (
+                        <InputItem
+                            key={item.label}
+                            item={item}
+                            onItemSelect={handleItemSelect}
+                            onMoreIconClick={handleInputsMoreIconClick}
+                        />
+                    ))
+                }
+            </>
+        )
+    }
+
+    return (
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            overflow: "hidden"
+        }}>
+
+            <BreadcrumbNavigation
+                breadCrumbSteps={breadCrumbSteps}
+                onNavigateToBreadcrumb={handleBreadCrumbItemClicked}
+            />
+            {dropdownItems.length >= 6 && (
+                <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 || !showContent ? (
+                    <HelperPaneCustom.Loader />
+                ) : (
+                    <>
+                        {filteredDropDownItems.length === 0 ? (
+                            <EmptyItemsPlaceHolder message={searchValue ? "No inputs found for your search" : "No inputs found"} />
+                        ) : (
+                            <ExpandableList>
+                                <ExpandableListItems />
+                            </ExpandableList>
+                        )}
+                    </>
+                )}
+            </ScrollableContainer>
+        </div>
+    )
+}
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
index db6c3614ad6..662b576fe34 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigModal.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigModal.tsx
@@ -40,7 +40,7 @@ export const LabelContainer = styled.div({
 });
 
 export function ConfigureRecordPage(props: ConfigureRecordPageProps) {
-    const { fileName, targetLineRange, onChange, currentValue, recordTypeField, onClose } = props;
+    const { fileName, onChange, currentValue, recordTypeField, onClose } = props;
     const { rpcClient } = useRpcContext();
 
     const [recordModel, setRecordModel] = useState<TypeField[]>([]);
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
index cbdcebd6550..5e7b6f0c966 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigView.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigView.tsx
@@ -37,14 +37,6 @@ 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;
 `;
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
index 8b49ada614c..6c093135221 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Variables.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Variables.tsx
@@ -17,11 +17,10 @@
  */
 
 import { ExpandableList } from "../Components/ExpandableList"
-import { VariableTypeIndicator } from "../Components/VariableTypeIndicator"
-import { SlidingPaneNavContainer } from "@wso2/ui-toolkit/lib/components/ExpressionEditor/components/Common/SlidingPane"
+import { TypeIndicator } from "../Components/TypeIndicator"
 import { useRpcContext } from "@wso2/ballerina-rpc-client"
 import { DataMapperDisplayMode, ExpressionProperty, FlowNode, LineRange, RecordTypeField } from "@wso2/ballerina-core"
-import { Codicon, CompletionItem, Divider, getIcon, HelperPaneCustom, SearchBox, ThemeColors, Tooltip, Typography } from "@wso2/ui-toolkit"
+import { Codicon, CompletionItem, Divider, HelperPaneCustom, SearchBox, ThemeColors, Tooltip, Typography } from "@wso2/ui-toolkit"
 import { useEffect, useMemo, useRef, useState } from "react"
 import { getPropertyFromFormField, useFieldContext } from "@wso2/ballerina-side-panel"
 import FooterButtons from "../Components/FooterButtons"
@@ -29,8 +28,13 @@ import { FormGenerator } from "../../Forms/FormGenerator"
 import { ScrollableContainer } from "../Components/ScrollableContainer"
 import { FormSubmitOptions } from "../../FlowDiagram"
 import { URI } from "vscode-uri"
-import styled from "@emotion/styled"
 import { POPUP_IDS, useModalStack } from "../../../../Context"
+import { HelperPaneIconType, getHelperPaneIcon } from "../utils/iconUtils"
+import { EmptyItemsPlaceHolder } from "../Components/EmptyItemsPlaceHolder"
+import { shouldShowNavigationArrow } from "../utils/types"
+import { HelperPaneListItem } from "../Components/HelperPaneListItem"
+import { useHelperPaneNavigation, BreadCrumbStep } from "../hooks/useHelperPaneNavigation"
+import { BreadcrumbNavigation } from "../Components/BreadcrumbNavigation"
 
 type VariablesPageProps = {
     fileName: string;
@@ -55,75 +59,48 @@ type VariableItemProps = {
 }
 
 const VariableItem = ({ item, onItemSelect, onMoreIconClick }: VariableItemProps) => {
-    const [isHovered, setIsHovered] = useState(false);
+    const showArrow = shouldShowNavigationArrow(item);
+
+    const mainContent = (
+        <>
+            {getHelperPaneIcon(HelperPaneIconType.VARIABLE)}
+            <Typography variant="body3" sx={{ flex: 1, mr: 1 }}>
+                {item.label}
+            </Typography>
+            <Tooltip content={item.description} position="top">
+                <TypeIndicator>
+                    {item.description}
+                </TypeIndicator>
+            </Tooltip>
+        </>
+    );
+
+    const endAction = showArrow ? (
+        <Codicon 
+            name="chevron-right" 
+        />
+    ) : undefined;
 
     return (
-        <SlidingPaneNavContainer
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
+        <HelperPaneListItem
             onClick={() => onItemSelect(item.label)}
-            data
-            sx={{
-                maxHeight: isHovered ? "none" : "32px"
-            }}
-            endIcon={
-                <VariablesMoreIconContainer style={{ height: "10px" }} onClick={(event) => {
-                    event.stopPropagation();
-                    onMoreIconClick(item.label);
-                }}>
-                    <Tooltip content={item.description} position="top">
-                        <VariableTypeIndicator >
-                            {item.description}
-                        </VariableTypeIndicator>
-                    </Tooltip>
-                    <Codicon name="chevron-right" />
-                </VariablesMoreIconContainer>}
+            endAction={endAction}
+            onClickEndAction={() => onMoreIconClick(item.label)}
         >
-            <ExpandableList.Item>
-                {getIcon(item.kind)}
-                <Typography
-                    variant="body3"
-                    sx={{
-                        maxWidth: isHovered ? '30ch' : '20ch',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: isHovered ? 'normal' : 'nowrap',
-                        transition: 'all 0.3s ease'
-                    }}
-                >
-                    {item.label}
-                </Typography>
-            </ExpandableList.Item>
-        </SlidingPaneNavContainer>
+            {mainContent}
+        </HelperPaneListItem>
     );
 };
 
-const VariablesMoreIconContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-     &:hover {
-        cursor: pointer;
-    }
-`;
-
-type BreadCrumbStep = {
-    label: string;
-    replaceText: string
-}
-
 export const Variables = (props: VariablesPageProps) => {
-    const { fileName, targetLineRange, onChange, onClose, handleOnFormSubmit, selectedType, filteredCompletions, currentValue, recordTypeField, isInModal, handleRetrieveCompletions } = props;
+    const { fileName, targetLineRange, onChange, onClose, handleOnFormSubmit, selectedType, filteredCompletions, currentValue, isInModal, handleRetrieveCompletions } = props;
     const [searchValue, setSearchValue] = useState<string>("");
     const { rpcClient } = useRpcContext();
-    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [showContent, setShowContent] = useState<boolean>(false);
     const newNodeNameRef = useRef<string>("");
     const [projectPathUri, setProjectPathUri] = useState<string>();
-    const [breadCrumbSteps, setBreadCrumbSteps] = useState<BreadCrumbStep[]>([{
-        label: "Variables",
-        replaceText: ""
-    }]);
+    const { breadCrumbSteps, navigateToNext, navigateToBreadcrumb, isAtRoot } = useHelperPaneNavigation("Variables");
     const { addModal, closeModal } = useModalStack()
 
     const { field, triggerCharacters } = useFieldContext();
@@ -133,12 +110,24 @@ export const Variables = (props: VariablesPageProps) => {
     }, []);
 
     useEffect(() => {
+        setIsLoading(true);
         const triggerCharacter =
             currentValue.length > 0
                 ? triggerCharacters.find((char) => currentValue[currentValue.length - 1] === char)
                 : undefined;
 
-        handleRetrieveCompletions(currentValue, getPropertyFromFormField(field), 0, triggerCharacter);
+        // Only apply minimum loading time if we don't have any completions yet
+        const shouldShowMinLoader = filteredCompletions.length === 0 && !showContent;
+        const minLoadingTime = shouldShowMinLoader ? new Promise(resolve => setTimeout(resolve, 500)) : Promise.resolve();
+
+        Promise.all([
+            handleRetrieveCompletions(currentValue, getPropertyFromFormField(field), 0, triggerCharacter),
+            minLoadingTime
+        ]).finally(() => {
+            setIsLoading(false);
+            setShowContent(true);
+        });
+
     }, [targetLineRange])
 
     const getProjectInfo = async () => {
@@ -165,13 +154,19 @@ export const Variables = (props: VariablesPageProps) => {
             },
         );
     };
-    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 dropdownItems = useMemo(() => {
+        const excludedDescriptions = ["Configurable", "Parameter", "Listener", "Client"];
+        
+        return filteredCompletions.filter(
+            (completion) =>
+                (completion.kind === "field" || completion.kind === "variable") &&
+                completion.label !== "self" &&
+                !excludedDescriptions.some(desc => 
+                    completion.labelDetails?.description?.includes(desc)
+                )
+        );
+    }, [filteredCompletions]);
 
     const filteredDropDownItems = useMemo(() => {
         if (!searchValue || searchValue.length === 0) return dropdownItems;
@@ -205,20 +200,11 @@ export const Variables = (props: VariablesPageProps) => {
         onClose && onClose();
     }
     const handleVariablesMoreIconClick = (value: string) => {
-        const newBreadCrumSteps = [...breadCrumbSteps, {
-            label: value,
-            replaceText: currentValue + value
-        }];
-        setBreadCrumbSteps(newBreadCrumSteps);
-        onChange(value + '.', false, true);
+        navigateToNext(value, currentValue, onChange);
     }
 
     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);
+        navigateToBreadcrumb(step, onChange);
     }
 
     const ExpandableListItems = () => {
@@ -332,36 +318,38 @@ export const Variables = (props: VariablesPageProps) => {
             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>
+            <BreadcrumbNavigation
+                breadCrumbSteps={breadCrumbSteps}
+                onNavigateToBreadcrumb={handleBreadCrumbItemClicked}
+            />
+            {dropdownItems.length >= 6 && (
+                <div style={{ display: "flex", justifyContent: "center", alignItems: "center", margin: "3px 5px", height: "20px", gap: '5px' }}>
+                    <SearchBox sx={{ width: "100%" }} placeholder='Search' value={searchValue} onChange={handleSearch} />
+                </div>
+            )}
 
             <ScrollableContainer style={{ margin: '8px 0px' }}>
-                {isLoading ? (
+                {isLoading || !showContent ? (
                     <HelperPaneCustom.Loader />
                 ) : (
-                    <ExpandableList>
-                        <ExpandableListItems />
-                    </ExpandableList>
+                    <>
+                        {filteredDropDownItems.length === 0 ? (
+                            <EmptyItemsPlaceHolder message={searchValue ? "No variables found for your search" : "No variables found"} />
+                        ) : (
+                            <ExpandableList>
+                                <ExpandableListItems />
+                            </ExpandableList>
+                        )}
+                    </>
                 )}
             </ScrollableContainer>
 
             <Divider sx={{ margin: "0px" }} />
-            {isInModal ? null : <div style={{ padding: '3px' }}><FooterButtons onClick={handleAddNewVariable} startIcon='add' title="New Variable" /></div>}
+            {!isInModal && (
+                <div style={{ margin: '4px 0' }}>
+                    <FooterButtons onClick={handleAddNewVariable} title="New Variable" />
+                </div>
+            )}
         </div>
     )
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/hooks/useHelperPaneNavigation.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/hooks/useHelperPaneNavigation.tsx
new file mode 100644
index 00000000000..0b4083ade28
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/hooks/useHelperPaneNavigation.tsx
@@ -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 { useState } from "react";
+
+export type BreadCrumbStep = {
+    label: string;
+    replaceText: string;
+}
+
+export const useHelperPaneNavigation = (initialLabel: string) => {
+    const [breadCrumbSteps, setBreadCrumbSteps] = useState<BreadCrumbStep[]>([{
+        label: initialLabel,
+        replaceText: ""
+    }]);
+
+    const navigateToNext = (value: string, currentValue: string, onChange: (value: string, isRecordConfigureChange: boolean, shouldKeepHelper?: boolean) => void) => {
+        const newBreadCrumSteps = [...breadCrumbSteps, {
+            label: value,
+            replaceText: currentValue + value
+        }];
+        setBreadCrumbSteps(newBreadCrumSteps);
+        onChange(value + '.', false, true);
+    };
+
+    const navigateToBreadcrumb = (step: BreadCrumbStep, onChange: (value: string, isRecordConfigureChange: boolean, shouldKeepHelper?: boolean) => void) => {
+        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 isAtRoot = () => breadCrumbSteps.length === 1;
+
+    const getCurrentPath = () => {
+        if (breadCrumbSteps.length === 1) return '';
+        return breadCrumbSteps[breadCrumbSteps.length - 1].replaceText;
+    };
+
+    return {
+        breadCrumbSteps,
+        navigateToNext,
+        navigateToBreadcrumb,
+        isAtRoot,
+        getCurrentPath
+    };
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx
index 2427c3a80a3..736e2cb5d56 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx
@@ -20,21 +20,22 @@ import { RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { ExpandableList } from './Components/ExpandableList';
 import { Variables } from './Views/Variables';
-import { CompletionInsertText, DataMapperDisplayMode, 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 { Inputs } from './Views/Inputs';
+import { CompletionInsertText, DataMapperDisplayMode, ExpressionProperty, FlowNode, LineRange, RecordTypeField } from '@wso2/ballerina-core';
+import { CompletionItem, FormExpressionEditorRef, HelperPaneCustom, HelperPaneHeight, Typography } from '@wso2/ui-toolkit';
 import { SlidingPane, SlidingPaneHeader, SlidingPaneNavContainer, SlidingWindow } from '@wso2/ui-toolkit';
 import { CreateValue } from './Views/CreateValue';
 import { FunctionsPage } from './Views/Functions';
 import { FormSubmitOptions } from '../FlowDiagram';
 import { Configurables } from './Views/Configurables';
 import styled from '@emotion/styled';
-import { useRpcContext } from '@wso2/ballerina-rpc-client';
 import { ConfigureRecordPage } from './Views/RecordConfigModal';
 import { POPUP_IDS, useModalStack } from '../../../Context';
-import { getDefaultValue } from './Utils/types';
+import { getDefaultValue } from './utils/types';
 import { EXPR_ICON_WIDTH } from '@wso2/ui-toolkit';
+import { HelperPaneIconType, getHelperPaneIcon } from './utils/iconUtils';
+import { HelperpaneOnChangeOptions } from '@wso2/ballerina-side-panel';
 
-const MAX_MENU_ITEM_COUNT = 4;
 
 export type ValueCreationOption = {
     typeCheck: string | null;
@@ -46,12 +47,11 @@ 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;
+    onChange: (value: string, options?: HelperpaneOnChangeOptions) => void;
     helperPaneHeight: HelperPaneHeight;
     recordTypeField?: RecordTypeField;
     updateImports: (key: string, imports: { [key: string]: string }) => void;
@@ -78,7 +78,6 @@ const HelperPaneNewEl = ({
     fieldKey,
     fileName,
     targetLineRange,
-    exprRef,
     anchorRef,
     onClose,
     currentValue,
@@ -94,51 +93,14 @@ const HelperPaneNewEl = ({
     forcedValueTypeConstraint,
     handleValueTypeConstChange
 }: 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
+    const currentMenuItemCount = valueTypeConstraint ? 5 : 4
 
-    const { addModal, closeModal } = useModalStack()
+    const { addModal } = useModalStack()
 
     // 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]);
-
     useEffect(() => {
         if (valueTypeConstraint?.length > 0) {
             handleValueTypeConstChange(valueTypeConstraint)
@@ -183,7 +145,6 @@ const HelperPaneNewEl = ({
         }
     };
 
-
     useEffect(() => {
         const handleKeyDown = (event: KeyboardEvent) => {
             event?.key && handleKeyPress(event);
@@ -211,50 +172,21 @@ const HelperPaneNewEl = ({
     };
 
     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);
+        if (typeof insertText === 'string') {
+            onChange(insertText, {
+                closeHelperPane: !shouldKeepHelper,
+                replaceFullText: isRecordConfigureChange || false
+            });
         }
-
-        // 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();
+        else {
+            const textToInsert = getInsertText(insertText);
+            onChange(textToInsert, {
+                closeHelperPane: !shouldKeepHelper,
+                replaceFullText: isRecordConfigureChange || false
+            });
         }
     };
 
-    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]) {
@@ -273,7 +205,7 @@ const HelperPaneNewEl = ({
         return unionTypes.includes(searchType);
     };
 
-    const defaultValue = getDefaultValue(Array.isArray(selectedType) ? selectedType[0] : selectedType);
+    const defaultValue = getDefaultValue(selectedType?.label);
 
     const allValueCreationOptions = [
         {
@@ -315,8 +247,8 @@ const HelperPaneNewEl = ({
             value: defaultValue,
             label: `Initialize to ${defaultValue}`
         }] : []),
-        ...allValueCreationOptions.filter(option => 
-            forcedValueTypeConstraint && 
+        ...allValueCreationOptions.filter(option =>
+            forcedValueTypeConstraint &&
             isSelectedTypeContainsType(forcedValueTypeConstraint, option.typeCheck)
         )
     ];
@@ -334,14 +266,14 @@ const HelperPaneNewEl = ({
                 />
             </div>
             , POPUP_IDS.RECORD_CONFIG, "Record Configuration", 600, 500);
-            onClose();
+        onClose();
     }
 
     return (
         <HelperPaneCustom anchorRef={anchorRef}>
             <HelperPaneCustom.Body>
                 <SlidingWindow>
-                    <SlidingPane name="PAGE1" paneWidth={rect.width} paneHeight='170px'>
+                    <SlidingPane name="PAGE1" paneWidth={300} paneHeight='170px'>
                         <div style={{ padding: '8px 0px' }}>
                             <ExpandableList >
 
@@ -349,7 +281,7 @@ const HelperPaneNewEl = ({
                                     recordTypeField ?
                                         <SlidingPaneNavContainer onClick={openRecordConfigView}>
                                             <ExpandableList.Item>
-                                                {getIcon(COMPLETION_ITEM_KIND.Value)}
+                                                {getHelperPaneIcon(HelperPaneIconType.VALUE)}
                                                 <Typography variant="body3" sx={{ fontWeight: 600 }}>
                                                     Create value
                                                 </Typography>
@@ -361,10 +293,9 @@ const HelperPaneNewEl = ({
                                                     ref={el => menuItemRefs.current[0] = el}
                                                     to="CREATE_VALUE"
                                                     data={recordTypeField}
-                                                    sx={{ backgroundColor: getMenuItemColor(currentMenuItemCount, 0) }}
                                                 >
                                                     <ExpandableList.Item>
-                                                        {getIcon(COMPLETION_ITEM_KIND.Value)}
+                                                        {getHelperPaneIcon(HelperPaneIconType.VALUE)}
                                                         <Typography variant="body3" sx={{ fontWeight: 600 }}>
                                                             Create Value
                                                         </Typography>
@@ -372,26 +303,35 @@ const HelperPaneNewEl = ({
                                                 </SlidingPaneNavContainer>
                                             )}</>
                                 )}
+                                <SlidingPaneNavContainer
+                                    ref={el => menuItemRefs.current[2] = el}
+                                    to="INPUTS"
+                                >
+                                    <ExpandableList.Item>
+                                        {getHelperPaneIcon(HelperPaneIconType.INPUT)}
+                                        <Typography variant="body3" sx={{ fontWeight: 600 }}>
+                                            Inputs
+                                        </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)}
+                                        {getHelperPaneIcon(HelperPaneIconType.VARIABLE)}
                                         <Typography variant="body3" sx={{ fontWeight: 600 }}>
                                             Variables
                                         </Typography>
                                     </ExpandableList.Item>
-                                </SlidingPaneNavContainer>
+                                </SlidingPaneNavContainer>                                
                                 <SlidingPaneNavContainer
-                                    ref={el => menuItemRefs.current[2] = el}
+                                    ref={el => menuItemRefs.current[3] = el}
                                     to="CONFIGURABLES"
-                                    sx={{ backgroundColor: getMenuItemColor(currentMenuItemCount, 2) }}
                                 >
                                     <ExpandableList.Item>
                                         <TitleContainer>
-                                            {getIcon(COMPLETION_ITEM_KIND.Constant)}
+                                            {getHelperPaneIcon(HelperPaneIconType.CONFIGURABLE)}
                                             <Typography variant="body3" sx={{ fontWeight: 600 }}>
                                                 Configurables
                                             </Typography>
@@ -399,12 +339,11 @@ const HelperPaneNewEl = ({
                                     </ExpandableList.Item>
                                 </SlidingPaneNavContainer>
                                 <SlidingPaneNavContainer
-                                    ref={el => menuItemRefs.current[3] = el}
+                                    ref={el => menuItemRefs.current[4] = el}
                                     to="FUNCTIONS"
-                                    sx={{ backgroundColor: getMenuItemColor(currentMenuItemCount, 3) }}
                                 >
                                     <ExpandableList.Item>
-                                        {getIcon(COMPLETION_ITEM_KIND.Function)}
+                                        {getHelperPaneIcon(HelperPaneIconType.FUNCTION)}
                                         <Typography variant="body3" sx={{ fontWeight: 600 }}>
                                             Functions
                                         </Typography>
@@ -416,7 +355,7 @@ const HelperPaneNewEl = ({
                     </SlidingPane>
 
                     {/* Variables Page */}
-                    <SlidingPane name="VARIABLES" paneWidth={rect.width}>
+                    <SlidingPane name="VARIABLES" paneWidth={300}>
                         <SlidingPaneHeader>
                             Variables
                         </SlidingPaneHeader>
@@ -436,7 +375,23 @@ const HelperPaneNewEl = ({
                         />
                     </SlidingPane>
 
-                    <SlidingPane name="CREATE_VALUE" paneWidth={rect.width}>
+                    {/* Inputs Page */}
+                    <SlidingPane name="INPUTS" paneWidth={300}>
+                        <SlidingPaneHeader>
+                            Inputs
+                        </SlidingPaneHeader>
+                        <Inputs
+                            anchorRef={anchorRef}
+                            fileName={fileName}
+                            onChange={handleChange}
+                            targetLineRange={targetLineRange}
+                            filteredCompletions={filteredCompletions}
+                            currentValue={currentValue}
+                            handleRetrieveCompletions={handleRetrieveCompletions}
+                        />
+                    </SlidingPane>
+
+                    <SlidingPane name="CREATE_VALUE" paneWidth={300}>
                         <SlidingPaneHeader> Create Value</SlidingPaneHeader>
                         <CreateValue
                             fileName={fileName}
@@ -448,7 +403,7 @@ const HelperPaneNewEl = ({
                             anchorRef={anchorRef} />
                     </SlidingPane>
 
-                    <SlidingPane name="FUNCTIONS" paneWidth={rect.width}>
+                    <SlidingPane name="FUNCTIONS" paneWidth={300}>
                         <SlidingPaneHeader>
                             Functions
                         </SlidingPaneHeader>
@@ -463,7 +418,7 @@ const HelperPaneNewEl = ({
                             selectedType={selectedType} />
                     </SlidingPane>
 
-                    <SlidingPane name="CONFIGURABLES" paneWidth={rect.width}>
+                    <SlidingPane name="CONFIGURABLES" paneWidth={300}>
                         <SlidingPaneHeader>
                             Configurables
                         </SlidingPaneHeader>
@@ -507,7 +462,6 @@ export const getHelperPaneNew = (props: HelperPaneNewProps) => {
         fieldKey,
         fileName,
         targetLineRange,
-        exprRef,
         anchorRef,
         onClose,
         defaultValue,
@@ -533,7 +487,6 @@ export const getHelperPaneNew = (props: HelperPaneNewProps) => {
             fieldKey={fieldKey}
             fileName={fileName}
             targetLineRange={targetLineRange}
-            exprRef={exprRef}
             anchorRef={anchorRef}
             onClose={onClose}
             defaultValue={defaultValue}
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
index a929705fb43..dfcc4beccef 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/styles/HorizontalList.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/styles/HorizontalList.tsx
@@ -28,6 +28,9 @@ export const HorizontalListItem = styled.div`
     width: 100%;
     justify-content: space-between;
     align-items: center;
+    gap: 12px;
+    padding-left: 8px;
+    padding-right: 10px;
 `;
 
 export const HorizontalListItemLeftContent = styled.div`
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/utils/iconUtils.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/utils/iconUtils.tsx
new file mode 100644
index 00000000000..04bce692ddd
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/utils/iconUtils.tsx
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { Icon } from "@wso2/ui-toolkit";
+import { ReactElement } from "react";
+
+export enum HelperPaneIconType {
+    VARIABLE = "variable",
+    FUNCTION = "function",
+    INPUT = "input",
+    CONFIGURABLE = "configurable",
+    VALUE = "value",
+}
+
+const ICON_NAME_MAP: Record<HelperPaneIconType, string> = {
+    [HelperPaneIconType.VARIABLE]: "bi-variable",
+    [HelperPaneIconType.FUNCTION]: "bi-function",
+    [HelperPaneIconType.INPUT]: "bi-input",
+    [HelperPaneIconType.CONFIGURABLE]: "bi-settings",
+    [HelperPaneIconType.VALUE]: "bi-code",
+};
+
+export const getHelperPaneIcon = (
+    iconType: HelperPaneIconType,
+    fontSize: string = "16px"
+): ReactElement => {
+    const iconName = ICON_NAME_MAP[iconType];
+    return <Icon name={iconName} sx={{ fontSize }} />;
+};
+
+export const getIconByKind = (
+    kind: string,
+    fontSize: string = "16px"
+): ReactElement => {
+    // Map kind strings to HelperPaneIconType
+    const kindMap: Record<string, HelperPaneIconType> = {
+        "variable": HelperPaneIconType.VARIABLE,
+        "field": HelperPaneIconType.VARIABLE,
+        "function": HelperPaneIconType.FUNCTION,
+        "method": HelperPaneIconType.FUNCTION,
+        "constant": HelperPaneIconType.CONFIGURABLE,
+        "value": HelperPaneIconType.VALUE,
+    };
+
+    const iconType = kindMap[kind.toLowerCase()] || HelperPaneIconType.VALUE;
+    return getHelperPaneIcon(iconType, fontSize);
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/utils/types.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/utils/types.ts
new file mode 100644
index 00000000000..5f8989af4a0
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/utils/types.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 { CompletionItem } from "@wso2/ui-toolkit";
+
+export const DEFAULT_VALUE_MAP: Record<string, string> = {
+    "struct": "{}",
+    "array": "[]",
+    "map": "{}",
+    "int": "0",
+    "float": "0.0",
+    "boolean": "false",
+    "any": "null",
+    "decimal": "0.0",
+    "byte": "0"
+}
+
+export const getDefaultValue = (type: string) => {
+    //TODO: handle this using API
+     return DEFAULT_VALUE_MAP[type] || "";
+}
+
+export const isPrimitiveType = (typeDetail: string): boolean => {
+    if (!typeDetail) return true;
+    
+    const cleanType = typeDetail.trim().toLowerCase();
+    
+    const primitiveTypes = [
+        'string',
+        'int',
+        'boolean',
+        'float',
+        'decimal',
+        'byte',
+        'json',
+        'xml',
+        'any',
+        'anydata',
+        'never',
+        'nil',
+        '()',
+        'error'
+    ];
+    
+    // Check if it's a direct primitive type
+    if (primitiveTypes.includes(cleanType)) {
+        return true;
+    }
+    
+    // Check if it's an array of primitive types (e.g., "string[]", "int[]")
+    const arrayMatch = cleanType.match(/^(\w+)\[\]$/);
+    if (arrayMatch) {
+        const baseType = arrayMatch[1];
+        return primitiveTypes.includes(baseType);
+    }
+    
+    // Check if it's a map of primitive types (e.g., "map<string>", "map<int>")
+    const mapMatch = cleanType.match(/^map<(\w+)>$/);
+    if (mapMatch) {
+        const valueType = mapMatch[1];
+        return primitiveTypes.includes(valueType);
+    }
+    
+    // Check if it's a union of primitive types (e.g., "string|int", "int?")
+    if (cleanType.includes('|') || cleanType.endsWith('?')) {
+        const unionTypes = cleanType.replace('?', '|nil').split('|');
+        return unionTypes.every(type => primitiveTypes.includes(type.trim()));
+    }
+    
+    return false;
+};
+
+// Determines if a completion item should show the navigation arrow
+export const shouldShowNavigationArrow = (item: CompletionItem): boolean => {
+    const typeDetail = item?.labelDetails?.detail || item?.description;
+    return !isPrimitiveType(typeDetail);
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Overview/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Overview/index.tsx
index b8fe58d700f..38226c3f163 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Overview/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Overview/index.tsx
@@ -206,6 +206,21 @@ const ReadmeButtonContainer = styled.div`
 const ReadmeContent = styled.div`
     margin-top: 16px;
     text-wrap: pretty;
+    overflow-wrap: break-word;
+
+    p, li, td, th, blockquote {
+        overflow-wrap: break-word;
+    }
+
+    pre {
+        overflow-x: auto;
+        overflow-wrap: break-word;
+    }
+    
+    code {
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+    }
 `;
 
 const TitleContainer = styled.div`
@@ -339,7 +354,7 @@ function DeploymentOption({
                 {isExpanded ? (
                     <Codicon
                         name={'triangle-down'}
-                        sx={{ color: 'var(--vscode-textLink-foreground)'}}
+                        sx={{ color: 'var(--vscode-textLink-foreground)' }}
                     />
                 ) : (
                     <Codicon
@@ -731,7 +746,15 @@ export function Overview(props: ComponentDiagramProps) {
                 <HeaderControls>
                     <UndoRedoGroup key={Date.now()} />
                     <Button appearance="icon" onClick={handleLocalConfigure} buttonSx={{ padding: "4px 8px" }}>
-                        <Codicon name="settings-gear" sx={{ marginRight: 5 }} /> Configure
+                        <Icon
+                            name="bi-settings"
+                            sx={{
+                                marginRight: 5,
+                                fontSize: "16px",
+                                width: "16px",
+                            }}
+                        />
+                        Configure
                     </Button>
                     <Button appearance="icon" onClick={handleLocalRun} buttonSx={{ padding: "4px 8px" }}>
                         <Codicon name="play" sx={{ marginRight: 5 }} /> Run
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/SequenceDiagram/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/SequenceDiagram/index.tsx
index 8b9ad905a80..18999fc1cfd 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/SequenceDiagram/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/SequenceDiagram/index.tsx
@@ -18,7 +18,7 @@
 
 import React, { useEffect, useState } from "react";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { SqFlow } from "@wso2/ballerina-core";
+import { SqFlow, ParentMetadata, NodePosition } from "@wso2/ballerina-core";
 import { Diagram } from "@wso2/sequence-diagram";
 import styled from "@emotion/styled";
 import { ThemeColors } from "@wso2/ui-toolkit";
@@ -51,7 +51,7 @@ const MessageContainer = styled.div({
 
 interface BISequenceDiagramProps {
     onUpdate: () => void;
-    onReady: () => void;
+    onReady: (fileName?: string, parentMetadata?: ParentMetadata, position?: NodePosition) => void;
 }
 
 export function BISequenceDiagram(props: BISequenceDiagramProps) {
@@ -82,7 +82,7 @@ export function BISequenceDiagram(props: BISequenceDiagramProps) {
                 // TODO: handle SequenceModelDiagnostic
             })
             .finally(() => {
-                // onReady();
+                // onReady(undefined, undefined, undefined);
             });
     };
 
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/ServiceClassDesigner.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/ServiceClassDesigner.tsx
index 2f6affdb598..bfcef35f839 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/ServiceClassDesigner.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/ServiceClassDesigner.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { Type, ServiceClassModel, ModelFromCodeRequest, FieldType, FunctionModel, NodePosition, STModification, removeStatement, LineRange, EVENT_TYPE, MACHINE_VIEW } from "@wso2/ballerina-core";
+import { Type, ServiceClassModel, ModelFromCodeRequest, FieldType, FunctionModel, NodePosition, STModification, removeStatement, LineRange, EVENT_TYPE, MACHINE_VIEW, DIRECTORY_MAP } from "@wso2/ballerina-core";
 import { Codicon, Typography, ProgressRing, Menu, MenuItem, Popover, Item, ThemeColors, LinkButton, View } from "@wso2/ui-toolkit";
 import styled from "@emotion/styled";
 import React, { useEffect, useState } from "react";
@@ -215,7 +215,8 @@ export function ServiceClassDesigner(props: ServiceClassDesignerProps) {
                             endLine: { line: serviceClassModel.codedata.lineRange.endLine.line, offset: serviceClassModel.codedata.lineRange.endLine.offset }
                         }
                     },
-                    function: updatedFunction
+                    function: updatedFunction,
+                    artifactType: DIRECTORY_MAP.TYPE
                 });
             } else {
                 lsResponse = await rpcClient.getServiceDesignerRpcClient().updateResourceSourceCode({
@@ -226,7 +227,8 @@ export function ServiceClassDesigner(props: ServiceClassDesignerProps) {
                             endLine: { line: serviceClassModel.codedata.lineRange.endLine.line, offset: serviceClassModel.codedata.lineRange.endLine.offset }
                         }
                     },
-                    function: updatedFunction
+                    function: updatedFunction,
+                    artifactType: DIRECTORY_MAP.TYPE
                 });
             }
 
@@ -607,7 +609,6 @@ export function ServiceClassDesigner(props: ServiceClassDesignerProps) {
                             model={editingFunction}
                             filePath={serviceClassFilePath}
                             lineRange={serviceClassModel.codedata.lineRange}
-                            isGraphqlView={isGraphql}
                             isSaving={isSaving}
                             isServiceClass={true}
                             onClose={handleCloseFunctionForm}
@@ -630,7 +631,6 @@ export function ServiceClassDesigner(props: ServiceClassDesignerProps) {
                             onClose={handleCloseVariableForm}
                             isSaving={isSaving}
                             onSave={handleVariableSave}
-                            isGraphqlEditor={isGraphql}
                         />
                     </PanelContainer>
                 )}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/VariableForm.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/VariableForm.tsx
index 02929a6fc04..afa249fa25f 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/VariableForm.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/VariableForm.tsx
@@ -28,12 +28,11 @@ interface VariableFormProps {
     lineRange: LineRange;
     onSave: (model: FieldType) => void;
     onClose: () => void;
-    isGraphqlEditor: boolean;
     isSaving: boolean;
 }
 
 export function VariableForm(props: VariableFormProps) {
-    const { model, onSave, onClose, filePath, lineRange, isGraphqlEditor, isSaving } = props;
+    const { model, onSave, onClose, filePath, lineRange, isSaving } = props;
     const [fields, setFields] = useState<FormField[]>([]);
 
     // Initialize form fields
@@ -112,7 +111,6 @@ export function VariableForm(props: VariableFormProps) {
                     onSubmit={handleVariableSave}
                     onBack={onClose}
                     submitText={isSaving ? "Saving..." : "Save"}
-                    isGraphqlEditor={isGraphqlEditor}
                     helperPaneSide="left"
                     preserveFieldOrder={true}
                 />
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/DatabindForm/Parameters/ParamEditor.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/DatabindForm/Parameters/ParamEditor.tsx
new file mode 100644
index 00000000000..c38a4e0dfa0
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/DatabindForm/Parameters/ParamEditor.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 { LineRange, ParameterModel } from '@wso2/ballerina-core';
+import { useRpcContext } from '@wso2/ballerina-rpc-client';
+import { FormField, FormImports } from '@wso2/ballerina-side-panel';
+import { Divider, Typography } from '@wso2/ui-toolkit';
+import { useEffect, useState } from 'react';
+import { getImportsForProperty } from '../../../../../../utils/bi';
+import FormGeneratorNew from '../../../../Forms/FormGeneratorNew';
+import { EditorContainer } from '../../../styles';
+
+export interface ParamProps {
+    param: ParameterModel;
+    onChange: (param: ParameterModel) => void;
+    onSave?: (param: ParameterModel) => void;
+    onCancel?: (param?: ParameterModel) => void;
+    payloadFieldName?: string;
+}
+
+export function ParamEditor(props: ParamProps) {
+    const { param, onChange, onSave, onCancel, payloadFieldName = "Payload" } = props;
+
+    const { rpcClient } = useRpcContext();
+    const [currentFields, setCurrentFields] = useState<FormField[]>([]);
+    const [filePath, setFilePath] = useState<string>('');
+    const [targetLineRange, setTargetLineRange] = useState<LineRange>();
+
+    const handleOnCancel = () => {
+        onCancel(param);
+    };
+
+    useEffect(() => {
+        rpcClient.getVisualizerRpcClient().joinProjectPath('main.bal').then((filePath) => {
+            setFilePath(filePath);
+        });
+        updateFormFields();
+    }, []);
+
+    const updateFormFields = () => {
+        const fields: FormField[] = [];
+
+        // Add type field for payload
+        fields.push({
+            key: `type`,
+            label: 'Type',
+            type: param.type.valueType,
+            optional: false,
+            editable: true,
+            documentation: '',
+            enabled: param.type?.enabled,
+            value: param.type.value || "json",
+            defaultValue: "json",
+            valueTypeConstraint: ""
+        });
+
+        setCurrentFields(fields);
+    };
+
+    useEffect(() => {
+        updateFormFields();
+    }, [param.type]);
+
+    const onParameterSubmit = (dataValues: any, formImports: FormImports) => {
+        const updatedParam = {
+            ...param,
+            type: {
+                ...param.type,
+                value: dataValues['type'] ?? param.type.value,
+                imports: getImportsForProperty('type', formImports)
+            }
+        };
+
+        // Update the parent component's state first
+        onChange(updatedParam);
+
+        // Then call onSave if provided
+        if (onSave) {
+            onSave(updatedParam);
+        }
+    };
+
+    useEffect(() => {
+        if (filePath && rpcClient) {
+            rpcClient
+                .getBIDiagramRpcClient()
+                .getEndOfFile({ filePath })
+                .then((res) => {
+                    setTargetLineRange({
+                        startLine: res,
+                        endLine: res,
+                    });
+                });
+        }
+    }, [filePath, rpcClient]);
+
+    return (
+        <EditorContainer>
+            <Typography sx={{ marginBlockEnd: 10 }} variant="h4">{payloadFieldName} Configuration</Typography>
+            <Divider />
+            {filePath && targetLineRange && (
+                <FormGeneratorNew
+                    fileName={filePath}
+                    targetLineRange={targetLineRange}
+                    fields={currentFields}
+                    onBack={handleOnCancel}
+                    onSubmit={onParameterSubmit}
+                    submitText={param.type.value ? "Save" : "Add"}
+                    nestedForm={true}
+                    helperPaneSide='left'
+                    preserveFieldOrder={true}
+                />
+            )}
+        </EditorContainer>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/DatabindForm/Parameters/Parameters.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/DatabindForm/Parameters/Parameters.tsx
new file mode 100644
index 00000000000..b612833349d
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/DatabindForm/Parameters/Parameters.tsx
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, { CSSObject } from "@emotion/styled";
+import { ParameterModel } from "@wso2/ballerina-core";
+import { Codicon } from "@wso2/ui-toolkit";
+import {
+    ActionIconWrapper,
+    ContentSection,
+    DeleteIconWrapper,
+    EditIconWrapper,
+    disabledHeaderLabel,
+    headerLabelStyles,
+} from "../../../styles";
+
+export interface ParametersProps {
+    parameters: ParameterModel[];
+    onChange: (parameters: ParameterModel[]) => void;
+    onEditClick?: (param: ParameterModel) => void;
+    showPayload: boolean;
+}
+
+const ParamLabelContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-family: var(--vscode-font-family);
+`;
+
+const ParamName = styled.span`
+    color: var(--vscode-editor-foreground, #222);
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--vscode-font-family);
+`;
+
+const ParamType = styled.span`
+    font-size: 13px;
+    color: var(--vscode-descriptionForeground, #888);
+    background: var(--vscode-editorWidget-background, #f5f5f5);
+    border-radius: 4px;
+    padding: 2px 8px;
+    letter-spacing: 0.1px;
+    width: 60px;
+`;
+
+const HeaderLabel = styled.div<CSSObject>`
+    display: flex;
+    background: var(--vscode-editor-background);
+    border: 1px solid ${(props: { haveErrors: boolean; }) => props.haveErrors ? "red" : "var(--vscode-dropdown-border)"};
+    margin: 8px 0;
+    display: flex;
+    width: 100%;
+    height: 32px;
+    align-items: center;
+`;
+
+const ParamDefault = styled.span`
+    font-size: 13px;
+    color: var(--vscode-editorHint-foreground, #b0b0b0);
+    margin-left: 8px;
+    font-style: italic;
+`;
+
+export function Parameters(props: ParametersProps) {
+    const { parameters, onChange, onEditClick, showPayload } = props;
+
+    const onDelete = (param: ParameterModel) => {
+        const updatedParameters = parameters.filter(
+            (p) => p.metadata.label !== param.metadata.label || p.name.value !== param.name.value
+        );
+        onChange(updatedParameters);
+    };
+
+    return (
+        <div>
+            {showPayload && (
+                <>
+                    {parameters.map((param: ParameterModel, index) => {
+                        const label = (
+                            <ParamLabelContainer>
+                                <ParamType>{param.type.value}</ParamType>
+                            </ParamLabelContainer>
+                        );
+                        const readonly = param.editable === false;
+
+                        return (
+                            <HeaderLabel key={index} data-testid={`${param.name.value}-item`}>
+                                <ContentSection>
+                                    <div
+                                        data-test-id={`${param.name.value}-param`}
+                                        className={readonly ? disabledHeaderLabel : headerLabelStyles}
+                                        onClick={() => !readonly && onEditClick(param)}
+                                    >
+                                        {label}
+                                    </div>
+                                    <ActionIconWrapper>
+                                        {!readonly && (
+                                            <EditIconWrapper>
+                                                <Codicon name="edit" onClick={() => onEditClick(param)} />
+                                            </EditIconWrapper>
+                                        )}
+                                        <DeleteIconWrapper>
+                                            <Codicon name="trash" onClick={() => onDelete(param)} />
+                                        </DeleteIconWrapper>
+                                    </ActionIconWrapper>
+                                </ContentSection>
+                            </HeaderLabel>
+                        );
+                    })}
+                </>
+            )}
+        </div>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/DatabindForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/DatabindForm/index.tsx
new file mode 100644
index 00000000000..7eae39c8cb8
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/DatabindForm/index.tsx
@@ -0,0 +1,581 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { ConfigProperties, FunctionModel, ParameterModel, MessageQueuePayloadContext, Type } from "@wso2/ballerina-core";
+import {
+    ActionButtons,
+    CheckBox,
+    CheckBoxGroup,
+    Codicon,
+    Divider,
+    LinkButton,
+    ProgressIndicator,
+    SidePanelBody,
+    TextField,
+    ThemeColors,
+    Tooltip,
+    Typography,
+} from "@wso2/ui-toolkit";
+import { useEffect, useState } from "react";
+import { ParamEditor } from "./Parameters/ParamEditor";
+import { Parameters } from "./Parameters/Parameters";
+import { EntryPointTypeCreator } from "../../../../../components/EntryPointTypeCreator";
+import { hasEditableParameters } from "../../utils";
+
+const OptionalConfigRow = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 8px;
+    margin-top: 10px;
+    padding-top: 10px;
+`;
+
+const OptionalConfigButtonContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    justify-content: flex-end;
+`;
+
+const OptionalConfigContent = styled.div`
+    padding-left: 24px;
+    margin-bottom: 12px;
+`;
+
+const MessageConfigContainer = styled.div`
+    margin-bottom: 0;
+`;
+
+const MessageConfigTitle = styled.div`
+    margin-bottom: 12px;
+`;
+
+const MessageConfigSection = styled.div`
+    padding: 0;
+`;
+
+const MessageConfigContent = styled.div`
+    margin-top: 0;
+    padding-left: 0;
+`;
+
+const MessageTypeNameFieldContainer = styled.div`
+    margin-top: 12px;
+`;
+
+const PayloadSection = styled.div`
+    // padding-top: 12px;
+`;
+
+const AddButtonWrapper = styled.div`
+    margin: 8px 0;
+`;
+
+export const EditorContentColumn = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-bottom: 20px;
+    gap: 10px;
+`;
+
+export interface DatabindFormProps {
+    model: FunctionModel;
+    isSaving?: boolean;
+    onSave: (functionModel: FunctionModel, openDiagram?: boolean) => void;
+    onClose: () => void;
+    isNew?: boolean;
+    payloadContext?: MessageQueuePayloadContext;
+    serviceProperties?: ConfigProperties;
+    serviceModuleName?: string;
+}
+
+export function DatabindForm(props: DatabindFormProps) {
+    const { model, isSaving = false, onSave, onClose, isNew = false, payloadContext, serviceProperties, serviceModuleName } = props;
+
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [functionModel, setFunctionModel] = useState<FunctionModel>(model);
+    const [showAdvancedParameters, setShowAdvancedParameters] = useState<boolean>(false);
+    const [showMessageTypeConfig, setShowMessageTypeConfig] = useState<boolean>(false);
+
+    // State for payload editor
+    const [editModel, setEditModel] = useState<ParameterModel | undefined>(undefined);
+    const [editingIndex, setEditingIndex] = useState<number>(-1);
+
+    // State for type editor modal
+    const [isTypeEditorOpen, setIsTypeEditorOpen] = useState<boolean>(false);
+
+    // Reset form state when model prop changes
+    useEffect(() => {
+        setFunctionModel(model);
+    }, [model]);
+
+    // TODO: Should come from BE
+    const parameterDescriptionMap: Record<string, string> = {
+        "rabbitmq-caller": "Enable this to manually acknowledge or reject received messages in your RabbitMQ service.",
+        "kafka-caller": "Enable this to access the Kafka caller in your service for manual offset management and partition operations.",
+    };
+
+    /**
+     * Gets the description of a parameter by its name and module
+     * @param parameterName - The name of the parameter to find
+     * @returns The parameter description or empty string if not found
+     */
+    const getParameterDescription = (parameterName: string): string => {
+        const moduleName = functionModel?.codedata?.moduleName || "";
+        const key = `${moduleName}-${parameterName}`.toLowerCase();
+        return parameterDescriptionMap[key] || "";
+    };
+
+    /**
+     * Gets the queue name description string based on module name
+     * @param moduleName - The module name (e.g., "rabbitmq", "kafka")
+     * @returns Description string about where the payload comes from
+     */
+    const getQueueDescriptionByModule = (moduleName: string): string => {
+        if (!moduleName) {
+            return "";
+        }
+        const lowerModuleName = moduleName.toLowerCase();
+        if (lowerModuleName === "rabbitmq") {
+            return serviceProperties.stringLiteral?.value;
+        }
+        const metaValue = serviceProperties?.readOnlyMetadata?.value;
+        if (metaValue && typeof metaValue === "object") {
+            for (const [key, val] of Object.entries(metaValue as Record<string, any>)) {
+                const valueStr = String(val).toLowerCase();
+                if (valueStr.length > 0) {
+                    return valueStr;
+                }
+            }
+        }
+        return "";
+    };
+
+    const handleParamChange = (params: ParameterModel[]) => {
+        const updatedFunctionModel = {
+            ...functionModel,
+            parameters: params,
+        };
+        setFunctionModel(updatedFunctionModel);
+    };
+
+    const handlePayloadParamChange = (params: ParameterModel[]) => {
+        // Check if a DATA_BINDING parameter was removed
+        const dataBindingParam = functionModel.parameters?.find((p) => p.kind === "DATA_BINDING");
+        const isInNewParams = params.some((p) => p.kind === "DATA_BINDING");
+
+        if (dataBindingParam && !isInNewParams) {
+            // Instead of deleting, disable the DATA_BINDING parameter and enable the first parameter
+            // Create a new array to avoid mutating the original
+            const updatedParams = functionModel.parameters.map((p) => {
+                if (p.kind === "DATA_BINDING") {
+                    return { ...p, enabled: false };
+                }
+                if (p.kind === "REQUIRED" && !isInNewParams) {
+                    return { ...p, enabled: true };
+                }
+                return p;
+            });
+
+            handleParamChange(updatedParams);
+        } else {
+            // Normal parameter change
+            handleParamChange(params);
+        }
+    };
+
+    const handleSave = () => {
+        // For new handlers, always open diagram after save
+        onSave(functionModel, isNew);
+    };
+
+    const handleCancel = () => {
+        onClose();
+    };
+
+    const handleShowAdvancedParameters = () => {
+        setShowAdvancedParameters(true);
+    };
+
+    const handleHideAdvancedParameters = () => {
+        setShowAdvancedParameters(false);
+    };
+
+    const handleShowMessageTypeConfig = () => {
+        setShowMessageTypeConfig(true);
+    };
+
+    const handleHideMessageTypeConfig = () => {
+        setShowMessageTypeConfig(false);
+    };
+
+    const handleMessageTypeNameChange = (value: string) => {
+        const updatedFunctionModel = {
+            ...functionModel,
+            properties: {
+                ...functionModel.properties,
+                wrapperTypeName: {
+                    ...functionModel.properties?.wrapperTypeName,
+                    value,
+                },
+            },
+        };
+        setFunctionModel(updatedFunctionModel);
+    };
+
+    const generatePayloadTypeName = (): string => {
+        const rawPayloadFieldName = functionModel.properties?.payloadFieldName?.value || "Payload";
+        const capitalizedName = rawPayloadFieldName.charAt(0).toUpperCase() + rawPayloadFieldName.slice(1);
+        return `${capitalizedName}Schema`;
+    };
+
+    const handleTypeCreated = (type: Type | string) => {
+        // When a type is created, set it as the payload type
+        const payloadParam = functionModel.parameters?.find(param => param.kind === "DATA_BINDING");
+        if (payloadParam) {
+            const updatedPayloadModel = { ...payloadParam };
+            updatedPayloadModel.name.value = "payload";
+            updatedPayloadModel.type.value = typeof type === 'string' ? type : (type as Type).name;
+            updatedPayloadModel.enabled = true;
+
+            // Find the index of the payload parameter
+            const index = functionModel.parameters.findIndex(param => param.kind === "DATA_BINDING");
+            if (index >= 0) {
+                const updatedParameters = [...functionModel.parameters];
+                updatedParameters[index] = updatedPayloadModel;
+                handleParamChange(updatedParameters);
+            }
+        }
+        // Close the modal
+        setIsTypeEditorOpen(false);
+    };
+
+    const handleTypeEditorClose = () => {
+        setIsTypeEditorOpen(false);
+    };
+
+    // Payload editor handlers
+    const onAddPayloadClick = () => {
+        // Open FormTypeEditor modal instead of ParamEditor
+        setIsTypeEditorOpen(true);
+    };
+
+    const onEditPayloadClick = (param: ParameterModel) => {
+        // Find the index of the parameter being edited
+        const index = functionModel.parameters.findIndex(
+            p => p.metadata.label === param.metadata.label && p.name.value === param.name.value
+        );
+        setEditingIndex(index);
+        setEditModel(param);
+    };
+
+    const onChangeParam = (param: ParameterModel) => {
+        setEditModel(param);
+        // Update the parameters array in real-time for existing parameters
+        if (editingIndex >= 0) {
+            const updatedParameters = [...functionModel.parameters];
+            updatedParameters[editingIndex] = param;
+            handleParamChange(updatedParameters);
+        }
+    };
+
+    const onSaveParam = (param: ParameterModel) => {
+        param.enabled = true;
+
+        // If this is a DATA_BINDING parameter, disable the first parameter
+        if (param.kind === "DATA_BINDING" && functionModel.parameters && functionModel.parameters.length > 0) {
+            const firstParam = functionModel.parameters[0];
+            if (firstParam.kind === "REQUIRED") {
+                firstParam.enabled = false;
+            }
+        }
+
+        // Use the editingIndex for more reliable updates
+        if (editingIndex >= 0) {
+            const updatedParameters = [...functionModel.parameters];
+            updatedParameters[editingIndex] = param;
+            handleParamChange(updatedParameters);
+        } else {
+            // Fallback to the original logic if index is not available
+            handleParamChange(
+                functionModel.parameters.map((p) =>
+                    p.metadata.label === param.metadata.label && p.name.value === param.name.value ? param : p
+                )
+            );
+        }
+        setEditModel(undefined);
+        setEditingIndex(-1);
+    };
+
+    const onParamEditCancel = () => {
+        setEditModel(undefined);
+        setEditingIndex(-1);
+    };
+
+    const payloadParameter = functionModel.parameters?.find((param) => param.kind === "DATA_BINDING" && param.enabled);
+
+    const advancedParameters = functionModel.parameters?.filter((param) => param.kind !== "DATA_BINDING" && param.optional) || [];
+
+    // Get payload field name from properties, default to "Payload", and capitalize it
+    const rawPayloadFieldName = functionModel.properties?.payloadFieldName?.value || "Payload";
+    const payloadFieldName = rawPayloadFieldName.charAt(0).toUpperCase() + rawPayloadFieldName.slice(1);
+
+    // Get message type name value from properties
+    const messageTypeNameValue = functionModel.properties?.wrapperTypeName?.value || "";
+
+    return (
+        <>
+            {(isLoading || isSaving) && <ProgressIndicator id="remote-loading-bar" />}
+            <SidePanelBody>
+                <EditorContentColumn>
+                    {/* Message Configuration Section */}
+                    <MessageConfigContainer>
+                        <MessageConfigTitle>
+                            <Typography sx={{ marginBlockEnd: 0 }} variant="h4">
+                                Message Configuration
+                            </Typography>
+                            <Divider />
+                        </MessageConfigTitle>
+                        <MessageConfigSection>
+                            <MessageConfigContent>
+                                <PayloadSection>
+                                    {/* Payload Section */}
+                                    {!payloadParameter && !editModel && (
+                                        <AddButtonWrapper>
+                                            <Tooltip content={`Define ${payloadFieldName} for easier access in the flow diagram`} position="bottom">
+                                                <LinkButton onClick={onAddPayloadClick}>
+                                                    <Codicon name="add" />
+                                                    Define {payloadFieldName}
+                                                </LinkButton>
+                                            </Tooltip>
+                                        </AddButtonWrapper>
+                                    )}
+                                    {payloadParameter && (
+                                        <>
+                                            <Typography sx={{ marginBlockEnd: 8 }} variant="body2">
+                                                {payloadFieldName}
+                                            </Typography>
+                                            <Parameters
+                                                parameters={[payloadParameter]}
+                                                onChange={handlePayloadParamChange}
+                                                onEditClick={onEditPayloadClick}
+                                                showPayload={true}
+                                            />
+                                        </>
+                                    )}
+
+                                    {/* Payload Editor */}
+                                    {editModel && editModel.kind === "DATA_BINDING" && (
+                                        <ParamEditor
+                                            param={editModel}
+                                            onChange={onChangeParam}
+                                            onSave={onSaveParam}
+                                            onCancel={onParamEditCancel}
+                                            payloadFieldName={payloadFieldName}
+                                        />
+                                    )}
+                                </PayloadSection>
+
+                                {/* Advanced Message Configurations Collapsible Section */}
+                                {/* <OptionalConfigRow>
+                                    <span>Advanced Message Configurations</span>
+                                    <OptionalConfigButtonContainer>
+                                        {!showMessageTypeConfig && (
+                                            <LinkButton
+                                                onClick={handleShowMessageTypeConfig}
+                                                sx={{
+                                                    fontSize: 12,
+                                                    padding: 8,
+                                                    color: ThemeColors.PRIMARY,
+                                                    gap: 4,
+                                                    userSelect: "none",
+                                                }}
+                                            >
+                                                <Codicon
+                                                    name={"chevron-down"}
+                                                    iconSx={{ fontSize: 12 }}
+                                                    sx={{ height: 12 }}
+                                                />
+                                                Expand
+                                            </LinkButton>
+                                        )}
+                                        {showMessageTypeConfig && (
+                                            <LinkButton
+                                                onClick={handleHideMessageTypeConfig}
+                                                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>
+                                {showMessageTypeConfig && (
+                                    <OptionalConfigContent>
+                                        <MessageTypeNameFieldContainer>
+                                            <TextField
+                                                label="Message Schema Name"
+                                                value={messageTypeNameValue}
+                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleMessageTypeNameChange(e.target.value)}
+                                                placeholder="Enter message schema name"
+                                                errorMsg=""
+                                            />
+                                        </MessageTypeNameFieldContainer>
+                                    </OptionalConfigContent>
+                                )} */}
+                            </MessageConfigContent>
+                        </MessageConfigSection>
+                    </MessageConfigContainer>
+
+
+                    {/* Advanced Parameters Section - Only show if there are additional parameters beyond the first */}
+                    {hasEditableParameters(advancedParameters) && (
+                        <>
+                            <Divider sx={{ margin: 0 }} />
+                            <OptionalConfigRow>
+                                Advanced Parameters
+                                <OptionalConfigButtonContainer>
+                                    {!showAdvancedParameters && (
+                                        <LinkButton
+                                            onClick={handleShowAdvancedParameters}
+                                            sx={{
+                                                fontSize: 12,
+                                                padding: 8,
+                                                color: ThemeColors.PRIMARY,
+                                                gap: 4,
+                                                userSelect: "none",
+                                            }}
+                                        >
+                                            <Codicon
+                                                name={"chevron-down"}
+                                                iconSx={{ fontSize: 12 }}
+                                                sx={{ height: 12 }}
+                                            />
+                                            Expand
+                                        </LinkButton>
+                                    )}
+                                    {showAdvancedParameters && (
+                                        <LinkButton
+                                            onClick={handleHideAdvancedParameters}
+                                            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>
+                            {showAdvancedParameters && (
+                                <OptionalConfigContent>
+                                    <CheckBoxGroup direction="vertical">
+                                        {advancedParameters.map((param: ParameterModel, index) => (
+                                            <CheckBox
+                                                key={index}
+                                                label={
+                                                    param.metadata.label.charAt(0).toUpperCase() +
+                                                    param.metadata.label.slice(1)
+                                                }
+                                                checked={param.enabled}
+                                                onChange={(checked) => {
+                                                    // Create a new array with updated parameters to avoid mutating parent state
+                                                    const updatedParameters = functionModel.parameters.map((p) => {
+                                                        if (p.metadata.label === param.metadata.label && p.name.value === param.name.value) {
+                                                            return {
+                                                                ...p,
+                                                                enabled: checked,
+                                                                name: {
+                                                                    ...p.name,
+                                                                    value: param.metadata.label
+                                                                        .toLowerCase()
+                                                                        .replace(/ /g, "_")
+                                                                }
+                                                            };
+                                                        }
+                                                        return p;
+                                                    });
+                                                    handleParamChange(updatedParameters);
+                                                }}
+                                                sx={{ description: getParameterDescription(param.name.value), marginTop: 0 }}
+                                            />
+                                        ))}
+                                    </CheckBoxGroup>
+                                </OptionalConfigContent>
+                            )}
+                        </>
+                    )}
+                </EditorContentColumn>
+                <ActionButtons
+                    primaryButton={{
+                        text: isSaving ? "Saving..." : "Save",
+                        onClick: handleSave,
+                        tooltip: isSaving ? "Saving..." : "Save",
+                        disabled: isSaving,
+                        loading: isSaving,
+                    }}
+                    secondaryButton={{
+                        text: "Cancel",
+                        onClick: handleCancel,
+                        tooltip: "Cancel",
+                        disabled: isSaving,
+                    }}
+                    sx={{ justifyContent: "flex-end" }}
+                />
+            </SidePanelBody>
+
+            {/* FormTypeEditor Modal for Add Payload */}
+            <EntryPointTypeCreator
+                isOpen={isTypeEditorOpen}
+                onClose={handleTypeEditorClose}
+                onTypeCreate={handleTypeCreated}
+                initialTypeName={generatePayloadTypeName()}
+                modalTitle={"Define " + payloadFieldName}
+                payloadContext={{
+                    ...payloadContext,
+                    queueOrTopic: getQueueDescriptionByModule(serviceModuleName)
+                }}
+                modalWidth={650}
+                modalHeight={600}
+            />
+        </>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionConfigForm.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionConfigForm.tsx
index 63ac9313760..8d6765cfb5b 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionConfigForm.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionConfigForm.tsx
@@ -17,52 +17,69 @@
  */
 
 import React, { useState } from "react";
-import { ActionButtons, Dropdown, SidePanelBody } from "@wso2/ui-toolkit";
+import { SidePanelBody } from "@wso2/ui-toolkit";
 import { FunctionModel, ServiceModel } from "@wso2/ballerina-core";
+import ButtonCard from "../../../../components/ButtonCard";
 
 import { EditorContentColumn } from "../styles";
 
 interface FunctionConfigFormProps {
     serviceModel: ServiceModel;
     onSubmit?: (model: FunctionModel) => void;
+    onSelect?: (model: FunctionModel) => void;
     onBack?: () => void;
     isSaving: boolean;
 }
 
 export function FunctionConfigForm(props: FunctionConfigFormProps) {
 
-    const { serviceModel, onSubmit, onBack, isSaving } = props;
+    const { serviceModel, onSubmit, onSelect, onBack, isSaving } = props;
 
-    const options = serviceModel.functions.filter(func => !func.enabled).map((func, index) => ({ id: index.toString(), value: func.name.value }));
-    const [functionName, setFunctionName] = useState<string>(options.length > 0 ? options[0].value : undefined);
+    const nonEnabledFunctions = serviceModel.functions.filter(func => !func.enabled);
+    const [selectedFunctionName, setSelectedFunctionName] = useState<string | undefined>(
+        nonEnabledFunctions.length > 0 ? nonEnabledFunctions[0].name.value : undefined
+    );
 
-    const handleOnSelect = (value: string) => {
-        setFunctionName(value);
+    const handleOnSelect = (functionName: string) => {
+        setSelectedFunctionName(functionName);
+        const selectedFunction = serviceModel.functions.find(func => func.name.value === functionName);
+        if (selectedFunction) {
+            // If onSelect is provided, call it instead of onSubmit
+            if (onSelect) {
+                onSelect(selectedFunction);
+            } else {
+                // Fallback to old behavior if onSelect is not provided
+                handleConfigSave();
+            }
+        }
     };
 
     const handleConfigSave = () => {
-        const selectedFunction = serviceModel.functions.find(func => func.name.value === functionName);
-        selectedFunction.enabled = true;
-        onSubmit(selectedFunction);
+        if (selectedFunctionName) {
+            const selectedFunction = serviceModel.functions.find(func => func.name.value === selectedFunctionName);
+            if (selectedFunction) {
+                selectedFunction.enabled = true;
+                onSubmit(selectedFunction);
+            }
+        }
     };
 
     return (
         <SidePanelBody>
             <EditorContentColumn>
-                <Dropdown
-                    id="function-selector"
-                    sx={{ zIndex: 2, width: "100%", marginBottom: 20 }}
-                    isRequired
-                    items={options}
-                    label="Available Functions"
-                    onValueChange={handleOnSelect}
-                    value={functionName}
-                />
-                <ActionButtons
-                    primaryButton={{ text: isSaving ? "Saving..." : "Save", onClick: handleConfigSave, disabled: isSaving, loading: isSaving }}
-                    secondaryButton={{ text: "Cancel", onClick: onBack, disabled: isSaving }}
-                    sx={{ justifyContent: "flex-end" }}
-                />
+                {nonEnabledFunctions.map((func, index) => (
+                    <ButtonCard
+                        key={func.name.value}
+                        id={`function-card-${index}`}
+                        title={func.name.value}
+                        tooltip={func.metadata?.description || ""}
+                        onClick={() => handleOnSelect(func.name.value)}
+                        disabled={isSaving}
+                    />
+                ))}
+                {nonEnabledFunctions.length === 0 && (
+                    <div>No functions available to enable.</div>
+                )}
             </EditorContentColumn>
         </SidePanelBody>
     );
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionForm/Parameters/ParamEditor.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionForm/Parameters/ParamEditor.tsx
index 10c1c4ad2b9..91ce2ee0b95 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionForm/Parameters/ParamEditor.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionForm/Parameters/ParamEditor.tsx
@@ -26,7 +26,7 @@ import { TypeBrowser } from '../../../components/TypeBrowser/TypeBrowser';
 import { PARAM_TYPES } from '../../../definitions';
 import { ParameterModel, PropertyModel } from '@wso2/ballerina-core';
 
-const options = [{ id: "0", value: "QUERY" }, { id: "1", value: "Header" }];
+const options = [{ id: "0", value: "QUERY" }, { id: "1", value: "HEADER" }];
 
 export interface ParamProps {
     param: ParameterModel;
@@ -40,7 +40,7 @@ export function ParamEditor(props: ParamProps) {
     const { param, hideType = false, onChange, onSave, onCancel } = props;
 
     const handleOnSelect = (value: string) => {
-        onChange({ ...param, httpParamType: value as "QUERY" | "Header" | "PAYLOAD" });
+        onChange({ ...param, httpParamType: value as "QUERY" | "HEADER" | "PAYLOAD" });
     };
 
     const handleTypeChange = (value: string) => {
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionForm/index.tsx
index 1bd01c314c0..3fe5312fa22 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionForm/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FunctionForm/index.tsx
@@ -81,7 +81,7 @@ export function FunctionForm(props: ResourceFormProps) {
 				<EditorContentColumn>
 					<FunctionName name={functionModel.name} onChange={onNameChange} readonly={!functionModel.name.editable} />
 					<Divider />
-					<Parameters parameters={functionModel.parameters} onChange={handleParamChange} canAddParameters={functionModel.canAddParameters} />
+					<Parameters parameters={[]} onChange={handleParamChange} canAddParameters={true} />
 					<Typography sx={{ marginBlockEnd: 10 }} variant="h4">Returns</Typography>
 					<FunctionReturn returnType={functionModel.returnType} onChange={handleResponseChange} readonly={!functionModel.returnType.editable} />
 				</EditorContentColumn>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ListenerConfigForm.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ListenerConfigForm.tsx
index 191f76a9d41..88a7d71875e 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ListenerConfigForm.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ListenerConfigForm.tsx
@@ -57,13 +57,14 @@ interface ListenerConfigFormProps {
     isSaving?: boolean;
     onBack?: () => void;
     formSubmitText?: string;
+    onChange?: (data: ListenerModel) => void;
 }
 
 export function ListenerConfigForm(props: ListenerConfigFormProps) {
     const { rpcClient } = useRpcContext();
 
     const [listenerFields, setListenerFields] = useState<FormField[]>([]);
-    const { listenerModel, onSubmit, onBack, formSubmitText = "Next", isSaving } = props;
+    const { listenerModel, onSubmit, onBack, formSubmitText = "Next", isSaving, onChange } = props;
     const [filePath, setFilePath] = useState<string>('');
     const [targetLineRange, setTargetLineRange] = useState<LineRange>();
     const [recordTypeFields, setRecordTypeFields] = useState<RecordTypeField[]>([]);
@@ -110,6 +111,26 @@ export function ListenerConfigForm(props: ListenerConfigFormProps) {
         onSubmit(response);
     };
 
+    const handleListenerChange = (fieldKey: string, value: any, allValues: FormValues) => {
+        if (onChange && !allValues["defaultListener"]) {
+            let hasChanges = false;
+            console.log("Listener change: ", fieldKey, value, allValues);
+            listenerFields.forEach(val => {
+                if (allValues[val.key] !== undefined && allValues[val.key] !== val.value) {
+                    hasChanges = true;
+                }
+                if (allValues[val.key]) {
+                    val.value = allValues[val.key]
+                }
+            })
+            if (!hasChanges) {
+                return;
+            }
+            const response = updateConfig(listenerFields, listenerModel);
+            onChange(response);
+        }
+    }
+
     const createTitle = `Provide the necessary configuration details for the ${listenerModel.name} to complete the setup.`;
     const editTitle = `Update the configuration details for the ${listenerModel.name} as needed.`
 
@@ -141,11 +162,6 @@ export function ListenerConfigForm(props: ListenerConfigFormProps) {
                 <>
                     {listenerFields.length > 0 &&
                         <FormContainer>
-                            {/* <Typography variant="h2" sx={{ marginTop: '16px' }}>{listenerModel.name.charAt(0).toUpperCase() + listenerModel.name.slice(1)} Configuration</Typography>
-                            <BodyText>
-                                {formSubmitText === "Save" ? editTitle : createTitle}
-                            </BodyText> */}
-                            <FormHeader title={`${listenerModel.name.charAt(0).toUpperCase() + listenerModel.name.slice(1)} Configuration`} />
                             {filePath && targetLineRange &&
                                 <FormGeneratorNew
                                     fileName={filePath}
@@ -153,9 +169,12 @@ export function ListenerConfigForm(props: ListenerConfigFormProps) {
                                     fields={listenerFields}
                                     onSubmit={handleListenerSubmit}
                                     onBack={onBack}
+                                    nestedForm={true}
                                     isSaving={isSaving}
                                     submitText={formSubmitText}
                                     recordTypeFields={recordTypeFields}
+                                    onChange={handleListenerChange}
+                                    hideSaveButton={onChange ? true : false}
                                 />
                             }
                         </FormContainer>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/McpToolForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/McpToolForm/index.tsx
new file mode 100644
index 00000000000..16ef92889dc
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/McpToolForm/index.tsx
@@ -0,0 +1,400 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 {
+    FunctionModel,
+    LineRange,
+    ParameterModel,
+    ConfigProperties,
+    PropertyModel,
+    RecordTypeField,
+    Property,
+    PropertyTypeMemberInfo,
+} from "@wso2/ballerina-core";
+import { FormField, FormImports, FormValues, Parameter } from "@wso2/ballerina-side-panel";
+import { getImportsForProperty } from "../../../../../utils/bi";
+import FormGeneratorNew from "../../../Forms/FormGeneratorNew";
+
+interface McpToolFormProps {
+    model: FunctionModel;
+    filePath: string;
+    lineRange: LineRange;
+    isServiceClass?: boolean;
+    onSave: (model: FunctionModel) => void;
+    onClose: () => void;
+    isSaving: boolean;
+}
+
+export function McpToolForm(props: McpToolFormProps) {
+    console.log("McpToolForm props: ", props);
+    const { model: initialModel, onSave, onClose, filePath, lineRange, isServiceClass, isSaving } = props;
+    const [fields, setFields] = useState<FormField[]>([]);
+    const [recordTypeFields, setRecordTypeFields] = useState<RecordTypeField[]>([]);
+    const [model, setModel] = useState<FunctionModel>(() => structuredClone(initialModel));
+
+    useEffect(() => {
+        setModel((prevModel) => {
+            const properties = prevModel.properties ? { ...prevModel.properties } : {};
+
+            if (!properties.toolDescription) {
+                properties.toolDescription = {
+                    metadata: {
+                        label: "Tool Description",
+                        description: "Description of what this MCP tool does",
+                    },
+                    placeholder: "Describe what this tool does...",
+                    valueType: "STRING",
+                    valueTypeConstraint: "string",
+                    value: "",
+                    enabled: true,
+                    editable: true,
+                    optional: true,
+                    advanced: false,
+                };
+            }
+
+            // Return a new FunctionModel object (immutably updated)
+            return {
+                ...prevModel,
+                properties,
+            };
+        });
+    }, []); // Runs only once after mount
+
+    const handleParamChange = (param: Parameter) => {
+        const name = `${param.formValues["variable"]}`;
+        const type = `${param.formValues["type"]}`;
+        const hasDefaultValue =
+            Object.keys(param.formValues).includes("defaultable") &&
+            param.formValues["defaultable"] !== undefined &&
+            param.formValues["defaultable"] !== "";
+
+        const defaultValue = hasDefaultValue ? `${param.formValues["defaultable"]}`.trim() : "";
+        let value = `${type} ${name}`;
+        if (defaultValue) {
+            value += ` = ${defaultValue}`;
+        }
+        return {
+            ...param,
+            key: name,
+            value: value,
+        };
+    };
+
+    const getFunctionParametersList = (params: Parameter[]) => {
+        const paramList: ParameterModel[] = [];
+        const paramFields = convertSchemaToFormFields(model.schema);
+
+        params.forEach((param) => {
+            // Find matching field configurations from schema
+            const typeField = paramFields.find((field) => field.key === "type");
+            const nameField = paramFields.find((field) => field.key === "variable");
+            const defaultField = paramFields.find((field) => field.key === "defaultable");
+            const documentationField = paramFields.find((field) => field.key === "documentation");
+
+            paramList.push({
+                kind: "REQUIRED",
+                enabled: typeField?.enabled ?? true,
+                editable: typeField?.editable ?? true,
+                advanced: typeField?.advanced ?? false,
+                optional: typeField?.optional ?? false,
+                type: {
+                    value: param.formValues["type"] as string,
+                    valueType: typeField?.valueType,
+                    isType: true,
+                    optional: typeField?.optional,
+                    advanced: typeField?.advanced,
+                    addNewButton: false,
+                    enabled: typeField?.enabled,
+                    editable: typeField?.editable,
+                    imports: param?.imports || {},
+                },
+                name: {
+                    value: param.formValues["variable"] as string,
+                    valueType: nameField?.valueType,
+                    isType: false,
+                    optional: nameField?.optional,
+                    advanced: nameField?.advanced,
+                    addNewButton: false,
+                    enabled: nameField?.enabled,
+                    editable: nameField?.editable,
+                },
+                defaultValue: {
+                    value: param.formValues["defaultable"],
+                    valueType: defaultField?.valueType || "string",
+                    isType: false,
+                    optional: defaultField?.optional,
+                    advanced: defaultField?.advanced,
+                    addNewButton: false,
+                    enabled: defaultField?.enabled,
+                    editable: defaultField?.editable,
+                },
+                documentation: {
+                    value: param.formValues["documentation"] as string,
+                    valueType: documentationField?.valueType,
+                    isType: false,
+                    optional: documentationField?.optional,
+                    advanced: documentationField?.advanced,
+                    addNewButton: false,
+                    enabled: documentationField?.enabled,
+                    editable: documentationField?.editable,
+                },
+            });
+        });
+        return paramList;
+    };
+
+    // Initialize form fields
+    useEffect(() => {
+        const initialFields: FormField[] = [
+            {
+                key: "name",
+                label: model.name.metadata?.label || "Operation Name",
+                type: "IDENTIFIER",
+                optional: model.name.optional,
+                editable: model.name.editable,
+                advanced: model.name.advanced,
+                enabled: model.name.enabled,
+                documentation: model.name.metadata?.description || "",
+                value: model.name.value,
+                valueType: model.name.valueType,
+                valueTypeConstraint: model.name.valueTypeConstraint || "",
+                lineRange: model?.name?.codedata?.lineRange,
+            },
+            {
+                key: "parameters",
+                label: "Parameters",
+                type: "PARAM_MANAGER",
+                optional: true,
+                editable: true,
+                enabled: true,
+                documentation: "",
+                value: model.parameters.map((param, index) => convertParameterToParamValue(param, index)),
+                paramManagerProps: {
+                    paramValues: model.parameters.map((param, index) => convertParameterToParamValue(param, index)),
+                    formFields: convertSchemaToFormFields(model.schema),
+                    handleParameter: handleParamChange,
+                },
+                valueTypeConstraint: "",
+            },
+            {
+                key: "returnType",
+                label: model.returnType.metadata?.label || "Return Type",
+                type: "TYPE",
+                optional: model.returnType.optional,
+                enabled: model.returnType.enabled,
+                editable: model.returnType.editable,
+                advanced: model.returnType.advanced,
+                documentation: model.returnType.metadata?.description || "",
+                value: model.returnType.value,
+                valueType: model.returnType.valueType,
+                valueTypeConstraint: model.returnType.valueTypeConstraint || "",
+            },
+        ];
+
+        const properties = convertConfigToFormFields(model);
+
+        // Find toolDescription property and insert it after name field
+        const toolDescriptionIndex = properties.findIndex((prop) => prop.key === "toolDescription");
+        if (toolDescriptionIndex !== -1) {
+            const toolDescriptionField = properties.splice(toolDescriptionIndex, 1)[0];
+            initialFields.splice(1, 0, toolDescriptionField); // Insert after name field (index 1)
+        }
+
+        // Add remaining properties at the end
+        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]);
+
+    const handleFunctionCreate = (data: FormValues, formImports: FormImports) => {
+        console.log("Function create with data:", data);
+        const { name, returnType, parameters: params } = data;
+        const paramList = params ? getFunctionParametersList(params) : [];
+        const newFunctionModel = { ...model };
+        newFunctionModel.name.value = name;
+        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);
+    };
+
+    return (
+        <>
+            {fields.length > 0 && (
+                <FormGeneratorNew
+                    fileName={filePath}
+                    targetLineRange={lineRange}
+                    fields={fields}
+                    onSubmit={handleFunctionCreate}
+                    onBack={onClose}
+                    submitText={isSaving ? "Saving..." : "Save"}
+                    helperPaneSide="left"
+                    isSaving={isSaving}
+                    preserveFieldOrder={true}
+                    recordTypeFields={recordTypeFields}
+                />
+            )}
+        </>
+    );
+}
+
+export function convertSchemaToFormFields(schema: ConfigProperties): FormField[] {
+    const formFields: FormField[] = [];
+
+    // Get the parameter configuration if it exists
+    const parameterConfig = schema["parameter"] as ConfigProperties;
+    if (parameterConfig) {
+        // Check if documentation field exists, if not add it
+        if (!parameterConfig["documentation"]) {
+            parameterConfig["documentation"] = {
+                metadata: {
+                    label: "Description",
+                    description: "The description of the parameter",
+                },
+                valueType: "STRING",
+                enabled: true,
+                editable: true,
+                optional: true,
+                advanced: false,
+            };
+        }
+
+        // Check if defaultValue field exists and set optional to true
+        if (parameterConfig["defaultValue"]) {
+            parameterConfig["defaultValue"].optional = true;
+        }
+
+        // Iterate over each parameter field in the parameter config
+        for (const key in parameterConfig) {
+            if (parameterConfig.hasOwnProperty(key)) {
+                const parameter = parameterConfig[key];
+                if (parameter.metadata && parameter.metadata.label) {
+                    const formField = convertParameterToFormField(key, parameter as ParameterModel);
+                    console.log("Form Field: ", formField);
+                    formFields.push(formField);
+                }
+            }
+        }
+    }
+
+    return formFields;
+}
+
+export function convertParameterToFormField(key: string, param: ParameterModel): FormField {
+    return {
+        key: key === "defaultValue" ? "defaultable" : key === "name" ? "variable" : key,
+        label: param.metadata?.label,
+        type: param.valueType || "string",
+        optional: param.optional || false,
+        editable: param.editable || false,
+        advanced: key === "defaultValue" ? true : param.advanced,
+        documentation: param.metadata?.description || "",
+        value: param.value || "",
+        valueType: param.valueType,
+        valueTypeConstraint: param?.valueTypeConstraint || "",
+        enabled: param.enabled ?? true,
+        lineRange: param?.codedata?.lineRange,
+    };
+}
+
+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,
+        key: param.name.value,
+        value: `${param.type.value} ${param.name.value}${
+            (param.defaultValue as PropertyModel)?.value ? ` = ${(param.defaultValue as PropertyModel)?.value}` : ""
+        }`,
+        formValues: {
+            variable: param.name.value,
+            type: param.type.value,
+            defaultable: (param.defaultValue as PropertyModel)?.value || "",
+            documentation: param.documentation?.value || "",
+        },
+        icon: "symbol-variable",
+        identifierEditable: param.name?.editable,
+        identifierRange: param.name.codedata?.lineRange,
+        hidden: param.hidden ?? false,
+        imports: param.type?.imports || {},
+    };
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/ParamEditor.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/ParamEditor.tsx
index 234999c07c1..223cdb7ef82 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/ParamEditor.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/ParamEditor.tsx
@@ -22,7 +22,7 @@ import React, { useEffect, useState } from 'react';
 import { Divider, Dropdown, Typography } from '@wso2/ui-toolkit';
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
 import { EditorContainer, EditorContent } from '../../../styles';
-import { LineRange, ParameterModel, PropertyModel } from '@wso2/ballerina-core';
+import { LineRange, ParameterModel, PayloadContext, PropertyModel } from '@wso2/ballerina-core';
 import { FormField, FormImports } from '@wso2/ballerina-side-panel';
 import FormGeneratorNew from '../../../../Forms/FormGeneratorNew';
 import { useRpcContext } from '@wso2/ballerina-rpc-client';
@@ -31,16 +31,87 @@ import { getImportsForProperty } from '../../../../../../utils/bi';
 
 const options = [{ id: "0", value: "QUERY" }, { id: "1", value: "Header" }];
 
+const contentTypes = [
+    "A-IM",
+    "Accept",
+    "Accept-Charset",
+    "Accept-Encoding",
+    "Accept-Language",
+    "Accept-Datetime",
+    "Access-Control-Request-Method",
+    "Access-Control-Request-Headers",
+    "Authorization",
+    "Cache-Control",
+    "Connection",
+    "Content-Encoding",
+    "Content-Length",
+    "Content-MD5",
+    "Content-Type",
+    "Cookie",
+    "Date",
+    "Expect",
+    "Forwarded",
+    "From",
+    "Host",
+    "HTTP2-Settings",
+    "If-Match",
+    "If-Modified-Since",
+    "If-None-Match",
+    "If-Range",
+    "If-Unmodified-Since",
+    "Max-Forwards",
+    "Origin",
+    "Pragma",
+    "Prefer",
+    "Proxy-Authorization",
+    "Range",
+    "Referer",
+    "TE",
+    "Trailer",
+    "Transfer-Encoding",
+    "User-Agent",
+    "Upgrade",
+    "Via",
+    "Warning",
+    "Upgrade-Insecure-Requests",
+    "X-Requested-With",
+    "DNT",
+    "X-Forwarded-For",
+    "X-Forwarded-Host",
+    "X-Forwarded-Proto",
+    "Front-End-Https",
+    "X-Http-Method-Override",
+    "X-ATT-DeviceId",
+    "X-Wap-Profile",
+    "Proxy-Connection",
+    "X-UIDH",
+    "X-Csrf-Token",
+    "X-Request-ID",
+    "X-Correlation-ID",
+    "Save-Data",
+    "Sec-GPC",
+    "Sec-Fetch-Site",
+    "Sec-Fetch-Mode",
+    "Sec-Fetch-User",
+    "Sec-Fetch-Dest",
+    "Sec-CH-UA",
+    "Sec-CH-UA-Mobile",
+    "Sec-CH-UA-Platform"
+];
+
 export interface ParamProps {
     param: ParameterModel;
     hideType?: boolean;
     onChange: (param: ParameterModel) => void;
     onSave?: (param: ParameterModel) => void;
     onCancel?: (param?: ParameterModel) => void;
+    isNew?: boolean;
+    type?: "QUERY" | "HEADER" | "PAYLOAD" | "PATH";
+    payloadContext?: PayloadContext;
 }
 
 export function ParamEditor(props: ParamProps) {
-    const { param, hideType = false, onChange, onSave, onCancel } = props;
+    const { param, hideType = false, onChange, onSave, onCancel, isNew, type } = props;
 
     const { rpcClient } = useRpcContext();
     const [currentFields, setCurrentFields] = useState<FormField[]>([]);
@@ -50,7 +121,7 @@ export function ParamEditor(props: ParamProps) {
     const [targetLineRange, setTargetLineRange] = useState<LineRange>();
 
     const handleOnSelect = (value: string) => {
-        onChange({ ...param, httpParamType: value as "QUERY" | "Header" | "PAYLOAD" });
+        onChange({ ...param, httpParamType: value as "QUERY" | "HEADER" | "PAYLOAD" });
     };
 
     const handleReqFieldChange = () => {
@@ -78,31 +149,143 @@ export function ParamEditor(props: ParamProps) {
         const fields: FormField[] = [];
 
         // Add name field
-        fields.push({
-            key: `name`,
-            label: 'Name',
-            type: param.name.valueType,
-            optional: false,
-            editable: true,
-            documentation: '',
-            enabled: param.name?.enabled,
-            value: param.name.value,
-            valueTypeConstraint: ""
-        });
+        // fields.push({
+        //     key: `name`,
+        //     label: 'Name',
+        //     type: param.name.valueType,
+        //     optional: false,
+        //     editable: true,
+        //     documentation: '',
+        //     enabled: param.name?.enabled,
+        //     value: param.name.value,
+        //     valueTypeConstraint: ""
+        // });
 
-        // Add type field if not hidden
-        if (!hideType) {
-            fields.push({
-                key: `type`,
-                label: 'Type',
-                type: param.type.valueType,
-                optional: false,
-                editable: true,
-                documentation: '',
-                enabled: param.type?.enabled,
-                value: param.type.value,
-                valueTypeConstraint: ""
-            });
+        // // Add type field if not hidden
+        // if (!hideType) {
+        //     fields.push({
+        //         key: `type`,
+        //         label: 'Type',
+        //         type: param.type.valueType,
+        //         optional: false,
+        //         editable: true,
+        //         documentation: '',
+        //         enabled: param.type?.enabled,
+        //         value: param.type.value,
+        //         defaultValue: "json",
+        //         valueTypeConstraint: ""
+        //     });
+        // }
+
+        switch (type) {
+            case "QUERY":
+            case "PATH":
+                fields.push({
+                    key: `name`,
+                    label: 'Name',
+                    type: param.name.valueType,
+                    optional: false,
+                    editable: true,
+                    documentation: '',
+                    enabled: param.name?.enabled,
+                    value: param.name.value,
+                    valueTypeConstraint: ""
+                });
+                fields.push({
+                    key: `type`,
+                    label: 'Type',
+                    type: "ENUM",
+                    advanced: isNew,
+                    optional: false,
+                    editable: true,
+                    documentation: '',
+                    enabled: true,
+                    defaultValue: "string",
+                    value: param.type.value,
+                    items: ["string", "int", "float", "decimal", "boolean"],
+                    valueTypeConstraint: ""
+                });
+                break;
+            case "HEADER":
+                fields.push({
+                    key: `headerName`,
+                    label: 'Header Name',
+                    type: "AUTOCOMPLETE",
+                    items: contentTypes,
+                    optional: false,
+                    editable: true,
+                    documentation: '',
+                    enabled: true,
+                    value: (param.headerName?.value || "Content-Type").replace(/"/g, ""),
+                    valueTypeConstraint: "",
+                    onValueChange: (value: string | boolean) => {
+                        const sanitizeValue = (value as string)
+                            .replace(/-([a-zA-Z])/g, (_, c) => c ? c.toUpperCase() : '')
+                            .replace(/\.([a-zA-Z])/g, (_, c) => c ? c.toUpperCase() : '')
+                            .replace(/[^a-zA-Z0-9]/g, '');
+                        const sanitizedValueWithLowerFirst = sanitizeValue.charAt(0).toLowerCase() + sanitizeValue.slice(1);
+                        // Set the sanitized value to the variable name field
+                        // When the header name changes, auto-update the variable name field (param.name.value) to a sanitized version
+                        if (param.name && typeof param.name === 'object') {
+                            param.name.value = sanitizeValue;
+                            param.headerName.value = `"${value}"`;
+                            onChange({ ...param, name: { ...param.name, value: sanitizedValueWithLowerFirst } });
+                        }
+                    }
+                });
+                fields.push({
+                    key: `name`,
+                    label: 'Variable Name',
+                    advanced: isNew,
+                    type: param.name.valueType,
+                    optional: false,
+                    editable: true,
+                    documentation: '',
+                    enabled: param.name?.enabled,
+                    value: param.name.value || "contentType",
+                    valueTypeConstraint: ""
+                });
+                fields.push({
+                    key: `type`,
+                    label: 'Type',
+                    type: "ENUM",
+                    advanced: isNew,
+                    optional: false,
+                    editable: true,
+                    documentation: '',
+                    enabled: true,
+                    defaultValue: "string",
+                    value: param.type.value,
+                    items: ["string", "int", "float", "decimal", "boolean"],
+                    valueTypeConstraint: ""
+                });
+                break;
+            case "PAYLOAD":
+                fields.push({
+                    key: `name`,
+                    label: 'Name',
+                    type: param.name.valueType,
+                    optional: false,
+                    editable: true,
+                    documentation: '',
+                    enabled: param.name?.enabled,
+                    value: param.name.value,
+                    valueTypeConstraint: ""
+                });
+                fields.push({
+                    key: `type`,
+                    label: 'Type',
+                    type: param.type.valueType,
+                    optional: false,
+                    editable: true,
+                    documentation: param?.type?.metadata?.description || '',
+                    enabled: param.type?.enabled,
+                    value: param.type.value || "json",
+                    defaultValue: "json",
+                    valueTypeConstraint: "",
+                    // isContextTypeSupported: true // Enable this to support context typeEditor
+                });
+                break;
         }
 
         // Add default value field if available
@@ -112,10 +295,10 @@ export function ParamEditor(props: ParamProps) {
                 label: 'Default Value',
                 type: (param.defaultValue as PropertyModel).valueType,
                 optional: true,
-                advanced: true,
+                advanced: isNew,
                 editable: true,
                 documentation: '',
-                enabled: enableDefault || (param.defaultValue as PropertyModel)?.enabled,
+                enabled: true,
                 value: (param.defaultValue as PropertyModel)?.value,
                 valueTypeConstraint: ""
             });
@@ -137,16 +320,17 @@ export function ParamEditor(props: ParamProps) {
                 imports: getImportsForProperty('type', formImports)
             },
             name: { ...param.name, value: dataValues['name'] ?? param.name.value },
+            headerName: { ...param.headerName, value: dataValues['headerName'] !== undefined ? `"${dataValues['headerName']}"` : param.headerName?.value },
             defaultValue: {
                 ...(param.defaultValue as PropertyModel),
                 value: dataValues['defaultValue'] ?? (param.defaultValue as PropertyModel)?.value,
                 enabled: !!dataValues['defaultValue']
             }
         };
-        
+
         // Update the parent component's state first
         onChange(updatedParam);
-        
+
         // Then call onSave if provided
         if (onSave) {
             onSave(updatedParam);
@@ -169,29 +353,9 @@ export function ParamEditor(props: ParamProps) {
 
     return (
         <EditorContainer>
-            {param.httpParamType && <Typography sx={{ marginBlockEnd: 10 }} variant="h4">{param.httpParamType === "PAYLOAD" ? "Payload" : "Parameter"} Configuration</Typography>}
-            {!param.httpParamType && <Typography sx={{ marginBlockEnd: 10 }} variant="h4">{param.metadata.label} Configuration</Typography>}
+            {param.httpParamType && <Typography sx={{ marginBlockEnd: 0, marginTop: 5 }} variant="h4">{param.httpParamType.charAt(0).toUpperCase() + param.httpParamType.slice(1).toLowerCase()} {param.httpParamType === "QUERY" && "Parameter"}</Typography>}
+            {!param.httpParamType && <Typography sx={{ marginBlockEnd: 0, marginTop: 5 }} variant="h4">{param.metadata.label}</Typography>}
             <Divider />
-            {param.httpParamType !== "PAYLOAD" &&
-                <EditorContent>
-                    {param.httpParamType && (
-                        <Dropdown
-                            id="param-type-selector"
-                            sx={{ zIndex: 2, width: 172 }}
-                            isRequired
-                            items={options}
-                            label="Param Type"
-                            onValueChange={handleOnSelect}
-                            value={param.httpParamType}
-                        />
-                    )}
-                    {param.httpParamType === "QUERY" && (
-                        <VSCodeCheckbox checked={param.kind === "REQUIRED"} onChange={handleReqFieldChange} id="is-req-checkbox">
-                            Is Required?
-                        </VSCodeCheckbox>
-                    )}
-                </EditorContent>
-            }
             <>
                 {filePath && targetLineRange &&
                     <FormGeneratorNew
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/ParamItem.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/ParamItem.tsx
index 49b97f51dcd..181a4f7e8b2 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/ParamItem.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/ParamItem.tsx
@@ -21,6 +21,7 @@ import { ParamIcon } from "./ParamIcon";
 import { Codicon } from "@wso2/ui-toolkit";
 import { ActionIconWrapper, ContentSection, DeleteIconWrapper, EditIconWrapper, HeaderLabel, IconTextWrapper, IconWrapper, OptionLabel, disabledHeaderLabel, headerLabelStyles } from "../../../styles";
 import { ParameterModel, PropertyModel } from "@wso2/ballerina-core";
+import styled from "@emotion/styled";
 
 interface ParamItemProps {
     param: ParameterModel;
@@ -29,14 +30,69 @@ interface ParamItemProps {
     onEditClick: (param: ParameterModel) => void;
 }
 
+const ParamLabelContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-family: var(--vscode-font-family);
+`;
+
+const ParamName = styled.span`
+    color: var(--vscode-editor-foreground, #222);
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--vscode-font-family);
+`;
+
+const ParamType = styled.span`
+    font-size: 13px;
+    color: var(--vscode-descriptionForeground, #888);
+    background: var(--vscode-editorWidget-background, #f5f5f5);
+    border-radius: 4px;
+    padding: 2px 8px;
+    letter-spacing: 0.1px;
+`;
+
+const ParamDefault = styled.span`
+    font-size: 13px;
+    color: var(--vscode-editorHint-foreground, #b0b0b0);
+    margin-left: 8px;
+    font-style: italic;
+`;
+
 export function ParamItem(props: ParamItemProps) {
     const { param, readonly, onDelete, onEditClick } = props;
 
-    const label = param?.type.value
-        ? `${param.type.value} ${param.name.value}${
-              (param.defaultValue as PropertyModel)?.value ? ` = ${(param.defaultValue as PropertyModel).value}` : ""
-          }`
-        : `${param.name.value}`;
+
+
+    const label = (
+        <ParamLabelContainer>
+            <ParamType>
+                {param.type.value}
+            </ParamType>
+            {param?.type?.value ? (
+                <>
+                    {param.httpParamType === "HEADER" && param.headerName.value && (
+                        <ParamName>{param.headerName.value.replace(/(^")|("$)/g, '')}</ParamName>
+                    )}
+                    {param.httpParamType !== "HEADER" && param.name?.value && (
+                        <ParamName>{param.name.value}</ParamName>
+                    )}
+                    {(param.defaultValue as PropertyModel)?.value && (
+                        <ParamDefault>
+                            = {(param.defaultValue as PropertyModel).value}
+                        </ParamDefault>
+                    )}
+                </>
+            ) : (
+                <ParamName>
+                    {param.name.value}
+                </ParamName>
+            )}
+        </ParamLabelContainer>
+    );
 
     const handleDelete = () => {
         onDelete(param);
@@ -53,19 +109,19 @@ export function ParamItem(props: ParamItemProps) {
 
     return (
         <HeaderLabel haveErrors={haveErrors()} data-testid={`${label}-item`}>
-            <IconTextWrapper onClick={handleEdit}>
+            {/* <IconTextWrapper onClick={handleEdit}>
                 <IconWrapper>
                     <ParamIcon option={param?.httpParamType?.toLowerCase()} />
                 </IconWrapper>
                 <OptionLabel>
                     {param?.httpParamType ? param?.httpParamType.toUpperCase() : param?.metadata?.label.toUpperCase()}
                 </OptionLabel>
-            </IconTextWrapper>
+            </IconTextWrapper> */}
             <ContentSection>
                 <div
                     data-test-id={`${label}-param`}
                     className={readonly ? disabledHeaderLabel : headerLabelStyles}
-                    onClick={handleEdit}
+                    onClick={!readonly ? handleEdit : undefined}
                 >
                     {label}
                 </div>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/Parameters.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/Parameters.tsx
index 934d6130168..e1c692b2ea6 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/Parameters.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/Parameters/Parameters.tsx
@@ -23,14 +23,18 @@ import { Codicon, Divider, LinkButton, Typography, CheckBox, CheckBoxGroup, Them
 import styled from '@emotion/styled';
 import { ParamEditor } from './ParamEditor';
 import { ParamItem } from './ParamItem';
-import { ConfigProperties, ParameterModel } from '@wso2/ballerina-core';
+import { ConfigProperties, ParameterModel, HttpPayloadContext, PropertyModel, Type } from '@wso2/ballerina-core';
+import { EntryPointTypeCreator } from '../../../../../../components/EntryPointTypeCreator';
 
 export interface ParametersProps {
     parameters: ParameterModel[];
     onChange: (parameters: ParameterModel[]) => void,
     schemas: ConfigProperties;
     readonly?: boolean;
+    pathName?: string;
     showPayload: boolean;
+    isNewResource?: boolean;
+    payloadContext?: HttpPayloadContext;
 }
 
 const AddButtonWrapper = styled.div`
@@ -49,6 +53,7 @@ const OptionalConfigRow = styled.div`
     align-items: center;
     width: 100%;
     margin-bottom: 8px;
+    margin-top: 12px;
 `;
 
 const OptionalConfigButtonContainer = styled.div`
@@ -64,7 +69,7 @@ const OptionalConfigContent = styled.div`
 `;
 
 export function Parameters(props: ParametersProps) {
-    const { parameters, readonly, onChange, schemas, showPayload } = props;
+    const { parameters, readonly, onChange, schemas, showPayload, isNewResource = false, pathName, payloadContext } = props;
 
     const queryModel = schemas["query"] as ParameterModel;
     const headerModel = schemas["header"] as ParameterModel;
@@ -93,6 +98,8 @@ export function Parameters(props: ParametersProps) {
 
     const [showAdvanced, setShowAdvanced] = useState<boolean>(advancedEnabledParameters.length > 0);
 
+    const [isTypeEditorOpen, setIsTypeEditorOpen] = useState<boolean>(false);
+
 
     const handleAdvanceParamToggle = () => {
         setShowAdvanced(!showAdvanced);
@@ -110,20 +117,51 @@ export function Parameters(props: ParametersProps) {
         setEditingIndex(index);
     };
 
-    const onAddParamClick = () => {
-        queryModel.name.value = "";
-        queryModel.type.value = "";
+    const onAddParamClick = (httpParamType: "QUERY" | "HEADER") => {
+        switch (httpParamType) {
+            case "QUERY":
+                queryModel.name.value = "";
+                queryModel.httpParamType = httpParamType;
+                setEditModel(queryModel);
+                break;
+            case "HEADER":
+                headerModel.name.value = "";
+                headerModel.httpParamType = httpParamType;
+                setEditModel(headerModel);
+                break;
+        }
         setIsNew(true);
-        setEditModel(queryModel);
         setEditingIndex(-1);
     };
 
     const onAddPayloadClick = () => {
-        payloadModel.name.value = "payload";
-        payloadModel.type.value = "";
-        setIsNew(true);
-        setEditModel(payloadModel);
-        setEditingIndex(-1);
+        // Open FormTypeEditor modal instead of ParamEditor
+        setIsTypeEditorOpen(true);
+    };
+
+    const handleTypeCreated = (type: Type | string) => {
+        // When a type is created, set it as the payload type
+        const updatedPayloadModel = { ...payloadModel };
+        updatedPayloadModel.name.value = "payload";
+        updatedPayloadModel.type.value = typeof type === 'string' ? type : (type as Type).name;
+        updatedPayloadModel.enabled = true;
+
+        // Check if we're editing an existing payload or adding a new one
+        const existingPayloadIndex = parameters.findIndex(p => p.httpParamType === "PAYLOAD");
+
+        if (existingPayloadIndex >= 0) {
+            // Update existing editing model
+            setEditModel(updatedPayloadModel);
+        } else {
+            // Add new payload parameter
+            onChange([...parameters, updatedPayloadModel]);
+        }
+        // Close the modal
+        setIsTypeEditorOpen(false);
+    };
+
+    const handleTypeEditorClose = () => {
+        setIsTypeEditorOpen(false);
     };
 
     const onDelete = (param: ParameterModel) => {
@@ -169,6 +207,33 @@ export function Parameters(props: ParametersProps) {
         }
     };
 
+    const generatePayloadName = () => {
+        if (!pathName) {
+            return "PayloadType";
+        }
+
+        // Extract valid segments
+        const validSegments = pathName
+            .replace(/^\/|\/$/g, '') // Remove leading/trailing slashes
+            .split('/')
+            .filter(segment => !segment.includes('[') && !segment.includes(']')) // Filter out parameter segments
+            .map(segment => segment.replace(/[^a-zA-Z0-9]/g, '')) // Clean each segment
+            .filter(segment => segment.length > 0); // Remove empty segments
+
+        if (validSegments.length === 0) {
+            return "PayloadType";
+        }
+
+        const camelCasePath = validSegments
+            .map((segment, index) => index === 0
+                ? segment.toLowerCase()
+                : segment.charAt(0).toUpperCase() + segment.slice(1).toLowerCase()
+            )
+            .join('');
+
+        return camelCasePath.charAt(0).toUpperCase() + camelCasePath.slice(1) + 'Payload';
+    }
+
     const onSaveParam = (param: ParameterModel) => {
         param.enabled = true;
         if (isNew) {
@@ -194,42 +259,111 @@ export function Parameters(props: ParametersProps) {
         setEditingIndex(-1);
     };
 
+    const getParameterDescription = (label: string): string => {
+        const descriptions: { [key: string]: string } = {
+            "Request": "Access the complete HTTP request object including the request body (payload), all HTTP headers, query parameters, path parameters, and other request metadata. Use this to work with the entire incoming request context.",
+            "Headers": "Access all HTTP headers sent by the client in the request. This includes standard headers like Content-Type, Authorization, User-Agent, and any custom headers. Use this to retrieve and process specific header values.",
+            "Caller": "Access information about the caller/client making the request. This provides context about the service caller, including authentication details, caller identity, and caller-specific metadata. Use this for authorization and logging purposes."
+        };
+        return descriptions[label] || "Use this input to configure advanced parameters.";
+    };
+
+    // Helper function to collect parameter details for payload context
+    const getParameterDetails = () => {
+        const queryParams = normalParameters.filter(p => p.httpParamType === "QUERY");
+        if (queryParams.length > 0) {
+            return queryParams.map(param => ({
+                name: param.name?.value || '',
+                type: param.type?.value || '',
+                defaulValue: (param.defaultValue as PropertyModel)?.value || ''
+            }));
+        }
+        return [];
+    };
+
     return (
         <div>
-            {/* <---------------- Normal Parameters Start Query|Header ----------------> */}
-            <Typography sx={{ marginBlockEnd: 10 }} variant="h4">Parameters</Typography>
-            {normalParameters.map((param: ParameterModel, index) => (
-                <ParamItem
-                    key={index}
-                    param={param}
-                    onDelete={onDelete}
-                    onEditClick={onEdit}
-                />
-            ))}
-            {editModel && (editModel.httpParamType === "QUERY" || editModel.httpParamType === "Header") &&
+            {/* <---------------- Query Parameters Start ----------------> */}
+            {normalParameters.filter((param: ParameterModel) => param.httpParamType === "QUERY").length > 0 && (
+                <Typography sx={{ marginBlockEnd: 10 }} variant="h4">Query Parameters</Typography>
+            )}
+            {normalParameters
+                .filter((param: ParameterModel) => param.httpParamType === "QUERY")
+                .map((param: ParameterModel, index) => (
+                    <ParamItem
+                        readonly={readonly}
+                        key={`query-${index}`}
+                        param={param}
+                        onDelete={onDelete}
+                        onEditClick={onEdit}
+                    />
+                ))}
+            {editModel && editModel.httpParamType === "QUERY" &&
                 <ParamEditor
+                    isNew={isNew}
                     param={editModel}
                     onChange={onChangeParam}
                     onSave={onSaveParam}
                     onCancel={onParamEditCancel}
+                    type="QUERY"
                 />
             }
+            {!readonly && (
+                <AddButtonWrapper >
+                    <LinkButton sx={readonly && { color: "var(--vscode-badge-background)" } || editModel && { opacity: 0.5, pointerEvents: 'none' }} onClick={editModel ? undefined : () => (!readonly && onAddParamClick("QUERY"))}>
+                        <Codicon name="add" />
+                        <>Query Parameter</>
+                    </LinkButton>
+                </AddButtonWrapper>
+            )}
 
-            <AddButtonWrapper >
-                <LinkButton sx={readonly && { color: "var(--vscode-badge-background)" } || editModel && { opacity: 0.5, pointerEvents: 'none' }} onClick={editModel ? undefined : (!readonly && onAddParamClick)}>
-                    <Codicon name="add" />
-                    <>Add Parameter</>
-                </LinkButton>
-            </AddButtonWrapper>
+            {/* <---------------- Header Parameters Start ----------------> */}
+            <>
+                {normalParameters.filter((param: ParameterModel) => param.httpParamType === "HEADER").length > 0 && (
+                    <Typography sx={{ marginBlockEnd: 10, marginTop: 20 }} variant="h4">Headers</Typography>
+                )}
+                {normalParameters
+                    .filter((param: ParameterModel) => param.httpParamType === "HEADER")
+                    .map((param: ParameterModel, index) => (
+                        <ParamItem
+                            readonly={readonly}
+                            key={`header-${index}`}
+                            param={param}
+                            onDelete={onDelete}
+                            onEditClick={onEdit}
+                        />
+                    ))}
+                {editModel && editModel.httpParamType === "HEADER" &&
+                    <ParamEditor
+                        isNew={isNew}
+                        param={editModel}
+                        onChange={onChangeParam}
+                        onSave={onSaveParam}
+                        onCancel={onParamEditCancel}
+                        type="HEADER"
+                    />
+                }
+                {!readonly && (
+                    <AddButtonWrapper >
+                        <LinkButton sx={readonly && { color: "var(--vscode-badge-background)" } || editModel && { opacity: 0.5, pointerEvents: 'none' }} onClick={editModel ? undefined : () => (!readonly && onAddParamClick("HEADER"))}>
+                            <Codicon name="add" />
+                            <>Header</>
+                        </LinkButton>
+                    </AddButtonWrapper>
+                )}
+            </>
 
-            {/* <---------------- Normal Parameters End Query|Header ----------------> */}
+            {/* <---------------- Normal Parameters End Query|HEADER ----------------> */}
 
             {/* <-------------------- Payload Parameters Start --------------------> */}
             {showPayload && (
                 <>
-                    <Typography sx={{ marginBlockEnd: 10 }} variant="h4">Payload</Typography>
+                    {payloadParameters.length > 0 && (
+                        <Typography sx={{ marginBlockEnd: 10 }} variant="h4">Payload</Typography>
+                    )}
                     {payloadParameters.map((param: ParameterModel, index) => (
                         <ParamItem
+                            readonly={readonly}
                             key={index}
                             param={param}
                             onDelete={onDelete}
@@ -241,21 +375,23 @@ export function Parameters(props: ParametersProps) {
 
             {editModel && editModel.httpParamType === "PAYLOAD" &&
                 <ParamEditor
+                    isNew={isNew}
                     param={editModel}
                     onChange={onChangeParam}
                     onSave={onSaveParam}
                     onCancel={onParamEditCancel}
+                    type="PAYLOAD"
                 />
             }
 
-            {showPayload && payloadParameters.length === 0 &&
+            {showPayload && payloadParameters.length === 0 && !readonly && (
                 <AddButtonWrapper >
                     <LinkButton sx={readonly && { color: "var(--vscode-badge-background)" } || editModel && { opacity: 0.5, pointerEvents: 'none' }} onClick={editModel ? undefined : (!readonly && onAddPayloadClick)}>
                         <Codicon name="add" />
-                        <>Add Payload</>
+                        <>Define Payload</>
                     </LinkButton>
                 </AddButtonWrapper>
-            }
+            )}
             {/* <-------------------- Payload Parameters End --------------------> */}
 
             {/* <-------------------- Advanced Parameters Start --------------------> */}
@@ -298,50 +434,77 @@ export function Parameters(props: ParametersProps) {
             {/* <-------------------- Advanced Parameters End --------------------> */}
 
             {/* <-------------------- Advanced Parameters Checkbox Start --------------------> */}
-            <>
-                <OptionalConfigRow>
-                    Advanced Parameters
-                    <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>
-                        <CheckBoxGroup direction="vertical">
-                            {
-                                advancedAllParameters.map((param: ParameterModel, index) => (
+            {!isNewResource && (
+                <>
+                    {((readonly && advancedEnabledParameters.length > 0) || !readonly) && (
+                        <OptionalConfigRow>
+                            Advanced Parameters
+                            <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>
+                            <CheckBoxGroup direction="vertical">
+                                {!readonly && advancedAllParameters.map((param: ParameterModel, index) => (
                                     <CheckBox
                                         key={index}
                                         label={param.metadata.label.charAt(0).toUpperCase() + param.metadata.label.slice(1)}
                                         checked={param.enabled}
                                         onChange={(checked) => onAdvancedChecked(param, checked)}
+                                        sx={{ description: getParameterDescription(param.metadata.label) }}
                                     />
-                                ))
-                            }
-                        </CheckBoxGroup>
-                    </OptionalConfigContent>
-                )}
-                <Divider />
-            </>
+                                ))}
+                                {readonly && advancedEnabledParameters.map((param: ParameterModel, index) => (
+                                    <CheckBox
+                                        key={index}
+                                        disabled={true}
+                                        label={param.metadata.label.charAt(0).toUpperCase() + param.metadata.label.slice(1)}
+                                        checked={param.enabled}
+                                        onChange={(checked) => onAdvancedChecked(param, checked)}
+                                        sx={{ description: getParameterDescription(param.metadata.label) }}
+                                    />
+                                ))}
+                            </CheckBoxGroup>
+                        </OptionalConfigContent>
+                    )}
+                    <Divider />
+                </>
+            )}
             {/* <-------------------- Advanced Parameters Checkbox End --------------------> */}
 
+            {/* FormTypeEditor Modal for Add Payload */}
+            <EntryPointTypeCreator
+                isOpen={isTypeEditorOpen}
+                onClose={handleTypeEditorClose}
+                onTypeCreate={handleTypeCreated}
+                initialTypeName={generatePayloadName()}
+                modalTitle={"Define Payload"}
+                payloadContext={{
+                    ...payloadContext,
+                    paramDetails: getParameterDetails()
+                }}
+                modalWidth={650}
+                modalHeight={600}
+            />
         </div >
     );
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceConfig/ResourceConfig.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceConfig/ResourceConfig.tsx
new file mode 100644
index 00000000000..efab6bf6955
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceConfig/ResourceConfig.tsx
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 styled from '@emotion/styled';
+import { ConfigProperties, LineRange, RecordTypeField } from '@wso2/ballerina-core';
+import { FormField, FormValues } from '@wso2/ballerina-side-panel';
+import FormGeneratorNew from '../../../../Forms/FormGeneratorNew';
+import { useRpcContext } from '@wso2/ballerina-rpc-client';
+
+const ResourceConfigContainer = styled.div`
+   margin-bottom: 25px;
+   & > .side-panel-body {
+		padding: 0px;
+   }
+`;
+
+export interface ResourceConfigProps {
+	properties: ConfigProperties;
+	filePath: string;
+	onChange: (properties: ConfigProperties, value: any) => void;
+	readonly?: boolean;
+}
+
+export function ResourceConfig(props: ResourceConfigProps) {
+	const { properties, filePath, onChange, readonly } = props;
+
+	const { rpcClient } = useRpcContext();
+
+	const [targetLineRange, setTargetLineRange] = useState<LineRange>();
+	const [configFields, setConfigFields] = useState<FormField[]>([]);
+	const [recordTypeFields, setRecordTypeFields] = useState<RecordTypeField[]>([]);
+
+	useEffect(() => {
+		setConfigFields(convertConfig(properties, readonly));
+		// Extract fields with typeMembers where kind is RECORD_TYPE
+		if (recordTypeFields?.length === 0) {
+			const recordTypeFields: any[] = Object.entries(properties)
+				.filter(([_, property]) =>
+					property.typeMembers &&
+					property.typeMembers.some(member => member.kind === "RECORD_TYPE")
+				)
+				.map(([key, property]) => ({
+					key,
+					property,
+					recordTypeMembers: property.typeMembers.filter(member => member.kind === "RECORD_TYPE")
+				}));
+
+			setRecordTypeFields(recordTypeFields as RecordTypeField[]);
+		}
+	}, []);
+
+
+	useEffect(() => {
+		if (filePath) {
+			rpcClient
+				.getBIDiagramRpcClient()
+				.getEndOfFile({ filePath })
+				.then((res) => {
+					setTargetLineRange({
+						startLine: res,
+						endLine: res,
+					});
+				});
+		}
+	}, [filePath, rpcClient]);
+
+
+	const handleChange = (fieldKey: string, value: any, allValues: FormValues) => {
+		const updatedProperties = updateConfig(fieldKey, value, properties);
+		onChange(updatedProperties, value);
+	};
+
+	const checkReadOnly = (fields: FormField[]) => {
+		return readonly && fields.every(field => field.value === undefined || field.value === null || field.value === "");
+	};
+
+
+	return (
+		<ResourceConfigContainer>
+			{configFields.length > 0 && filePath && targetLineRange && !checkReadOnly(configFields) &&
+				<FormGeneratorNew
+					fileName={filePath}
+					fields={configFields}
+					targetLineRange={targetLineRange}
+					onChange={handleChange}
+					recordTypeFields={recordTypeFields}
+					nestedForm={true}
+					compact={true}
+					helperPaneSide='left'
+					onSubmit={() => { }}
+					hideSaveButton={true}
+				/>
+			}
+		</ResourceConfigContainer>
+	);
+}
+
+
+function convertConfig(properties: ConfigProperties, readonly: boolean): FormField[] {
+	const formFields: FormField[] = [];
+	for (const key in properties) {
+		const expression = properties[key];
+		const formField: FormField = {
+			key: key,
+			label: expression?.metadata.label || key.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, str => str.toUpperCase()),
+			type: expression.valueType,
+			documentation: expression?.metadata.description || "",
+			valueType: expression.valueTypeConstraint,
+			editable: expression.editable && !readonly,
+			enabled: expression.enabled ?? true,
+			optional: expression.optional,
+			value: expression.value,
+			valueTypeConstraint: expression.valueTypeConstraint,
+			advanced: expression.value ? false : true,
+			diagnostics: [],
+			items: expression.items,
+			placeholder: expression.placeholder,
+			lineRange: expression?.codedata?.lineRange
+		}
+		formFields.push(formField);
+	}
+	return formFields;
+}
+
+function updateConfig(fieldKey: string, value: any, properties: ConfigProperties): ConfigProperties {
+	properties[fieldKey].value = value;
+	return properties;
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourcePath/ResourcePath.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourcePath/ResourcePath.tsx
index 5f871d249dd..a4b3f745daf 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourcePath/ResourcePath.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourcePath/ResourcePath.tsx
@@ -17,13 +17,39 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { Codicon, Dropdown, LinkButton, TextField } from '@wso2/ui-toolkit';
+import { Codicon, Dropdown, LinkButton, TextField, Typography } from '@wso2/ui-toolkit';
 import styled from '@emotion/styled';
-import { PropertyModel } from '@wso2/ballerina-core';
+import { ParameterModel, PropertyModel } from '@wso2/ballerina-core';
 import { SegmentParam } from '@wso2/ballerina-side-panel';
 import { parseResourcePath } from '../Utils/ResourcePathParser';
+import { getColorByMethod } from '../../../../../../utils/utils';
+import { ParamEditor } from '../Parameters/ParamEditor';
+import { removeForwardSlashes } from '../../../utils';
 
-const verbs = [
+
+const MethodLabel = styled.label`
+    display: flex;
+	margin-bottom: 5px;
+    font-size: var(--vscode-editor-font-size);
+	width: 100px;
+`;
+
+const MethodBox = styled.div`
+    display: flex;
+    justify-content: center;
+    height: 25px;
+    min-width: 70px;
+    width: auto;
+    margin-left: 0px;
+    text-align: center;
+    padding: 3px 5px 3px 5px;
+    background-color: ${(p: any) => p.color};
+    color: #FFF;
+    align-items: center;
+    font-weight: bold;
+`;
+
+export const verbs = [
 	{
 		content: 'GET',
 		id: 'GET',
@@ -72,13 +98,17 @@ export interface ResourcePathProps {
 	method: PropertyModel;
 	onChange: (method: PropertyModel, path: PropertyModel) => void;
 	onError: (hasErros: boolean) => void;
+	isNew?: boolean;
+	readonly?: boolean;
 }
 
 export function ResourcePath(props: ResourcePathProps) {
-	const { method, path, onChange, onError } = props;
+	const { method, path, onChange, onError, isNew, readonly } = props;
 
 	const [inputValue, setInputValue] = useState('');
 	const [resourcePathErrors, setResourcePathErrors] = useState<string>("");
+	const [editModel, setEditModel] = useState<ParameterModel | undefined>(undefined);
+	const [showParamEditor, setShowParamEditor] = useState<boolean>(false);
 
 	useEffect(() => {
 		const resourePathStr = path.value ? path.value : "";
@@ -122,9 +152,56 @@ export function ResourcePath(props: ResourcePathProps) {
 	}
 
 	const handlePathAdd = () => {
-		const value = !path.value || path.value == '' ? '[string param]' : `${path.value}/[string param]`;
+		// Create a new parameter model for path parameter
+		const newPathParam: ParameterModel = {
+			name: {
+				value: 'param',
+				valueType: 'IDENTIFIER',
+				placeholder: 'param',
+				enabled: true
+			},
+			type: {
+				value: 'string',
+				valueType: 'EXPRESSION',
+				placeholder: 'string',
+				enabled: true
+			},
+			kind: 'REQUIRED',
+			enabled: true,
+			metadata: {
+				label: 'Path Parameter',
+				description: 'Path parameter configuration'
+			}
+		};
+		setEditModel(newPathParam);
+		setShowParamEditor(true);
+	};
+
+	const onChangeParam = (param: ParameterModel) => {
+		setEditModel(param);
+	};
+
+	const onSaveParam = (param: ParameterModel) => {
+		// Extract the parameter name and type from the saved param
+		const paramName = param.name.value || 'param';
+		const paramType = param.type.value || 'string';
+
+		// Build the path parameter string: [type paramName]
+		const pathParamStr = `[${paramType} ${paramName}]`;
+
+		// Append to existing path
+		const value = !path.value || path.value === '' ? pathParamStr : `${path.value}/${pathParamStr}`;
 		setInputValue(value);
 		onChange(method, { ...path, value });
+
+		// Close the editor
+		setShowParamEditor(false);
+		setEditModel(undefined);
+	};
+
+	const onParamEditCancel = () => {
+		setShowParamEditor(false);
+		setEditModel(undefined);
 	};
 
 
@@ -133,23 +210,33 @@ export function ResourcePath(props: ResourcePathProps) {
 			<PathContainer>
 				<div
 					style={{
-						width: 160,
-						marginTop: -1.3
+						width: 100,
+						marginRight: isNew ? 10 : 0
 					}}
 				>
-					<Dropdown
-						sx={{ width: 160 }}
-						isRequired
-						errorMsg=""
-						id="drop-down"
-						items={verbs}
-						label="HTTP Method"
-						onValueChange={handleMethodChange}
-						value={method.value.toUpperCase() || method.placeholder.toUpperCase()}
-					/>
+					{!isNew && !readonly && (
+						<Dropdown
+							sx={{ width: 100, background: getColorByMethod(method.value?.toUpperCase()), color: "#fff" }}
+							isRequired
+							errorMsg=""
+							id="drop-down"
+							items={verbs}
+							label="HTTP Method"
+							onValueChange={handleMethodChange}
+							value={method.value.toUpperCase() || method.placeholder.toUpperCase()}
+						/>
+					)}
+					{(isNew || readonly) && (
+						<>
+							<MethodLabel>HTTP Method</MethodLabel>
+							<MethodBox color={getColorByMethod(method.value?.toUpperCase())}>
+								{method.value.toUpperCase()}
+							</MethodBox>
+						</>
+					)}
 				</div>
 				<TextField
-					sx={{ marginLeft: 15, flexGrow: 1 }}
+					sx={{ marginLeft: isNew ? 0 : 15, flexGrow: 1 }}
 					autoFocus
 					required
 					errorMsg={resourcePathErrors}
@@ -159,18 +246,34 @@ export function ResourcePath(props: ResourcePathProps) {
 						const trimmedInput = input.startsWith('/') ? input.slice(1) : input;
 						handlePathChange(trimmedInput);
 					}}
+					disabled={readonly}
 					onKeyUp={handleBlur}
 					placeholder="path/foo"
-					value={path.value}
+					value={removeForwardSlashes(path.value as string)}
 					onFocus={(e) => e.target.select()}
 				/>
 			</PathContainer>
-			<AddButtonWrapper>
-				<LinkButton onClick={handlePathAdd} >
-					<Codicon name="add" />
-					<>Add Path Param</>
-				</LinkButton>
-			</AddButtonWrapper>
+			<>
+				{showParamEditor && editModel ? (
+					<ParamEditor
+						param={editModel}
+						onChange={onChangeParam}
+						onSave={onSaveParam}
+						onCancel={onParamEditCancel}
+						type="PATH"
+						isNew={true}
+					/>
+				) : (
+					!readonly && (
+						<AddButtonWrapper>
+							<LinkButton onClick={handlePathAdd} >
+								<Codicon name="add" />
+								<>Path Param</>
+							</LinkButton>
+						</AddButtonWrapper>
+					)
+				)}
+			</>
 		</>
 	);
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResourceResponse.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResourceResponse.tsx
index 6270a56959e..a3f8878eea0 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResourceResponse.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResourceResponse.tsx
@@ -34,7 +34,6 @@ export interface ResourceParamProps {
 }
 
 const ResourceResponseContainer = styled.div`
-	margin-bottom: 25px;
 `;
 
 const AddButtonWrapper = styled.div`
@@ -61,6 +60,9 @@ export function ResourceResponse(props: ResourceParamProps) {
         param.name.metadata = schema.name.metadata;
         param.headers.metadata = schema.headers.metadata;
         param.type.metadata = schema.type.metadata;
+        if (param.mediaType) {
+            param.mediaType.metadata = schema.mediaType.metadata;
+        }
         setEditModel(param);
     };
 
@@ -112,7 +114,7 @@ export function ResourceResponse(props: ResourceParamProps) {
                     />
                 )
             })}
-            {!editModel && (
+            {!editModel && !readonly && (
                 <AddButtonWrapper>
                     <LinkButton sx={readonly && { color: "var(--vscode-badge-background)" }} onClick={!readonly && onAddClick} >
                         <Codicon name="add" />
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseEditor.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseEditor.tsx
index 0257ad0eea8..de1deeed23b 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseEditor.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseEditor.tsx
@@ -17,24 +17,19 @@
  */
 // tslint:disable: jsx-no-multiline-js
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 import { Divider, OptionProps, Typography } from '@wso2/ui-toolkit';
 import { EditorContainer, EditorContent } from '../../../styles';
-import { LineRange, PropertyModel, ResponseCode, StatusCodeResponse } from '@wso2/ballerina-core';
+import { LineRange, PropertyModel, StatusCodeResponse, VisibleTypeItem, VisibleTypesResponse } from '@wso2/ballerina-core';
+import { TypeHelperContext } from '../../../../../../constants';
 import { getDefaultResponse, getTitleFromStatusCodeAndType, HTTP_METHOD } from '../../../utils';
 import { FormField, FormImports, FormValues } from '@wso2/ballerina-side-panel';
 import FormGeneratorNew from '../../../../Forms/FormGeneratorNew';
 import { useRpcContext } from '@wso2/ballerina-rpc-client';
-import { URI, Utils } from 'vscode-uri';
 import { getImportsForProperty } from '../../../../../../utils/bi';
 
 
-enum Views {
-    NEW = "NEW",
-    EXISTING = "EXISTING",
-}
-
 export interface ParamProps {
     index: number;
     method: HTTP_METHOD;
@@ -50,16 +45,16 @@ export function ResponseEditor(props: ParamProps) {
     const { rpcClient } = useRpcContext();
 
     const [filePath, setFilePath] = useState<string>('');
-    const [responseCodes, setResponseCodes] = useState<ResponseCode[]>([]);
+    const [responseCodes, setResponseCodes] = useState<VisibleTypesResponse>([]);
 
     const [targetLineRange, setTargetLineRange] = useState<LineRange>();
 
     const [newFields, setNewFields] = useState<FormField[]>([]);
+    const newFieldsRef = useRef<FormField[]>([]);
 
     useEffect(() => {
-        rpcClient.getServiceDesignerRpcClient().getResourceReturnTypes({ filePath: undefined, context: undefined }).then((res) => {
-            console.log("Resource Return Types: ", res);
-            setResponseCodes(res.completions);
+        rpcClient.getServiceDesignerRpcClient().getResourceReturnTypes({ filePath: undefined, context: TypeHelperContext.HTTP_STATUS_CODE }).then((res) => {
+            setResponseCodes(res);
             rpcClient.getVisualizerRpcClient().joinProjectPath('main.bal').then((filePath) => {
                 setFilePath(filePath);
             });
@@ -116,11 +111,12 @@ export function ResponseEditor(props: ParamProps) {
                 key: `statusCode`,
                 value: getTitleFromStatusCodeAndType(responseCodes, res.statusCode.value, res.type.value),
                 itemOptions: getCategorizedOptions(responseCodes),
-                onValueChange: (value: string) => {
-                    const responseCodeData = responseCodes.find(code => getTitleFromStatusCodeAndType(responseCodes, code.statusCode, code.type) === value);
-                    res.statusCode.value = responseCodeData.statusCode;
-                    res.type.value = responseCodeData.type;
-                    if (NO_BODY_TYPES.includes(responseCodeData.type)) {
+                onValueChange: (value: string | boolean) => {
+                    const responseCodeData = responseCodes.find(code => getTitleFromStatusCodeAndType(responseCodes, code.labelDetails.detail, code.detail) === value);
+                    res.statusCode.value = responseCodeData.labelDetails.detail;
+                    const description = responseCodeData.labelDetails.description as string;
+                    res.type.value = responseCodeData.detail;
+                    if (NO_BODY_TYPES.includes(responseCodeData.detail) || description === "User-Defined") {
                         updateNewFields(res, false);
                     } else {
                         updateNewFields(res, true);
@@ -133,22 +129,113 @@ export function ResponseEditor(props: ParamProps) {
             fields.push({
                 ...convertPropertyToFormField(res.body),
                 key: `body`,
+                onValueChange: (value: string | boolean) => {
+                    switch (value) {
+                        case "json":
+                            res.mediaType.value = "application/json";
+                            break;
+                        case "xml":
+                            res.mediaType.value = "application/xml";
+                            break;
+                        case "string":
+                            res.mediaType.value = "text/plain";
+                            break;
+                    }
+                    // Update the mediaType field in the fields array
+                    const updatedFields = newFieldsRef.current.map(field => {
+                        if (field.key === 'mediaType') {
+                            return {
+                                ...field,
+                                value: res.mediaType.value,
+                                defaultValue: res.mediaType.value
+                            };
+                        }
+                        if (field.key === 'body') {
+                            return {
+                                ...field,
+                                value: value as string,
+                                defaultValue: value as string
+                            };
+                        }
+                        return field;
+                    });
+                    newFieldsRef.current = updatedFields;
+                    setNewFields([...updatedFields]);
+                }
             });
-            fields.push({
-                ...convertPropertyToFormField(res.name),
-                key: `name`,
-            },);
-            fields.push({
-                ...convertPropertyToFormField(res.headers, defaultItems),
-                key: `headers`,
-            });
+            if (res.mediaType) {
+                fields.push({
+                    ...convertPropertyToFormField(res.mediaType),
+                    type: "AUTOCOMPLETE",
+                    items: ["application/json", "application/xml", "application/x-www-form-urlencoded", "multipart/form-data", "text/plain"],
+                    key: `mediaType`,
+                    defaultValue: res.mediaType.value,
+                });
+            }
+            if (response.editable || res.headers.value !== undefined) {
+                fields.push({
+                    ...convertPropertyToFormField(res.headers, defaultItems),
+                    key: `headers`,
+                });
+            }
+            if (response.editable) {
+                fields.push({
+                    ...convertPropertyToFormField(res.name),
+                    key: `check`,
+                    type: "FLAG",
+                    label: "Make this response reusable",
+                    documentation: "Check this option to make this response reusable",
+                    onValueChange: (value: string | boolean) => {
+                        if (value === true) {
+
+                            // Get a default value for the response name
+                            const responseCodeData = responseCodes.find(code => code.labelDetails.detail === res.statusCode.value);
+                            const responseCodeName = responseCodeData?.label || "";
+
+                            // Default name for the response: removes spaces from response code name and appends 'Response'. Example: AcceptedResponse.
+                            const defaultName = `${responseCodeName.replace(/\s+/g, '')}Response`;
+
+                            // When checked, add the name field after the checkbox
+                            const nameField: FormField = {
+                                ...convertPropertyToFormField(res.name),
+                                key: `name`,
+                                value: defaultName,
+                                defaultValue: defaultName
+                            };
+                            // Insert name field right after the checkbox
+                            const checkboxIndex = newFieldsRef.current.findIndex(f => f.key === 'check');
+                            newFieldsRef.current.splice(checkboxIndex + 1, 0, nameField);
+                            newFieldsRef.current = [...newFieldsRef.current];
+                            setNewFields([...newFieldsRef.current]);
+                        } else {
+                            // When unchecked, remove the name field and clear its value
+                            res.name.value = "";
+                            const filteredFields = newFieldsRef.current.filter(f => f.key !== 'name');
+                            newFieldsRef.current = [...filteredFields];
+                            setNewFields([...newFieldsRef.current]);
+                        }
+                    }
+                });
+            }
+
+            // If name already has a value, add the name field by default
+            if (res.name.value) {
+                fields.push({
+                    ...convertPropertyToFormField(res.name),
+                    key: `name`,
+                    label: "Response Name",
+                    documentation: "Enter a unique name for this reusable response",
+                    type: "STRING",
+                });
+            }
         }
 
-        setNewFields(fields);
+        newFieldsRef.current = [...fields];
+        setNewFields([...newFieldsRef.current]);
     };
 
     useEffect(() => {
-        if (responseCodes.length > 0) {
+        if (responseCodes?.length > 0) {
             updateNewFields(response);
         }
     }, [response, responseCodes]);
@@ -166,7 +253,7 @@ export function ResponseEditor(props: ParamProps) {
         if (dataValues['name']) {
             return true;
         }
-        const code = responseCodes.find(code => getTitleFromStatusCodeAndType(responseCodes, code.statusCode, code.type) === dataValues['statusCode']).statusCode;
+        const code = responseCodes.find(code => getTitleFromStatusCodeAndType(responseCodes, code.labelDetails.detail, code.detail) === dataValues['statusCode']).labelDetails.detail;
         const defaultCode = getDefaultResponse(method);
 
         // Set optional false for the response name
@@ -178,20 +265,21 @@ export function ResponseEditor(props: ParamProps) {
         response.body.value = dataValues['body'];
         response.name.value = dataValues['name'];
         response.headers.values = dataValues['headers'];
-
-        if (code === defaultCode) { // Case 1: Use select the default response success for the accessor
-            // If the user add a header type then user should fill the name field as well
-            if (dataValues['headers'] && dataValues['headers'].length > 0) {
-                updateNewFields({ ...response });
-                return false;
-            }
-        } else { // Case 2: User select a response other than the default success response
-            // If user add a body or header values then user must add a name.
-            if (dataValues['body'] || (dataValues['headers'] && dataValues['headers'].length > 0)) {
-                updateNewFields({ ...response });
-                return false;
-            }
-        }
+        response.mediaType.value = dataValues['mediaType'];
+
+        // if (code === defaultCode) { // Case 1: Use select the default response success for the accessor
+        //     // If the user add a header type then user should fill the name field as well
+        //     if (dataValues['headers'] && dataValues['headers'].length > 0) {
+        //         updateNewFields({ ...response });
+        //         return false;
+        //     }
+        // } else { // Case 2: User select a response other than the default success response
+        //     // If user add a body or header values then user must add a name.
+        //     if (dataValues['body'] || (dataValues['headers'] && dataValues['headers'].length > 0)) {
+        //         updateNewFields({ ...response });
+        //         return false;
+        //     }
+        // }
         return true;
     }
 
@@ -200,11 +288,12 @@ export function ResponseEditor(props: ParamProps) {
         console.log("Add New Response: ", dataValues);
         if (isValidResponse(dataValues)) {
             // Set the values
-            const code = responseCodes.find(code => getTitleFromStatusCodeAndType(responseCodes, code.statusCode, code.type) === dataValues['statusCode']).statusCode;
+            const code = responseCodes.find(code => getTitleFromStatusCodeAndType(responseCodes, code.labelDetails.detail, code.detail) === dataValues['statusCode']).labelDetails.detail;
             response.statusCode.value = String(code);
             response.body.value = dataValues['body'];
             response.name.value = dataValues['name'];
             response.headers.values = dataValues['headers'];
+            response.mediaType.value = dataValues['mediaType'];
             response.body.imports = getImportsForProperty('body', formImports);
             onSave(response, index);
         }
@@ -235,23 +324,23 @@ export function ResponseEditor(props: ParamProps) {
     });
 
     // Helper to create a regular option
-    const createOption = (item: ResponseCode): OptionProps => ({
-        id: `${item.statusCode}-${item.type}`,
+    const createOption = (item: VisibleTypeItem): OptionProps => ({
+        id: `${item.labelDetails.detail}-${item.detail}`,
         content: (
             <span style={{ padding: "4px" }}>
-                {item.statusCode !== "Dynamic" ? `${item.statusCode} ` : "Dynamic"} - {item.label}
+                {item.labelDetails.detail !== "Dynamic" ? `${item.labelDetails.detail} ` : "Dynamic"} - {item.label}
             </span>
         ),
-        value: `${item.statusCode} - ${item.label}`,
+        value: `${item.labelDetails.detail} - ${item.label}`,
     });
 
     // Main function to categorize and flatten the list
-    function getCategorizedOptions(responseCodes: ResponseCode[]): OptionProps[] {
-        const dynamic = responseCodes.filter(i => i.type === "http:Response");
-        const error = responseCodes.filter(i => i.type === "error");
-        const userDefined = responseCodes.filter(i => i.category === "User Defined");
+    function getCategorizedOptions(responseCodes: VisibleTypesResponse): OptionProps[] {
+        const dynamic = responseCodes.filter(i => i.detail === "http:Response");
+        const error = responseCodes.filter(i => i.detail === "error");
+        const userDefined = responseCodes.filter(i => i.labelDetails.description === "User-Defined");
         const preBuilt = responseCodes.filter(i =>
-            ["1XX", "2XX", "3XX", "4XX", "5XX"].includes(i.category)
+            ["1XX", "2XX", "3XX", "4XX", "5XX"].includes(i.labelDetails.description)
         );
         let options: OptionProps[] = [];
 
@@ -259,25 +348,25 @@ export function ResponseEditor(props: ParamProps) {
             options.push(createHeaderOption("User Defined Responses", 0));
             options = options.concat(userDefined.map(createOption));
         }
-        if (preBuilt.filter(i => i.category === "2XX").length > 0) {
+        if (preBuilt.filter(i => i.labelDetails.description === "2XX").length > 0) {
             options.push(createHeaderOption("2XX - Success", userDefined.length > 0 ? 3 : 0));
-            options = options.concat(preBuilt.filter(i => i.category === "2XX").map(createOption));
+            options = options.concat(preBuilt.filter(i => i.labelDetails.description === "2XX").map(createOption));
         }
-        if (preBuilt.filter(i => i.category === "1XX").length > 0) {
+        if (preBuilt.filter(i => i.labelDetails.description === "1XX").length > 0) {
             options.push(createHeaderOption("1XX - Informational"));
-            options = options.concat(preBuilt.filter(i => i.category === "1XX").map(createOption));
+            options = options.concat(preBuilt.filter(i => i.labelDetails.description === "1XX").map(createOption));
         }
-        if (preBuilt.filter(i => i.category === "3XX").length > 0) {
+        if (preBuilt.filter(i => i.labelDetails.description === "3XX").length > 0) {
             options.push(createHeaderOption("3XX - Redirection"));
-            options = options.concat(preBuilt.filter(i => i.category === "3XX").map(createOption));
+            options = options.concat(preBuilt.filter(i => i.labelDetails.description === "3XX").map(createOption));
         }
-        if (preBuilt.filter(i => i.category === "4XX").length > 0) {
+        if (preBuilt.filter(i => i.labelDetails.description === "4XX").length > 0) {
             options.push(createHeaderOption("4XX - Client Error"));
-            options = options.concat(preBuilt.filter(i => i.category === "4XX").map(createOption));
+            options = options.concat(preBuilt.filter(i => i.labelDetails.description === "4XX").map(createOption));
         }
-        if (preBuilt.filter(i => i.category === "5XX").length > 0) {
+        if (preBuilt.filter(i => i.labelDetails.description === "5XX").length > 0) {
             options.push(createHeaderOption("5XX - Server Error"));
-            options = options.concat(preBuilt.filter(i => i.category === "5XX").map(createOption));
+            options = options.concat(preBuilt.filter(i => i.labelDetails.description === "5XX").map(createOption));
         }
         if (error.length) {
             options.push(createHeaderOption("Error Response"));
@@ -293,22 +382,20 @@ export function ResponseEditor(props: ParamProps) {
     return (
         <EditorContainer>
             <EditorContent>
-                <Typography sx={{ marginBlockEnd: 10 }} variant="h4">Response Configuration</Typography>
+                <Typography sx={{ marginBlockEnd: 0, marginTop: 5 }} variant="h4">Response Configuration</Typography>
             </EditorContent>
             <Divider />
             {filePath && targetLineRange &&
-                <div>
-                    <FormGeneratorNew
-                        fileName={filePath}
-                        targetLineRange={targetLineRange}
-                        fields={newFields}
-                        onBack={handleOnCancel}
-                        onSubmit={handleOnNewSubmit}
-                        submitText={isEdit ? "Save" : "Add"}
-                        nestedForm={true}
-                        helperPaneSide='left'
-                    />
-                </div>
+                <FormGeneratorNew
+                    fileName={filePath}
+                    targetLineRange={targetLineRange}
+                    fields={newFields}
+                    onBack={handleOnCancel}
+                    onSubmit={handleOnNewSubmit}
+                    submitText={isEdit ? "Save" : "Add"}
+                    nestedForm={true}
+                    helperPaneSide='left'
+                />
             }
         </EditorContainer >
     );
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseItem.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseItem.tsx
index f23eeb96776..430b467a37e 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseItem.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseItem.tsx
@@ -68,7 +68,7 @@ export function ResponseItem(props: ParamItemProps) {
                 <div
                     data-test-id={`${response.body.value}-resp`}
                     className={readonly ? disabledHeaderLabel : headerLabelStyles}
-                    onClick={handleEdit}
+                    onClick={!readonly ? handleEdit : undefined}
                 >
                     {response.name.value || response.body.value || response.type.value || "anydata"}
                 </div>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/index.tsx
index def5ba66433..369f7864b76 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/index.tsx
@@ -18,36 +18,114 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { ActionButtons, Divider, SidePanelBody, Typography, ProgressIndicator } from '@wso2/ui-toolkit';
-import { ResourcePath } from './ResourcePath/ResourcePath';
+import { ActionButtons, Divider, SidePanelBody, Typography, ProgressIndicator, ThemeColors, Button, Icon, Tooltip, CheckBoxGroup, CheckBox } from '@wso2/ui-toolkit';
+import { ResourcePath, verbs } from './ResourcePath/ResourcePath';
 import { ResourceResponse } from './ResourceResponse/ResourceResponse';
 import styled from '@emotion/styled';
-import { HTTP_METHOD } from '../../utils';
-import { FunctionModel, ParameterModel, PropertyModel, ReturnTypeModel } from '@wso2/ballerina-core';
+import { getDefaultResponse, HTTP_METHOD, removeForwardSlashes, sanitizedHttpPath } from '../../utils';
+import { ConfigProperties, FunctionModel, ParameterModel, HttpPayloadContext, PropertyModel, ReturnTypeModel } from '@wso2/ballerina-core';
 import { Parameters } from './Parameters/Parameters';
+import { PanelContainer } from '@wso2/ballerina-side-panel';
+import { ResourceConfig } from './ResourceConfig/ResourceConfig';
 
-const AdvancedParamTitleWrapper = styled.div`
-	display: flex;
-	flex-direction: row;
-`;
+namespace S {
+	export const Grid = styled.div<{ columns: number }>`
+        display: grid;
+        grid-template-columns: repeat(${({ columns }: { columns: number }) => columns}, minmax(0, 1fr));
+        gap: 8px;
+        width: 100%;
+        margin-top: 8px;
+        margin-bottom: 12px;
+    `;
+	export const Component = styled.div<{ enabled?: boolean }>`
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 5px;
+        padding: 12px;
+        border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+        border-radius: 5px;
+        height: 36px;
+        cursor: ${({ enabled }: { enabled?: boolean }) => (enabled ? "pointer" : "not-allowed")};
+        font-size: 14px;
+        min-width: 160px;
+        max-width: 100%;
+        ${({ enabled }: { enabled?: boolean }) => !enabled && "opacity: 0.5;"}
+        &:hover {
+            ${({ enabled }: { enabled?: boolean }) =>
+			enabled &&
+			`
+                background-color: ${ThemeColors.PRIMARY_CONTAINER};
+                border: 1px solid ${ThemeColors.HIGHLIGHT};
+            `}
+        }
+    `;
+	export const ComponentTitle = styled.div`
+        white-space: nowrap;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        word-break: break-word;
+    `;
+	export const IconContainer = styled.div`
+        padding: 0 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        & svg {
+            height: 16px;
+            width: 16px;
+        }
+    `;
+}
 
 export interface ResourceFormProps {
 	model: FunctionModel;
 	isSaving: boolean;
-	onSave: (functionModel: FunctionModel) => void;
+	onSave: (functionModel: FunctionModel, openDiagram?: boolean) => void;
 	onClose: () => void;
+	isNew?: boolean;
+	payloadContext?: HttpPayloadContext;
+	filePath?: string;
 }
 
 export function ResourceForm(props: ResourceFormProps) {
-	const { model, isSaving, onSave, onClose } = props;
+	const { model, isSaving, onSave, onClose, isNew, payloadContext, filePath } = props;
 
 	const [functionModel, setFunctionModel] = useState<FunctionModel>(model);
 	const [isPathValid, setIsPathValid] = useState<boolean>(false);
 
+	const [createMore, setCreateMore] = useState<boolean>(false);
+	const [method, setMethod] = useState<string>("");
+
 	useEffect(() => {
 		console.log("Function Model", model);
 	}, []);
 
+	const closeMethod = () => {
+		setMethod("");
+	}
+
+	const setResourceMethod = (method: string) => {
+		setMethod(method);
+		const defaultStatusCode = getDefaultResponse(method as HTTP_METHOD);
+
+		const updatedResponse = {
+			...model.returnType.responses[0],
+			statusCode: { ...model.returnType.responses[0].statusCode, value: defaultStatusCode }
+		}
+
+		const updatedFunctionModel = {
+			...model,
+			accessor: { ...model.accessor, value: method },
+			returnType: { ...model.returnType, responses: [updatedResponse] },
+		};
+		setFunctionModel(updatedFunctionModel as FunctionModel);
+	}
+
 	const onPathChange = (method: PropertyModel, path: PropertyModel) => {
 		const updatedFunctionModel = {
 			...functionModel,
@@ -81,27 +159,126 @@ export function ResourceForm(props: ResourceFormProps) {
 		console.log("Response Change: ", updatedFunctionModel);
 	};
 
+	const handleConfigChange = (properties: ConfigProperties, value: any) => {
+		const updatedFunctionModel = {
+			...functionModel,
+			properties: { ...functionModel.properties, ...properties }
+		};
+		setFunctionModel(updatedFunctionModel);
+		console.log("Config Change: ", updatedFunctionModel);
+	};
+
 	const handleSave = () => {
 		console.log("Saved Resource", functionModel);
-		onSave(functionModel);
+		if (createMore) {
+			closeMethod();
+		}
+		functionModel.name.value = sanitizedHttpPath(functionModel.name.value as string);
+		onSave(functionModel, !createMore);
+	}
+
+	const editForm = () => {
+		return (
+			<>
+				{isSaving && <ProgressIndicator id="resource-loading-bar" />}
+				<SidePanelBody>
+					<ResourcePath method={functionModel.accessor} path={functionModel.name} onChange={onPathChange}
+						onError={onResourcePathError} readonly={!functionModel.editable} />
+					<Divider />
+					<Parameters
+						readonly={!functionModel.editable}
+						showPayload={(functionModel.accessor.value && functionModel.accessor.value.toUpperCase() !== "GET")}
+						parameters={functionModel.parameters}
+						onChange={handleParamChange}
+						schemas={functionModel.schema}
+						pathName={functionModel?.name?.value}
+						payloadContext={{
+							...payloadContext,
+							resourceBasePath: functionModel?.name?.value || '',
+							resourceMethod: functionModel?.accessor?.value || '',
+							resourceDocumentation: functionModel?.documentation?.value || ''
+						}}
+					/>
+					<Typography sx={{ marginBlockEnd: 10 }} variant="h4">Responses</Typography>
+					<ResourceResponse method={functionModel.accessor.value.toUpperCase() as HTTP_METHOD} response={functionModel.returnType} onChange={handleResponseChange} readonly={!functionModel.editable} />
+					<ResourceConfig properties={functionModel.properties} filePath={filePath} onChange={handleConfigChange} readonly={!functionModel.editable} />
+					<ActionButtons
+						primaryButton={{ text: isSaving ? "Saving..." : "Save", onClick: handleSave, tooltip: isSaving ? "Saving..." : "Save", disabled: !isPathValid || isSaving || !functionModel.editable, loading: isSaving }}
+						secondaryButton={{ text: "Cancel", onClick: onClose, tooltip: "Cancel", disabled: isSaving }}
+						sx={{ justifyContent: "flex-end" }}
+					/>
+				</SidePanelBody>
+			</>
+		)
+	}
+
+	const newForm = () => {
+		return (
+			<>
+				{isSaving && <ProgressIndicator id="resource-loading-bar" />}
+				<SidePanelBody>
+					{/* Render HTTP Methods as components using S.Component and S.Grid */}
+					<div style={{ marginBottom: "16px" }}>
+						<S.Grid columns={1}>
+							{verbs.map((method: PropertyModel, idx: number) => (
+								<S.Component
+									key={method.value || idx}
+									enabled={true}
+									onClick={() => setResourceMethod(method.value)}
+								>
+									<S.ComponentTitle>
+										{method.value}
+									</S.ComponentTitle>
+								</S.Component>
+							))}
+						</S.Grid>
+					</div>
+				</SidePanelBody>
+				{/* This is for adding a http resource */}
+				<PanelContainer
+					title={`New Resource Configuration`}
+					show={!!method}
+					onClose={closeMethod}
+					width={400}
+				>
+					<>
+						{isSaving && <ProgressIndicator id="resource-loading-bar" />}
+						<SidePanelBody>
+							<ResourcePath method={functionModel.accessor} path={functionModel.name} onChange={onPathChange} isNew={true} onError={onResourcePathError} />
+							<Divider />
+							<Parameters
+								isNewResource={true}
+								showPayload={(functionModel.accessor.value && functionModel.accessor.value.toUpperCase() !== "GET")}
+								parameters={functionModel.parameters}
+								onChange={handleParamChange}
+								schemas={functionModel.schema}
+								pathName={functionModel?.name?.value}
+								payloadContext={{
+									...payloadContext,
+									resourceBasePath: functionModel?.name?.value || '',
+									resourceMethod: functionModel?.accessor?.value || '',
+									resourceDocumentation: functionModel?.documentation?.value || ''
+								}}
+							/>
+							<Typography sx={{ marginBlockEnd: 10 }} variant="h4">Responses</Typography>
+							<ResourceResponse method={functionModel.accessor.value.toUpperCase() as HTTP_METHOD} response={functionModel.returnType} onChange={handleResponseChange} />
+							<Divider sx={{ marginBottom: 30 }} />
+							<Tooltip content='Keep adding more resources' containerSx={{ position: "fixed", width: "180px", marginLeft: 1 }}>
+								<CheckBoxGroup columns={2}>
+									<CheckBox label='Add more resources' checked={createMore} onChange={() => setCreateMore(!createMore)} />
+								</CheckBoxGroup>
+							</Tooltip>
+							<ActionButtons
+								primaryButton={{ text: isSaving ? "Saving..." : "Save", onClick: handleSave, tooltip: isSaving ? "Saving..." : "Save", disabled: !isPathValid || isSaving, loading: isSaving }}
+								secondaryButton={{ text: "Cancel", onClick: closeMethod, tooltip: "Cancel", disabled: isSaving }}
+								sx={{ justifyContent: "flex-end" }}
+							/>
+						</SidePanelBody>
+					</>
+				</PanelContainer >
+			</>
+		)
 	}
 
-	return (
-		<>
-			{isSaving && <ProgressIndicator id="resource-loading-bar" />}
-			<SidePanelBody>
-				<ResourcePath method={functionModel.accessor} path={functionModel.name} onChange={onPathChange}
-					onError={onResourcePathError} />
-				<Divider />
-				<Parameters showPayload={(functionModel.accessor.value && functionModel.accessor.value.toUpperCase() !== "GET")} parameters={functionModel.parameters} onChange={handleParamChange} schemas={functionModel.schema} />
-				<Typography sx={{ marginBlockEnd: 10 }} variant="h4">Responses</Typography>
-				<ResourceResponse method={functionModel.accessor.value.toUpperCase() as HTTP_METHOD} response={functionModel.returnType} onChange={handleResponseChange} />
-				<ActionButtons
-					primaryButton={{ text: isSaving ? "Saving..." : "Save", onClick: handleSave, tooltip: isSaving ? "Saving..." : "Save", disabled: !isPathValid || isSaving, loading: isSaving }}
-					secondaryButton={{ text: "Cancel", onClick: onClose, tooltip: "Cancel", disabled: isSaving }}
-					sx={{ justifyContent: "flex-end" }}
-				/>
-			</SidePanelBody>
-		</>
-	);
+	return isNew ? newForm() : editForm();
 }
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 6ee1c858d54..efe009fba86 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
@@ -25,11 +25,11 @@ import { URI, Utils } from "vscode-uri";
 import { FormGeneratorNew } from "../../Forms/FormGeneratorNew";
 import { FormHeader } from "../../../../components/FormHeader";
 import { getImportsForProperty } from "../../../../utils/bi";
+import { removeForwardSlashes, sanitizedHttpPath } from "../utils";
 
 const Container = styled.div`
     /* padding: 0 20px 20px; */
     max-width: 600px;
-    height: 100%;
     > div:last-child {
         /* padding: 20px 0; */
         > div:last-child {
@@ -67,20 +67,18 @@ interface ServiceConfigFormProps {
     isSaving?: boolean;
     onBack?: () => void;
     formSubmitText?: string;
+    onChange?: (data: ServiceModel) => void;
 }
 
 export function ServiceConfigForm(props: ServiceConfigFormProps) {
     const { rpcClient } = useRpcContext();
 
     const [serviceFields, setServiceFields] = useState<FormField[]>([]);
-    const { serviceModel, onSubmit, onBack, openListenerForm, formSubmitText = "Next", isSaving } = props;
+    const { serviceModel, onSubmit, onBack, openListenerForm, formSubmitText = "Next", isSaving, onChange } = props;
     const [filePath, setFilePath] = useState<string>('');
     const [targetLineRange, setTargetLineRange] = useState<LineRange>();
     const [recordTypeFields, setRecordTypeFields] = useState<RecordTypeField[]>([]);
 
-    const createTitle = `Provide the necessary configuration details for the ${serviceModel.name} to complete the setup.`;
-    const editTitle = `Update the configuration details for the ${serviceModel.name} as needed.`
-
     useEffect(() => {
         // Check if the service is HTTP protocol and any properties with choices
         const hasPropertiesWithChoices = serviceModel?.listenerProtocol === "http" &&
@@ -165,12 +163,42 @@ export function ServiceConfigForm(props: ServiceConfigFormProps) {
             } else if (data[val.key] !== undefined) {
                 val.value = data[val.key];
             }
+            if (val.key === "basePath") {
+                val.value = sanitizedHttpPath(data[val.key] as string);
+            }
             val.imports = getImportsForProperty(val.key, formImports);
         })
         const response = updateConfig(serviceFields, serviceModel);
         onSubmit(response);
     };
 
+    const handleServiceChange = (fieldKey: string, value: any, allValues: FormValues) => {
+        if (onChange) {
+            // First, check if any changes exist before modifying serviceFields
+            let hasChanges = false;
+            for (let val of serviceFields) {
+                if (allValues[val.key] !== undefined && allValues[val.key] !== val.value) {
+                    hasChanges = true;
+                    break;
+                }
+            }
+            if (!hasChanges) {
+                return;
+            }
+            // Now, update values
+            serviceFields.forEach(val => {
+                if (allValues[val.key] !== undefined) {
+                    val.value = allValues[val.key];
+                }
+                if (val.key === "basePath") {
+                    val.value = sanitizedHttpPath(allValues[val.key] as string);
+                }
+            });
+            const response = updateConfig(serviceFields, serviceModel);
+            onChange(response);
+        }
+    }
+
     const handleListenerForm = (panel: SubPanel) => {
         if (panel.view === SubPanelView.ADD_NEW_FORM) {
             openListenerForm && openListenerForm();
@@ -197,11 +225,11 @@ export function ServiceConfigForm(props: ServiceConfigFormProps) {
                 <>
                     {serviceFields.length > 0 &&
                         <FormContainer>
-                            <FormHeader title={`${serviceModel.name} Configuration`} />
                             {filePath && targetLineRange &&
                                 <FormGeneratorNew
                                     fileName={filePath}
                                     targetLineRange={targetLineRange}
+                                    nestedForm={true}
                                     fields={serviceFields}
                                     onBack={onBack}
                                     isSaving={isSaving}
@@ -210,6 +238,8 @@ export function ServiceConfigForm(props: ServiceConfigFormProps) {
                                     submitText={formSubmitText}
                                     recordTypeFields={recordTypeFields}
                                     preserveFieldOrder={true}
+                                    onChange={handleServiceChange}
+                                    hideSaveButton={onChange ? true : false}
                                 />
                             }
                         </FormContainer>
@@ -222,10 +252,17 @@ export function ServiceConfigForm(props: ServiceConfigFormProps) {
 
 export default ServiceConfigForm;
 
-function convertConfig(listener: ServiceModel): FormField[] {
+function convertConfig(service: ServiceModel): FormField[] {
     const formFields: FormField[] = [];
-    for (const key in listener.properties) {
-        const expression = listener.properties[key];
+    for (const key in service.properties) {
+        const expression = service.properties[key];
+        if (expression.valueType === "MULTIPLE_SELECT_LISTENER" || expression.valueType === "SINGLE_SELECT_LISTENER") {
+            continue
+        }
+        // Skip readOnlyMetadata as it's a special property that doesn't have standard form fields
+        if (key === "readOnlyMetadata") {
+            continue;
+        }
         const formField: FormField = {
             key: key,
             label: expression?.metadata.label || key.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, str => str.toUpperCase()),
@@ -246,22 +283,26 @@ function convertConfig(listener: ServiceModel): FormField[] {
             lineRange: expression?.codedata?.lineRange
         }
 
+        if (key === "basePath") {
+            formField.value = removeForwardSlashes(formField.value as string);
+        }
+
         formFields.push(formField);
     }
     return formFields;
 }
 
-function updateConfig(formFields: FormField[], listener: ServiceModel): ServiceModel {
+function updateConfig(formFields: FormField[], service: ServiceModel): ServiceModel {
     formFields.forEach(field => {
         const value = field.value;
         if (field.type === "MULTIPLE_SELECT" || field.type === "EXPRESSION_SET") {
-            listener.properties[field.key].values = value as string[];
+            service.properties[field.key].values = value as string[];
         } else {
-            listener.properties[field.key].value = value as string;
+            service.properties[field.key].value = value as string;
         }
         if (value && value.length > 0) {
-            listener.properties[field.key].enabled = true;
+            service.properties[field.key].enabled = true;
         }
     })
-    return listener;
+    return service;
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ListenerEditView.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ListenerEditView.tsx
index 9c99d7e6727..8207980df29 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ListenerEditView.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ListenerEditView.tsx
@@ -109,7 +109,7 @@ export function ListenerEditView(props: ListenerEditViewProps) {
     return (
         <View>
             <TopNavigationBar />
-            <TitleBar title="Listener" subtitle="Configure Listener" />
+            <TitleBar title={listenerModel?.name + " Configuration"} subtitle="Configure Listener" />
             <ViewContent padding>
                 {!listenerModel &&
                     <LoadingContainer>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceConfigureView.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceConfigureView.tsx
new file mode 100644
index 00000000000..53acb4a176d
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceConfigureView.tsx
@@ -0,0 +1,994 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, useRef } from "react";
+import styled from "@emotion/styled";
+import { ConfigVariable, DIRECTORY_MAP, LineRange, ListenerModel, NodePosition, ProjectStructureArtifactResponse, ServiceModel } from "@wso2/ballerina-core";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { Button, Codicon, Icon, LinkButton, ProgressRing, SidePanelBody, SplitView, TabPanel, ThemeColors, TreeView, TreeViewItem, Typography, View, ViewContent } from "@wso2/ui-toolkit";
+import { TopNavigationBar } from "../../../components/TopNavigationBar";
+import { TitleBar } from "../../../components/TitleBar";
+import ListenerConfigForm from "./Forms/ListenerConfigForm";
+import { ServiceEditView } from "./ServiceEditView";
+import { LoadingContainer } from "../../styles";
+import { LoadingRing } from "../../../components/Loader";
+import { getReadableListenerName } from "./utils";
+import { POPUP_IDS, useModalStack } from "../../../Context";
+
+const Container = styled.div`
+    width: 100%;
+    padding: 10px 0px 10px 8px;
+    height: calc(100vh - 220px);
+    overflow-y: auto;
+`;
+
+const SearchStyle = {
+    width: '100%',
+
+    '& > vscode-text-field': {
+        width: '100%',
+        borderRadius: '5px'
+    },
+};
+
+const EmptyReadmeContainer = styled.div`
+    display: flex;
+    margin: 80px 0px;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    height: 100%;
+`;
+
+const Description = styled(Typography)`
+    color: var(--vscode-descriptionForeground);
+`;
+
+const TitleBoxShadow = styled.div`
+    box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
+    height: 3px;
+`;
+
+const TitleContent = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+
+const SearchContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    gap: 40px;
+`;
+
+const AccordionContainer = styled.div`
+    width: 587px;
+    margin-left: 16px;
+    & h4 {
+        margin: 7px 0px;
+    }
+    & .side-panel-body {
+        padding: unset;
+    }
+`;
+
+const ServiceConfigureListenerEditViewContainer = styled.div`
+    display: "flex";
+    flex-direction: "column";
+    gap: 10;
+    margin: 0 20px 20px 0;
+`;
+
+const ListenerConfigHeader = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    width: 568px;
+`;
+
+
+namespace S {
+    export const Grid = styled.div<{ columns: number }>`
+        display: grid;
+        grid-template-columns: repeat(${({ columns }: { columns: number }) => columns}, minmax(0, 1fr));
+        gap: 8px;
+        width: 100%;
+        margin-top: 8px;
+        margin-bottom: 12px;
+    `;
+    export const Component = styled.div<{ enabled?: boolean }>`
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 5px;
+        padding: 5px;
+        border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+        border-radius: 5px;
+        height: 36px;
+        cursor: ${({ enabled }: { enabled?: boolean }) => (enabled ? "pointer" : "not-allowed")};
+        font-size: 14px;
+        min-width: 160px;
+        max-width: 100%;
+        ${({ enabled }: { enabled?: boolean }) => !enabled && "opacity: 0.5;"}
+        &:hover {
+            ${({ enabled }: { enabled?: boolean }) =>
+            enabled &&
+            `
+                background-color: ${ThemeColors.PRIMARY_CONTAINER};
+                border: 1px solid ${ThemeColors.HIGHLIGHT};
+            `}
+        }
+    `;
+    export const ComponentTitle = styled.div`
+        white-space: nowrap;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        word-break: break-word;
+    `;
+    export const IconContainer = styled.div`
+        padding: 0 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        & svg {
+            height: 16px;
+            width: 16px;
+        }
+    `;
+}
+
+const searchIcon = (<Codicon name="search" sx={{ cursor: "auto" }} />);
+
+export interface ServiceConfigureProps {
+    filePath: string;
+    position: NodePosition;
+    listenerName?: string;
+}
+
+interface CategoryWithModules {
+    name: string;
+    modules: string[];
+}
+
+type ConfigVariablesState = {
+    [category: string]: {
+        [module: string]: ConfigVariable[];
+    };
+};
+
+interface ChangeMap {
+    data: ServiceModel | ListenerModel;
+    isService: boolean;
+    filePath: string;
+}
+
+const Overlay = styled.div`
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background: var(--vscode-settings-rowHoverBackground);
+    z-index: 1000;
+`;
+
+export function ServiceConfigureView(props: ServiceConfigureProps) {
+
+    const { rpcClient } = useRpcContext();
+    const [serviceModel, setServiceModel] = useState<ServiceModel>(undefined);
+    const [listeners, setListeners] = useState<ProjectStructureArtifactResponse[]>([]);
+
+    const [isSaving, setIsSaving] = useState<boolean>(false);
+    const [hasChanges, setHasChanges] = useState<boolean>(false);
+
+    const [selectedListener, setSelectedListener] = useState<string | null>(null);
+
+    const [changeMap, setChangeMap] = useState<{ [key: string]: ChangeMap }>({});
+
+    const { addModal, closeModal } = useModalStack()
+
+    // Helper function to create key from filePath and position
+    const getChangeKey = (filePath: string, position: NodePosition) => {
+        return `${filePath}:${position.startLine}:${position.startColumn}:${position.endLine}:${position.endColumn}`;
+    };
+    // Helper function to add a change to the map
+    const addChangeToMap = (filePath: string, position: NodePosition, data: ServiceModel | ListenerModel, isService: boolean) => {
+        const key = getChangeKey(filePath, position);
+        setChangeMap(prev => ({ ...prev, [key]: { data, isService, filePath } }));
+    };
+
+
+    const [configTitle, setConfigTitle] = useState<string>("");
+    const [visibleSection, setVisibleSection] = useState<string | null>("service"); // Track which section is visible
+
+    // Create ref map for accordion containers
+    const accordionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
+
+    // Create ref for service section
+    const serviceRef = useRef<HTMLDivElement | null>(null);
+
+    // Create ref for the scrollable container
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    // Ref to track the current visible section to prevent unnecessary updates
+    const visibleSectionRef = useRef<string | null>("service");
+
+    // Ref for debounce timer
+    const scrollTimerRef = useRef<number | null>(null);
+
+    // State to manage which accordion is expanded
+    const [expandedAccordion, setExpandedAccordion] = useState<string | null>(null);
+
+    const [listenerType, setListenerType] = useState<"SINGLE" | "MULTIPLE">("MULTIPLE");
+    const [haveServiceConfigs, setHaveServiceConfigs] = useState<boolean>(true);
+
+    useEffect(() => {
+        fetchService(props.position);
+    }, [props.position]);
+
+    useEffect(() => {
+        if (props.listenerName) {
+            handleOnListenerClick(props.listenerName);
+        }
+    }, [props.listenerName]);
+
+    // Sync the ref when visibleSection changes from external sources
+    useEffect(() => {
+        visibleSectionRef.current = visibleSection;
+    }, [visibleSection]);
+
+    // Set up Intersection Observer to track visible sections
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const observerOptions = {
+            root: containerRef.current,
+            threshold: Array.from({ length: 21 }, (_, i) => i * 0.05), // Check at 0%, 5%, 10%, ... 100% visibility
+            rootMargin: '0px 0px 0px 0px', // Offset for the sticky header area
+        };
+
+        const topOffset = 10;
+        const observerCallback = (entries: IntersectionObserverEntry[]) => {
+            // Get all currently visible sections with their visibility ratios
+            const visibleSections: Array<{ id: string; ratio: number; isService: boolean }> = [];
+
+            // Check all observed elements, not just the ones in the current callback
+            if (serviceRef.current) {
+                const serviceRect = serviceRef.current.getBoundingClientRect();
+                const containerRect = containerRef.current!.getBoundingClientRect();
+                const effectiveTop = containerRect.top + 20; // Account for rootMargin
+
+                if (serviceRect.bottom > effectiveTop && serviceRect.top < containerRect.bottom) {
+                    const visibleHeight = Math.min(serviceRect.bottom, containerRect.bottom) - Math.max(serviceRect.top, effectiveTop);
+                    const ratio = visibleHeight / serviceRect.height;
+                    if (ratio > 0) {
+                        visibleSections.push({ id: 'service', ratio, isService: true });
+                    }
+                }
+            }
+
+            // Check all listener sections
+            Object.entries(accordionRefs.current).forEach(([id, ref]) => {
+                if (ref) {
+                    const rect = ref.getBoundingClientRect();
+                    const containerRect = containerRef.current!.getBoundingClientRect();
+                    const effectiveTop = containerRect.top + topOffset;
+
+                    if (rect.bottom > effectiveTop && rect.top < containerRect.bottom) {
+                        const visibleHeight = Math.min(rect.bottom, containerRect.bottom) - Math.max(rect.top, effectiveTop);
+                        const ratio = visibleHeight / rect.height;
+                        if (ratio > 0) {
+                            visibleSections.push({ id, ratio, isService: false });
+                        }
+                    }
+                }
+            });
+
+            // Determine which section should be shown
+            let newVisibleSection: string | null = null;
+            let newTitle: string | null = null;
+
+            // Prioritize service if it's visible
+            const serviceSection = visibleSections.find(s => s.isService);
+            if (serviceSection && serviceSection.ratio > 0.05) {
+                newVisibleSection = 'service';
+                newTitle = `${serviceModel.name} Configuration`;
+            } else {
+                // Get all visible listeners
+                const visibleListenerIds = visibleSections
+                    .filter(s => !s.isService && s.ratio > 0.01) // At least 1% visible
+                    .map(s => s.id);
+
+                if (visibleListenerIds.length > 0) {
+                    // Find the first listener (topmost) that is visible
+                    // We iterate through the listeners array which is in document order
+                    const firstVisibleListener = listeners.find(l => visibleListenerIds.includes(l.id));
+
+                    if (firstVisibleListener) {
+                        newVisibleSection = firstVisibleListener.id;
+                        const displayName = firstVisibleListener.name.includes(":")
+                            ? getReadableListenerName(firstVisibleListener.name)
+                            : firstVisibleListener.name;
+                        newTitle = `Configuration for ${displayName}`;
+                    }
+                }
+            }
+
+            // Only update state if the section actually changed
+            if (newVisibleSection && newVisibleSection !== visibleSectionRef.current) {
+                visibleSectionRef.current = newVisibleSection;
+                setVisibleSection(newVisibleSection);
+                if (newTitle) {
+                    setConfigTitle(newTitle);
+                }
+
+                // Update selectedListener to match the visible section
+                // If it's the service, clear the selected listener, otherwise set it to the listener id
+                if (newVisibleSection === 'service') {
+                    setSelectedListener(null);
+                } else {
+                    setSelectedListener(newVisibleSection);
+                }
+            }
+        };
+
+        const observer = new IntersectionObserver(observerCallback, observerOptions);
+
+        // Observe service section
+        if (serviceRef.current) {
+            observer.observe(serviceRef.current);
+        }
+
+        // Observe all listener sections
+        Object.values(accordionRefs.current).forEach(ref => {
+            if (ref) {
+                observer.observe(ref);
+            }
+        });
+
+        const SCROLL_THROTTLE_TIME = 100; // 100ms throttle - feels responsive but prevents excessive updates
+
+        // Add a throttled scroll listener for responsive updates
+        const handleScroll = () => {
+            // Clear any existing timer
+            if (scrollTimerRef.current !== null) {
+                clearTimeout(scrollTimerRef.current);
+            }
+
+            // Set a new timer to call the observer callback after a short delay
+            scrollTimerRef.current = window.setTimeout(() => {
+                observerCallback([]);
+            }, SCROLL_THROTTLE_TIME);
+        };
+
+        containerRef.current.addEventListener('scroll', handleScroll, { passive: true });
+
+        return () => {
+            observer.disconnect();
+            if (scrollTimerRef.current) {
+                clearTimeout(scrollTimerRef.current);
+            }
+            if (containerRef.current) {
+                containerRef.current.removeEventListener('scroll', handleScroll);
+            }
+        };
+    }, [listeners, serviceModel]);
+
+    const handleOnServiceSelect = () => {
+        // Clear selected listener when service is selected
+        setSelectedListener(null);
+        // Scroll to service section
+        if (serviceRef.current) {
+            serviceRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+        // Clear any expanded accordion when switching to service view
+        setExpandedAccordion(null);
+    };
+
+    const fetchService = (targetPosition: NodePosition) => {
+        const lineRange: LineRange = {
+            startLine: { line: targetPosition.startLine, offset: targetPosition.startColumn },
+            endLine: { line: targetPosition.endLine, offset: targetPosition.endColumn },
+        };
+        try {
+            rpcClient
+                .getServiceDesignerRpcClient()
+                .getServiceModelFromCode({ filePath: props.filePath, codedata: { lineRange } })
+                .then((res) => {
+                    console.log("Service Model: ", res.service);
+                    // Set the service model
+                    setServiceModel(res.service);
+                    setConfigTitle(`${res.service.name} Configuration`);
+                    // Set the service listeners
+                    setServiceListeners(res.service);
+                    // Find the listener type
+                    findListenerType(res.service);
+                });
+        } catch (error) {
+            console.log("Error fetching service model: ", error);
+        }
+    };
+
+    const findListenerType = (service: ServiceModel) => {
+        let detectedType: "SINGLE" | "MULTIPLE" = "MULTIPLE";
+        for (const key in service.properties) {
+            const expression = service.properties[key];
+            if (
+                expression.valueType === "MULTIPLE_SELECT_LISTENER" ||
+                expression.valueType === "SINGLE_SELECT_LISTENER"
+            ) {
+                detectedType = expression.valueType === "SINGLE_SELECT_LISTENER" ? "SINGLE" : "MULTIPLE";
+                // Check if only one property is enabled
+                const enabledCount = Object.values(service.properties).filter((prop: any) => prop.enabled).length;
+                if (enabledCount === 1) {
+                    setHaveServiceConfigs(false);
+                }
+                break;
+            }
+        }
+        console.log("Listener type: ", detectedType);
+        setListenerType(detectedType);
+    }
+
+    const setServiceListeners = (service: ServiceModel) => {
+        rpcClient
+            .getBIDiagramRpcClient()
+            .getProjectStructure()
+            .then((res) => {
+                const listeners = res.directoryMap[DIRECTORY_MAP.LISTENER];
+                if (service?.properties?.listener) {
+                    const listenerProperty = service.properties.listener.properties;
+                    const listenersToSet: ProjectStructureArtifactResponse[] = [];
+                    Object.keys(listenerProperty).forEach((listener) => {
+                        const listenerItem = listeners?.find((l) => l.name === listener);
+                        if (listenerItem) {
+                            listenersToSet.push(listenerItem);
+                        } else {
+                            const property = listenerProperty[listener];
+                            listenersToSet.push({
+                                id: listener,
+                                name: listener,
+                                path: props.filePath,
+                                type: "TYPE",
+                                position: {
+                                    startLine: property.codedata.lineRange.startLine.line,
+                                    startColumn: property.codedata.lineRange.startLine.offset,
+                                    endLine: property.codedata.lineRange.endLine.line,
+                                    endColumn: property.codedata.lineRange.endLine.offset,
+                                },
+                            });
+                        }
+                    });
+                    setListeners(listenersToSet);
+                }
+            });
+    };
+
+
+    const handleOnAttachListener = async (listenerName: string) => {
+        if (serviceModel.properties['listener'].value && serviceModel.properties['listener'].values.length === 0) {
+            serviceModel.properties['listener'].values = [serviceModel.properties['listener'].value];
+        }
+        serviceModel.properties['listener'].values.push(listenerName);
+        const res = await rpcClient.getServiceDesignerRpcClient().updateServiceSourceCode({ filePath: props.filePath, service: serviceModel });
+        const updatedArtifact = res.artifacts.at(0);
+        await fetchService(updatedArtifact.position);
+        closeModal(POPUP_IDS.ATTACH_LISTENER);
+        setChangeMap({});
+    }
+
+    const handleOnDetachListener = async (listenerName: string) => {
+        serviceModel.properties['listener'].values = serviceModel.properties['listener'].values.filter(listener => listener !== listenerName);
+        const res = await rpcClient.getServiceDesignerRpcClient().updateServiceSourceCode({ filePath: props.filePath, service: serviceModel });
+        const updatedArtifact = res.artifacts.at(0);
+        await fetchService(updatedArtifact.position);
+        setChangeMap({});
+    }
+
+    const handleOnListenerClick = (listenerId: string) => {
+        // Set the selected listener for highlighting
+        setSelectedListener(listenerId);
+
+        // Expand the clicked accordion
+        setExpandedAccordion(listenerId);
+
+        // Scroll to the corresponding accordion container
+        setTimeout(() => {
+            const accordionElement = accordionRefs.current[listenerId];
+            if (accordionElement) {
+                accordionElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        }, 100); // Small delay to ensure tab switch and DOM update
+    }
+
+    const handleListenerChange = async (data: ListenerModel, filePath: string, position: NodePosition) => {
+        addChangeToMap(filePath, position, data, false);
+        setHasChanges(true);
+        setIsSaving(false);
+    }
+
+    const handleServiceChange = async (data: ServiceModel, filePath: string, position: NodePosition) => {
+        addChangeToMap(filePath, position, data, true);
+        setHasChanges(true);
+        setIsSaving(false);
+    }
+
+    const handleSave = async () => {
+        setIsSaving(true);
+        const changes = Object.values(changeMap);
+        for (const change of changes) {
+            if (change.isService) {
+                const res = await rpcClient.getServiceDesignerRpcClient().updateServiceSourceCode({ filePath: change.filePath, service: change.data as ServiceModel });
+                const updatedArtifact = res.artifacts.at(0);
+                await fetchService(updatedArtifact.position);
+            } else {
+                await rpcClient.getServiceDesignerRpcClient().updateListenerSourceCode({ filePath: change.filePath, listener: change.data as ListenerModel });
+            }
+        }
+        setChangeMap({});
+        setHasChanges(false);
+        setIsSaving(false);
+    }
+
+    return (
+        <View>
+            <TopNavigationBar />
+            {!serviceModel && (
+                <LoadingContainer>
+                    <LoadingRing message="Loading service..." />
+                </LoadingContainer>
+            )}
+            {
+                serviceModel && (
+                    <>
+                        <TitleBar title={`${serviceModel.name} Configuration`} subtitle="Configure and manage service details" />
+                        <ViewContent padding>
+                            <div style={{ height: 'calc(100vh - 220px)' }}>
+                                <div style={{ width: "auto" }}>
+                                    <SplitView defaultWidths={[20, 80]}>
+                                        {/* Left side tree view */}
+                                        <div id={`package-treeview`} style={{ padding: "10px 0 50px 0" }}>
+                                            {haveServiceConfigs && (
+                                                <TreeViewItem
+                                                    id="service"
+                                                    onSelect={handleOnServiceSelect}
+                                                    selectedId={serviceModel.name}
+                                                    sx={{
+                                                        border: !selectedListener
+                                                            ? '1px solid var(--vscode-focusBorder)'
+                                                            : 'none'
+                                                    }}
+                                                >
+                                                    <Typography
+                                                        variant="body3"
+                                                        sx={{
+                                                            fontWeight: !selectedListener
+                                                                ? 'bold' : 'normal'
+                                                        }}
+                                                    >{serviceModel.name}</Typography>
+                                                </TreeViewItem>
+                                            )}
+
+                                            {/* Group all the listeners under "Service listeners" */}
+                                            {listeners.length > 0 && (
+                                                <TreeView
+                                                    rootTreeView
+                                                    id="service-listeners"
+                                                    expandByDefault={true}
+                                                    content={
+                                                        <div
+                                                            style={{
+                                                                display: 'flex',
+                                                                height: '22px',
+                                                                alignItems: 'center',
+                                                            }}>
+                                                            <Typography
+                                                                variant="body3"
+                                                                sx={{
+                                                                    fontWeight: 'normal'
+                                                                }}
+                                                            >
+                                                                Attached Listeners
+                                                            </Typography>
+                                                        </div>
+                                                    }
+                                                >
+                                                    {/* Map all the listeners */}
+                                                    {listeners
+                                                        .map((listener, index) => (
+                                                            <TreeViewItem
+                                                                key={listener.id}
+                                                                id={listener.id}
+                                                                sx={{
+                                                                    backgroundColor: 'transparent',
+                                                                    paddingLeft: '35px',
+                                                                    height: '25px',
+                                                                    overflow: 'hidden',
+                                                                    textOverflow: 'ellipsis',
+                                                                    whiteSpace: 'nowrap',
+                                                                    boxSizing: 'border-box',
+                                                                    border: selectedListener === listener.id
+                                                                        ? '1px solid var(--vscode-focusBorder)'
+                                                                        : 'none'
+                                                                }}
+                                                                selectedId={listener.id}
+                                                            >
+                                                                <div
+                                                                    style={{
+                                                                        display: 'flex',
+                                                                        height: '22px',
+                                                                        alignItems: 'center',
+                                                                        cursor: 'pointer'
+                                                                    }}
+                                                                    onClick={(e) => {
+                                                                        handleOnListenerClick(listener.id);
+                                                                    }}
+                                                                >
+                                                                    <Typography
+                                                                        variant="body3"
+                                                                        sx={{
+                                                                            fontWeight: selectedListener === listener.id
+                                                                                ? 'bold' : 'normal'
+                                                                        }}
+                                                                    >
+                                                                        {listener.name.includes(":") ? getReadableListenerName(listener.name) : listener.name}
+                                                                    </Typography>
+                                                                </div>
+                                                            </TreeViewItem>
+                                                        ))}
+                                                </TreeView>
+                                            )}
+                                        </div>
+                                        {/* Right side view */}
+                                        <div style={{ height: '100%' }}>
+                                            <>
+                                                <div
+                                                    id="TitleDiv"
+                                                    style={{
+                                                        position: "sticky", top: 0, color: "var(--vscode-editor-foreground)",
+                                                        backgroundColor: "var(--vscode-editor-background)"
+                                                    }}>
+                                                    <TitleContent>
+                                                        <Typography
+                                                            variant="h2"
+                                                            sx={{
+                                                                padding: "0px 0 0 20px",
+                                                                margin: "10px 0px",
+                                                                color: "var(--vscode-foreground)"
+                                                            }}>
+                                                            {configTitle}
+                                                        </Typography>
+
+                                                        <Button appearance="primary" onClick={handleSave} disabled={isSaving || !hasChanges}>
+                                                            {isSaving ? <Typography variant="progress">Saving...</Typography> : <>Save Changes</>}
+                                                        </Button>
+                                                    </TitleContent>
+                                                    <TitleBoxShadow />
+                                                </div>
+                                                <Container ref={containerRef}>
+                                                    <>
+                                                        {!serviceModel && (
+                                                            <LoadingContainer>
+                                                                <LoadingRing message="Loading service..." />
+                                                            </LoadingContainer>
+                                                        )}
+                                                        {serviceModel && (
+                                                            <div>
+                                                                {haveServiceConfigs && (
+                                                                    <div ref={serviceRef} data-section-id="service">
+                                                                        <ServiceEditView filePath={props.filePath} position={props.position} onChange={handleServiceChange} />
+                                                                    </div>
+                                                                )}
+                                                                {listeners.map((listener) => (
+                                                                    <AccordionContainer
+                                                                        key={listener.id}
+                                                                        ref={(el) => {
+                                                                            accordionRefs.current[listener.id] = el;
+
+                                                                        }}
+                                                                        data-section-id={listener.id}
+                                                                    >
+                                                                        <div>
+                                                                            {/* Only show the listener header if it's not the currently visible section in the sticky title */}
+                                                                            {visibleSection !== listener.id && (
+                                                                                <ListenerConfigHeader>
+                                                                                    <Typography variant="h2" sx={{ marginBottom: '10px', marginTop: '10px' }}>Configuration for {listener.name.includes(":") ? getReadableListenerName(listener.name) : listener.name} </Typography>
+                                                                                    {/* Add detach button to the listener configuration only if there are more than one listener attached */}
+                                                                                    {listeners.length > 1 && (
+                                                                                        <Button appearance="secondary" onClick={() => {
+                                                                                            handleOnDetachListener(listener.name);
+                                                                                        }}> <Codicon name="trash" /></Button>
+                                                                                    )}
+                                                                                </ListenerConfigHeader>
+                                                                            )}
+                                                                            <ServiceConfigureListenerEditView
+                                                                                filePath={listener.path}
+                                                                                position={listener.position}
+                                                                                onChange={handleListenerChange}
+                                                                            />
+                                                                        </div>
+                                                                    </AccordionContainer>
+                                                                ))}
+                                                                {/* Add a button to attach a new listener and when clicked, open a new modal to select a listener if multiple listener are allowed */}
+                                                                {listenerType === "MULTIPLE" && (
+                                                                    <LinkButton sx={{ marginTop: '10px', marginLeft: '18px' }} onClick={() => {
+                                                                        addModal(
+                                                                            <AttachListenerModal
+                                                                                filePath={props.filePath}
+                                                                                moduleName={serviceModel.moduleName}
+                                                                                onAttachListener={handleOnAttachListener}
+                                                                                attachedListeners={listeners.map(listener => listener.name)}
+                                                                            />
+                                                                            , POPUP_IDS.ATTACH_LISTENER, "Attach Listener", 600, 500);
+                                                                    }}> <Codicon name="add" /> Attach Listener</LinkButton>
+                                                                )}
+                                                            </div>
+                                                        )}
+                                                    </>
+                                                </Container >
+                                            </>
+                                        </div>
+                                    </SplitView>
+                                </div>
+                            </div>
+                        </ViewContent >
+                    </>
+                )}
+        </View >
+    );
+}
+
+export default ServiceConfigureView;
+
+
+interface ServiceConfigureListenerEditViewProps {
+    filePath: string;
+    position: NodePosition;
+    onChange?: (data: ListenerModel, filePath: string, position: NodePosition) => void;
+}
+
+function ServiceConfigureListenerEditView(props: ServiceConfigureListenerEditViewProps) {
+    const { filePath, position, onChange } = props;
+    const { rpcClient } = useRpcContext();
+    const [listenerModel, setListenerModel] = useState<ListenerModel>(undefined);
+
+    const [saving, setSaving] = useState<boolean>(false);
+
+    const [savingText, setSavingText] = useState<string>("Saving...");
+
+    useEffect(() => {
+        const lineRange: LineRange = { startLine: { line: position.startLine, offset: position.startColumn }, endLine: { line: position.endLine, offset: position.endColumn } };
+        rpcClient.getServiceDesignerRpcClient().getListenerModelFromCode({ filePath, codedata: { lineRange } }).then(res => {
+            console.log("Editing Listener Model: ", res.listener)
+            setListenerModel(res.listener);
+        })
+    }, [position]);
+
+    const onSubmit = async (value: ListenerModel) => {
+        setSaving(true);
+        const res = await rpcClient.getServiceDesignerRpcClient().updateListenerSourceCode({ filePath, listener: value });
+        setSavingText("Saved");
+        setTimeout(() => {
+            setSavingText("Save");
+            setSaving(false);
+        }, 1000);
+    }
+
+    const handleListenerChange = (data: ListenerModel) => {
+        console.log("Listener change: ", data);
+        onChange(data, filePath, position);
+    }
+
+    return (
+        <ServiceConfigureListenerEditViewContainer>
+            {!listenerModel &&
+                <LoadingContainer>
+                    <ProgressRing />
+                    <Typography variant="h3" sx={{ marginTop: '16px' }}>Loading...</Typography>
+                </LoadingContainer>
+            }
+            {listenerModel &&
+                <ListenerConfigForm listenerModel={listenerModel} onSubmit={onSubmit} formSubmitText={saving ? savingText : "Save"} isSaving={saving} onChange={handleListenerChange} />
+            }
+        </ServiceConfigureListenerEditViewContainer>
+    );
+};
+
+
+
+namespace S {
+    export const Container = styled(SidePanelBody)`
+        display: flex;
+        flex-direction: column;
+        padding: 0px;
+    `;
+
+    export const TabContainer = styled.div`
+        height: 100%;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    `;
+
+    export const LoadingContainer = styled.div`
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+        padding: 10px;
+    `;
+}
+
+
+
+interface AttachListenerModalProps {
+    filePath: string;
+    moduleName: string;
+    attachedListeners: string[];
+    onAttachListener: (listenerName: string) => void;
+}
+
+function AttachListenerModal(props: AttachListenerModalProps) {
+
+    const [activeTab, setActiveTab] = useState<"existing" | "new">("existing");
+    const { rpcClient } = useRpcContext();
+
+    const [existingListeners, setExistingListeners] = useState<string[]>([]);
+
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    const [attachingListener, setAttachingListener] = useState<string | undefined>(undefined);
+
+
+    const [listenerModel, setListenerModel] = useState<ListenerModel>(undefined);
+
+    useEffect(() => {
+        setIsLoading(true);
+        rpcClient.getServiceDesignerRpcClient().getListeners({ filePath: props.filePath, moduleName: props.moduleName }).then(res => {
+            console.log("Existing listeners: ", res.listeners);
+            setExistingListeners(res.listeners.filter(listener => !props.attachedListeners.includes(listener)).filter(listener => !listener.includes("+")));
+        }).finally(() => {
+            setIsLoading(false);
+        });
+    }, [props.filePath, props.moduleName]);
+
+    const handleTabChange = (tabId: string) => {
+        setActiveTab(tabId as "existing" | "new");
+        if (tabId === "new") {
+            rpcClient.getServiceDesignerRpcClient().getListenerModel({ moduleName: props.moduleName }).then(res => {
+                console.log("New listener model: ", res.listener)
+                setListenerModel(res.listener);
+            })
+        }
+    }
+
+    const handleListenerSelect = (listenerName: string) => {
+        console.log("Listener selected: ", listenerName);
+        setAttachingListener(listenerName);
+        props.onAttachListener(listenerName);
+    }
+
+    const onCreateNewListener = async (value?: ListenerModel) => {
+        if (value) {
+            const listenerName = value.properties['variableNameKey'].value;
+            setAttachingListener(listenerName);
+            await rpcClient.getServiceDesignerRpcClient().addListenerSourceCode({ filePath: "", listener: value });
+            handleListenerSelect(listenerName);
+        }
+    };
+
+    return (
+        <>
+            <TabPanel
+                views={[
+                    {
+                        id: 'existing',
+                        name: 'Existing Listeners',
+                        icon: <Icon
+                            name="radio-tower"
+                            isCodicon={true}
+                            sx={{ marginRight: '5px' }}
+                            iconSx={{ fontSize: '15px', display: 'flex', alignItems: 'center' }}
+                        />
+                    },
+                    {
+                        id: 'new',
+                        name: 'Create New Listener',
+                        icon: <Icon
+                            name="radio-tower"
+                            isCodicon={true}
+                            sx={{ marginRight: '5px' }}
+                            iconSx={{ fontSize: '12px', display: 'flex', alignItems: 'center', paddingTop: '2px' }}
+                        />
+                    },
+                ]}
+                currentViewId={activeTab}
+                onViewChange={handleTabChange}
+                childrenSx={{ padding: '10px', height: '100%', overflow: 'hidden' }}
+            >
+                <S.TabContainer id="existing" data-testid="existing-tab">
+
+                    {isLoading && (
+                        <S.LoadingContainer>
+                            <ProgressRing />
+                            <Typography variant="h3" sx={{ marginTop: '16px' }}>Loading...</Typography>
+                        </S.LoadingContainer>
+                    )}
+
+
+                    {!isLoading && existingListeners.length === 0 && (
+                        <S.LoadingContainer>
+                            <Typography variant="h4" sx={{ marginTop: '16px', textAlign: 'center' }}>No existing listeners found</Typography>
+                            <LinkButton sx={{ marginTop: '10px' }} onClick={() => {
+                                handleTabChange("new");
+                            }}> <Codicon name="add" /> Create New Listener</LinkButton>
+                        </S.LoadingContainer>
+                    )}
+
+                    {!isLoading && existingListeners.length > 0 && (
+                        <S.Grid columns={1}>
+                            {existingListeners.map((listener) => (
+                                <S.Component
+                                    key={listener}
+                                    enabled={attachingListener !== listener}
+                                    onClick={() => handleListenerSelect(listener)}
+                                >
+                                    <S.IconContainer>{<Icon name='radio-tower' isCodicon={true} />}</S.IconContainer>
+                                    <S.ComponentTitle>
+                                        {listener}
+                                    </S.ComponentTitle>
+                                    {attachingListener === listener && (
+                                        <>
+                                            <ProgressRing />
+                                            <Typography variant="body3" sx={{ marginLeft: '10px', marginRight: '5px' }}>Attaching listener...</Typography>
+                                        </>
+                                    )}
+                                </S.Component>
+                            ))}
+                        </S.Grid>
+                    )}
+                </S.TabContainer>
+                <S.TabContainer id="new" data-testid="new-tab">
+                    {isLoading && (
+                        <S.LoadingContainer>
+                            <ProgressRing />
+                            <Typography variant="h3" sx={{ marginTop: '16px' }}>Loading...</Typography>
+                        </S.LoadingContainer>
+                    )}
+                    {!isLoading && listenerModel && (
+                        <ListenerConfigForm listenerModel={listenerModel} onSubmit={onCreateNewListener} formSubmitText={attachingListener ? "Saving..." : "Save"} isSaving={!!attachingListener} />
+                    )}
+                </S.TabContainer>
+            </TabPanel>
+        </>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceCreationView.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceCreationView.tsx
new file mode 100644
index 00000000000..00b79cb3ffa
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceCreationView.tsx
@@ -0,0 +1,530 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { Icon, ThemeColors, Typography, View, ViewContent } from "@wso2/ui-toolkit";
+import { TopNavigationBar } from "../../../components/TopNavigationBar";
+import { useEffect, useState } from "react";
+import { TitleBar } from "../../../components/TitleBar";
+import { isBetaModule } from "../ComponentListView/componentListUtils";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { FormField, FormImports, FormValues } from "@wso2/ballerina-side-panel";
+import { EVENT_TYPE, LineRange, Property, PropertyModel, RecordTypeField, ServiceInitModel } from "@wso2/ballerina-core";
+import { FormHeader } from "../../../components/FormHeader";
+import FormGeneratorNew from "../Forms/FormGeneratorNew";
+import styled from "@emotion/styled";
+import { getImportsForProperty } from "../../../utils/bi";
+import { DownloadIcon } from "../../../components/DownloadIcon";
+import { RelativeLoader } from "../../../components/RelativeLoader";
+import { sanitizedHttpPath, normalizeValueToArray } from "./utils";
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 10;
+    margin: 20px;
+    /* padding: 0 20px 20px; */
+    max-width: 600px;
+    height: 100%;
+    > div:last-child {
+        /* padding: 20px 0; */
+        > div:last-child {
+            justify-content: flex-start;
+        }
+    }
+`;
+
+const FormContainer = styled.div`
+    /* padding-top: 15px; */
+    padding-bottom: 100px;
+`;
+
+const StatusContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+`;
+
+const StatusCard = styled.div`
+    margin: 16px 16px 0 16px;
+    padding: 16px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+
+    & > svg {
+        font-size: 24px;
+        color: ${ThemeColors.ON_SURFACE};
+    }
+`;
+
+const StatusText = styled(Typography)`
+    color: ${ThemeColors.ON_SURFACE};
+`;
+
+
+export interface ServiceCreationViewProps {
+    orgName: string;
+    packageName: string;
+    moduleName: string;
+    version?: string;
+}
+
+interface HeaderInfo {
+    title: string;
+    moduleName: string;
+}
+
+enum PullingStatus {
+    FETCHING = "fetching",
+    PULLING = "pulling",
+    SUCCESS = "success",
+    ERROR = "error",
+}
+
+/**
+ * Maps the properties to an array of FormField objects.
+ * 
+ * @param properties The properties to map.
+ * @returns An array of FormField objects.
+ */
+function mapPropertiesToFormFields(properties: { [key: string]: PropertyModel; }): FormField[] {
+    if (!properties) return [];
+
+    return Object.entries(properties).map(([key, property]) => {
+
+        // Determine value for MULTIPLE_SELECT
+        let value: any = property.value;
+        if (property.valueType === "MULTIPLE_SELECT") {
+            if (property.values && property.values.length > 0) {
+                value = property.values;
+            } else if (property.value) {
+                value = [property.value];
+            } else if (property.items && property.items.length > 0) {
+                value = [property.items[0]];
+            } else {
+                value = [];
+            }
+        }
+
+        let items = undefined;
+        if (property.valueType === "MULTIPLE_SELECT" || property.valueType === "SINGLE_SELECT") {
+            items = property.items;
+        }
+
+        return {
+            key,
+            label: property?.metadata?.label,
+            type: property.valueType,
+            documentation: property?.metadata?.description || "",
+            valueType: property.valueTypeConstraint,
+            editable: true,
+            enabled: property.enabled ?? true,
+            optional: property.optional,
+            value,
+            valueTypeConstraint: property.valueTypeConstraint,
+            advanced: property.advanced,
+            diagnostics: [],
+            items,
+            choices: property.choices,
+            placeholder: property.placeholder,
+            addNewButton: property.addNewButton,
+            lineRange: property?.codedata?.lineRange,
+            advanceProps: mapPropertiesToFormFields(property.properties)
+        } as FormField;
+    });
+}
+
+/**
+ * Populate the ServiceInitModel from the form fields.
+ * 
+ * @param formFields The form fields to update.
+ * @param model The ServiceInitModel to update.
+ * @returns The updated ServiceInitModel.
+ */
+function populateServiceInitModelFromFormFields(formFields: FormField[], model: ServiceInitModel): ServiceInitModel {
+    if (!model || !model.properties || !formFields) return model;
+
+    formFields.forEach(field => {
+        const property = model.properties[field.key];
+        if (!property) return;
+
+        const value = field.value;
+
+        // Handle MULTIPLE_SELECT and EXPRESSION_SET types
+        if (field.type === "MULTIPLE_SELECT" || field.type === "EXPRESSION_SET") {
+            property.values = normalizeValueToArray(value);
+        } else {
+            property.value = value as string;
+        }
+    });
+    return model;
+}
+
+export function ServiceCreationView(props: ServiceCreationViewProps) {
+
+    const { orgName, packageName, moduleName, version } = props;
+    const { rpcClient } = useRpcContext();
+
+    const [headerInfo, setHeaderInfo] = useState<HeaderInfo>(null);
+    const [model, setServiceInitModel] = useState<ServiceInitModel>(null);
+    const [formFields, setFormFields] = useState<FormField[]>([]);
+
+    const [pullingStatus, setPullingStatus] = useState<PullingStatus>(PullingStatus.FETCHING);
+    const [filePath, setFilePath] = useState<string>("");
+    const [targetLineRange, setTargetLineRange] = useState<LineRange>();
+    const [isSaving, setIsSaving] = useState<boolean>(false);
+    const [recordTypeFields, setRecordTypeFields] = useState<RecordTypeField[]>([]);
+
+    const MAIN_BALLERINA_FILE = "main.bal";
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setPullingStatus(PullingStatus.FETCHING);
+
+            const promise = rpcClient
+                .getServiceDesignerRpcClient()
+                .getServiceInitModel({
+                    filePath: "", orgName: orgName, pkgName: packageName, moduleName: moduleName, listenerName: ""
+                });
+
+            let timer: ReturnType<typeof setTimeout> | null = null;
+            let didTimeout = false;
+            let res;
+
+            // Wait for up to 3 seconds for a fast response
+            const timeoutPromise = new Promise<void>((resolve) => {
+                timer = setTimeout(() => {
+                    didTimeout = true;
+                    setPullingStatus(PullingStatus.PULLING);
+                    resolve();
+                }, 3000);
+            });
+
+            res = await Promise.race([
+                promise.then((result) => {
+                    if (timer) {
+                        clearTimeout(timer);
+                        timer = null;
+                    }
+                    return result;
+                }),
+                timeoutPromise.then(() => promise)
+            ]);
+
+            // If the response arrived before the timer, package is present, load form immediately
+            if (!didTimeout && res?.serviceInitModel) {
+                setHeaderInfo({
+                    title: res.serviceInitModel.displayName,
+                    moduleName: res.serviceInitModel.moduleName
+                });
+                setServiceInitModel(res.serviceInitModel);
+                setFormFields(mapPropertiesToFormFields(res.serviceInitModel.properties));
+                setPullingStatus(undefined);
+            } else if (didTimeout && res?.serviceInitModel) {
+                // If timer expired, show pulling status then load form
+                setPullingStatus(PullingStatus.SUCCESS);
+                setHeaderInfo({
+                    title: res.serviceInitModel.displayName,
+                    moduleName: res.serviceInitModel.moduleName
+                });
+                setServiceInitModel(res.serviceInitModel);
+                setFormFields(mapPropertiesToFormFields(res.serviceInitModel.properties));
+                setPullingStatus(undefined);
+            }
+
+            rpcClient
+                .getVisualizerRpcClient()
+                .joinProjectPath(MAIN_BALLERINA_FILE)
+                .then((filePath) => {
+                    setFilePath(filePath);
+                });
+        };
+
+        fetchData();
+    }, []);
+
+    useEffect(() => {
+        if (filePath && rpcClient) {
+            rpcClient
+                .getBIDiagramRpcClient()
+                .getEndOfFile({ filePath })
+                .then((res) => {
+                    setTargetLineRange({
+                        startLine: res,
+                        endLine: res,
+                    });
+                });
+        }
+    }, [filePath, rpcClient]);
+
+    useEffect(() => {
+        if (model) {
+            const hasPropertiesWithChoices = model?.moduleName === "http" &&
+                Object.values(model.properties).some(property => property.choices);
+
+            if (hasPropertiesWithChoices) {
+                const choiceRecordTypeFields = Object.entries(model.properties)
+                    .filter(([_, property]) => property.choices)
+                    .flatMap(([parentKey, property]) =>
+                        Object.entries(property.choices).flatMap(([choiceKey, choice]) =>
+                            Object.entries(choice.properties || {})
+                                .filter(([_, choiceProperty]) =>
+                                    choiceProperty.typeMembers &&
+                                    choiceProperty.typeMembers.some(member => member.kind === "RECORD_TYPE")
+                                )
+                                .map(([choicePropertyKey, choiceProperty]) => ({
+                                    key: choicePropertyKey,
+                                    property: {
+                                        ...choiceProperty,
+                                        metadata: {
+                                            label: choiceProperty.metadata?.label || choicePropertyKey,
+                                            description: choiceProperty.metadata?.description || ''
+                                        },
+                                        valueType: choiceProperty?.valueType || 'string',
+                                        diagnostics: {
+                                            hasDiagnostics: choiceProperty.diagnostics && choiceProperty.diagnostics.length > 0,
+                                            diagnostics: choiceProperty.diagnostics
+                                        }
+                                    } as Property,
+                                    recordTypeMembers: choiceProperty.typeMembers.filter(member => member.kind === "RECORD_TYPE")
+                                }))
+                        )
+                    );
+                console.log(">>> recordTypeFields of http serviceModel", choiceRecordTypeFields);
+
+                setRecordTypeFields(choiceRecordTypeFields);
+            } else {
+                const recordTypeFields: RecordTypeField[] = Object.entries(model.properties)
+                    .filter(([_, property]) =>
+                        property.typeMembers &&
+                        property.typeMembers.some(member => 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 => member.kind === "RECORD_TYPE")
+                    }));
+                console.log(">>> recordTypeFields of serviceModel", recordTypeFields);
+
+                setRecordTypeFields(recordTypeFields);
+            }
+        }
+    }, [model]);
+
+    /**
+     * Recursively processes a property and its nested CHOICE fields
+     *
+     * @param property The property to process
+     * @param data The form data containing all field values
+     */
+    const processPropertyRecursively = (property: PropertyModel, data: FormValues): void => {
+        // If this property is a CHOICE field, process it
+        if (property.valueType === "CHOICE" && property.choices) {
+            property.choices.forEach((choice, index) => {
+                // Disable all choices first
+                choice.enabled = false;
+
+                // The property.value should contain the selected index
+                if (property.value !== undefined && Number(property.value) === index) {
+                    choice.enabled = true;
+
+                    // Process all properties in this selected choice
+                    if (choice.properties) {
+                        for (const nestedKey in choice.properties) {
+                            const nestedProperty = choice.properties[nestedKey];
+
+                            // Set value from form data if available
+                            if (data[nestedKey] !== undefined) {
+                                // Handle MULTIPLE_SELECT and EXPRESSION_SET types
+                                if (nestedProperty.valueType === "MULTIPLE_SELECT" || nestedProperty.valueType === "EXPRESSION_SET") {
+                                    const value = data[nestedKey];
+                                    nestedProperty.values = normalizeValueToArray(value);
+                                } else {
+                                    nestedProperty.value = data[nestedKey] as string;
+                                }
+                            }
+
+                            // Recursively process this nested property
+                            processPropertyRecursively(nestedProperty, data);
+                        }
+                    }
+                }
+            });
+        }
+        // If this property has nested properties (like CONDITIONAL_FIELDS), process them
+        else if (property.properties) {
+            for (const nestedKey in property.properties) {
+                const nestedProperty = property.properties[nestedKey];
+
+                // Set value from form data if available
+                if (data[nestedKey] !== undefined) {
+                    if (nestedProperty.valueType === "MULTIPLE_SELECT" || nestedProperty.valueType === "EXPRESSION_SET") {
+                        const value = data[nestedKey];
+                        nestedProperty.values = normalizeValueToArray(value);
+                    } else {
+                        nestedProperty.value = data[nestedKey] as string;
+                    }
+                }
+
+                // Recursively process nested properties
+                processPropertyRecursively(nestedProperty, data);
+            }
+        }
+    };
+
+    const handleOnSubmit = async (data: FormValues, formImports: FormImports) => {
+        setIsSaving(true);
+        formFields.forEach(val => {
+            if (val.type === "CHOICE") {
+                val.choices.forEach((choice, index) => {
+                    choice.enabled = false;
+                    if (data[val.key] === index) {
+                        choice.enabled = true;
+                        if (choice.properties) {
+                            for (const key in choice.properties) {
+                                const property = choice.properties[key];
+                                if (data[key] !== undefined) {
+                                    if (key === "basePath") {
+                                        property.value = sanitizedHttpPath(data[key]);
+                                    } else {
+                                        property.value = data[key];
+                                    }
+                                }
+                                processPropertyRecursively(property, data);
+                            }
+                        }
+                    }
+                })
+            } else if (data[val.key] !== undefined) {
+                val.value = data[val.key];
+            }
+
+            if (val.type === "CONDITIONAL_FIELDS") {
+                val.advanceProps.forEach(subField => {
+                    const subProperty = model.properties[val.key]?.properties?.[subField.key];
+                    if (subProperty) {
+                        if (data[subField.key] !== undefined) {
+                            subProperty.value = data[subField.key];
+                        }
+                        processPropertyRecursively(subProperty, data);
+                    }
+                });
+            }
+
+            val.imports = getImportsForProperty(val.key, formImports);
+        })
+        const updatedModel = populateServiceInitModelFromFormFields(formFields, model);
+
+        const res = await rpcClient
+            .getServiceDesignerRpcClient()
+            .createServiceAndListener({ filePath: "", serviceInitModel: updatedModel });
+
+
+        const newArtifact = res.artifacts.find(res => res.isNew && model.moduleName === res.moduleName);
+        if (newArtifact) {
+            rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { documentUri: newArtifact.path, position: newArtifact.position } });
+            setIsSaving(false);
+            return;
+        }
+    }
+
+    return (
+        <View>
+            {pullingStatus && (
+                <StatusContainer>
+                    {pullingStatus === PullingStatus.FETCHING && (
+                        <RelativeLoader message="Loading package..." />
+                    )}
+                    {pullingStatus === PullingStatus.PULLING && (
+                        <StatusCard>
+                            <DownloadIcon color={ThemeColors.ON_SURFACE} />
+                            <StatusText variant="body2">
+                                Please wait while the {packageName} package is being pulled...
+                            </StatusText>
+                        </StatusCard>
+                    )}
+                    {pullingStatus === PullingStatus.SUCCESS && (
+                        <StatusCard>
+                            <Icon name="bi-success" sx={{ color: ThemeColors.PRIMARY, fontSize: "18px" }} />
+                            <StatusText variant="body2">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 package. Please try again.
+                            </StatusText>
+                        </StatusCard>
+                    )}
+                </StatusContainer>
+            )}
+
+            {!pullingStatus && (
+                <>
+                    <TopNavigationBar />
+                    {headerInfo && (
+                        <TitleBar
+                            title={headerInfo.title}
+                            isBetaFeature={isBetaModule(headerInfo.moduleName)}
+                            subtitle={model.description}
+                        />
+                    )}
+                    <ViewContent>
+                        <Container>
+                            <>
+                                {formFields && formFields.length > 0 && (
+                                    <FormContainer>
+                                        <FormHeader title={`Create ${model.displayName}`} />
+                                        {filePath && targetLineRange && (
+                                            <FormGeneratorNew
+                                                fileName={filePath}
+                                                targetLineRange={targetLineRange}
+                                                fields={formFields}
+                                                isSaving={isSaving}
+                                                nestedForm={true}
+                                                onSubmit={handleOnSubmit}
+                                                preserveFieldOrder={true}
+                                                recordTypeFields={recordTypeFields}
+                                                submitText="Create"
+                                            />
+                                        )}
+                                    </FormContainer>
+                                )}
+                            </>
+                        </Container>
+                    </ViewContent>
+                </>
+            )}
+        </View>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceEditView.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceEditView.tsx
index c298f68871e..796265838de 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceEditView.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceEditView.tsx
@@ -84,13 +84,13 @@ const ButtonWrapper = styled.div`
 export interface ServiceEditViewProps {
     filePath: string;
     position: NodePosition;
+    onChange?: (data: ServiceModel, filePath: string, position: NodePosition) => void;
 }
 
 export function ServiceEditView(props: ServiceEditViewProps) {
-    const { filePath, position } = props;
+    const { filePath, position, onChange } = props;
     const { rpcClient } = useRpcContext();
     const [serviceModel, setServiceModel] = useState<ServiceModel>(undefined);
-    const [listenerModel, setListenerModel] = useState<ListenerModel>(undefined);
 
     const [saving, setSaving] = useState<boolean>(false);
     const [step, setStep] = useState<number>(1);
@@ -99,12 +99,8 @@ export function ServiceEditView(props: ServiceEditViewProps) {
         const lineRange: LineRange = { startLine: { line: position.startLine, offset: position.startColumn }, endLine: { line: position.endLine, offset: position.endColumn } };
         rpcClient.getServiceDesignerRpcClient().getServiceModelFromCode({ filePath, codedata: { lineRange } }).then(res => {
             setServiceModel(res.service);
-            rpcClient.getServiceDesignerRpcClient().getListenerModel({ moduleName: res.service.moduleName }).then(res => {
-                console.log("Listener Model: ", res);
-                setListenerModel(res.listener);
-            });
         })
-    }, []);
+    }, [props.filePath, props.position]);
 
     const onSubmit = async (value: ServiceModel) => {
         setSaving(true);
@@ -117,6 +113,12 @@ export function ServiceEditView(props: ServiceEditViewProps) {
         }
     }
 
+    const handleServiceChange = async (data: ServiceModel) => {
+        if (onChange) {
+            onChange(data, filePath, position);
+        }
+    }
+
     const handleListenerSubmit = async (value?: ListenerModel) => {
         setSaving(true);
         let listenerName;
@@ -142,33 +144,8 @@ export function ServiceEditView(props: ServiceEditViewProps) {
     }
 
     return (
-        <View>
-            <TopNavigationBar />
-            <TitleBar title="Service" subtitle="Edit Service" />
-            <ViewContent padding>
-                {!serviceModel &&
-                    <LoadingContainer>
-                        <ProgressRing />
-                        <Typography variant="h3" sx={{ marginTop: '16px' }}>Loading...</Typography>
-                    </LoadingContainer>
-                }
-                {serviceModel &&
-                    <Container>
-                        {step === 0 &&
-                            <>
-                                <ListenerConfigForm listenerModel={listenerModel} onSubmit={handleListenerSubmit} onBack={onBack} formSubmitText={saving ? "Creating..." : "Create"} isSaving={saving} />
-                            </>
-                        }
-                        {step === 1 &&
-                            <>
-                                <ServiceConfigForm serviceModel={serviceModel} onSubmit={onSubmit} openListenerForm={openListenerForm} formSubmitText={saving ? "Saving..." : "Save"} isSaving={saving} />
-                            </>
-                        }
-                    </Container>
-                }
-            </ViewContent>
-        </View >
-
-
+        <>
+            {serviceModel && <ServiceConfigForm serviceModel={serviceModel} onSubmit={onSubmit} formSubmitText={saving ? "Saving..." : "Save"} isSaving={saving} onChange={handleServiceChange} />}
+        </>
     );
 };
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceWizard.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceWizard.tsx
deleted file mode 100644
index 815a4cf8a5d..00000000000
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/ServiceWizard.tsx
+++ /dev/null
@@ -1,201 +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 { useEffect, useState } from 'react';
-import { EVENT_TYPE, ListenerModel, ListenersResponse, ServiceModel } from '@wso2/ballerina-core';
-import { Stepper, View, ViewContent } from '@wso2/ui-toolkit';
-import styled from '@emotion/styled';
-import { useRpcContext } from '@wso2/ballerina-rpc-client';
-import ListenerConfigForm from './Forms/ListenerConfigForm';
-import ServiceConfigForm from './Forms/ServiceConfigForm';
-import { LoadingContainer, LoadingOverlayContainer } from '../../styles';
-import { TitleBar } from '../../../components/TitleBar';
-import { TopNavigationBar } from '../../../components/TopNavigationBar';
-import { LoadingRing } from '../../../components/Loader';
-import { isBetaModule } from '../ComponentListView/componentListUtils';
-
-const Container = styled.div`
-    display: "flex";
-    flex-direction: "column";
-    gap: 10;
-    margin: 20px;
-`;
-
-const StepperContainer = styled.div`
-    margin-top: 16px;
-    margin-left: 16px;
-    margin-bottom: 20px;
-`;
-
-interface WizardHeaderInfo {
-    title: string;
-    moduleName: string;
-}
-
-export interface ServiceWizardProps {
-    type: string;
-}
-
-export function ServiceWizard(props: ServiceWizardProps) {
-    const { type } = props;
-    const { rpcClient } = useRpcContext();
-
-    const [step, setStep] = useState<number>(0);
-
-    const [headerInfo, setHeaderInfo] = useState<WizardHeaderInfo>(undefined);
-    const [listenerModel, setListenerModel] = useState<ListenerModel>(undefined);
-    const [serviceModel, setServiceModel] = useState<ServiceModel>(undefined);
-    const [listeners, setListeners] = useState<ListenersResponse>(undefined);
-
-    const [existing, setExisting] = useState<boolean>(false);
-    const [creatingListener, setCreatingListener] = useState<boolean>(false);
-
-    const [saving, setSaving] = useState<boolean>(false);
-    const [existingListener, setExistingListener] = useState<string>(undefined);
-    const [pullingModules, setPullingModules] = useState<boolean>(false);
-
-    useEffect(() => {
-        rpcClient.getServiceDesignerRpcClient()
-            .getServiceModel({ filePath: "", moduleName: type, listenerName: "" })
-            .then(res => {
-                setHeaderInfo({
-                    title: res.service.displayName || res.service.name,
-                    moduleName: res.service.moduleName
-                });
-            });
-        rpcClient.getServiceDesignerRpcClient().getListeners({ filePath: "", moduleName: type }).then(res => {
-            console.log("Existing Listeners: ", res);
-            setExisting(res.hasListeners);
-            if (res.hasListeners) {
-                rpcClient.getServiceDesignerRpcClient().getServiceModel({ filePath: "", moduleName: type, listenerName: "" }).then(res => {
-                    console.log("Service Model: ", res);
-                    res.service.properties["listener"].editable = true;
-                    res.service.properties["listener"].addNewButton = true;
-                    setServiceModel(res.service);
-                    setStep(1);
-                });
-            }
-            setListeners(res);
-        });
-        rpcClient.getServiceDesignerRpcClient().getListenerModel({ moduleName: type }).then(res => {
-            console.log("Listener Model: ", res);
-            setListenerModel(res.listener);
-        });
-    }, []);
-
-    const handleListenerSubmit = async (value?: ListenerModel) => {
-        setSaving(true);
-        let listenerName;
-        if (value) {
-            // Set a timeout to show step 2 after 3 seconds
-            const timeoutId = setTimeout(() => {
-                setPullingModules(true);
-            }, 3000);
-            await rpcClient.getServiceDesignerRpcClient().addListenerSourceCode({ filePath: "", listener: value });
-            // Clear the timeout if the operation completed before 3 seconds
-            clearTimeout(timeoutId);
-            setPullingModules(false);
-            if (value.properties['name'].value) {
-                listenerName = value.properties['name'].value;
-            }
-        }
-        if (!value && existing) {
-            listenerName = existingListener;
-        }
-        rpcClient.getServiceDesignerRpcClient().getServiceModel({ filePath: "", moduleName: type, listenerName }).then(res => {
-            console.log("Service Model: ", res);
-            if (existing) {
-                res.service.properties["listener"].editable = true;
-            }
-            setServiceModel(res.service);
-            setSaving(false);
-            setStep(1);
-        });
-    };
-
-    const handleServiceSubmit = async (value: ServiceModel) => {
-        setSaving(true);
-        const res = await rpcClient.getServiceDesignerRpcClient().addServiceSourceCode({ filePath: "", service: value });
-        const newArtifact = res.artifacts.find(res => res.isNew && value.moduleName === res.moduleName);
-        if (newArtifact) {
-            rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { documentUri: newArtifact.path, position: newArtifact.position } });
-            setSaving(false);
-            return;
-        }
-    }
-
-    const onBack = () => {
-        setStep(1);
-    }
-
-    const openListenerForm = () => {
-        setCreatingListener(true);
-        setStep(0);
-    }
-
-    const onListenerSelect = (value: string) => {
-        setExistingListener(value);
-    }
-
-    const defaultSteps = ["Listener Configuration", "Service Configuration"];
-
-    return (
-        <View>
-            <TopNavigationBar />
-            {headerInfo && (
-                <TitleBar
-                    title={headerInfo.title}
-                    isBetaFeature={isBetaModule(headerInfo.moduleName)}
-                />
-            )}
-            <ViewContent>
-                {!listenerModel && !listeners &&
-                    <LoadingContainer>
-                        <LoadingRing message="Loading listener..." />
-                    </LoadingContainer>
-                }
-                {listenerModel &&
-                    <Container>
-                        {!listeners?.hasListeners &&
-                            <StepperContainer>
-                                <Stepper alignment='flex-start' steps={defaultSteps} currentStep={step} />
-                            </StepperContainer>
-                        }
-                        {step === 0 &&
-                            <>
-                                <ListenerConfigForm listenerModel={listenerModel} onSubmit={handleListenerSubmit} onBack={creatingListener && onBack} formSubmitText={saving ? "Creating..." : (listeners?.hasListeners ? "Create" : undefined)} isSaving={saving} />
-                            </>
-                        }
-                        {step === 1 &&
-                            <>
-                                <ServiceConfigForm serviceModel={serviceModel} onSubmit={handleServiceSubmit} openListenerForm={existing && openListenerForm} formSubmitText={saving ? "Creating..." : "Create"} isSaving={saving} />
-                            </>
-                        }
-                        {pullingModules &&
-                            <LoadingOverlayContainer>
-                                <LoadingRing message="Pulling the required modules..." />
-                            </LoadingOverlayContainer>
-                        }
-                    </Container>
-                }
-            </ViewContent>
-        </View >
-
-
-    );
-};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/components/AddServiceElementDropdown.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/components/AddServiceElementDropdown.tsx
new file mode 100644
index 00000000000..96d4b18519b
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/components/AddServiceElementDropdown.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 { Codicon, DropdownButton, Typography } from "@wso2/ui-toolkit";
+import styled from "@emotion/styled";
+
+const ButtonText = styled.span`
+    @media (max-width: 768px) {
+        display: none;
+    }
+    width: 100%;
+`;
+
+interface AddServiceElementDropdownProps {
+    buttonTitle: string;
+    toolTip?: string;
+    defaultOption?: string;
+    onOptionChange: (option: string) => void;
+    options: DropdownOptionProps[];
+}
+
+
+export function AddServiceElementDropdown(props: AddServiceElementDropdownProps) {
+    const { buttonTitle, toolTip, defaultOption, onOptionChange, options } = props;
+    const dropdownOptions = options.map((option) => (
+        {
+            content: <DropdownOption
+                title={option.title}
+                description={option.description}
+            />,
+            value: option.value,
+        }
+    ));
+
+    return (
+        <div style={{ position: 'relative', zIndex: 1000 }}>
+            <DropdownButton
+                buttonContent={
+                    <>
+                        <ButtonText>{buttonTitle}</ButtonText>
+                    </>
+                }
+                selecteOption={""}
+                tooltip={toolTip ?? "Add Functions or Handlers"}
+                dropDownAlign="bottom"
+                buttonSx={{
+                    appearance: 'none',
+                    height: '28px',
+                    minHeight: '28px',
+                    cursor: 'default',
+                    pointerEvents: 'none'
+                }}
+                optionButtonSx={{
+                    borderLeft: "none",
+                    height: '28px',
+                    minHeight: '28px'
+                }}
+                dropdownSx={{
+                    zIndex: 9999,
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                    border: '1px solid var(--vscode-dropdown-border)',
+                    backgroundColor: 'var(--vscode-dropdown-background)',
+                    minWidth: '280px',
+                    position: 'absolute',
+                    right: '0',
+                    left: 'auto'
+                }}
+                onOptionChange={onOptionChange}
+                onClick={() => { }}
+                options={dropdownOptions}
+            />
+        </div>
+    );
+}
+
+export interface DropdownOptionProps {
+    title: string;
+    description: string;
+    value?: string;
+}
+
+function DropdownOption({ title, description }: DropdownOptionProps) {
+    return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px 8px 8px' }}>
+            <div>
+                <Typography variant="body2" sx={{ fontWeight: 'medium' }}>{title}</Typography>
+                <Typography variant="body3" sx={{ color: 'var(--vscode-descriptionForeground)' }}>
+                    {description}
+                </Typography>
+            </div>
+        </div>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/components/ResourceAccordion.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/components/ResourceAccordion.tsx
index 32e56cfa858..c4b396760b2 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/components/ResourceAccordion.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/components/ResourceAccordion.tsx
@@ -18,13 +18,10 @@
  */
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
-import { Button, Codicon, Confirm, ContextMenu, Icon, LinkButton, Typography } from '@wso2/ui-toolkit';
+import { Button, Codicon, Confirm, Icon } from '@wso2/ui-toolkit';
 import { FunctionModel } from '@wso2/ballerina-core';
+import { canDataBind } from '../utils';
 
-type MethodProp = {
-    color: string;
-    hasLeftMargin?: boolean;
-};
 
 type ContainerProps = {
     borderColor?: string;
@@ -50,6 +47,15 @@ const AccordionContainer = styled.div<ContainerProps>`
     border: ${(p: ContainerProps) => p.haveErrors ? "1px solid red" : "none"};
 `;
 
+const ActionButton = styled(Button)`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    & > vscode-button::part(control) {
+        padding: 4px 8px;
+    }
+`;
+
 const AccordionHeader = styled.div<HeaderProps>`
     padding: 10px;
     cursor: pointer;
@@ -57,70 +63,38 @@ const AccordionHeader = styled.div<HeaderProps>`
     grid-template-columns: 3fr 1fr;
 `;
 
-const LinkButtonWrapper = styled.div`
+const MethodSection = styled.div`
     display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    padding: 0 16px;
-
-    :hover {
-        outline: 1px solid var(--vscode-inputOption-activeBorder);
-    }
+    gap: 4px;
 `;
 
-const ButtonWrapper = styled.div`
+const ButtonSection = styled.div<ButtonSectionProps>`
     display: flex;
-    justify-content: center;
     align-items: center;
-    flex-direction: column;
-    font-size: 10px;
-    width: 40px;
+    margin-left: auto;
+    gap: ${(p: ButtonSectionProps) => p.isExpanded ? "8px" : "6px"};
 `;
 
-const MethodBox = styled.div<MethodProp>`
+const MethodPath = styled.span`
+    align-self: center;
+    margin-left: 10px;
+`;
+
+const MethodBox = styled.div`
     display: flex;
     justify-content: center;
     height: 25px;
     min-width: 70px;
     width: auto;
-    margin-left: ${(p: MethodProp) => p.hasLeftMargin ? "10px" : "0px"};
+    margin-left: 0px;
     text-align: center;
     padding: 3px 5px 3px 5px;
-    background-color: ${(p: MethodProp) => p.color};
+    background-color: #876036;
     color: #FFF;
     align-items: center;
     font-weight: bold;
 `;
 
-const MethodSection = styled.div`
-    display: flex;
-    gap: 4px;
-`;
-
-const verticalIconStyles = {
-    transform: "rotate(90deg)",
-    ":hover": {
-        backgroundColor: "var(--vscode-welcomePage-tileHoverBackground)",
-    }
-};
-
-const ButtonSection = styled.div<ButtonSectionProps>`
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    gap: ${(p: ButtonSectionProps) => p.isExpanded ? "8px" : "6px"};
-`;
-
-const AccordionContent = styled.div`
-    padding: 10px;
-`;
-
-const MethodPath = styled.span`
-    align-self: center;
-    margin-left: 10px;
-`;
-
 const colors = {
     "GET": '#3d7eff',
     "PUT": '#fca130',
@@ -154,6 +128,7 @@ export function getColorByMethod(method: string) {
 
 export interface ResourceAccordionProps {
     functionModel: FunctionModel;
+    method?: string;
     goToSource: (resource: FunctionModel) => void;
     onEditResource: (resource: FunctionModel) => void;
     onDeleteResource: (resource: FunctionModel) => void;
@@ -161,7 +136,7 @@ export interface ResourceAccordionProps {
 }
 
 export function ResourceAccordion(params: ResourceAccordionProps) {
-    const { functionModel, goToSource, onEditResource, onDeleteResource, onResourceImplement } = params;
+    const { functionModel, method, goToSource, onEditResource, onDeleteResource, onResourceImplement } = params;
 
     const [isOpen, setIsOpen] = useState(false);
     const [isConfirmOpen, setConfirmOpen] = useState(false);
@@ -208,23 +183,38 @@ export function ResourceAccordion(params: ResourceAccordionProps) {
         <AccordionContainer data-testid="service-design-view-resource">
             <AccordionHeader onClick={handleResourceImplement}>
                 <MethodSection>
-                    <MethodBox color={getColorByMethod(functionModel.accessor?.value || functionModel.kind)}>
-                        {functionModel.accessor?.value || functionModel.kind.toLowerCase()}
+                    <MethodBox>
+                        {method || "Event"}
                     </MethodBox>
                     <MethodPath>{functionModel.name.value}</MethodPath>
                 </MethodSection>
-                {functionModel.editable &&
+                {functionModel &&
                     <ButtonSection>
                         <>
                             {onEditResource! && (
-                                <Button appearance="icon" tooltip="Edit FunctionModel" onClick={handleEditResource} disabled={!functionModel.editable}>
-                                    <Icon name="editIcon" sx={{ marginTop: 3.5 }} />
-                                </Button>
+                                <ActionButton id="bi-edit" appearance="secondary" onClick={handleEditResource} disabled={!functionModel.editable && !canDataBind(functionModel)}>
+                                    <Icon
+                                        name="bi-settings"
+                                        sx={{
+                                            cursor: !functionModel.editable ? "not-allowed" : "pointer",
+                                            opacity: !functionModel.editable ? 0.5 : 1,
+                                            fontSize: "16px",
+                                            width: "16px",
+                                        }}
+                                    />
+                                </ActionButton >
                             )}
                             {onDeleteResource! && (
-                                <Button appearance="icon" tooltip="Delete FunctionModel" onClick={handleDeleteResource} disabled={!functionModel.editable}>
-                                    <Codicon name="trash" />
-                                </Button>
+                                <ActionButton id="bi-delete" appearance="secondary" onClick={handleDeleteResource} disabled={!functionModel.optional}>
+                                    <Codicon
+                                        name="trash"
+                                        sx={{
+                                            cursor: !functionModel.optional ? "not-allowed" : "pointer",
+                                            opacity: !functionModel.optional ? 0.5 : 1,
+                                            width: "16px",
+                                        }}
+                                    />
+                                </ActionButton >
                             )}
                         </>
                     </ButtonSection>
@@ -242,4 +232,3 @@ export function ResourceAccordion(params: ResourceAccordionProps) {
         </AccordionContainer>
     );
 };
-
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/components/ResourceAccordionV2.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/components/ResourceAccordionV2.tsx
index f81f0f17b23..9bd2b819984 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/components/ResourceAccordionV2.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/components/ResourceAccordionV2.tsx
@@ -132,6 +132,15 @@ const colors = {
     "HEAD": '#9012fe'
 }
 
+const ActionButton = styled(Button)`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    & > vscode-button::part(control) {
+        padding: 4px 8px;
+    }
+`;
+
 
 export interface ResourceAccordionPropsV2 {
     resource: ProjectStructureArtifactResponse;
@@ -139,10 +148,12 @@ export interface ResourceAccordionPropsV2 {
     onDeleteResource: (resource: FunctionModel) => void;
     onResourceImplement: (resource: FunctionModel) => void;
     readOnly?: boolean;
+    methodName?: string;
+    isMcpTool?: boolean;
 }
 
 export function ResourceAccordionV2(params: ResourceAccordionPropsV2) {
-    const { resource, onEditResource, onDeleteResource, onResourceImplement, readOnly } = params;
+    const { resource, onEditResource, onDeleteResource, onResourceImplement, readOnly, methodName, isMcpTool } = params;
 
     const [isOpen, setIsOpen] = useState(false);
     const [isConfirmOpen, setConfirmOpen] = useState(false);
@@ -222,31 +233,33 @@ export function ResourceAccordionV2(params: ResourceAccordionPropsV2) {
             <AccordionHeader onClick={handleResourceImplement}>
                 <MethodSection>
                     <MethodBox color={getColorByMethod(resource.icon)}>
-                        {resource.icon.split("-")[0].toUpperCase()}
+                        {methodName ? methodName : resource.icon ? resource.icon.split("-")[0].toUpperCase() : "REMOTE"}
                     </MethodBox>
                     <MethodPath>{resource.name}</MethodPath>
                 </MethodSection>
                 <ButtonSection>
                     <>
-                        <Button appearance="icon" tooltip="Edit Resource" onClick={handleEditResource} disabled={readOnly}>
+                        <ActionButton id="bi-edit" appearance="secondary" onClick={handleEditResource}>
                             <Icon
-                                name="editIcon"
+                                name="bi-settings"
                                 sx={{
-                                    marginTop: 3.5,
-                                    cursor: readOnly ? "not-allowed" : "pointer",
-                                    opacity: readOnly ? 0.5 : 1,
+                                    cursor: "pointer",
+                                    opacity: 1,
+                                    fontSize: "16px",
+                                    width: "16px",
                                 }}
                             />
-                        </Button>
-                        <Button appearance="icon" tooltip="Delete Resource" onClick={handleDeleteResource} disabled={readOnly}>
+                        </ActionButton >
+                        <ActionButton id="bi-delete" appearance="secondary" onClick={handleDeleteResource} disabled={readOnly}>
                             <Codicon
                                 name="trash"
                                 sx={{
                                     cursor: readOnly ? "not-allowed" : "pointer",
                                     opacity: readOnly ? 0.5 : 1,
+                                    width: "16px",
                                 }}
                             />
-                        </Button>
+                        </ActionButton >
                     </>
                 </ButtonSection>
 
@@ -260,7 +273,6 @@ export function ResourceAccordionV2(params: ResourceAccordionPropsV2) {
                 anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
                 transformOrigin={{ vertical: "top", horizontal: "right" }}
             />
-        </AccordionContainer>
+        </AccordionContainer >
     );
 };
-
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/index.tsx
index f51e9523dc2..1e09d7e5f1c 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/index.tsx
@@ -16,34 +16,36 @@
  * under the License.
  */
 
-import { useEffect, useState, useRef } from "react";
-import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { NodePosition } from "@wso2/syntax-tree";
+import styled from "@emotion/styled";
 import {
+    DIRECTORY_MAP,
     EVENT_TYPE,
+    FunctionModel,
     LineRange,
     MACHINE_VIEW,
-    ServiceModel,
-    FunctionModel,
-    STModification,
-    removeStatement,
-    DIRECTORY_MAP,
     ProjectStructureArtifactResponse,
-    PropertyModel,
     ComponentInfo,
+    ServiceModel
 } from "@wso2/ballerina-core";
-import { Button, Codicon, Icon, LinkButton, Typography, View, TextField } from "@wso2/ui-toolkit";
-import styled from "@emotion/styled";
-import { ResourceAccordion } from "./components/ResourceAccordion";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import { PanelContainer } from "@wso2/ballerina-side-panel";
-import { FunctionConfigForm } from "./Forms/FunctionConfigForm";
-import { ResourceForm } from "./Forms/ResourceForm";
-import { FunctionForm } from "./Forms/FunctionForm";
-import { applyModifications, isPositionChanged } from "../../../utils/utils";
-import { TopNavigationBar } from "../../../components/TopNavigationBar";
-import { TitleBar } from "../../../components/TitleBar";
+import { NodePosition } from "@wso2/syntax-tree";
+import { Button, Codicon, Icon, LinkButton, TextField, Typography, View } from "@wso2/ui-toolkit";
+import { useEffect, useRef, useState } from "react";
 import { LoadingRing } from "../../../components/Loader";
+import { TitleBar } from "../../../components/TitleBar";
+import { TopNavigationBar } from "../../../components/TopNavigationBar";
+import { applyModifications, isPositionChanged } from "../../../utils/utils";
+import { AddServiceElementDropdown, DropdownOptionProps } from "./components/AddServiceElementDropdown";
+import { ResourceAccordion } from "./components/ResourceAccordion";
 import { ResourceAccordionV2 } from "./components/ResourceAccordionV2";
+import { FunctionConfigForm } from "./Forms/FunctionConfigForm";
+import { FunctionForm } from "./Forms/FunctionForm";
+import { ResourceForm } from "./Forms/ResourceForm";
+import { getCustomEntryNodeIcon } from "../ComponentListView/EventIntegrationPanel";
+import { McpToolForm } from "./Forms/McpToolForm";
+import { removeForwardSlashes, canDataBind, getReadableListenerName } from "./utils";
+import { DatabindForm } from "./Forms/DatabindForm";
 
 const LoadingContainer = styled.div`
     display: flex;
@@ -53,26 +55,19 @@ const LoadingContainer = styled.div`
     flex-direction: column;
 `;
 
-const InfoContainer = styled.div`
-    display: flex;
-    gap: 20px;
-    padding: 15px;
-    //border: 1px solid var(--vscode-editorIndentGuide-background);
-`;
-
-const InfoSection = styled.div`
-    display: flex;
-    align-items: center;
-`;
-
 const ServiceContainer = styled.div`
     padding-right: 10px;
     padding-left: 10px;
+    flex-grow: 1;
+    overflow-y: auto;
+    height: 0; /* This forces the flex item to use available space */
 `;
 
 const FunctionsContainer = styled.div`
     max-height: 550px;
     overflow: scroll;
+    padding: 15px;
+    padding-right: 0px;
 `;
 
 const ButtonText = styled.span`
@@ -84,17 +79,110 @@ const ButtonText = styled.span`
 
 const HeaderContainer = styled.div`
     display: flex;
-    padding: 15px;
+    padding: 0px 15px;
     align-items: center;
     justify-content: space-between;
 `;
 
+const ActionGroup = styled.div`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+`;
+
+const ServiceMetadataContainer = styled.div`
+    padding: 12px 25px;
+    border-bottom: 1px solid var(--vscode-editorWidget-border);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background: var(--vscode-editor-background);
+`;
+
+const MetadataRow = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+`;
+
+const MetadataLabel = styled.span`
+    font-size: 12px;
+    color: var(--vscode-descriptionForeground);
+    font-weight: 500;
+    min-width: 60px;
+`;
+
+const ListenerBadge = styled.div`
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 7px;
+    background: var(--vscode-editorWidget-background, #f3f3f3);
+    color: var(--vscode-descriptionForeground, #888);
+    border-radius: 10px;
+    font-weight: 400;
+    cursor: pointer;
+    transition: background 0.12s;
+
+    &:hover {
+        background: var(--vscode-editorWidget-border, #e0e0e0);
+        transform: none;
+    }
+`;
+
+const PropertyInline = styled.div`
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 8px;
+    background: var(--vscode-input-background);
+    border: 1px solid var(--vscode-editorWidget-border);
+    border-radius: 4px;
+    font-size: 11px;
+    height: 24px;
+    pointer-events: none;
+`;
+
+const PropertyKey = styled.span`
+    color: var(--vscode-descriptionForeground);
+    font-weight: 500;
+`;
+
+const PropertyValue = styled.span`
+    color: var(--vscode-input-foreground);
+    font-family: var(--vscode-editor-font-family);
+`;
+
+const EmptyReadmeContainer = styled.div`
+    display: flex;
+    margin: 80px 0px;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+`;
+
+const Description = styled(Typography)`
+    color: var(--vscode-descriptionForeground);
+`;
+
 interface ServiceDesignerProps {
     filePath: string;
     position: NodePosition;
     serviceIdentifier: string;
 }
 
+interface ReadonlyProperty {
+    label: string;
+    value: string | string[];
+}
+
+export const ADD_HANDLER = "add-handler";
+export const ADD_INIT_FUNCTION = "add-init-function";
+export const ADD_REUSABLE_FUNCTION = "add-reusable-function";
+export const EXPORT_OAS = "export-oas";
+export const ADD_HTTP_RESOURCE = "add-http-resource";
+
 export function ServiceDesigner(props: ServiceDesignerProps) {
     const { filePath, position, serviceIdentifier } = props;
     const { rpcClient } = useRpcContext();
@@ -111,6 +199,42 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
     const [resources, setResources] = useState<ProjectStructureArtifactResponse[]>([]);
     const [searchValue, setSearchValue] = useState<string>("");
 
+    const [listeners, setListeners] = useState<string[]>([]);
+    const [readonlyProperties, setReadonlyProperties] = useState<Set<ReadonlyProperty>>(new Set());
+    const [isHttpService, setIsHttpService] = useState<boolean>(false);
+    const [isMcpService, setIsMcpService] = useState<boolean>(false);
+    const [objectMethods, setObjectMethods] = useState<FunctionModel[]>([]);
+    const [dropdownOptions, setDropdownOptions] = useState<DropdownOptionProps[]>([]);
+    const [initMethod, setInitMethod] = useState<FunctionModel>(undefined);
+    const [enabledHandlers, setEnabledHandlers] = useState<FunctionModel[]>([]);
+    const [unusedHandlers, setUnusedHandlers] = useState<FunctionModel[]>([]);
+    const [selectedHandler, setSelectedHandler] = useState<FunctionModel>(undefined);
+
+    const [initFunction, setInitFunction] = useState<FunctionModel>(undefined);
+
+    const handleCloseInitFunction = () => {
+        setInitFunction(undefined);
+    };
+
+    const handleInitFunctionSave = async (value: FunctionModel) => {
+        setIsSaving(true);
+        const lineRange: LineRange = {
+            startLine: { line: position.startLine, offset: position.startColumn },
+            endLine: { line: position.endLine, offset: position.endColumn },
+        };
+        const res = await rpcClient
+            .getServiceDesignerRpcClient()
+            .updateResourceSourceCode({ filePath, codedata: { lineRange }, function: value, artifactType: DIRECTORY_MAP.SERVICE });
+        const serviceArtifact = res.artifacts.find(res => res.name === serviceIdentifier);
+        if (serviceArtifact) {
+            fetchService(serviceArtifact.position);
+            await rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { documentUri: serviceArtifact.path, position: serviceArtifact.position } });
+            setIsSaving(false);
+            setInitFunction(undefined);
+            return;
+        }
+    }
+
     useEffect(() => {
         if (!serviceModel || isPositionChanged(prevPosition.current, position)) {
             fetchService(position);
@@ -121,7 +245,7 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
         });
     }, [position]);
 
-    const fetchService = (targetPosition: NodePosition) => {
+    const fetchService = (targetPosition: NodePosition, addMore?: boolean) => {
         const lineRange: LineRange = {
             startLine: { line: targetPosition.startLine, offset: targetPosition.startColumn },
             endLine: { line: targetPosition.endLine, offset: targetPosition.endColumn },
@@ -132,8 +256,13 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
                 .getServiceModelFromCode({ filePath, codedata: { lineRange } })
                 .then((res) => {
                     console.log("Service Model: ", res.service);
-                    setShowForm(false);
+                    if (addMore) {
+                        handleNewResourceFunction();
+                    } else {
+                        setShowForm(false);
+                    }
                     setServiceModel(res.service);
+                    setServiceMetaInfo(res.service);
                     setIsSaving(false);
                     prevPosition.current = targetPosition;
                 });
@@ -143,6 +272,91 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
         getProjectListeners();
     };
 
+    const setServiceMetaInfo = (service: ServiceModel) => {
+        if (service?.properties?.listener) {
+            const listenerProperty = service.properties.listener;
+            if (listenerProperty.values && listenerProperty.values.length > 0) {
+                setListeners(listenerProperty.values);
+            } else if (listenerProperty.value) {
+                setListeners([listenerProperty.value]);
+            }
+        }
+        if (service?.properties) {
+            // Extract readonly properties from readOnlyMetadata if available
+            const readonlyProps: Set<ReadonlyProperty> = new Set();
+            const readOnlyMetadata = service.properties.readOnlyMetadata;
+
+            if (readOnlyMetadata?.enabled && readOnlyMetadata.value && typeof readOnlyMetadata.value === "object" && !Array.isArray(readOnlyMetadata.value)) {
+                Object.entries(readOnlyMetadata.value).forEach(([label, values]) => {
+                    if (Array.isArray(values) && values.length > 0) {
+                        readonlyProps.add({
+                            label,
+                            value: values.length === 1 ? values[0] : values
+                        });
+                    }
+                });
+            }
+
+            setReadonlyProperties(readonlyProps);
+            setIsHttpService(service.moduleName === "http");
+            setIsMcpService(service.moduleName === "mcp");
+        }
+
+        // Extract object methods if available (for service classes)
+        const objectMethods: FunctionModel[] = [];
+        const enabledHandlers: FunctionModel[] = [];
+        const unusedHandlers: FunctionModel[] = [];
+
+        let hasInitMethod = false;
+        service.functions.forEach(func => {
+            if (func.kind === "DEFAULT") {
+                if (func.name?.value === "init") {
+                    hasInitMethod = true;
+                    setInitMethod(func);
+                } else {
+                    objectMethods.push(func);
+                }
+            }
+            if (func.kind === "REMOTE" || func.kind === "RESOURCE") {
+                if (func.enabled) {
+                    enabledHandlers.push(func);
+                } else {
+                    unusedHandlers.push(func);
+                }
+            }
+        });
+
+        setEnabledHandlers(enabledHandlers);
+        setUnusedHandlers(unusedHandlers);
+        setObjectMethods(objectMethods);
+
+        // Set dropdown options
+        const options: DropdownOptionProps[] = [];
+        // if (!hasInitMethod) {
+        //     options.push({
+        //         title: "Add Init Function",
+        //         description: "Add a new init function within the service",
+        //         value: ADD_INIT_FUNCTION
+        //     });
+        // }
+
+        // options.push({
+        //     title: "Add Sub Flow",
+        //     description: "Add a new reusable function within the service",
+        //     value: ADD_REUSABLE_FUNCTION
+        // });
+
+        if (service.moduleName === "http") {
+            options.push({
+                title: "Export OpenAPI Spec",
+                description: "Export the OpenAPI spec for the service",
+                value: EXPORT_OAS
+            });
+        }
+
+        setDropdownOptions(options);
+    }
+
     const getProjectListeners = () => {
         rpcClient
             .getBIDiagramRpcClient()
@@ -155,19 +369,33 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
                 const services = res.directoryMap[DIRECTORY_MAP.SERVICE];
                 if (services.length > 0) {
                     const selectedService = services.find((service) => service.name === serviceIdentifier);
-                    setResources(selectedService.resources);
+                    if (selectedService.moduleName === "mcp") {
+                        const updatedResources = selectedService.resources.map(resource => ({
+                            ...resource,
+                            icon: "tool"
+                        }));
+                        setResources(updatedResources);
+                    } else {
+                        setResources(selectedService.resources);
+                    }
+
+                    // // Remove the init option from setDropdownOptions(options); if init function is here
+                    // if (selectedService.resources.find((func) => func.name === "init")) {
+                    //     const filtered = [...dropdownOptions].filter((option) => option.value !== ADD_INIT_FUNCTION);
+                    //     setDropdownOptions(filtered);
+                    // }
                 }
             });
     };
 
     const handleOpenListener = (value: string) => {
-        const listenerValue = projectListeners.find((listener) => listener.name === value);
         rpcClient.getVisualizerRpcClient().openView({
             type: EVENT_TYPE.OPEN_VIEW,
             location: {
-                view: MACHINE_VIEW.BIListenerConfigView,
-                position: listenerValue.position,
-                documentUri: listenerValue.path,
+                view: MACHINE_VIEW.BIServiceConfigView,
+                position: position,
+                documentUri: filePath,
+                identifier: value,
             },
         });
     };
@@ -208,14 +436,98 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
             });
     };
 
-    const handleNewFunction = () => {
+    const handleNewMcpTool = () => {
+        rpcClient
+            .getServiceDesignerRpcClient()
+            .getFunctionModel({ type: "mcp", functionName: "remote" })
+            .then((res) => {
+                console.log("New Function Model: ", res.function);
+                // let fields = res.function ? convertConfig(res.function.properties) : [];
+                setFunctionModel(res.function);
+                setIsNew(true);
+                setShowForm(true);
+            });
+    };
+
+    const handleNewObjectMethod = () => {
+        rpcClient
+            .getServiceDesignerRpcClient()
+            .getFunctionModel({ type: "object", functionName: "default" })
+            .then((res) => {
+                console.log("New Function Model: ", res.function);
+                setFunctionModel(res.function);
+                setIsNew(true);
+                setShowForm(true);
+            });
+    };
+
+    const onSelectAddReusableFunction = () => {
+        setIsNew(true);
+        // setShowFunctionConfigForm(true);
+        handleNewObjectMethod();
+    };
+
+    const onSelectAddHandler = () => {
         setIsNew(true);
         setShowFunctionConfigForm(true);
     };
 
-    const handleNewFunctionClose = () => {
+    const onHandlerSelected = (handler: FunctionModel) => {
+        // Check if this handler is databindable
+        if (canDataBind(handler)) {
+            // For databindable functions, show DatabindForm for configuration
+            setSelectedHandler(handler);
+            setFunctionModel(handler);
+            setShowForm(true);
+            // Close the FunctionConfigForm to show the DatabindForm instead
+            setShowFunctionConfigForm(false);
+        } else {
+            // For regular functions, immediately add without showing a form
+            handler.enabled = true;
+            setShowFunctionConfigForm(false);
+            handleFunctionSubmit(handler);
+        }
+    };
+
+    const onSelectAddInitFunction = async () => {
         setIsNew(false);
+        const lsResponse = await rpcClient.getServiceDesignerRpcClient().getFunctionModel({
+            type: 'object',
+            functionName: 'init'
+        });
+        if (lsResponse.function) {
+            setInitFunction(lsResponse.function);
+            console.log(`Adding init function`, lsResponse.function);
+        }
+    };
+
+    const handleAddDropdownOption = (option: string) => {
+        switch (option) {
+            case ADD_REUSABLE_FUNCTION:
+                onSelectAddReusableFunction();
+                break;
+            case ADD_INIT_FUNCTION:
+                onSelectAddInitFunction();
+                break;
+            case ADD_HANDLER:
+                onSelectAddHandler();
+                break;
+            case ADD_HTTP_RESOURCE:
+                handleNewResourceFunction();
+                break;
+            case EXPORT_OAS:
+                handleExportOAS();
+                break;
+        }
+    };
+
+    const handleNewFunctionClose = () => {
         setShowForm(false);
+        // If a handler was selected, also close the FunctionConfigForm
+        if (selectedHandler) {
+            setShowFunctionConfigForm(false);
+            setSelectedHandler(undefined);
+        }
     };
 
     const handleFunctionEdit = (value: FunctionModel) => {
@@ -225,31 +537,25 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
     };
 
     const handleFunctionDelete = async (model: FunctionModel) => {
-        if (model.kind === "REMOTE") {
-            model.enabled = false;
-            await handleResourceSubmit(model);
-        } else {
-            console.log("Deleting Resource Model:", model);
-            const targetPosition: NodePosition = {
-                startLine: model.codedata.lineRange.startLine.line,
-                startColumn: model.codedata.lineRange.startLine.offset,
-                endLine: model.codedata.lineRange.endLine.line,
-                endColumn: model.codedata.lineRange.endLine.offset,
-            };
-            const component: ComponentInfo = {
-                name: model.name.value,
-                filePath: model.codedata.lineRange.fileName,
-                startLine: targetPosition.startLine,
-                startColumn: targetPosition.startColumn,
-                endLine: targetPosition.endLine,
-                endColumn: targetPosition.endColumn,
-            };
-            await rpcClient.getBIDiagramRpcClient().deleteByComponentInfo({ filePath, component });
-            fetchService(targetPosition);
+        console.log("Deleting Resource Model:", model);
+        const component: ComponentInfo = {
+            name: model.name.value,
+            filePath: model.codedata.lineRange.fileName,
+            startLine: model.codedata.lineRange.startLine.line,
+            startColumn: model.codedata.lineRange.startLine.offset,
+            endLine: model.codedata.lineRange.endLine.line,
+            endColumn: model.codedata.lineRange.endLine.offset,
+        };
+        await rpcClient.getBIDiagramRpcClient().deleteByComponentInfo({ filePath, component });
+        const projectStructure = await rpcClient.getBIDiagramRpcClient().getProjectStructure();
+        const serviceArtifact = projectStructure.directoryMap[DIRECTORY_MAP.SERVICE].find(res => res.name === serviceIdentifier);
+        if (serviceArtifact) {
+            await rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { documentUri: serviceArtifact.path, position: serviceArtifact.position } });
+            fetchService(serviceArtifact.position);
         }
     };
 
-    const handleResourceSubmit = async (value: FunctionModel) => {
+    const handleResourceSubmit = async (value: FunctionModel, openDiagram: boolean = false) => {
         setIsSaving(true);
         const lineRange: LineRange = {
             startLine: { line: position.startLine, offset: position.startColumn },
@@ -259,18 +565,28 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
         if (isNew) {
             res = await rpcClient
                 .getServiceDesignerRpcClient()
-                .addResourceSourceCode({ filePath, codedata: { lineRange }, function: value, service: serviceModel });
+                .addResourceSourceCode({ filePath, codedata: { lineRange }, function: value, artifactType: DIRECTORY_MAP.SERVICE });
             const serviceArtifact = res.artifacts.find(res => res.isNew && res.name === serviceIdentifier);
             if (serviceArtifact) {
-                fetchService(serviceArtifact.position);
-                await rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { documentUri: serviceArtifact.path, position: serviceArtifact.position } });
+                if (openDiagram) {
+                    const accessor = value.accessor.value;
+                    const path = value.name.value;
+                    const resourceIdentifier = `${accessor}#${path}`.toLowerCase();
+                    const resource = serviceArtifact.resources.find(res => res.id === resourceIdentifier);
+                    if (resource) {
+                        await rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { documentUri: resource.path, position: resource.position } });
+                    }
+                } else {
+                    await rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { documentUri: serviceArtifact.path, position: serviceArtifact.position } });
+                    fetchService(serviceArtifact.position, true);
+                }
                 setIsSaving(false);
                 return;
             }
         } else {
             res = await rpcClient
                 .getServiceDesignerRpcClient()
-                .updateResourceSourceCode({ filePath, codedata: { lineRange }, function: value, service: serviceModel });
+                .updateResourceSourceCode({ filePath, codedata: { lineRange }, function: value, artifactType: DIRECTORY_MAP.SERVICE });
             const serviceArtifact = res.artifacts.find(res => res.name === serviceIdentifier);
             if (serviceArtifact) {
                 fetchService(serviceArtifact.position);
@@ -279,10 +595,15 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
                 return;
             }
         }
-        setIsNew(false);
     };
 
-    const handleFunctionSubmit = async (value: FunctionModel) => {
+    /**
+     * This function invokes when a new function is added using right panel form.
+     *
+     * @param value
+     * @param openDiagram - Whether to open the flow diagram after saving
+     */
+    const handleFunctionSubmit = async (value: FunctionModel, openDiagram: boolean = false) => {
         setIsSaving(true);
         const lineRange: LineRange = {
             startLine: { line: position.startLine, offset: position.startColumn },
@@ -292,16 +613,33 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
         if (isNew) {
             res = await rpcClient
                 .getServiceDesignerRpcClient()
-                .addFunctionSourceCode({ filePath, codedata: { lineRange }, function: value });
+                .addFunctionSourceCode({ filePath, codedata: { lineRange }, function: value, artifactType: DIRECTORY_MAP.SERVICE });
             const serviceArtifact = res.artifacts.find(res => res.name === serviceIdentifier);
             if (serviceArtifact) {
-                fetchService(serviceArtifact.position);
-                await rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { documentUri: serviceArtifact.path, position: serviceArtifact.position } });
+                if (openDiagram) {
+                    // Navigate to flow diagram for the newly created handler
+                    const handler = serviceArtifact.resources?.find(
+                        r => r.name === value.name.value
+                    );
+                    if (handler) {
+                        await rpcClient.getVisualizerRpcClient().openView({
+                            type: EVENT_TYPE.OPEN_VIEW,
+                            location: { documentUri: handler.path, position: handler.position }
+                        });
+                    }
+                } else {
+                    // Just update the project location
+                    fetchService(serviceArtifact.position);
+                    await rpcClient.getVisualizerRpcClient().openView({
+                        type: EVENT_TYPE.UPDATE_PROJECT_LOCATION,
+                        location: { documentUri: serviceArtifact.path, position: serviceArtifact.position }
+                    });
+                }
             }
         } else {
             res = await rpcClient
                 .getServiceDesignerRpcClient()
-                .updateResourceSourceCode({ filePath, codedata: { lineRange }, function: value });
+                .updateResourceSourceCode({ filePath, codedata: { lineRange }, function: value, artifactType: DIRECTORY_MAP.SERVICE });
             const serviceArtifact = res.artifacts.find(res => res.name === serviceIdentifier);
             if (serviceArtifact) {
                 fetchService(serviceArtifact.position);
@@ -318,6 +656,14 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
         setShowFunctionConfigForm(false);
     };
 
+    const handleInitFunctionClose = () => {
+        setIsNew(false);
+    };
+
+    const handleAddHandleClose = () => {
+        setIsNew(false);
+    };
+
     const handleServiceTryIt = () => {
         const basePath = serviceModel.properties?.basePath?.value?.trim();
         const listener = serviceModel.properties?.listener?.value?.trim();
@@ -329,237 +675,628 @@ export function ServiceDesigner(props: ServiceDesignerProps) {
         rpcClient.getServiceDesignerRpcClient().exportOASFile({});
     };
 
+    const handleAddListener = () => {
+        // TODO: Implement add listener functionality
+        console.log("Add listener clicked");
+    };
+
+    const handleFieldEdit = () => {
+    };
+
+    const handleFieldDelete = () => {
+    };
+
+    const handleAddServiceField = () => {
+        // TODO: Implement add service field functionality
+        console.log("Add service field clicked");
+    };
+
     const findIcon = (label: string) => {
         label = label.toLowerCase();
         switch (true) {
             case label.includes("listener"):
                 return "bell";
-            case label.includes("path"):
+            case label.includes("path") || label.includes("base"):
                 return "link";
+            case label.includes("port"):
+                return "ports";
+            case label.includes("host"):
+                return "server";
+            case label.includes("name") || label.includes("queue"):
+                return "tag";
+            case label.includes("timeout"):
+                return "clock";
+            case label.includes("ssl") || label.includes("secure"):
+                return "lock";
+            case label.includes("config"):
+                return "gear";
             default:
                 return "info";
         }
     };
 
-    const getAttributeComponent = (component: PropertyModel) => {
-        const label = component.metadata.label.toLowerCase();
-        switch (true) {
-            case label.includes("listener"):
-                return component.values?.length > 0 ? (
-                    component.values.map((item, index) => (
-                        <LinkButton
-                            sx={{ fontSize: 12, padding: 8, gap: 4 }}
-                            key={`${index}-btn`}
-                            onClick={() => handleOpenListener(item)}
-                        >
-                            {item}
-                        </LinkButton>
-                    ))
-                ) : (
-                    <LinkButton
-                        sx={{ fontSize: 12, padding: 8, gap: 4 }}
-                        onClick={() => handleOpenListener(component.value)}
-                    >
-                        {component.value}
-                    </LinkButton>
-                );
-            case label.includes("path"):
-                return component.value;
-            default:
-                return component.value;
-        }
-    };
-
     const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
         setSearchValue(event.target.value);
     };
 
     const haveServiceTypeName = serviceModel?.properties["serviceTypeName"]?.value;
 
+    const openInit = async (resource: ProjectStructureArtifactResponse) => {
+        await rpcClient
+            .getVisualizerRpcClient()
+            .openView({ type: EVENT_TYPE.OPEN_VIEW, location: { position: resource.position, documentUri: resource.path } });
+    }
+
+
+    const resourcesCount = resources
+        .filter((resource) => resource.type === DIRECTORY_MAP.RESOURCE)
+        .filter((resource) => {
+            const search = searchValue.toLowerCase();
+            const nameMatch = resource.name && resource.name.toLowerCase().includes(search);
+            const iconMatch = resource.icon && resource.icon.toLowerCase().includes(search);
+            return nameMatch || iconMatch;
+        })
+        .length;
+
+    const remoteFunctionsCount = resources
+        .filter((resource) => resource.type === DIRECTORY_MAP.REMOTE)
+        .filter((resource) => {
+            const search = searchValue.toLowerCase();
+            const nameMatch = resource.name && resource.name.toLowerCase().includes(search);
+            const iconMatch = resource.icon && resource.icon.toLowerCase().includes(search);
+            return nameMatch || iconMatch;
+        })
+        .length;
+
+    function createLineRange(filePath: string, position: NodePosition): LineRange {
+        return {
+            fileName: filePath,
+            startLine: {
+                line: position.startLine ?? 1,
+                offset: position.startColumn ?? 0
+            },
+            endLine: {
+                line: position.endLine ?? position.startLine ?? 1,
+                offset: position.endColumn ?? position.startColumn ?? 0
+            }
+        };
+    }
+
     return (
         <View>
             <TopNavigationBar />
-            <TitleBar
-                title="Service Designer"
-                subtitle="Implement and configure your service"
-                actions={
+            {!serviceModel && (
+                <LoadingContainer>
+                    <LoadingRing message="Loading Service..." />
+                </LoadingContainer>
+            )}
+            {
+                serviceModel && (
                     <>
-                        <Button appearance="secondary" tooltip="Edit Service" onClick={handleServiceEdit}>
-                            <Icon name="bi-edit" sx={{ marginRight: 8, fontSize: 16 }} /> <ButtonText>Edit</ButtonText>
-                        </Button>
-                        {serviceModel && serviceModel.moduleName === "http" && (
-                            <Button appearance="secondary" tooltip="Try Service" onClick={handleServiceTryIt}>
-                                <Icon name="play" isCodicon={true} sx={{ marginRight: 8, fontSize: 16 }} /> <ButtonText>Try It</ButtonText>
-                            </Button>
-                        )}
-                        {serviceModel && serviceModel.moduleName === "http" && (
-                            <Button appearance="secondary" tooltip="Export OpenAPI Spec" onClick={handleExportOAS}>
-                                <Icon name="bi-export" sx={{ marginRight: 8, fontSize: 16 }} /> <ButtonText>Export</ButtonText>
-                            </Button>
-                        )}
-                        {serviceModel &&
-                            serviceModel.moduleName !== "http" &&
-                            serviceModel.functions.some((func) => !func.enabled) && (
-                                <Button appearance="primary" tooltip="Add Function" onClick={handleNewFunction}>
-                                    <Codicon name="add" sx={{ marginRight: 8 }} /> <ButtonText>Function</ButtonText>
-                                </Button>
+                        <TitleBar
+                            title={serviceModel.name}
+                            subtitle={"Implement and configure your service"}
+                            actions={
+                                <>
+                                    <Button appearance="secondary" tooltip="Edit Service" onClick={handleServiceEdit}>
+                                        <Icon
+                                            name="bi-settings"
+                                            sx={{
+                                                marginRight: 5,
+                                                fontSize: "16px",
+                                                width: "16px",
+                                            }}
+                                        /> Configure
+                                    </Button>
+                                    {
+                                        serviceModel && (isHttpService || isMcpService) && (
+                                            <>
+                                                <Button appearance="secondary" tooltip="Try Service" onClick={handleServiceTryIt}>
+                                                    <Icon name="play" isCodicon={true} sx={{ marginRight: 8, fontSize: 16 }} /> <ButtonText>Try It</ButtonText>
+                                                </Button>
+                                            </>
+                                        )
+                                    }
+                                    {serviceModel && !isMcpService && dropdownOptions.length > 0 && (
+                                        <AddServiceElementDropdown
+                                            buttonTitle="More"
+                                            toolTip="More options"
+                                            defaultOption="reusable-function"
+                                            onOptionChange={handleAddDropdownOption}
+                                            options={dropdownOptions}
+                                        />
+                                    )}
+                                </>
+                            }
+                        />
+
+                        <ServiceContainer>
+                            {/* Service Metadata - Compact View */}
+                            {(listeners.length > 0 || readonlyProperties.size > 0) && (
+                                <ServiceMetadataContainer>
+                                    <MetadataRow>
+                                        {listeners.length > 0 && (
+                                            <>
+                                                {listeners.map((listener, index) => (
+                                                    <PropertyInline key={`${index}-listener`}>
+                                                        <Icon name="radio-tower" isCodicon sx={{ fontSize: 12 }} />
+                                                        <PropertyKey>Listener:</PropertyKey>
+                                                        <PropertyValue>
+                                                            {listener.includes(":") ? getReadableListenerName(listener) : listener}
+                                                        </PropertyValue>
+                                                    </PropertyInline>
+                                                ))}
+                                            </>
+                                        )}
+                                        {readonlyProperties.size > 0 && (
+                                            <>
+                                                {
+                                                    Array.from(readonlyProperties).map(prop => (
+                                                        <PropertyInline key={prop.label}>
+                                                            <PropertyKey>{prop.label}:</PropertyKey>
+                                                            <PropertyValue>
+                                                                {Array.isArray(prop.value) ? prop.value.join(", ") : removeForwardSlashes(prop.value)}
+                                                            </PropertyValue>
+                                                        </PropertyInline>
+                                                    ))
+                                                }
+                                            </>
+                                        )}
+                                    </MetadataRow>
+
+                                    {/* {resources?.
+                                        filter((func) => func.name === "init")
+                                        .map((functionModel, index) => (
+                                            <MetadataRow>
+                                                <MetadataLabel> Initialization Function:</MetadataLabel>
+                                                <Typography key={`${index}-value`} variant="body3">
+                                                    <LinkButton
+                                                        sx={{ fontSize: 12, padding: 8, gap: 4, justifyContent: "center" }}
+                                                        onClick={() => openInit(functionModel)}
+                                                    >
+                                                        {functionModel.name}
+                                                    </LinkButton>
+                                                </Typography>
+                                            </MetadataRow>
+                                        ))} */}
+                                </ServiceMetadataContainer>
                             )}
-                        {serviceModel && serviceModel.moduleName === "http" && !haveServiceTypeName && (
-                            <Button appearance="primary" tooltip="Add Resource" onClick={handleNewResourceFunction}>
-                                <Codicon name="add" sx={{ marginRight: 8 }} /> <ButtonText>Resource</ButtonText>
-                            </Button>
-                        )}
-                    </>
-                }
-            />
-            <ServiceContainer>
-                {!serviceModel && (
-                    <LoadingContainer>
-                        <LoadingRing message="Loading Service..." />
-                    </LoadingContainer>
-                )}
-                {serviceModel && (
-                    <>
-                        <InfoContainer>
-                            {Object.keys(serviceModel.properties).map(
-                                (key, index) =>
-                                    serviceModel.properties[key].value &&
-                                    serviceModel.properties[key].codedata.type !== "ANNOTATION_ATTACHMENT" && (
-                                        <InfoSection>
-                                            <Icon
-                                                name={findIcon(serviceModel.properties[key].metadata.label)}
-                                                isCodicon
-                                                sx={{ marginRight: "8px" }}
-                                            />
-                                            <Typography key={`${index}-label`} variant="body3">
-                                                {serviceModel.properties[key].metadata.label}:
-                                            </Typography>
-                                            <Typography key={`${index}-value`} variant="body3">
-                                                {getAttributeComponent(serviceModel.properties[key])}
-                                            </Typography>
-                                        </InfoSection>
-                                    )
+
+
+                            {resources.filter((resource) => resource.type === DIRECTORY_MAP.FUNCTION && resource.name === "init").length > 0 && (
+                                <>
+                                    <SectionHeader
+                                        title="Initialization Function"
+                                        subtitle={`Define the initialization logic for the service`}
+                                    >
+                                    </SectionHeader>
+                                    <FunctionsContainer>
+                                        {resources
+                                            .filter((resource) => resource.type === DIRECTORY_MAP.FUNCTION && resource.name === "init")
+                                            .map((resource, index) => (
+                                                <ResourceAccordionV2
+                                                    methodName="INIT"
+                                                    key={`${index}-${resource.name}`}
+                                                    resource={resource}
+                                                    readOnly={serviceModel.properties.hasOwnProperty('serviceTypeName')}
+                                                    onEditResource={handleFunctionEdit}
+                                                    onDeleteResource={handleFunctionDelete}
+                                                    onResourceImplement={() => { openInit(resource) }}
+                                                />
+                                            ))}
+                                    </FunctionsContainer>
+
+                                </>
                             )}
 
-                            {serviceModel.moduleName === "http" &&
-                                serviceModel.functions
-                                    .filter((func) => func.kind === "DEFAULT" && func.enabled)
-                                    .map((functionModel, index) => (
-                                        <InfoSection>
-                                            <Icon name={findIcon("init")} isCodicon sx={{ marginRight: "8px" }} />
-                                            <Typography key={`${index}-label`} variant="body3">
-                                                Constructor:
-                                            </Typography>
-                                            <Typography key={`${index}-value`} variant="body3">
-                                                <LinkButton
-                                                    sx={{ fontSize: 12, padding: 8, gap: 4 }}
-                                                    onClick={() => handleOpenDiagram(functionModel)}
-                                                >
-                                                    {functionModel.name.value}
-                                                </LinkButton>
-                                            </Typography>
-                                        </InfoSection>
-                                    ))}
-                        </InfoContainer>
-                        <HeaderContainer>
-                            <Typography
-                                key={"title"}
-                                variant="body2"
-                                sx={{ marginLeft: 10, marginBottom: 20, marginTop: 10 }}
-                            >
-                                Available {serviceModel.moduleName === "http" ? "Resources" : "Functions"}
-                            </Typography>
 
-                            {serviceModel.moduleName === "http" && resources.length > 10 && (
-                                <TextField placeholder="Search..." sx={{ width: 200 }} onChange={handleSearch} value={searchValue} />
+                            {/* Listing Resources in HTTP */}
+                            {isHttpService && (
+                                <>
+
+                                    <>
+                                        <SectionHeader
+                                            title="Resources"
+                                            subtitle={`${resourcesCount === 0 ? `` : 'Define how the service responds to HTTP requests'}`}
+                                        >
+                                            <ActionGroup>
+                                                {resources.length > 10 && (
+                                                    <TextField placeholder="Search..." sx={{ width: 200 }} onChange={handleSearch} value={searchValue} />
+                                                )}
+                                                {!haveServiceTypeName && resourcesCount > 0 && (
+                                                    <Button appearance="primary" tooltip="Add Resource" onClick={handleNewResourceFunction}>
+                                                        <Codicon name="add" sx={{ marginRight: 8 }} /> <ButtonText>Resource</ButtonText>
+                                                    </Button>
+                                                )}
+                                            </ActionGroup>
+                                        </SectionHeader>
+                                        {resourcesCount > 0 && (
+                                            <FunctionsContainer>
+                                                {resources
+                                                    .filter((resource) => {
+                                                        const search = searchValue.toLowerCase();
+                                                        const nameMatch = resource.name && resource.name.toLowerCase().includes(search);
+                                                        const iconMatch = resource.icon && resource.icon.toLowerCase().includes(search);
+                                                        return nameMatch || iconMatch;
+                                                    })
+                                                    .filter((resource) => resource.type === DIRECTORY_MAP.RESOURCE)
+                                                    .map((resource, index) => (
+                                                        <ResourceAccordionV2
+                                                            key={`${index}-${resource.name}`}
+                                                            resource={resource}
+                                                            readOnly={serviceModel.properties.hasOwnProperty('serviceTypeName')}
+                                                            onEditResource={handleFunctionEdit}
+                                                            onDeleteResource={handleFunctionDelete}
+                                                            onResourceImplement={handleOpenDiagram}
+                                                        />
+                                                    ))}
+                                            </FunctionsContainer>
+                                        )}
+                                        {resourcesCount === 0 && (
+                                            <EmptyReadmeContainer>
+                                                <Description variant="body2">
+                                                    No resources found. Add a new resource.
+                                                </Description>
+                                                <Button
+                                                    appearance="primary"
+                                                    onClick={handleNewResourceFunction}>
+                                                    <Codicon name="add" sx={{ marginRight: 5 }} />
+                                                    Add Resource
+                                                </Button>
+                                            </EmptyReadmeContainer>
+                                        )}
+                                    </>
+                                </>
                             )}
-                        </HeaderContainer>
-                        {serviceModel.moduleName === "http" && (
-                            <FunctionsContainer>
-                                {resources
-                                    .filter((resource) => {
-                                        const search = searchValue.toLowerCase();
-                                        const nameMatch = resource.name && resource.name.toLowerCase().includes(search);
-                                        const iconMatch = resource.icon && resource.icon.toLowerCase().includes(search);
-                                        return nameMatch || iconMatch;
-                                    })
-                                    .map((resource, index) => (
-                                        <ResourceAccordionV2
-                                            key={`${index}-${resource.name}`}
-                                            resource={resource}
-                                            readOnly={serviceModel.properties.hasOwnProperty('serviceTypeName')}
-                                            onEditResource={handleFunctionEdit}
-                                            onDeleteResource={handleFunctionDelete}
-                                            onResourceImplement={handleOpenDiagram}
-                                        />
-                                    ))}
-                            </FunctionsContainer>
-                        )}
-                        {serviceModel.moduleName !== "http" && (
-                            <FunctionsContainer>
-                                {serviceModel.functions
-                                    .filter(
-                                        (functionModel) => functionModel.kind === "REMOTE" && functionModel.enabled
-                                    )
-                                    .map((functionModel, index) => (
+
+                            {/* Listing Tools in MCP */}
+                            {isMcpService && (
+                                <>
+                                    <SectionHeader
+                                        title="Tools"
+                                        subtitle={`${remoteFunctionsCount === 0 ? `` : 'Define how the mcp service responds to tool calls'}`}
+                                    >
+                                        <ActionGroup>
+                                            {resources.length > 10 && (
+                                                <TextField placeholder="Search..." sx={{ width: 200 }} onChange={handleSearch} value={searchValue} />
+                                            )}
+                                            {!haveServiceTypeName && remoteFunctionsCount > 0 && (
+                                                <Button appearance="primary" tooltip="Add Tool" onClick={handleNewMcpTool}>
+                                                    <Codicon name="add" sx={{ marginRight: 8 }} /> <ButtonText>Tool</ButtonText>
+                                                </Button>
+                                            )}
+                                        </ActionGroup>
+                                    </SectionHeader>
+                                    <FunctionsContainer>
+                                        {resources
+                                            .filter((resource) => {
+                                                const search = searchValue.toLowerCase();
+                                                const nameMatch = resource.name && resource.name.toLowerCase().includes(search);
+                                                const iconMatch = resource.icon && resource.icon.toLowerCase().includes(search);
+                                                return nameMatch || iconMatch;
+                                            })
+                                            .map((resource, index) => (
+                                                <ResourceAccordionV2
+                                                    key={`${index}-${resource.name}`}
+                                                    resource={resource}
+                                                    readOnly={serviceModel.properties.hasOwnProperty('serviceTypeName')}
+                                                    onEditResource={handleFunctionEdit}
+                                                    onDeleteResource={handleFunctionDelete}
+                                                    onResourceImplement={handleOpenDiagram}
+                                                    isMcpTool={true}
+                                                />
+                                            ))}
+                                    </FunctionsContainer>
+
+                                    {remoteFunctionsCount === 0 && (
+                                        <EmptyReadmeContainer>
+                                            <Description variant="body2">
+                                                No tools found. Add a new tool.
+                                            </Description>
+                                            <Button
+                                                appearance="primary"
+                                                onClick={handleNewMcpTool}>
+                                                <Codicon name="add" sx={{ marginRight: 5 }} />
+                                                Add Tool
+                                            </Button>
+                                        </EmptyReadmeContainer>
+                                    )}
+                                </>
+                            )}
+
+                            {/* Listing service type bound functions */}
+                            {!(isHttpService || isMcpService) && (
+                                <>
+                                    <SectionHeader
+                                        title="Event Handlers"
+                                        subtitle={enabledHandlers.length === 0 ? "" : `Define how the service responds to events`}
+                                    >
+                                        <ActionGroup>
+                                            {enabledHandlers.length !== 0 && unusedHandlers.length > 0 && (
+                                                <Button appearance="primary" tooltip="Add Handler" onClick={onSelectAddHandler}>
+                                                    <Codicon name="add" sx={{ marginRight: 8 }} /> <ButtonText>Handler</ButtonText>
+                                                </Button>
+                                            )}
+                                        </ActionGroup>
+                                    </SectionHeader>
+                                    <FunctionsContainer>
+                                        {enabledHandlers.map((functionModel, index) => (
+                                            <ResourceAccordion
+                                                key={`${index}-${functionModel.name.value}`}
+                                                functionModel={functionModel}
+                                                goToSource={() => { }}
+                                                onEditResource={handleFunctionEdit}
+                                                onDeleteResource={handleFunctionDelete}
+                                                onResourceImplement={handleOpenDiagram}
+                                            />
+                                        ))}
+                                    </FunctionsContainer>
+
+                                    {enabledHandlers.length === 0 && (
+                                        <EmptyReadmeContainer>
+                                            <Description variant="body2">
+                                                No event handlers found. Add a new event handler.
+                                            </Description>
+                                            <Button
+                                                appearance="primary"
+                                                onClick={onSelectAddHandler}>
+                                                <Codicon name="add" sx={{ marginRight: 5 }} />
+                                                Add Handler
+                                            </Button>
+                                        </EmptyReadmeContainer>
+                                    )}
+                                </>
+                            )}
+
+                            {/* Listing service type bound functions */}
+                            {/* {(initMethod && (
+                                <>
+                                    <SectionHeader
+                                        title="Initialization Function"
+                                        subtitle="Define the initialization logic for the service"
+                                    />
+                                    <FunctionsContainer>
                                         <ResourceAccordion
-                                            key={`${index}-${functionModel.name.value}`}
-                                            functionModel={functionModel}
+                                            key={`init-${initMethod.name.value}`}
+                                            functionModel={initMethod}
                                             goToSource={() => { }}
                                             onEditResource={handleFunctionEdit}
                                             onDeleteResource={handleFunctionDelete}
                                             onResourceImplement={handleOpenDiagram}
                                         />
-                                    ))}
-                            </FunctionsContainer>
-                        )}
+                                    </FunctionsContainer>
+                                </>
+                            ))} */}
+
+                            {/* Listing service type bound functions */}
+                            {/* {(objectMethods.length > 0 && (
+                                <>
+                                    <SectionHeader
+                                        title="Functions"
+                                        subtitle="Reusable functions within the service"
+                                    />
+                                    <FunctionsContainer>
+                                        {objectMethods.map((functionModel, index) => (
+                                            <ResourceAccordion
+                                                key={`${index}-${functionModel.name.value}`}
+                                                functionModel={functionModel}
+                                                goToSource={() => { }}
+                                                onEditResource={handleFunctionEdit}
+                                                onDeleteResource={handleFunctionDelete}
+                                                onResourceImplement={handleOpenDiagram}
+                                            />
+                                        ))}
+                                    </FunctionsContainer>
+                                </>
+                            ))} */}
+
+
+                            {resources.filter((resource) => resource.type === DIRECTORY_MAP.FUNCTION && resource.name !== "init").length > 0 && (
+                                <>
+                                    <SectionHeader
+                                        title="Functions"
+                                        subtitle="Reusable functions within the service"
+                                    >
+                                        <ActionGroup>
+                                            {/* {!haveServiceTypeName && resourcesCount > 0 && (
+                                                <Button appearance="primary" tooltip="Add Sub Flow" onClick={handleNewResourceFunction}>
+                                                    <Codicon name="add" sx={{ marginRight: 8 }} /> <ButtonText>Sub Flow</ButtonText>
+                                                </Button>
+                                            )} */}
+                                        </ActionGroup>
+                                    </SectionHeader>
+                                    <FunctionsContainer>
+                                        {resources
+                                            .filter((resource) => {
+                                                const search = searchValue.toLowerCase();
+                                                const nameMatch = resource.name && resource.name.toLowerCase().includes(search);
+                                                const iconMatch = resource.icon && resource.icon.toLowerCase().includes(search);
+                                                return nameMatch || iconMatch;
+                                            })
+                                            .filter((resource) => resource.type === DIRECTORY_MAP.FUNCTION && resource.name !== "init")
+                                            .map((resource, index) => (
+                                                <ResourceAccordionV2
+                                                    methodName="FUNC"
+                                                    key={`${index}-${resource.name}`}
+                                                    resource={resource}
+                                                    readOnly={serviceModel.properties.hasOwnProperty('serviceTypeName')}
+                                                    onEditResource={handleFunctionEdit}
+                                                    onDeleteResource={handleFunctionDelete}
+                                                    onResourceImplement={handleOpenDiagram}
+                                                />
+                                            ))}
+                                    </FunctionsContainer>
+                                </>
+                            )}
+
+                            {/* This is for adding a http resource */}
+                            {functionModel && isHttpService && functionModel.kind === "RESOURCE" && isNew && (
+                                <PanelContainer
+                                    title={"Select HTTP Method to Add"}
+                                    show={showForm}
+                                    onClose={handleNewFunctionClose}
+                                    width={400}
+                                >
+                                    <ResourceForm
+                                        model={functionModel}
+                                        isSaving={isSaving}
+                                        onSave={handleResourceSubmit}
+                                        onClose={handleNewFunctionClose}
+                                        isNew={isNew}
+                                        payloadContext={{
+                                            protocol: "HTTP",
+                                            serviceName: serviceModel.name || '',
+                                            serviceBasePath: serviceModel.properties?.basePath?.value || '',
+                                        }}
+                                    />
+                                </PanelContainer>
+                            )}
+
+                            {/* This is for editing a http resource */}
+                            {functionModel && isHttpService && functionModel.kind === "RESOURCE" && !isNew && (
+                                <PanelContainer
+                                    title={"Resource Configuration"}
+                                    show={showForm}
+                                    onClose={handleNewFunctionClose}
+                                    width={400}
+                                >
+                                    <ResourceForm
+                                        model={functionModel}
+                                        isSaving={isSaving}
+                                        filePath={filePath}
+                                        onSave={handleResourceSubmit}
+                                        onClose={handleNewFunctionClose}
+                                        payloadContext={{
+                                            protocol: "HTTP",
+                                            serviceName: serviceModel.name || '',
+                                            serviceBasePath: serviceModel.properties?.basePath?.value || '',
+                                        }}
+                                    />
+                                </PanelContainer>
+                            )}
+
+                            {/* This is for adding or editing functions with data binding */}
+                            {functionModel && !isHttpService && !isMcpService && canDataBind(functionModel) && (
+                                <PanelContainer
+                                    title={"Message Handler Configuration"}
+                                    show={showForm}
+                                    onClose={handleNewFunctionClose}
+                                    width={400}
+                                >
+                                    <DatabindForm
+                                        model={functionModel}
+                                        isSaving={isSaving}
+                                        onSave={handleFunctionSubmit}
+                                        onClose={handleNewFunctionClose}
+                                        isNew={isNew}
+                                        payloadContext={{
+                                            protocol: "MESSAGE_BROKER",
+                                            serviceName: serviceModel.name || '',
+                                            messageDocumentation: functionModel?.metadata?.description || ''
+                                        }}
+                                        serviceProperties={serviceModel.properties}
+                                        serviceModuleName={serviceModel.moduleName}
+                                    />
+                                </PanelContainer>
+                            )}
+
+                            {/* This is for adding or editing functions */}
+                            {functionModel && !isHttpService && !isMcpService && !canDataBind(functionModel) && (
+                                <PanelContainer
+                                    title={"Function Configuration"}
+                                    show={showForm}
+                                    onClose={handleNewFunctionClose}
+                                    width={600}
+                                >
+                                    <FunctionForm
+                                        model={functionModel}
+                                        onSave={handleFunctionSubmit}
+                                        onClose={handleNewFunctionClose}
+                                    />
+                                </PanelContainer>
+                            )}
+
+                            {/* This is for adding a new handler to the service */}
+                            {serviceModel && !isHttpService && (
+                                <PanelContainer
+                                    title={"Select Handler to Add"}
+                                    show={showFunctionConfigForm}
+                                    onClose={handleFunctionConfigClose}
+                                >
+                                    <FunctionConfigForm
+                                        isSaving={isSaving}
+                                        serviceModel={serviceModel}
+                                        onSubmit={handleFunctionSubmit}
+                                        onSelect={onHandlerSelected}
+                                        onBack={handleFunctionConfigClose}
+                                    />
+                                </PanelContainer>
+                            )}
+
+                            {/* This is for adding a init function to the service */}
+                            <PanelContainer
+                                title={"Add Initialization Function"}
+                                show={!!initFunction}
+                                onClose={handleCloseInitFunction}
+                                onBack={handleCloseInitFunction}
+                                width={400}
+                            >
+                                <FunctionForm
+                                    model={initFunction}
+                                    onSave={handleInitFunctionSave}
+                                    onClose={handleCloseInitFunction}
+                                />
+                            </PanelContainer>
+
+                            {functionModel && isMcpService && (
+                                <PanelContainer
+                                    title={"Tool Configuration"}
+                                    show={showForm}
+                                    onClose={handleNewFunctionClose}
+                                    width={400}
+                                >
+                                    <McpToolForm
+                                        model={functionModel}
+                                        filePath={filePath}
+                                        lineRange={createLineRange(filePath, position)}
+                                        isSaving={isSaving}
+                                        onSave={handleFunctionSubmit}
+                                        onClose={handleNewFunctionClose}
+                                    />
+                                </PanelContainer>
+                            )}
+                        </ServiceContainer>
                     </>
-                )}
-                {functionModel && functionModel.kind === "RESOURCE" && (
-                    <PanelContainer
-                        title={"Resource Configuration"}
-                        show={showForm}
-                        onClose={handleNewFunctionClose}
-                        width={600}
-                    >
-                        <ResourceForm
-                            model={functionModel}
-                            isSaving={isSaving}
-                            onSave={handleResourceSubmit}
-                            onClose={handleNewFunctionClose}
-                        />
-                    </PanelContainer>
-                )}
-                {functionModel && functionModel.kind === "REMOTE" && (
-                    <PanelContainer
-                        title={"Function Configuration"}
-                        show={showForm}
-                        onClose={handleNewFunctionClose}
-                        width={600}
-                    >
-                        <FunctionForm
-                            model={functionModel}
-                            onSave={handleFunctionSubmit}
-                            onClose={handleNewFunctionClose}
-                        />
-                    </PanelContainer>
-                )}
-
-                {serviceModel?.moduleName !== "http" && (
-                    <PanelContainer
-                        title={"Function Configuration"}
-                        show={showFunctionConfigForm}
-                        onClose={handleFunctionConfigClose}
-                    >
-                        <FunctionConfigForm
-                            isSaving={isSaving}
-                            serviceModel={serviceModel}
-                            onSubmit={handleFunctionSubmit}
-                            onBack={handleFunctionConfigClose}
-                        />
-                    </PanelContainer>
-                )}
-            </ServiceContainer>
+                )
+            }
         </View>
     );
 }
+
+interface SectionHeaderProps {
+    title: string;
+    subtitle: string;
+    children?: React.ReactNode;
+}
+
+function SectionHeader({ title, subtitle, children }: SectionHeaderProps) {
+    return (
+        <HeaderContainer>
+            <div>
+                <Typography
+                    variant="h3"
+                    sx={{ marginLeft: 10, fontWeight: 'bold', marginBottom: 4 }}
+                >
+                    {title}
+                </Typography>
+                <Typography
+                    variant="body3"
+                    sx={{ marginLeft: 10, color: 'var(--vscode-descriptionForeground)', marginBottom: 0 }}
+                >
+                    {subtitle}
+                </Typography>
+            </div>
+            {children}
+        </HeaderContainer>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/styles.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/styles.tsx
index 3143351dce9..8d1a32dd579 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/styles.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/styles.tsx
@@ -27,13 +27,15 @@ export const EditorContainer = styled.div<CSSObject>`
     border-radius: 5px;
     padding: 10px;
     border: 1px solid var(--vscode-dropdown-border);
+    & .side-panel-body {
+        padding: unset;
+    }
 `;
 
 export const EditorContent = styled.div<CSSObject>`
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding-left: 16px;
     padding-right: 16px;
     gap: 10px;
 `;
@@ -50,8 +52,9 @@ export const ContentSection = styled.div<CSSObject>`
     display: flex;
     flex-direction: row;
     width: 100%;
+    justify-content: space-between;
     ${(props: any) => props.justifyEnd && `
-        justify-content: space-between;
+        justify-content: flex-end;
         margin-right: 20px;
     `}
 `;
@@ -62,7 +65,6 @@ export const EditIconWrapper = styled.div<CSSObject>`
     width: 14px;
     margin-top: 16px;
     margin-bottom: 13px;
-    margin-left: 10px;
     color: var(--vscode-statusBarItem-remoteBackground);
 `;
 
@@ -100,7 +102,6 @@ export const IconTextWrapper = styled.div<CSSObject>`
 export const headerLabelStyles = cx(css`
     display: flex;
     align-items: center;
-    width: 320px;
     cursor: pointer;
     margin-left: 12px;
     line-height: 14px;
@@ -116,7 +117,6 @@ export const OptionLabel = styled.div<CSSObject>`
 export const disabledHeaderLabel = cx(css`
     display: flex;
     align-items: center;
-    width: 320px;
     margin-left: 12px;
     line-height: 14px;
 `);
@@ -137,7 +137,7 @@ export const ActionIconWrapper = styled.div<CSSObject>`
     align-items: center;
     cursor: pointer;
     height: 14px;
-    width: 14px;
+    margin-right: 10px;
 `;
 
 export const ParamContainer = styled.div<CSSObject>`
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/utils.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/utils.tsx
index 36c351821a2..3785241fe79 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/utils.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/utils.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { ResponseCode } from '@wso2/ballerina-core';
+import { FunctionModel, ResponseCode, VisibleTypeItem, VisibleTypesResponse } from '@wso2/ballerina-core';
 
 export enum HTTP_METHOD {
     "GET" = "GET",
@@ -43,23 +43,64 @@ export function getDefaultResponse(httpMethod: HTTP_METHOD): string {
     }
 }
 
-export function getTitleFromStatusCodeAndType(responseCodes: ResponseCode[], statusCode: string, type: string): string {
-    let responseCode: ResponseCode | undefined;
+export function getTitleFromStatusCodeAndType(responseCodes: VisibleTypesResponse, statusCode: string, type: string): string {
+    let responseCode: VisibleTypeItem | undefined;
 
     if (statusCode && type) {
         // If both statusCode and type are provided, find by both
-        responseCode = responseCodes.find(res => res.statusCode === statusCode && res.type === type);
+        responseCode = responseCodes.find(res => res.labelDetails.detail === statusCode && res.detail === type);
         // If not found with both, fallback to statusCode only
         if (!responseCode) {
-            responseCode = responseCodes.find(res => res.statusCode === statusCode);
+            responseCode = responseCodes.find(res => res.labelDetails.detail === statusCode);
         }
     } else if (statusCode) {
         // If only statusCode is provided, find by statusCode only
-        responseCode = responseCodes.find(res => res.statusCode === statusCode);
+        responseCode = responseCodes.find(res => res.labelDetails.detail === statusCode);
     } else if (type) {
         // If only type is provided, find by type only
-        responseCode = responseCodes.find(res => res.type === type);
+        responseCode = responseCodes.find(res => res.detail === type);
     }
 
-    return responseCode ? `${responseCode.statusCode} - ${responseCode.label}` : "";
+    return responseCode ? `${responseCode.labelDetails.detail} - ${responseCode.label}` : "";
+}
+
+
+export function sanitizedHttpPath(value: string): string {
+    return removeForwardSlashes(value).replace(/-/g, '\\-').replace(/\./g, '\\.');
+}
+
+export function removeForwardSlashes(value: string): string {
+    return value?.replace(/\\/g, '');
+}
+
+export function canDataBind(functionModel: FunctionModel): boolean {
+    return functionModel.properties?.canDataBind?.value === "true";
+}
+
+export function getReadableListenerName(name: string) {
+    // Examples names: new http:Listener(8090);, new mcp:Listener("mcp://localhost:8090")
+    // Convert the name to human readable name like "HTTP Listener" or "MCP Listener" etc..
+    const match = name.match(/new\s+([a-zA-Z0-9_]+):Listener/i);
+    const listenerType = match ? match[1] : "Unknown";
+    return `${listenerType.charAt(0).toUpperCase() + listenerType.slice(1)} Listener`;
+}
+
+export function hasEditableParameters(parameters: FunctionModel['parameters']): boolean {
+    if (!parameters || parameters.length === 0) {
+        return false;
+    }
+    return parameters.some((param) => param.editable !== false);
+}
+
+/**
+ * Normalizes a value to an array for MULTIPLE_SELECT and EXPRESSION_SET types.
+ *
+ * @param value The value to normalize
+ * @returns An array containing the value(s), or an empty array if value is falsy
+ */
+export function normalizeValueToArray(value: any): any[] {
+    if (Array.isArray(value)) {
+        return value;
+    }
+    return value ? [value] : [];
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceFunctionForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceFunctionForm/index.tsx
new file mode 100644
index 00000000000..7753966ef51
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceFunctionForm/index.tsx
@@ -0,0 +1,230 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { FunctionModel, LineRange, RecordTypeField, Property, PropertyTypeMemberInfo, NodePosition } from '@wso2/ballerina-core';
+import { useRpcContext } from '@wso2/ballerina-rpc-client';
+import { FormField, FormImports, FormValues } from '@wso2/ballerina-side-panel';
+import { FormGeneratorNew } from '../Forms/FormGeneratorNew';
+import { TopNavigationBar } from '../../../components/TopNavigationBar';
+import { TitleBar } from '../../../components/TitleBar';
+import { ViewContent, View } from '@wso2/ui-toolkit';
+import styled from '@emotion/styled';
+import {
+    logError,
+    handleParamChange,
+    convertSchemaToFormFields,
+    convertParameterToParamValue,
+    handleFunctionCreate
+} from './utils';
+import { LoaderContainer } from '../../../components/RelativeLoader/styles';
+import { RelativeLoader } from '../../../components/RelativeLoader';
+
+const FormContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    max-width: 600px;
+    gap: 20px;
+`;
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+`;
+export interface ServiceFunctionFormProps {
+    position: NodePosition;
+    currentFilePath?: string;
+    projectPath?: string;
+}
+
+export function ServiceFunctionForm(props: ServiceFunctionFormProps) {
+    const { position, currentFilePath, projectPath } = props;
+    const { rpcClient } = useRpcContext();
+    const [model, setFunctionModel] = useState<FunctionModel | null>(null);
+    const [fields, setFields] = useState<FormField[]>([]);
+    const [recordTypeFields, setRecordTypeFields] = useState<RecordTypeField[]>([]);
+    const [isSaving, setIsSaving] = useState<boolean>(false);
+
+    const loadFunctionData = async () => {
+        try {
+            if (position && currentFilePath) {
+                const functionModel = await rpcClient.getServiceDesignerRpcClient().getFunctionFromSource({
+                    filePath: currentFilePath,
+                    codedata: {
+                        lineRange: {
+                            fileName: currentFilePath,
+                            startLine: {
+                                line: position.startLine,
+                                offset: position.startColumn
+                            },
+                            endLine: {
+                                line: position.endLine,
+                                offset: position.endColumn
+                            }
+                        }
+                    }
+                });
+                setFunctionModel(functionModel.function);
+            }
+        } catch (error) {
+            logError({
+                type: 'LOAD_ERROR',
+                message: 'Failed to load function data from source',
+                originalError: error
+            });
+        }
+    };
+
+    useEffect(() => {
+        if (rpcClient && position && currentFilePath) {
+            loadFunctionData();
+        } else {
+            logError({
+                type: 'VALIDATION_ERROR',
+                message: 'Missing required props or rpcClient',
+                originalError: { rpcClient: !!rpcClient, position: !!position, currentFilePath: !!currentFilePath }
+            });
+        }
+    }, [rpcClient, position, currentFilePath, projectPath]);
+
+    const initializeRecordTypeFields = () => {
+        if (model?.properties) {
+            const recordFields: 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")
+                }));
+            setRecordTypeFields(recordFields);
+        }
+    };
+    
+    const initializeFormFields = () => {
+        if (!model) return;
+
+        const initialFields: FormField[] = [
+            {
+                key: 'name',
+                label: model.name.metadata?.label || 'Operation Name',
+                type: 'IDENTIFIER',
+                optional: model.name.optional,
+                editable: model.name.editable,
+                advanced: model.name.advanced,
+                enabled: model.name.enabled,
+                documentation: model.name.metadata?.description || '',
+                value: model.name.value,
+                valueType: model.name.valueType,
+                valueTypeConstraint: model.name.valueTypeConstraint || '',
+                lineRange: model?.name?.codedata?.lineRange,
+            },
+            {
+                key: 'parameters',
+                label: 'Parameters',
+                type: 'PARAM_MANAGER',
+                optional: true,
+                editable: true,
+                enabled: true,
+                documentation: '',
+                value: model.parameters.map((param, index) => convertParameterToParamValue(param, index)),
+                paramManagerProps: {
+                    paramValues: model.parameters.map((param, index) => convertParameterToParamValue(param, index)),
+                    formFields: convertSchemaToFormFields(model.schema),
+                    handleParameter: handleParamChange
+                },
+                valueTypeConstraint: ''
+            },
+            {
+                key: 'returnType',
+                label: model.returnType.metadata?.label || 'Return Type',
+                type: 'TYPE',
+                optional: model.returnType.optional,
+                enabled: model.returnType.enabled,
+                editable: model.returnType.editable,
+                advanced: model.returnType.advanced,
+                documentation: model.returnType.metadata?.description || '',
+                value: model.returnType.value,
+                valueType: model.returnType.valueType,
+                valueTypeConstraint: model.returnType.valueTypeConstraint || ''
+            }
+        ];
+        const enabledFields = initialFields.filter(field => field.enabled);
+        setFields(enabledFields);
+    };
+
+    useEffect(() => {
+        initializeFormFields();
+        initializeRecordTypeFields();
+    }, [model]);
+
+    const onFunctionCreate = (data: FormValues, formImports: FormImports) => {
+        if (model) {
+            handleFunctionCreate(data, formImports, model, rpcClient, setIsSaving, currentFilePath, position);
+        }
+    };
+
+    return (
+        <View>
+            <TopNavigationBar />
+            <TitleBar
+                title="Service Function"
+                subtitle="Build reusable custom flows"
+            />
+            <ViewContent padding>
+                <Container>
+                    {!model ? (
+                        <LoaderContainer>
+                            <RelativeLoader />
+                        </LoaderContainer>
+                    ) : (
+                        <FormContainer>
+                            {fields.length > 0 && (
+                                <FormGeneratorNew
+                                    fileName={currentFilePath || ''}
+                                    targetLineRange={model.codedata?.lineRange as LineRange}
+                                    fields={fields}
+                                    onSubmit={onFunctionCreate}
+                                    submitText="Save"
+                                    helperPaneSide="left"
+                                    isSaving={isSaving}
+                                    preserveFieldOrder={true}
+                                    recordTypeFields={recordTypeFields}
+                                />
+                            )}
+                        </FormContainer>
+                    )}
+                </Container>
+            </ViewContent>
+        </View>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceFunctionForm/utils.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceFunctionForm/utils.ts
new file mode 100644
index 00000000000..71822045300
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceFunctionForm/utils.ts
@@ -0,0 +1,261 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { FunctionModel, ParameterModel, ConfigProperties, NodePosition, DIRECTORY_MAP } from '@wso2/ballerina-core';
+import { FormField, Parameter, FormValues, FormImports } from '@wso2/ballerina-side-panel';
+import { getImportsForProperty } from '../../../utils/bi';
+
+type ServiceFunctionError = {
+    type: 'LOAD_ERROR' | 'SAVE_ERROR' | 'VALIDATION_ERROR';
+    message: string;
+    originalError?: unknown;
+};
+
+const resolveFilePath = async (rpcClient: any, fileName: string): Promise<string> => {
+    try {
+        return await rpcClient.getVisualizerRpcClient().joinProjectPath(fileName);
+    } catch (error) {
+        throw new Error(`Failed to resolve file path for ${fileName}`);
+    }
+};
+
+const getFunctionParametersList = (params: Parameter[], model: FunctionModel | null) => {
+    const paramList: ParameterModel[] = [];
+    if (!model) {
+        return paramList;
+    }
+    const paramFields = convertSchemaToFormFields(model.schema);
+
+    params.forEach(param => {
+        const typeField = paramFields.find(field => field.key === 'type');
+        const nameField = paramFields.find(field => field.key === 'variable');
+        const defaultField = paramFields.find(field => field.key === 'defaultable');
+
+        paramList.push({
+            kind: 'REQUIRED',
+            enabled: typeField?.enabled ?? true,
+            editable: typeField?.editable ?? true,
+            advanced: typeField?.advanced ?? false,
+            optional: typeField?.optional ?? false,
+            type: {
+                value: param.formValues['type'] as string,
+                valueType: typeField?.valueType,
+                isType: true,
+                optional: typeField?.optional,
+                advanced: typeField?.advanced,
+                addNewButton: false,
+                enabled: typeField?.enabled,
+                editable: typeField?.editable,
+                imports: param?.imports || {}
+            },
+            name: {
+                value: param.formValues['variable'] as string,
+                valueType: nameField?.valueType,
+                isType: false,
+                optional: nameField?.optional,
+                advanced: nameField?.advanced,
+                addNewButton: false,
+                enabled: nameField?.enabled,
+                editable: nameField?.editable
+            },
+            defaultValue: {
+                value: param.formValues['defaultable'],
+                valueType: defaultField?.valueType || 'string',
+                isType: false,
+                optional: defaultField?.optional,
+                advanced: defaultField?.advanced,
+                addNewButton: false,
+                enabled: defaultField?.enabled,
+                editable: defaultField?.editable
+            }
+        });
+    });
+    return paramList;
+};
+
+function convertParameterToFormField(key: string, param: ParameterModel): FormField {
+    return {
+        key: key === "defaultValue" ? "defaultable" : key === "name" ? "variable" : key,
+        label: param.metadata?.label,
+        type: param.valueType || 'string',
+        optional: param.optional || false,
+        editable: param.editable || false,
+        advanced: key === "defaultValue" ? true : param.advanced,
+        documentation: param.metadata?.description || '',
+        value: param.value || '',
+        valueType: param.valueType,
+        valueTypeConstraint: param?.valueTypeConstraint || '',
+        enabled: param.enabled ?? true,
+        lineRange: param?.codedata?.lineRange
+    };
+}
+
+
+const handleNavigateBack = (rpcClient: any, currentFilePath?: string, position?: NodePosition) => {
+    if (currentFilePath && position) {
+        rpcClient.getVisualizerRpcClient()?.goBack();
+    }
+};
+
+const handleFunctionSave = async (
+    rpcClient: any,
+    model: FunctionModel,
+    updatedFunction: FunctionModel,
+    setIsSaving: (saving: boolean) => void,
+    currentFilePath?: string,
+    position?: NodePosition
+) => {
+    if (!model?.codedata?.lineRange) {
+        logError({
+            type: 'VALIDATION_ERROR',
+            message: 'Missing model or codedata for function save'
+        });
+        return;
+    }
+
+    try {
+        setIsSaving(true);
+        const resolvedFilePath = await resolveFilePath(rpcClient, model.codedata.lineRange.fileName);
+
+        await rpcClient.getServiceDesignerRpcClient().updateResourceSourceCode({
+            filePath: resolvedFilePath,
+            codedata: {
+                lineRange: {
+                    startLine: {
+                        line: model.codedata.lineRange.startLine.line,
+                        offset: model.codedata.lineRange.startLine.offset
+                    },
+                    endLine: {
+                        line: model.codedata.lineRange.endLine.line,
+                        offset: model.codedata.lineRange.endLine.offset
+                    }
+                }
+            },
+            function: updatedFunction,
+            artifactType: DIRECTORY_MAP.SERVICE
+        });
+
+        handleNavigateBack(rpcClient, currentFilePath, position);
+
+    } catch (error) {
+        logError({
+            type: 'SAVE_ERROR',
+            message: 'Failed to update function source code',
+            originalError: error
+        });
+    } finally {
+        setIsSaving(false);
+    }
+};
+
+export const logError = (error: ServiceFunctionError) => {
+    console.error(`[ServiceFunctionForm] ${error.type}: ${error.message}`, error.originalError);
+};
+
+export const handleParamChange = (param: Parameter) => {
+    const name = `${param.formValues['variable']}`;
+    const type = `${param.formValues['type']}`;
+    const hasDefaultValue = Object.keys(param.formValues).includes('defaultable') &&
+        param.formValues['defaultable'] !== undefined &&
+        param.formValues['defaultable'] !== '';
+
+    const defaultValue = hasDefaultValue ? `${param.formValues['defaultable']}`.trim() : '';
+    let value = `${type} ${name}`;
+    if (defaultValue) {
+        value += ` = ${defaultValue}`;
+    }
+    return {
+        ...param,
+        key: name,
+        value: value
+    }
+};
+
+export function convertSchemaToFormFields(schema: ConfigProperties): FormField[] {
+    const formFields: FormField[] = [];
+
+    const parameterConfig = schema["parameter"] as ConfigProperties;
+    if (parameterConfig) {
+        for (const key in parameterConfig) {
+            if (parameterConfig.hasOwnProperty(key)) {
+                const parameter = parameterConfig[key];
+                if (parameter.metadata && parameter.metadata.label) {
+                    const formField = convertParameterToFormField(key, parameter as ParameterModel);
+                    formFields.push(formField);
+                }
+            }
+        }
+    }
+
+    return formFields;
+}
+
+export function convertParameterToParamValue(param: ParameterModel, index: number) {
+    const paramDefaultValue = typeof param?.defaultValue === 'string' ? param?.defaultValue : param?.defaultValue?.value;
+    return {
+        id: index,
+        key: param.name.value,
+        value: `${param.type.value} ${param.name.value}${paramDefaultValue ? ` = ${paramDefaultValue}` : ''}`,
+        formValues: {
+            variable: param.name.value,
+            type: param.type.value,
+            defaultable: paramDefaultValue || ''
+        },
+        icon: 'symbol-variable',
+        identifierEditable: param.name?.editable,
+        identifierRange: param.name.codedata?.lineRange,
+        hidden: param.hidden ?? false,
+        imports: param.type?.imports || {}
+    };
+}
+
+export const handleFunctionCreate = async (
+    data: FormValues,
+    formImports: FormImports,
+    model: FunctionModel,
+    rpcClient: any,
+    setIsSaving: (saving: boolean) => void,
+    currentFilePath?: string,
+    position?: NodePosition
+) => {
+    if (!model) {
+        logError({
+            type: 'VALIDATION_ERROR',
+            message: 'Cannot create function without base model'
+        });
+        return;
+    }
+
+    const { name, returnType, parameters: params } = data;
+    const paramList = params ? getFunctionParametersList(params, model) : [];
+
+    const updatedModel = { ...model };
+    updatedModel.name.value = name;
+    updatedModel.returnType.value = returnType;
+    updatedModel.parameters = paramList;
+    updatedModel.returnType.imports = getImportsForProperty('returnType', formImports);
+
+    Object.entries(data).forEach(([key, value]) => {
+        if (updatedModel?.properties?.[key]) {
+            updatedModel.properties[key].value = value as string;
+        }
+    });
+
+    await handleFunctionSave(rpcClient, model, updatedModel, setIsSaving, currentFilePath, position);
+};
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 bc4ce4fc7cb..d595569bbdd 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/index.tsx
@@ -18,9 +18,9 @@
 
 import { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { debounce } from 'lodash';
-import { LineRange, Type } from '@wso2/ballerina-core';
+import { LineRange, PayloadContext, Type } from '@wso2/ballerina-core';
 import { useRpcContext } from '@wso2/ballerina-rpc-client';
-import { EditorContext, StackItem, TypeEditor, TypeHelperCategory, TypeHelperItem, TypeHelperOperator } from '@wso2/type-editor';
+import { ContextTypeEditor, 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';
@@ -28,6 +28,7 @@ import { Overlay, ThemeColors } from '@wso2/ui-toolkit';
 import { createPortal } from 'react-dom';
 import { LoadingRing } from '../../../components/Loader';
 import styled from '@emotion/styled';
+import { TypeHelperContext } from '../../../constants';
 
 const LoadingContainer = styled.div`
     position: absolute;
@@ -46,14 +47,17 @@ type FormTypeEditorProps = {
     isGraphql?: boolean;
     onCloseCompletions?: () => void;
     onTypeCreate: (typeName?: string) => void;
-    getNewTypeCreateForm: () => void;
-    onSaveType: (type: Type) => void
+    getNewTypeCreateForm: (typeName?: string) => void;
+    onSaveType: (type: Type | string) => void
     refetchTypes: boolean;
     isPopupTypeForm: boolean;
+    isContextTypeForm?: boolean;
+    payloadContext?: PayloadContext;
+    simpleType?: string;
 };
 
 export const FormTypeEditor = (props: FormTypeEditorProps) => {
-    const { type, onTypeChange, newType, newTypeValue, isGraphql, onCloseCompletions, getNewTypeCreateForm, onSaveType, refetchTypes, isPopupTypeForm } = props;
+    const { type, onTypeChange, newType, newTypeValue, isGraphql, onCloseCompletions, getNewTypeCreateForm, onSaveType, refetchTypes, isPopupTypeForm, isContextTypeForm, simpleType, payloadContext } = props;
     const { rpcClient } = useRpcContext();
 
     const [filePath, setFilePath] = useState<string | undefined>(undefined);
@@ -93,85 +97,91 @@ export const FormTypeEditor = (props: FormTypeEditorProps) => {
 
     useEffect(() => {
         if (refetchTypes && !prevRefetchRef.current) {
-            fetchedInitialTypes.current = false; 
-            handleSearchTypeHelper('', true); 
+            fetchedInitialTypes.current = false;
+            handleSearchTypeHelper('', true);
         }
         prevRefetchRef.current = refetchTypes;
     }, [refetchTypes]);
 
     const debouncedSearchTypeHelper = useCallback(
-        debounce((searchText: string, isType: boolean) => {
-            if (isType && (!fetchedInitialTypes.current || refetchTypes)) {
-                if (rpcClient) {
-                    rpcClient
-                        .getBIDiagramRpcClient()
-                        .getVisibleTypes({
+            debounce(async (searchText: string, isType: boolean) => {
+                if (!rpcClient) return;
+    
+                if (isType && (!fetchedInitialTypes.current || refetchTypes)) {
+                    try {
+                        let types;
+                        if (isGraphql) {
+                            const context = type?.codedata?.node === "CLASS"
+                                ? TypeHelperContext.GRAPHQL_FIELD_TYPE
+                                : TypeHelperContext.GRAPHQL_INPUT_TYPE;
+                            types = await rpcClient.getServiceDesignerRpcClient().getResourceReturnTypes({
+                                filePath: filePath,
+                                context: context,
+                            });
+                        } else {
+                            types = await rpcClient.getBIDiagramRpcClient().getVisibleTypes({
+                                filePath: filePath,
+                                position: {
+                                    line: targetLineRange.startLine.line,
+                                    offset: targetLineRange.startLine.offset
+                                },
+                            });
+                        }
+                        const basicTypes = getTypes(types);
+                        setBasicTypes(basicTypes);
+                        setFilteredBasicTypes(basicTypes);
+                        fetchedInitialTypes.current = true;
+    
+                        if (!isGraphql) {
+                            const searchResponse = await rpcClient.getBIDiagramRpcClient().search({
+                                filePath: filePath,
+                                position: targetLineRange,
+                                queryMap: {
+                                    q: '',
+                                    offset: 0,
+                                    limit: 1000
+                                },
+                                searchKind: 'TYPE'
+                            });
+    
+                            const importedTypes = getImportedTypes(searchResponse.categories);
+                            setImportedTypes(importedTypes);
+                        }
+    
+                    } catch (error) {
+                        console.error(error);
+                    } finally {
+                        setLoading(false);
+                    }
+                } else if (isType) {
+                    setFilteredBasicTypes(filterTypes(basicTypes, searchText));
+    
+                    try {
+                        const response = await rpcClient.getBIDiagramRpcClient().search({
                             filePath: filePath,
-                            position: {
-                                line: targetLineRange?.startLine.line,
-                                offset: targetLineRange?.startLine.offset
+                            position: targetLineRange,
+                            queryMap: {
+                                q: searchText,
+                                offset: 0,
+                                limit: 1000
                             },
-                        })
-                        .then((types) => {
-                            setBasicTypes(getTypes(types));
-                            setFilteredBasicTypes(getTypes(types));
-                            fetchedInitialTypes.current = true;
-
-                            /* Get imported types */
-                            rpcClient
-                                .getBIDiagramRpcClient()
-                                .search({
-                                    filePath: filePath,
-                                    position: targetLineRange,
-                                    queryMap: {
-                                        q: '',
-                                        offset: 0,
-                                        limit: 60
-                                    },
-                                    searchKind: 'TYPE'
-                                })
-                                .then((response) => {
-                                    const importedTypes = getImportedTypes(response.categories);
-                                    setImportedTypes(importedTypes);
-                                })
-                                .finally(() => {
-                                    setLoading(false);
-                                });
-                        })
-                        .catch((error) => {
-                            console.error(error);
-                            setLoading(false);
+                            searchKind: 'TYPE'
                         });
-                }
-            } else if (isType) {
-                setFilteredBasicTypes(filterTypes(basicTypes, searchText));
-                rpcClient
-                    .getBIDiagramRpcClient()
-                    .search({
-                        filePath: filePath,
-                        position: targetLineRange,
-                        queryMap: {
-                            q: searchText,
-                            offset: 0,
-                            limit: 60
-                        },
-                        searchKind: 'TYPE'
-                    })
-                    .then((response) => {
+    
                         const importedTypes = getImportedTypes(response.categories);
                         setImportedTypes(importedTypes);
-                    })
-                    .finally(() => {
+                    } catch (error) {
+                        console.error(error);
+                    } finally {
                         setLoading(false);
-                    });
-            } else {
-                setFilteredOperators(filterOperators(TYPE_HELPER_OPERATORS, searchText));
-                setLoading(false);
-            }
-        }, 150),
-        [basicTypes, filePath, targetLineRange, refetchTypes]
-    );
-
+                    }
+                } else {
+                    setFilteredOperators(filterOperators(TYPE_HELPER_OPERATORS, searchText));
+                    setLoading(false);
+                }
+            }, 150),
+            [basicTypes, filePath, targetLineRange, rpcClient]
+    );    
     const handleSearchTypeHelper = useCallback(
         (searchText: string, isType: boolean) => {
             setLoading(true);
@@ -229,36 +239,63 @@ export const FormTypeEditor = (props: FormTypeEditorProps) => {
     };
 
     const handleTypeCreate = (typeName?: string) => {
-        getNewTypeCreateForm();
+        getNewTypeCreateForm(typeName);
     };
 
     return (
         <>
             {filePath && targetLineRange && (
-                <TypeEditor
-                    type={type}
-                    rpcClient={rpcClient}
-                    isPopupTypeForm={isPopupTypeForm}
-                    onTypeChange={onTypeChange}
-                    newType={newType}
-                    newTypeValue={newTypeValue}
-                    onSaveType={onSaveType}
-                    isGraphql={isGraphql}
-                    typeHelper={{
-                        loading,
-                        loadingTypeBrowser,
-                        referenceTypes: basicTypes,
-                        basicTypes: filteredBasicTypes,
-                        importedTypes,
-                        operators: filteredOperators,
-                        typeBrowserTypes: filteredTypeBrowserTypes,
-                        onSearchTypeHelper: handleSearchTypeHelper,
-                        onSearchTypeBrowser: handleSearchTypeBrowser,
-                        onTypeItemClick: handleTypeItemClick,
-                        onCloseCompletions: onCloseCompletions,
-                        onTypeCreate: handleTypeCreate
-                    }}
-                />
+                isContextTypeForm ?
+                    <ContextTypeEditor
+                        type={type}
+                        rpcClient={rpcClient}
+                        isPopupTypeForm={isPopupTypeForm}
+                        onTypeChange={onTypeChange}
+                        newType={newType}
+                        newTypeValue={newTypeValue}
+                        onSaveType={onSaveType}
+                        isGraphql={isGraphql}
+                        simpleType={simpleType}
+                        payloadContext={payloadContext}
+                        typeHelper={{
+                            loading,
+                            loadingTypeBrowser,
+                            referenceTypes: basicTypes,
+                            basicTypes: filteredBasicTypes,
+                            importedTypes,
+                            operators: filteredOperators,
+                            typeBrowserTypes: filteredTypeBrowserTypes,
+                            onSearchTypeHelper: handleSearchTypeHelper,
+                            onSearchTypeBrowser: handleSearchTypeBrowser,
+                            onTypeItemClick: handleTypeItemClick,
+                            onCloseCompletions: onCloseCompletions,
+                            onTypeCreate: handleTypeCreate
+                        }}
+                    /> :
+                    <TypeEditor
+                        type={type}
+                        rpcClient={rpcClient}
+                        isPopupTypeForm={isPopupTypeForm}
+                        onTypeChange={onTypeChange}
+                        newType={newType}
+                        newTypeValue={newTypeValue}
+                        onSaveType={onSaveType}
+                        isGraphql={isGraphql}
+                        typeHelper={{
+                            loading,
+                            loadingTypeBrowser,
+                            referenceTypes: basicTypes,
+                            basicTypes: filteredBasicTypes,
+                            importedTypes,
+                            operators: filteredOperators,
+                            typeBrowserTypes: filteredTypeBrowserTypes,
+                            onSearchTypeHelper: handleSearchTypeHelper,
+                            onSearchTypeBrowser: handleSearchTypeBrowser,
+                            onTypeItemClick: handleTypeItemClick,
+                            onCloseCompletions: onCloseCompletions,
+                            onTypeCreate: handleTypeCreate
+                        }}
+                    />
             )}
             {isAddingType && createPortal(
                 <>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/utils.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/utils.tsx
index abdfe41213e..fa776ca5412 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/utils.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/utils.tsx
@@ -31,6 +31,10 @@ const TYPE_CATEGORY_ORDER = [
     { label: "Behaviour Types", sortText: "5"},
     { label: "Other Types", sortText: "6"},
     { label: "Used Variable Types", sortText: "7"},
+
+    // GraphQL Specific
+    { label: "Scalar Types", sortText: "1"},
+    { label: "Enum Types", sortText: "2"},
 ] as const;
 
 /**
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 da0a40bd9a4..607142e1b63 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeHelper/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeHelper/index.tsx
@@ -35,6 +35,7 @@ import { TYPE_HELPER_OPERATORS } from '../TypeEditor/constants';
 import { useMutation } from "@tanstack/react-query";
 import { createPortal } from "react-dom";
 import { LoadingRing } from "../../../components/Loader";
+import { TypeHelperContext } from "../../../constants";
 import styled from "@emotion/styled";
 
 const LoadingContainer = styled.div`
@@ -62,6 +63,7 @@ type TypeHelperProps = {
     updateImports: (key: string, imports: {[key: string]: string}, codedata?: CodeData) => void;
     onTypeCreate: (typeName: string) => void;
     onCloseCompletions?: () => void;
+    typeHelperContext?: TypeHelperContext;
 };
 
 const TypeHelperEl = (props: TypeHelperProps) => {
@@ -80,7 +82,8 @@ const TypeHelperEl = (props: TypeHelperProps) => {
         updateImports,
         onTypeCreate,
         onCloseCompletions,
-        exprRef
+        exprRef,
+        typeHelperContext 
     } = props;
 
     const { rpcClient } = useRpcContext();
@@ -97,57 +100,58 @@ const TypeHelperEl = (props: TypeHelperProps) => {
     const fetchedInitialTypes = useRef<boolean>(false);
 
     const debouncedSearchTypeHelper = useCallback(
-        debounce((searchText: string, isType: boolean) => {
+        debounce(async (searchText: string, isType: boolean) => {
+            if (!rpcClient) return;
+
             if (isType && !fetchedInitialTypes.current) {
-                if (rpcClient) {
-                    rpcClient
-                        .getBIDiagramRpcClient()
-                        .getVisibleTypes({
+                try {
+                    const isFetchingTypesForDM = valueTypeConstraint === "json";
+
+                    const types = (typeHelperContext === TypeHelperContext.GRAPHQL_FIELD_TYPE || typeHelperContext === TypeHelperContext.GRAPHQL_INPUT_TYPE)
+                        ? await rpcClient.getServiceDesignerRpcClient().getResourceReturnTypes({
+                            filePath: filePath,
+                            context: typeHelperContext,
+                        })
+                        : await rpcClient.getBIDiagramRpcClient().getVisibleTypes({
                             filePath: filePath,
                             position: {
                                 line: targetLineRange.startLine.line,
                                 offset: targetLineRange.startLine.offset
                             },
                             ...(valueTypeConstraint && { typeConstraint: valueTypeConstraint })
-                        })
-                        .then((types) => {
-                            const isFetchingTypesForDM = valueTypeConstraint === "json";
-                            const basicTypes = getTypes(types, isFetchingTypesForDM);
-                            setBasicTypes(basicTypes);
-                            setFilteredBasicTypes(basicTypes);
-                            fetchedInitialTypes.current = true;
+                        });
 
-                            /* Get imported types */
-                            rpcClient
-                                .getBIDiagramRpcClient()
-                                .search({
-                                    filePath: filePath,
-                                    position: targetLineRange,
-                                    queryMap: {
-                                        q: '',
-                                        offset: 0,
-                                        limit: 1000
-                                    },
-                                    searchKind: 'TYPE'
-                                })
-                                .then((response) => {
-                                    const importedTypes = getImportedTypes(response.categories);
-                                    setImportedTypes(importedTypes);
-                                })
-                                .finally(() => {
-                                    setLoading(false);
-                                });
-                        })
-                        .catch((error) => {
-                            console.error(error);
-                            setLoading(false);
+                    const basicTypes = getTypes(types, isFetchingTypesForDM);
+                    setBasicTypes(basicTypes);
+                    setFilteredBasicTypes(basicTypes);
+                    fetchedInitialTypes.current = true;
+
+                    if (typeHelperContext === TypeHelperContext.HTTP_STATUS_CODE) {
+                        const searchResponse = await rpcClient.getBIDiagramRpcClient().search({
+                            filePath: filePath,
+                            position: targetLineRange,
+                            queryMap: {
+                                q: '',
+                                offset: 0,
+                                limit: 1000
+                            },
+                            searchKind: 'TYPE'
                         });
+
+                        const importedTypes = getImportedTypes(searchResponse.categories);
+                        setImportedTypes(importedTypes);
+                    }
+
+                } catch (error) {
+                    console.error(error);
+                } finally {
+                    setLoading(false);
                 }
             } else if (isType) {
                 setFilteredBasicTypes(filterTypes(basicTypes, searchText));
-                rpcClient
-                    .getBIDiagramRpcClient()
-                    .search({
+
+                try {
+                    const response = await rpcClient.getBIDiagramRpcClient().search({
                         filePath: filePath,
                         position: targetLineRange,
                         queryMap: {
@@ -156,20 +160,21 @@ const TypeHelperEl = (props: TypeHelperProps) => {
                             limit: 1000
                         },
                         searchKind: 'TYPE'
-                    })
-                    .then((response) => {
-                        const importedTypes = getImportedTypes(response.categories);
-                        setImportedTypes(importedTypes);
-                    })
-                    .finally(() => {
-                        setLoading(false);
                     });
+
+                    const importedTypes = getImportedTypes(response.categories);
+                    setImportedTypes(importedTypes);
+                } catch (error) {
+                    console.error(error);
+                } finally {
+                    setLoading(false);
+                }
             } else {
                 setFilteredOperators(filterOperators(TYPE_HELPER_OPERATORS, searchText));
                 setLoading(false);
             }
         }, 150),
-        [basicTypes, filePath, targetLineRange]
+        [basicTypes, filePath, targetLineRange, valueTypeConstraint, typeHelperContext, rpcClient]
     );
 
     const handleSearchTypeHelper = useCallback(
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx
index 4f84d88edcf..916d8e0d90d 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx
@@ -42,7 +42,8 @@ import {
     IOType,
     MACHINE_VIEW,
     VisualizerLocation,
-    DeleteClauseRequest
+    DeleteClauseRequest,
+    IORoot
 } from "@wso2/ballerina-core";
 import { CompletionItem, ProgressIndicator } from "@wso2/ui-toolkit";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
@@ -675,6 +676,7 @@ export function DataMapperView(props: DataMapperProps) {
                         <DataMapper
                             modelState={modelState}
                             name={name}
+                            reusable={reusable}
                             onClose={onDMClose}
                             onRefresh={onDMRefresh}
                             onReset={onDMReset}
@@ -714,7 +716,7 @@ export function DataMapperView(props: DataMapperProps) {
 const getModelSignature = (model: DMModel | ExpandedDMModel): ModelSignature => ({
     inputs: model.inputs.map(i => i.name),
     output: model.output.name,
-    subMappings: model.subMappings?.map(s => s.name) || [],
+    subMappings: model.subMappings?.map(s => (s as IORoot | IOType).name) || [],
     refs: 'refs' in model ? JSON.stringify(model.refs) : ''
 });
 
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/GraphqlServiceEditor.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/GraphqlServiceEditor.tsx
index 8b0b0e84715..6480b7cf090 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/GraphqlServiceEditor.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/GraphqlServiceEditor.tsx
@@ -562,6 +562,7 @@ export function GraphqlServiceEditor(props: GraphqlServiceEditorProps) {
                         lineRange: lineRange,
                     },
                     function: updatedModel,
+                    artifactType: DIRECTORY_MAP.SERVICE
                 });
             } else {
                 artifacts = await rpcClient.getServiceDesignerRpcClient().addFunctionSourceCode({
@@ -570,6 +571,7 @@ export function GraphqlServiceEditor(props: GraphqlServiceEditorProps) {
                         lineRange: lineRange,
                     },
                     function: updatedModel,
+                    artifactType: DIRECTORY_MAP.SERVICE
                 });
             }
 
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/ObjectViewer/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/ObjectViewer/index.tsx
index 92dae494004..85ba5b8dcd9 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/ObjectViewer/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/ObjectViewer/index.tsx
@@ -16,15 +16,14 @@
  * under the License.
  */
 
-import { Type, ServiceClassModel, ModelFromCodeRequest, FieldType, FunctionModel, NodePosition, STModification, removeStatement, LineRange, EVENT_TYPE } from "@wso2/ballerina-core";
-import { Button, Codicon, Typography, TextField, ProgressRing, Menu, MenuItem, Popover, Item, ThemeColors, LinkButton } from "@wso2/ui-toolkit";
+import { Type, ServiceClassModel, ModelFromCodeRequest, FunctionModel, NodePosition, STModification, removeStatement, LineRange, EVENT_TYPE, DIRECTORY_MAP } from "@wso2/ballerina-core";
+import { Button, Codicon, Typography, TextField, ProgressRing, ThemeColors, AutoResizeTextArea } from "@wso2/ui-toolkit";
 import styled from "@emotion/styled";
 import React, { useCallback, useEffect, useState, useRef } from "react";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import { LoadingContainer } from "../../styles";
 import { OperationForm } from "../../GraphQLDiagram/OperationForm";
 
-import { URI, Utils } from "vscode-uri";
 import { PanelContainer } from "@wso2/ballerina-side-panel";
 import { applyModifications } from "../../../utils/utils";
 import { Icon } from "@wso2/ui-toolkit";
@@ -142,6 +141,40 @@ const SwitchImplementRow = styled.div`
     padding: 10px 0;
 `;
 
+const DocContainer = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-family: var(--font-family);
+`;
+
+const DocHeaderContainer = styled.div`
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+`;
+
+const DocHeader = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+`;
+
+const DocLabelContainer = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+const DocLabel = styled.label`
+    color: var(--vscode-editor-foreground);
+    text-transform: capitalize;
+`;
+
+const DocDescription = styled.div`
+    color: var(--vscode-list-deemphasizedForeground);
+`;
+
 interface GraphqlObjectViewerProps {
     type: Type;
     onClose: () => void;
@@ -166,6 +199,9 @@ export function GraphqlObjectViewer(props: GraphqlObjectViewerProps) {
     const [isSaving, setIsSaving] = useState(false);
     const [serviceClassFilePath, setServiceClassFilePath] = useState<string>("");
 
+    // Documentation field reference
+    const documentationField = serviceClassModel?.documentation;
+
     useEffect(() => {
         getServiceClassModel();
     }, [type]);
@@ -246,7 +282,8 @@ export function GraphqlObjectViewer(props: GraphqlObjectViewerProps) {
                             }
                         }
                     },
-                    function: updatedFunction
+                    function: updatedFunction,
+                    artifactType: DIRECTORY_MAP.TYPE
                 });
             } else {
                 artifacts = await rpcClient.getServiceDesignerRpcClient().updateResourceSourceCode({
@@ -263,7 +300,8 @@ export function GraphqlObjectViewer(props: GraphqlObjectViewerProps) {
                             }
                         }
                     },
-                    function: updatedFunction
+                    function: updatedFunction,
+                    artifactType: DIRECTORY_MAP.TYPE
                 });
             }
 
@@ -431,6 +469,37 @@ export function GraphqlObjectViewer(props: GraphqlObjectViewerProps) {
         validateTypeName(value);
     }
 
+    // Documentation auto-save on blur
+    const handleDocumentationBlur = async (value: string) => {
+        if (!documentationField || value === documentationField.value) {
+            return;
+        }
+
+        try {
+            setIsSaving(true);
+
+            const updatedModel = { ...serviceClassModel };
+            updatedModel.documentation = {
+                ...documentationField,
+                value: value
+            };
+
+            setServiceClassModel(updatedModel);
+
+            const currentFilePath = await rpcClient.getVisualizerRpcClient().joinProjectPath(serviceClassModel.codedata.lineRange.fileName);
+            await rpcClient.getBIDiagramRpcClient().updateServiceClass({
+                filePath: currentFilePath,
+                serviceClass: updatedModel
+            });
+
+
+        } catch (error) {
+            console.error('Error updating documentation:', error);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
     return (
         <>
             {!serviceClassModel && (
@@ -507,6 +576,34 @@ export function GraphqlObjectViewer(props: GraphqlObjectViewerProps) {
 
                             </>
                         )}
+
+                        {/* Documentation Field */}
+                        {documentationField && (
+                            <DocContainer>
+                                <DocHeaderContainer>
+                                    <DocHeader>
+                                        <DocLabelContainer>
+                                            <DocLabel>{documentationField.metadata?.label}</DocLabel>
+                                        </DocLabelContainer>
+                                        <DocDescription>{documentationField.metadata?.description}</DocDescription>
+                                    </DocHeader>
+                                </DocHeaderContainer>
+                                <AutoResizeTextArea
+                                    name={"documentation"}
+                                    aria-label={documentationField.metadata?.label}
+                                    required={!documentationField.optional}
+                                    placeholder={documentationField?.placeholder ?? ""}
+                                    readOnly={!documentationField.editable}
+                                    value={documentationField.value ?? ""}
+                                    sx={{ width: "100%" }}
+                                    errorMsg={documentationField.diagnostics?.map((diagnostic) => diagnostic.message).join("\n")}
+                                    autoFocus={false}
+                                    onBlur={(e) => handleDocumentationBlur(e.target.value)}
+                                    growRange={{ start: 4, offset: 12 }}
+                                />
+                            </DocContainer>
+                        )}
+
                         <ScrollableSection>
                             <Section>
                                 <SectionHeader>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/OperationForm.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/OperationForm.tsx
index 8f05d1da887..3392d0cb103 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/OperationForm.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/OperationForm.tsx
@@ -26,7 +26,7 @@ interface OperationFormProps {
     model: FunctionModel;
     filePath: string;
     lineRange: LineRange;
-    isGraphqlView: boolean;
+    isGraphqlView?: boolean;
     isServiceClass?: boolean;
     onSave: (model: FunctionModel) => void;
     onClose: () => void;
@@ -69,12 +69,16 @@ export function OperationForm(props: OperationFormProps) {
             const defaultField = paramFields.find(field => field.key === 'defaultable');
             const documentationField = paramFields.find(field => field.key === 'documentation');
 
+            // Read isGraphqlId from ActionTypeEditor
+            const isGraphqlId = param.formValues['isGraphqlId'] === true;
+
             const parameterModel: ParameterModel = {
                 kind: 'REQUIRED',
                 enabled: typeField?.enabled ?? true,
                 editable: typeField?.editable ?? true,
                 advanced: typeField?.advanced ?? false,
                 optional: typeField?.optional ?? false,
+                isGraphqlId: isGraphqlId,
                 type: {
                     value: param.formValues['type'] as string,
                     valueType: typeField?.valueType,
@@ -183,7 +187,7 @@ export function OperationForm(props: OperationFormProps) {
             {
                 key: 'returnType',
                 label: model.returnType.metadata?.label || 'Return Type',
-                type: 'TYPE',
+                type: isGraphqlView ? 'ACTION_TYPE' : (model.returnType.valueType || 'TYPE'),
                 optional: model.returnType.optional,
                 enabled: model.returnType.enabled,
                 editable: model.returnType.editable,
@@ -191,7 +195,9 @@ export function OperationForm(props: OperationFormProps) {
                 documentation: model.returnType.metadata?.description || '',
                 value: model.returnType.value,
                 valueType: model.returnType.valueType,
-                valueTypeConstraint: model.returnType?.valueTypeConstraint
+                properties: model.returnType.properties,
+                valueTypeConstraint: model.returnType?.valueTypeConstraint,
+                isGraphqlId: isGraphqlView ? (model.returnType as any).isGraphqlId : undefined
             }
         );
 
@@ -240,6 +246,11 @@ export function OperationForm(props: OperationFormProps) {
             newFunctionModel.documentation.value = documentation;
         }
         newFunctionModel.returnType.imports = getImportsForProperty('returnType', formImports);
+
+        if (isGraphqlView && data['isGraphqlId'] !== undefined) {
+            (newFunctionModel.returnType as any).isGraphqlId = data['isGraphqlId'] === true;
+        }
+
         Object.entries(data).forEach(([key, value]) => {
             if (newFunctionModel?.properties?.[key]) {
                 newFunctionModel.properties[key].value = value as string;
@@ -281,7 +292,6 @@ export function convertSchemaToFormFields(schema: ConfigProperties): FormField[]
                 const parameter = parameterConfig[key];
                 if (parameter.metadata && parameter.metadata.label) {
                     const formField = convertParameterToFormField(key, parameter as ParameterModel);
-                    console.log("Form Field: ", formField);
                     formFields.push(formField);
                 }
             }
@@ -292,10 +302,11 @@ export function convertSchemaToFormFields(schema: ConfigProperties): FormField[]
 }
 
 export function convertParameterToFormField(key: string, param: ParameterModel): FormField {
+
     return {
         key: key === "defaultValue" ? "defaultable" : key === "name" ? "variable" : key,
         label: param.metadata?.label,
-        type: param.valueType || 'string',
+        type: param.valueType || 'TYPE',
         optional: param.optional || false,
         editable: param.editable || false,
         advanced: key === "defaultValue" ? true : param.advanced,
@@ -304,7 +315,8 @@ export function convertParameterToFormField(key: string, param: ParameterModel):
         valueType: param.valueType,
         valueTypeConstraint: param?.valueTypeConstraint,
         enabled: param.enabled ?? true,
-        lineRange: param?.codedata?.lineRange
+        lineRange: param?.codedata?.lineRange,
+        isGraphqlId: key === "type" ? (param as any).isGraphqlId : undefined
     };
 }
 
@@ -348,6 +360,9 @@ function convertParameterToParamValue(param: ParameterModel, index: number) {
     newFormValues.variable = param.name.value;
     newFormValues.type = param.type.value;
     newFormValues.defaultable = (param.defaultValue as PropertyModel)?.value || '';
+    if (param.isGraphqlId !== undefined) {
+        newFormValues.isGraphqlId = param.isGraphqlId;
+    }
 
     return {
         id: index,
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx
index 90b93c1c964..b7cf126bc5f 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx
@@ -50,6 +50,7 @@ import { EditorContext, StackItem } from "@wso2/type-editor";
 import DynamicModal from "../../components/Modal";
 import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbSeparator } from "../BI/Forms/FormGenerator";
 import React from "react";
+import { removeForwardSlashes } from "../BI/ServiceDesigner/utils";
 
 const SpinnerContainer = styled.div`
     display: flex;
@@ -394,13 +395,19 @@ export function GraphQLDiagram(props: GraphQLDiagramProps) {
                         title="GraphQL"
                         subtitleElement={
                             <SubTitleWrapper>
-                                <Path>{graphqlTypeModel?.type.name}</Path>
+                                <Path>{removeForwardSlashes(graphqlTypeModel?.type.name)}</Path>
                             </SubTitleWrapper>
                         }
                         actions={
                             <ActionButton appearance="secondary" onClick={handleServiceEdit} data-testid="edit-service-btn">
-                                <Icon name="bi-edit" sx={{ marginRight: 5, width: 16, height: 16, fontSize: 14 }} />
-                                Edit
+                                <Icon
+                                    name="bi-settings"
+                                    sx={{
+                                        marginRight: 5,
+                                        fontSize: "16px",
+                                        width: "16px",
+                                    }}
+                                /> Configure
                             </ActionButton>
                         }
                     />
@@ -486,17 +493,17 @@ export function GraphQLDiagram(props: GraphQLDiagramProps) {
                             title="Create New Type"
                             openState={isTypeEditorOpen}
                             setOpenState={handleTypeEditorStateChange}>
-                            <div style={{ padding: '0px 20px' }}>
-                                <BreadcrumbContainer>
-                                    {stack.slice(1, i + 2).map((stackItem, index) => (
-                                        <React.Fragment key={index}>
-                                            {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
-                                            <BreadcrumbItem>
-                                                {stackItem?.type?.name || "NewType"}
-                                            </BreadcrumbItem>
-                                        </React.Fragment>
-                                    ))}
-                                </BreadcrumbContainer>
+                            <BreadcrumbContainer>
+                                {stack.slice(1, i + 2).map((stackItem, index) => (
+                                    <React.Fragment key={index}>
+                                        {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
+                                        <BreadcrumbItem>
+                                            {stackItem?.type?.name || "NewType"}
+                                        </BreadcrumbItem>
+                                    </React.Fragment>
+                                ))}
+                            </BreadcrumbContainer>
+                            <div style={{ height: '560px', overflow: 'auto' }}>
                                 <FormTypeEditor
                                     key={editingType?.name ?? 'new-type'}
                                     type={peekTypeStack()?.type}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/NodeSelectorView/NodeSelector.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/NodeSelectorView/NodeSelector.tsx
index 04093d1c969..7fc19c181cd 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/NodeSelectorView/NodeSelector.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/NodeSelectorView/NodeSelector.tsx
@@ -173,7 +173,7 @@ export function NodeSelector({ nodes, onNodeSelect }: NodeSelectorProps) {
         }
 
         // Sort alphabetically
-        return filtered.sort((a, b) => a.name.localeCompare(b.name));
+        return filtered.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
     }, [nodes, searchTerm]);
 
     const handleOnSearch = (text: string) => {
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/index.tsx
index 64920aead5b..6c1ab388c12 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/index.tsx
@@ -152,7 +152,7 @@ export function TypeDiagram(props: TypeDiagramProps) {
                 setVisualizerLocation(value);
             });
         }
-    }, [rpcClient]);
+    }, [rpcClient, projectUri]);
 
     useEffect(() => {
         setIsModelLoaded(false);
@@ -199,7 +199,7 @@ export function TypeDiagram(props: TypeDiagramProps) {
         }
         setTypeEditorState({
             ...typeEditorState,
-             isTypeCreatorOpen: stack.length !== 1,
+            isTypeCreatorOpen: stack.length !== 1,
         });
     }
 
@@ -299,6 +299,7 @@ export function TypeDiagram(props: TypeDiagramProps) {
                     documentUri: type.codedata.lineRange?.fileName
                 },
             });
+            return;
         }
         setTypeEditorState((prevState) => ({
             ...prevState,
@@ -417,8 +418,8 @@ export function TypeDiagram(props: TypeDiagramProps) {
             return;
         }
         setTypeEditorState({
-          ...typeEditorState,
-          isTypeCreatorOpen: true,
+            ...typeEditorState,
+            isTypeCreatorOpen: true,
         });
     };
 
@@ -538,17 +539,17 @@ export function TypeDiagram(props: TypeDiagramProps) {
                             title="Create New Type"
                             openState={typeEditorState.isTypeCreatorOpen}
                             setOpenState={handleTypeEditorStateChange}>
-                            <div style={{ padding: '0px 20px' }}>
-                                <BreadcrumbContainer>
-                                    {stack.slice(1, i + 2).map((stackItem, index) => (
-                                        <React.Fragment key={index}>
-                                            {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
-                                            <BreadcrumbItem>
-                                                {stackItem?.type?.name || "NewType"}
-                                            </BreadcrumbItem>
-                                        </React.Fragment>
-                                    ))}
-                                </BreadcrumbContainer>
+                            <BreadcrumbContainer>
+                                {stack.slice(1, i + 2).map((stackItem, index) => (
+                                    <React.Fragment key={index}>
+                                        {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
+                                        <BreadcrumbItem>
+                                            {stackItem?.type?.name || "NewType"}
+                                        </BreadcrumbItem>
+                                    </React.Fragment>
+                                ))}
+                            </BreadcrumbContainer>
+                            <div style={{ height: '560px', overflow: 'auto' }}>
                                 <FormTypeEditor
                                     key={typeEditorState.editingTypeId ?? typeEditorState.newTypeName ?? 'new-type'}
                                     type={peekTypeStack()?.type}
diff --git a/workspaces/ballerina/bi-diagram/src/components/AIModelIcon/index.tsx b/workspaces/ballerina/bi-diagram/src/components/AIModelIcon/index.tsx
index 9ab36410b4c..b9c01648250 100644
--- a/workspaces/ballerina/bi-diagram/src/components/AIModelIcon/index.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/AIModelIcon/index.tsx
@@ -26,6 +26,7 @@ import { MistralAIIcon } from "../../resources/icons/MistralAIIcon";
 import { OllamaIcon } from "../../resources/icons/OllamaIcon";
 import { Icon } from "@wso2/ui-toolkit";
 import { CodeData } from "@wso2/ballerina-core";
+import { NodeIcon } from "../NodeIcon";
 
 interface AIModelIconProps {
     type: string;
@@ -58,7 +59,16 @@ export function AIModelIcon(props: AIModelIconProps): React.ReactElement {
         case "DeepseekProvider":
         case "ai.deepseek":
             return <DeepseekIcon />;
+        case "ai.milvus":
+            return <Icon name="bi-milvus" sx={{ width: 24, height: 24, fontSize: 24, color: "#4fc4f9" }} />;
+        case "ai.pinecone":
+            return <Icon name="bi-pinecone" sx={{ width: 24, height: 24, fontSize: 24 }} />;
+        case "ai.pgvector":
+            return <Icon name="bi-postgresql" sx={{ width: 24, height: 24, fontSize: 24 }} />;
         default:
+            if (codedata?.node) {
+                return <NodeIcon type={codedata?.node} size={24} />;
+            }
             return <DefaultLlmIcon />;
     }
 }
diff --git a/workspaces/ballerina/bi-diagram/src/components/ConnectorIcon/index.tsx b/workspaces/ballerina/bi-diagram/src/components/ConnectorIcon/index.tsx
index 2d9918b268a..a106592f425 100644
--- a/workspaces/ballerina/bi-diagram/src/components/ConnectorIcon/index.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/ConnectorIcon/index.tsx
@@ -54,10 +54,15 @@ export function ConnectorIcon(props: ConnectorIconProps): React.ReactElement {
     }
 
     // use custom icon for wso2 module
-    if (codedata && isWso2Module(codedata)) {
+    if (codedata && isWso2Module(codedata) || url?.includes("wso2_icon")) {
         return <Icon name="bi-wso2" className={className} sx={{ width: 24, height: 24, fontSize: 24, ...style }} />;
     }
 
+    // use custom icon for mcp
+    if (url?.includes("mcp")) {
+        return <Icon name="bi-mcp" className={className} sx={{ width: 24, height: 24, fontSize: 24, ...style }} />;
+    }
+
     // use custom icon for ai module
     if (url?.includes("ballerinax_ai_") || url?.includes("ballerina_ai")) {
         return <Icon name="bi-ai-model" className={className} sx={{ width: 24, height: 24, fontSize: 24, ...style }} />;
diff --git a/workspaces/ballerina/bi-diagram/src/components/Diagram.tsx b/workspaces/ballerina/bi-diagram/src/components/Diagram.tsx
index 41f4a87029b..910271963b8 100644
--- a/workspaces/ballerina/bi-diagram/src/components/Diagram.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/Diagram.tsx
@@ -94,6 +94,7 @@ export interface DiagramProps {
         visible: boolean;
         onClickOverlay: () => void;
     }
+    isUserAuthenticated?: boolean;
     expressionContext?: ExpressionContextProps;
 }
 
@@ -120,6 +121,7 @@ export function Diagram(props: DiagramProps) {
         breakpointInfo,
         readOnly,
         overlay,
+        isUserAuthenticated,
         expressionContext,
     } = props;
 
@@ -325,6 +327,7 @@ export function Diagram(props: DiagramProps) {
         suggestions: suggestions,
         project: project,
         readOnly: onAddNode === undefined || onDeleteNode === undefined || onNodeSelect === undefined || readOnly,
+        isUserAuthenticated: isUserAuthenticated,
         expressionContext: expressionContext,
     };
 
diff --git a/workspaces/ballerina/bi-diagram/src/components/DiagramContext.tsx b/workspaces/ballerina/bi-diagram/src/components/DiagramContext.tsx
index 807da74a30a..6b7cba87097 100644
--- a/workspaces/ballerina/bi-diagram/src/components/DiagramContext.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/DiagramContext.tsx
@@ -98,6 +98,7 @@ export interface DiagramContextState {
     readOnly?: boolean;
     lockCanvas?: boolean;
     setLockCanvas?: (lock: boolean) => void;
+    isUserAuthenticated?: boolean;
     expressionContext: ExpressionContextProps;
 }
 
@@ -154,6 +155,7 @@ export const DiagramContext = React.createContext<DiagramContextState>({
     readOnly: false,
     lockCanvas: false,
     setLockCanvas: (lock: boolean) => {},
+    isUserAuthenticated: false,
     expressionContext: {
         completions: [],
         triggerCharacters: [],
diff --git a/workspaces/ballerina/bi-diagram/src/components/NodeIcon/index.tsx b/workspaces/ballerina/bi-diagram/src/components/NodeIcon/index.tsx
index 8a114166d8d..600e4394d0d 100644
--- a/workspaces/ballerina/bi-diagram/src/components/NodeIcon/index.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/NodeIcon/index.tsx
@@ -83,9 +83,9 @@ const NODE_COLOR_GROUPS = {
         "NP_FUNCTION_CALL",
         "MODEL_PROVIDER",
         "MODEL_PROVIDERS",
-        "VECTOR_KNOWLEDGE_BASE",
-        "VECTOR_KNOWLEDGE_BASES",
-        "VECTOR_KNOWLEDGE_BASE_CALL",
+        "KNOWLEDGE_BASE",
+        "KNOWLEDGE_BASES",
+        "KNOWLEDGE_BASE_CALL",
         "VECTOR_STORE",
         "VECTOR_STORES",
         "EMBEDDING_PROVIDER",
@@ -93,7 +93,8 @@ const NODE_COLOR_GROUPS = {
         "DATA_LOADER",
         "DATA_LOADERS",
         "CHUNKER",
-        "CHUNKERS"
+        "CHUNKERS",
+        "MEMORY_STORE"
     ],
     // Data related - magenta variants
     MAGENTA_DATA_GROUP: ["VARIABLE", "NEW_DATA", "UPDATE_DATA", "ASSIGN"],
@@ -228,9 +229,9 @@ const NODE_ICONS: Record<NodeKind, React.FC<{ size: number; color: string }>> =
     AGENT_CALL: ({ size, color }) => <Icon name="bi-ai-agent" sx={{ fontSize: size, width: size, height: size, color }} />,
     MODEL_PROVIDER: ({ size, color }) => <Icon name="bi-ai-model" sx={{ fontSize: size, width: size, height: size, color }} />,
     MODEL_PROVIDERS: ({ size, color }) => <Icon name="bi-ai-model" sx={{ fontSize: size, width: size, height: size, color }} />,
-    VECTOR_KNOWLEDGE_BASE: ({ size, color }) => <Icon name="bi-db-kb" sx={{ fontSize: size, width: size, height: size, color }} />,
-    VECTOR_KNOWLEDGE_BASES: ({ size, color }) => <Icon name="bi-db-kb" sx={{ fontSize: size, width: size, height: size, color }} />,
-    VECTOR_KNOWLEDGE_BASE_CALL: ({ size, color }) => <CallIcon />,
+    KNOWLEDGE_BASE: ({ size, color }) => <Icon name="bi-db-kb" sx={{ fontSize: size, width: size, height: size, color }} />,
+    KNOWLEDGE_BASES: ({ size, color }) => <Icon name="bi-db-kb" sx={{ fontSize: size, width: size, height: size, color }} />,
+    KNOWLEDGE_BASE_CALL: ({ size, color }) => <CallIcon />,
     VECTOR_STORE: ({ size, color }) => <Icon name="bi-db" sx={{ fontSize: size, width: size, height: size, color }} />,
     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 }} />,
@@ -239,6 +240,7 @@ const NODE_ICONS: Record<NodeKind, React.FC<{ size: number; color: string }>> =
     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 }} />,
+    MEMORY_STORE: ({ size, color }) => <Icon name="bi-memory" 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/NodeLink/NodeLinkWidget.tsx b/workspaces/ballerina/bi-diagram/src/components/NodeLink/NodeLinkWidget.tsx
index df40acad0e8..df41f3ed9dc 100644
--- a/workspaces/ballerina/bi-diagram/src/components/NodeLink/NodeLinkWidget.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/NodeLink/NodeLinkWidget.tsx
@@ -44,7 +44,7 @@ const fadeInZoomIn = keyframes`
 `;
 
 export const NodeLinkWidget: React.FC<NodeLinkWidgetProps> = ({ link, engine }) => {
-    const { onAddNode, onAddNodePrompt, onAddComment, setLockCanvas, readOnly } = useDiagramContext();
+    const { onAddNode, onAddNodePrompt, onAddComment, setLockCanvas, readOnly, isUserAuthenticated } = useDiagramContext();
 
     const [isHovered, setIsHovered] = useState(false);
     const [isCommentButtonHovered, setIsCommentButtonHovered] = useState(false);
@@ -247,20 +247,21 @@ export const NodeLinkWidget: React.FC<NodeLinkWidgetProps> = ({ link, engine })
                             width="24"
                             height="24"
                             viewBox="0 0 24 24"
-                            onClick={handleAddPrompt}
+                            onClick={isUserAuthenticated ? handleAddPrompt : undefined}
                             onMouseEnter={() => setIsPromptButtonHovered(true)}
                             onMouseLeave={() => setIsPromptButtonHovered(false)}
                             css={css`
-                                cursor: pointer;
+                                cursor: ${isUserAuthenticated ? "pointer" : "not-allowed"};
                                 visibility: ${shouldHighlight ? "visible" : "hidden"};
                             `}
                         >
+                            {!isUserAuthenticated && <title>You need to be logged into BI Copilot to access AI features</title>}
                             <path
                                 fill={ThemeColors.SURFACE_BRIGHT}
                                 d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"
                             />
                             <path
-                                fill={isPromptButtonHovered ? ThemeColors.SECONDARY : ThemeColors.PRIMARY}
+                                fill={!isUserAuthenticated ? ThemeColors.OUTLINE_VARIANT : (isPromptButtonHovered ? ThemeColors.SECONDARY : ThemeColors.PRIMARY)}
                                 d="M7.5 5.6L5 7l1.4-2.5L5 2l2.5 1.4L10 2L8.6 4.5L10 7zm12 9.8L22 14l-1.4 2.5L22 19l-2.5-1.4L17 19l1.4-2.5L17 14zM22 2l-1.4 2.5L22 7l-2.5-1.4L17 7l1.4-2.5L17 2l2.5 1.4zm-8.66 10.78l2.44-2.44l-2.12-2.12l-2.44 2.44zm1.03-5.49l2.34 2.34c.39.37.39 1.02 0 1.41L5.04 22.71c-.39.39-1.04.39-1.41 0l-2.34-2.34c-.39-.37-.39-1.02 0-1.41L12.96 7.29c.39-.39 1.04-.39 1.41 0"
                             />
                         </svg>
diff --git a/workspaces/ballerina/bi-diagram/src/components/nodes/AgentCallNode/AgentCallNodeWidget.tsx b/workspaces/ballerina/bi-diagram/src/components/nodes/AgentCallNode/AgentCallNodeWidget.tsx
index 59c7b00bc3d..2f321220a72 100644
--- a/workspaces/ballerina/bi-diagram/src/components/nodes/AgentCallNode/AgentCallNodeWidget.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/nodes/AgentCallNode/AgentCallNodeWidget.tsx
@@ -618,7 +618,7 @@ export function AgentCallNodeWidget(props: AgentCallNodeWidgetProps) {
                                         <div style={{ flex: 1 }}>
                                             <NodeStyles.MemoryTitle>Memory</NodeStyles.MemoryTitle>
                                             <NodeStyles.MemoryMeta>
-                                                {nodeMetadata?.memory?.type || "MessageWindowChatMemory"}
+                                                {(nodeMetadata?.memory?.type || "MessageWindowChatMemory").replace(/^ai:/, "")}
                                             </NodeStyles.MemoryMeta>
                                         </div>
                                         <NodeStyles.MenuButton
diff --git a/workspaces/ballerina/bi-diagram/src/components/nodes/ApiCallNode/ApiCallNodeWidget.tsx b/workspaces/ballerina/bi-diagram/src/components/nodes/ApiCallNode/ApiCallNodeWidget.tsx
index e398b811930..9fa558227d1 100644
--- a/workspaces/ballerina/bi-diagram/src/components/nodes/ApiCallNode/ApiCallNodeWidget.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/nodes/ApiCallNode/ApiCallNodeWidget.tsx
@@ -223,7 +223,7 @@ export function ApiCallNodeWidget(props: ApiCallNodeWidgetProps) {
     const hasBreakpoint = model.hasBreakpoint();
     const isActiveBreakpoint = model.isActiveBreakpoint();
     // show dash line if the node is a class call
-    const isClassCall = model.node.codedata.node === "VECTOR_KNOWLEDGE_BASE_CALL";
+    const isClassCall = model.node.codedata.node === "KNOWLEDGE_BASE_CALL";
 
     useEffect(() => {
         if (model.node.suggested) {
diff --git a/workspaces/ballerina/bi-diagram/src/components/nodes/EmptyNode/EmptyNodeWidget.tsx b/workspaces/ballerina/bi-diagram/src/components/nodes/EmptyNode/EmptyNodeWidget.tsx
index 2ecb2052b1a..f23b573bfac 100644
--- a/workspaces/ballerina/bi-diagram/src/components/nodes/EmptyNode/EmptyNodeWidget.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/nodes/EmptyNode/EmptyNodeWidget.tsx
@@ -81,7 +81,7 @@ interface EmptyNodeWidgetProps {
 
 export function EmptyNodeWidget(props: EmptyNodeWidgetProps) {
     const { node, engine } = props;
-    const { onAddNode, onAddNodePrompt, readOnly } = useDiagramContext();
+    const { onAddNode, onAddNodePrompt, readOnly, isUserAuthenticated } = useDiagramContext();
 
     const [isHovered, setIsHovered] = useState(false);
     const [isCommentButtonHovered, setIsCommentButtonHovered] = useState(false);
@@ -210,21 +210,22 @@ export function EmptyNodeWidget(props: EmptyNodeWidgetProps) {
                             width="20"
                             height="20"
                             viewBox="0 0 24 24"
-                            onClick={handleAddPrompt}
+                            onClick={isUserAuthenticated ? handleAddPrompt : undefined}
                             onMouseEnter={() => setIsPromptButtonHovered(true)}
                             onMouseLeave={() => setIsPromptButtonHovered(false)}
                             css={css`
                                 display: ${isHovered ? "flex" : "none"};
                                 animation: ${fadeInZoomIn} 0.2s ease-out forwards;
-                                cursor: pointer;
+                                cursor: ${isUserAuthenticated ? "pointer" : "not-allowed"};
                             `}
                         >
+                            {!isUserAuthenticated && <title>You need to be logged into BI Copilot to access AI features</title>}
                             <path
                                 fill={ThemeColors.SURFACE_BRIGHT}
                                 d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"
                             />
                             <path
-                                fill={isPromptButtonHovered ? ThemeColors.SECONDARY : ThemeColors.PRIMARY}
+                                fill={!isUserAuthenticated ? ThemeColors.OUTLINE_VARIANT : (isPromptButtonHovered ? ThemeColors.SECONDARY : ThemeColors.PRIMARY)}
                                 d="M7.5 5.6L5 7l1.4-2.5L5 2l2.5 1.4L10 2L8.6 4.5L10 7zm12 9.8L22 14l-1.4 2.5L22 19l-2.5-1.4L17 19l1.4-2.5L17 14zM22 2l-1.4 2.5L22 7l-2.5-1.4L17 7l1.4-2.5L17 2l2.5 1.4zm-8.66 10.78l2.44-2.44l-2.12-2.12l-2.44 2.44zm1.03-5.49l2.34 2.34c.39.37.39 1.02 0 1.41L5.04 22.71c-.39.39-1.04.39-1.41 0l-2.34-2.34c-.39-.37-.39-1.02 0-1.41L12.96 7.29c.39-.39 1.04-.39 1.41 0"
                             />
                         </svg>
diff --git a/workspaces/ballerina/component-diagram/src/components/Diagram.tsx b/workspaces/ballerina/component-diagram/src/components/Diagram.tsx
index 13d942fe79e..42094e3ef7b 100644
--- a/workspaces/ballerina/component-diagram/src/components/Diagram.tsx
+++ b/workspaces/ballerina/component-diagram/src/components/Diagram.tsx
@@ -153,8 +153,10 @@ export function Diagram(props: DiagramProps) {
         const nodes: NodeModel[] = [];
         const links: NodeLinkModel[] = [];
 
-        // filtered autogenerated connections
-        const filteredConnections = project.connections?.filter((connection) => !connection.symbol?.startsWith("_"));
+        // filtered autogenerated connections and connections with enableFlowModel as false
+        const filteredConnections = project.connections?.filter((connection) => 
+            !connection.symbol?.startsWith("_") && connection.enableFlowModel !== false
+        );
         // Sort and create connections
         const sortedConnections = sortItems(filteredConnections || []) as CDConnection[];
         sortedConnections.forEach((connection, index) => {
diff --git a/workspaces/ballerina/component-diagram/src/components/nodes/ConnectionNode/ConnectionNodeWidget.tsx b/workspaces/ballerina/component-diagram/src/components/nodes/ConnectionNode/ConnectionNodeWidget.tsx
index 5917b2e97e0..737e503a609 100644
--- a/workspaces/ballerina/component-diagram/src/components/nodes/ConnectionNode/ConnectionNodeWidget.tsx
+++ b/workspaces/ballerina/component-diagram/src/components/nodes/ConnectionNode/ConnectionNodeWidget.tsx
@@ -60,6 +60,7 @@ const Circle = styled.div<NodeStyleProp>`
     border-radius: 50%;
     background-color: ${ThemeColors.SURFACE_DIM};
     color: ${ThemeColors.ON_SURFACE};
+    aspect-ratio: 1 / 1;
 `;
 
 const MenuButton = styled(Button)`
@@ -165,6 +166,9 @@ export function ConnectionNodeWidget(props: ConnectionNodeWidgetProps) {
     };
 
     const getNodeDescription = () => {
+        if (model.node?.kind) {
+            return model.node.kind;
+        }
         return "Connection";
     };
 
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
index c0685d7a529..e4711549639 100644
--- a/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GeneralWidget.tsx
+++ b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GeneralWidget.tsx
@@ -50,7 +50,7 @@ const getNodeTitle = (model: EntryNodeModel) => {
         return model.node.displayName;
     }
     if ((model.node as CDService).absolutePath) {
-        return (model.node as CDService).absolutePath;
+        return (model.node as CDService).absolutePath.replace(/\\/g, "");
     }
     return "";
 };
@@ -115,6 +115,10 @@ function getCustomEntryNodeIcon(type: string) {
             return <Icon name="bi-github" />;
         case "http":
             return <Icon name="bi-globe" />;
+        case "mcp":
+            return <Icon name="bi-mcp" />;
+        case "solace":
+            return <Icon name="bi-solace" sx={{ color: "#00C895" }}/>;
         default:
             return null;
     }
@@ -144,7 +148,7 @@ function FunctionBox(props: { func: any; model: EntryNodeModel; engine: any }) {
                 )}
                 {func.path && (
                     <Title hovered={isHovered}>
-                        {`/${func.path}`}
+                        {`/${func.path.replace(/\\/g, "")}`}
                     </Title>
                 )}
                 {func.name && <Title hovered={isHovered}>{func.name}</Title>}
diff --git a/workspaces/ballerina/data-mapper/src/components/DataMapper/DataMapperEditor.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/DataMapperEditor.tsx
index 8ae68b725f9..399ecd16e14 100644
--- a/workspaces/ballerina/data-mapper/src/components/DataMapper/DataMapperEditor.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/DataMapperEditor.tsx
@@ -124,6 +124,7 @@ export function DataMapperEditor(props: DataMapperEditorProps) {
     const {
         modelState,
         name,
+        reusable,
         applyModifications,
         onClose,
         onRefresh,
@@ -307,9 +308,7 @@ export function DataMapperEditor(props: DataMapperEditorProps) {
     };
 
     const autoMapWithAI = async () => {
-        const datamapperModel = await rpcClient.getAiPanelRpcClient().generateDataMapperModel({});
-        rpcClient.getAiPanelRpcClient()
-            .openAIMappingChatWindow(datamapperModel);
+        await rpcClient.getAiPanelRpcClient().openChatWindowWithCommand();
     };
 
     const addNewSubMapping = async (
@@ -329,6 +328,7 @@ export function DataMapperEditor(props: DataMapperEditorProps) {
                 {model && (
                     <DataMapperHeader
                         views={views}
+                        reusable={reusable}
                         switchView={switchView}
                         hasEditDisabled={!!errorKind}
                         onClose={handleOnClose}
diff --git a/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/RefreshResetGroup.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ActionIconButton.tsx
similarity index 64%
rename from workspaces/ballerina/data-mapper/src/components/DataMapper/Header/RefreshResetGroup.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ActionIconButton.tsx
index 21df6374939..5f42c43d92f 100644
--- a/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/RefreshResetGroup.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ActionIconButton.tsx
@@ -17,21 +17,15 @@
  */
 
 import React, { useState } from "react";
-import styled from "@emotion/styled";
 import { Button, Codicon, ProgressRing } from "@wso2/ui-toolkit";
 
-const ButtonGroup = styled.div`
-    display: flex;
-    align-items: center;
-`;
-
-interface ActionButtonProps {
+interface ActionIconButtonProps {
     onClick: () => Promise<void>;
     iconName: string;
     tooltip: string;
 }
 
-function ActionButton({ onClick, iconName, tooltip }: ActionButtonProps) {
+export function ActionIconButton({ onClick, iconName, tooltip }: ActionIconButtonProps) {
     const [inProgress, setInProgress] = useState(false);
     
     const handleOnClick = async () => {
@@ -51,26 +45,4 @@ function ActionButton({ onClick, iconName, tooltip }: ActionButtonProps) {
             </span>
         </Button>
     );
-}
-
-interface RefreshResetGroupProps {
-    onRefresh: () => Promise<void>;
-    onReset: () => Promise<void>;
-}
-
-export function RefreshResetGroup({ onRefresh, onReset }: RefreshResetGroupProps) {
-    return (
-        <ButtonGroup>
-            <ActionButton 
-                onClick={onRefresh}
-                iconName="refresh"
-                tooltip="Refresh"
-            />
-            <ActionButton 
-                onClick={onReset}
-                iconName="clear-all"
-                tooltip="Clear all mappings"
-            />
-        </ButtonGroup>
-    );
-}
+}
\ No newline at end of file
diff --git a/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx
index d9e4b30a9f2..bbbaf3954a8 100644
--- a/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx
@@ -16,9 +16,8 @@
  * under the License.
  */
 // tslint:disable: jsx-no-multiline-js
-import React from "react";
 import styled from "@emotion/styled";
-import { Button, Codicon, Icon, ProgressRing } from "@wso2/ui-toolkit";
+import { Codicon, Icon } from "@wso2/ui-toolkit";
 
 import HeaderSearchBox from "./HeaderSearchBox";
 import HeaderBreadcrumb from "./HeaderBreadcrumb";
@@ -27,10 +26,11 @@ import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import AutoMapButton from "./AutoMapButton";
 import ExpressionBarWrapper from "./ExpressionBar";
 import EditButton from "./EditButton";
-import { RefreshResetGroup } from "./RefreshResetGroup";
+import { ActionIconButton } from "./ActionIconButton";
 
 export interface DataMapperHeaderProps {
     views: View[];
+    reusable?: boolean;
     switchView: (index: number) => void;
     hasEditDisabled: boolean;
     onClose: () => void;
@@ -43,7 +43,7 @@ export interface DataMapperHeaderProps {
 }
 
 export function DataMapperHeader(props: DataMapperHeaderProps) {
-    const { views, switchView, hasEditDisabled, onClose, onBack, onRefresh, onReset, onEdit, autoMapWithAI, undoRedoGroup } = props;
+    const { views, reusable, switchView, hasEditDisabled, onClose, onBack, onRefresh, onReset, onEdit, autoMapWithAI, undoRedoGroup } = props;
 
     const handleAutoMap = async () => {
         await autoMapWithAI();
@@ -55,19 +55,25 @@ export function DataMapperHeader(props: DataMapperHeaderProps) {
                 <IconButton onClick={onBack}>
                     <Icon name="bi-arrow-back" iconSx={{ fontSize: "24px", color: "var(--vscode-foreground)" }} />
                 </IconButton>
-                {undoRedoGroup && undoRedoGroup()}
-                <VerticalDivider />
-                <RefreshResetGroup onRefresh={onRefresh} onReset={onReset} />
                 <BreadCrumb>
                     <Title>Data Mapper</Title>
                     {!hasEditDisabled && (
                         <HeaderBreadcrumb
                             views={views}
+                            reusable={reusable}
                             switchView={switchView}
                         />
                     )}
                 </BreadCrumb>
                 <RightContainer isClickable={!hasEditDisabled}>
+                    <ActionGroupContaner>
+                        {undoRedoGroup && undoRedoGroup()}
+                        <ActionIconButton
+                            onClick={onReset}
+                            iconName="clear-all"
+                            tooltip="Clear all mappings"
+                        />
+                    </ActionGroupContaner>
                     <FilterBar>
                         <HeaderSearchBox />
                     </FilterBar>
@@ -124,6 +130,10 @@ const RightContainer = styled.div<{ isClickable: boolean }>`
     opacity: ${({ isClickable }) => (isClickable ? 1 : 0.5)};
 `;
 
+const ActionGroupContaner = styled.div`
+    display: flex;
+`;
+
 const BreadCrumb = styled.div`
     width: 60%;
     display: flex;
diff --git a/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/HeaderBreadcrumb.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/HeaderBreadcrumb.tsx
index 394645dc5e8..7a16b05bbc4 100644
--- a/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/HeaderBreadcrumb.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/HeaderBreadcrumb.tsx
@@ -18,7 +18,7 @@
 // tslint:disable: jsx-no-multiline-js
 import React, { useMemo } from 'react';
 
-import { Breadcrumbs, Codicon } from '@wso2/ui-toolkit';
+import { Breadcrumbs, Codicon, Icon } from '@wso2/ui-toolkit';
 import { css } from '@emotion/css';
 import { View } from "../Views/DataMapperView";
 import { extractLastPartFromLabel } from './utils';
@@ -27,7 +27,9 @@ const useStyles = () => {
     const baseStyle = {
         color: "inherit",
         fontFamily: "var(--vscode-editor-font-family)",
-        fontSize: "13px"
+        fontSize: "13px",
+        display: "flex",
+        gap: "4px"
     };
 
     return {
@@ -45,13 +47,46 @@ const useStyles = () => {
     };
 };
 
+interface LinkContentProps {
+    label: string;
+    isRootView?: boolean;
+    isSubMapping?: boolean;
+    isReusable?: boolean;
+}
+
+function LinkContent(props: LinkContentProps) {
+    const { label, isRootView, isSubMapping, isReusable } = props;
+    return (
+        isRootView ? (
+            <>
+            {isReusable ? (
+                <Icon name="function-icon" tooltip="Data Mapper Function" />
+            ) : (
+                <Codicon name="symbol-variable" tooltip="Variable" />
+            )}
+            {label}
+            </>
+        ) : (
+            <>
+                {isSubMapping ? (
+                    <Icon name="bi-dm-submapping" tooltip="SubMapping" />
+                ) : (
+                    <Icon name="bi-dm-query" tooltip="Query" />
+                )}
+                {label}
+            </>
+        )
+    );
+}
+
 export interface HeaderBreadcrumbProps {
     views: View[];
+    reusable?: boolean;
     switchView: (index: number) => void;
 }
 
 export default function HeaderBreadcrumb(props: HeaderBreadcrumbProps) {
-    const { views, switchView } = props;
+    const { views, reusable, switchView } = props;
     const classes = useStyles();
 
     const [activeLink, links] = useMemo(() => {
@@ -64,7 +99,7 @@ export default function HeaderBreadcrumb(props: HeaderBreadcrumbProps) {
 
             const selectedLink = (
                 <div className={classes.active}>
-                    {isRootView ? label : `${label}:${isFocusedOnSubMappingRoot ? "SubMapping" : "Query"}`}
+                    <LinkContent label={label} isRootView={isRootView} isSubMapping={isFocusedOnSubMappingRoot} isReusable={reusable} />
                 </div>
             );
 
@@ -80,7 +115,7 @@ export default function HeaderBreadcrumb(props: HeaderBreadcrumbProps) {
                             className={classes.link}
                             data-testid={`dm-header-breadcrumb-${index}`}
                         >
-                            {isRootView ? label : `${label}:${view.subMappingInfo ? "SubMapping" : "Query"}`}
+                            <LinkContent label={label} isRootView={isRootView} isSubMapping={!!view.subMappingInfo} isReusable={reusable} />
                         </a>
                     );
                 })
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Label/MappingOptionsWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Label/MappingOptionsWidget.tsx
index b194112a2d2..60f751c51d8 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Label/MappingOptionsWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Label/MappingOptionsWidget.tsx
@@ -27,6 +27,7 @@ import { MappingType } from '../Link';
 import { ExpressionLabelModel } from './ExpressionLabelModel';
 import { createNewMapping, mapWithCustomFn, mapWithQuery, mapWithTransformFn } from '../utils/modification-utils';
 import classNames from 'classnames';
+import { genArrayElementAccessSuffix } from '../utils/common-utils';
 
 export const useStyles = () => ({
     arrayMappingMenu: css({
@@ -110,7 +111,7 @@ export function MappingOptionsWidget(props: MappingOptionsWidgetProps) {
     };
 
     const onClickMapArraysAccessSingleton = async () => {
-       await createNewMapping(link, (expr: string) => `${expr}[0]`);
+       await createNewMapping(link, (expr: string) => `${expr}${genArrayElementAccessSuffix(link)}`);
     };
 
     const onClickAggregateArray = async () => {
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/LinkState/CreateLinkState.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/LinkState/CreateLinkState.ts
index 405f6d191b9..23ee49d3f59 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/LinkState/CreateLinkState.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/LinkState/CreateLinkState.ts
@@ -30,6 +30,7 @@ import { removePendingMappingTempLinkIfExists } from '../utils/link-utils';
 import { useDMExpressionBarStore } from '../../../store/store';
 import { IntermediatePortModel } from '../Port/IntermediatePort';
 import { LinkConnectorNode } from '../Node/LinkConnector/LinkConnectorNode';
+import { isQueryHeaderPort } from '../utils/port-utils';
 /**
  * This state is controlling the creation of a link.
  */
@@ -68,9 +69,7 @@ export class CreateLinkState extends State<DiagramEngine> {
 									element = portModel;
 								}
 							}
-						}
-
-						if (isInputNode(element)) {
+						} else if (isInputNode(element)) {
 							const isGoToSubMappingBtn = (actionEvent.event.target as Element)
 								.closest('div[id^="go-to-sub-mapping-btn"]');
 							const isDeleteSubMappingBtn = (actionEvent.event.target as Element)
@@ -93,15 +92,17 @@ export class CreateLinkState extends State<DiagramEngine> {
 									element = portModel;
 								}
 							}
-						}
-
-						if (isLinkModel(element) && this.sourcePort) {
+						} else if (isLinkModel(element) && this.sourcePort) {
 							// If a source port is already selected and clicked on a link,
 							// select the target port of the link to create a mapping
-							element = (element as DataMapperLinkModel).getTargetPort();
+							const targetPort = (element as DataMapperLinkModel).getTargetPort();
 
-							if (element instanceof IntermediatePortModel) {
-								const parentNode = element.getNode();
+							if (targetPort instanceof InputOutputPortModel && !isQueryHeaderPort(targetPort)) {
+								element = targetPort;
+							}
+
+							if (targetPort instanceof IntermediatePortModel) {
+								const parentNode = targetPort.getNode();
 								if (parentNode instanceof LinkConnectorNode) {
 									element = parentNode.targetMappedPort;
 								}
@@ -119,7 +120,7 @@ export class CreateLinkState extends State<DiagramEngine> {
 						this.clearState();
 						this.eject();
 					} else if (element instanceof PortModel && !this.sourcePort) {
-						if (element instanceof InputOutputPortModel) {
+						if (element instanceof InputOutputPortModel && !isQueryHeaderPort(element)) {
 							if (element.attributes.portType === "OUT") {
 								this.sourcePort = element;
 								element.fireEvent({}, "mappingStartedFrom");
@@ -141,7 +142,7 @@ export class CreateLinkState extends State<DiagramEngine> {
 							}
 						}
 					} else if (element instanceof PortModel && this.sourcePort && element !== this.sourcePort) {
-						if ((element instanceof InputOutputPortModel)) {
+						if ((element instanceof InputOutputPortModel && !isQueryHeaderPort(element))) {
 							if (element.attributes.portType === "IN") {
 								let isDisabled = false;
 								if (element instanceof InputOutputPortModel) {
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOuptutFieldWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOuptutFieldWidget.tsx
index 5ead170dd11..fbe4d420bb3 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOuptutFieldWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOuptutFieldWidget.tsx
@@ -137,7 +137,6 @@ export function ArrayOutputFieldWidget(props: ArrayOutputFieldWidgetProps) {
         <TruncatedLabelGroup style={{ marginRight: "auto", alignItems: "baseline" }}>
             <TruncatedLabel
                 className={classnames(classes.valueLabel, isDisabled ? classes.labelDisabled : "")}
-                style={{ marginLeft: !connectedViaLink ? 0 : indentation + 24 }}
             >
                 <OutputSearchHighlight>{fieldName}</OutputSearchHighlight>
                 {!field?.optional && <span className={classes.requiredMark}>*</span>}
@@ -365,19 +364,17 @@ export function ArrayOutputFieldWidget(props: ArrayOutputFieldWidgetProps) {
                         )}
                     </span>
                     <span className={classes.label}>
-                        {(!connectedViaLink) && (
-                            <FieldActionWrapper>
-                                <Button
-                                    id={`expand-or-collapse-${portName}`}
-                                    appearance="icon"
-                                    sx={{ marginLeft: indentation }}
-                                    onClick={handleExpand}
-                                    data-testid={`${portIn?.getName()}-expand-icon-array-field`}
-                                >
-                                    {expanded ? <Codicon name="chevron-down" /> : <Codicon name="chevron-right" />}
-                                </Button>
-                            </FieldActionWrapper>
-                        )}
+                        <FieldActionWrapper>
+                            <Button
+                                id={`expand-or-collapse-${portName}`}
+                                appearance="icon"
+                                sx={{ marginLeft: indentation }}
+                                onClick={handleExpand}
+                                data-testid={`${portIn?.getName()}-expand-icon-array-field`}
+                            >
+                                {expanded ? <Codicon name="chevron-down" /> : <Codicon name="chevron-right" />}
+                            </Button>
+                        </FieldActionWrapper>
                         {label}
                     </span>
                     {(isLoading) ? (
@@ -402,7 +399,7 @@ export function ArrayOutputFieldWidget(props: ArrayOutputFieldWidgetProps) {
                     </div>
                 </div>
             )}
-            {(expanded && !connectedViaLink && !elements?.length && arrayField) && (
+            {(expanded && !elements?.length && arrayField) && (
                 <OutputFieldPreviewWidget
                     key={`arr-output--preview-field-${portName}`}
                     engine={engine}
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNode.ts
index 14ca9844c2b..bfa6ec22f5b 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNode.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNode.ts
@@ -130,8 +130,8 @@ export class ArrayOutputNode extends DataMapperNodeModel {
 
     private createLinks(mappings: Mapping[]) {
         mappings.forEach((mapping) => {
-            const { isComplex, isQueryExpression, isFunctionCall, inputs, output, expression, diagnostics } = mapping;
-            if (isComplex || isQueryExpression || isFunctionCall || inputs.length !== 1) {
+            const { isComplex, isQueryExpression, isFunctionCall, elementAccessIndex, inputs, output, expression, diagnostics } = mapping;
+            if (isComplex || isQueryExpression || isFunctionCall || inputs.length !== 1 || elementAccessIndex) {
                 // Complex mappings are handled in the LinkConnectorNode
                 return;
             }
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputWidget.tsx
index f07495dde78..0da38dd8071 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputWidget.tsx
@@ -91,7 +91,6 @@ export function ArrayOutputWidget(props: ArrayOutputWidgetProps) {
 		expanded = false;
 	}
 
-	const indentation = (portIn && !hasValue) ? 0 : 24;
 	const shouldPortVisible = !hasValue || !expanded || !isBodyArrayLitExpr || elements.length === 0;
 	const hasElementConnectedViaLink = elements.some(expr => expr.mappings.some(m => m.inputs.length > 0));
 
@@ -218,7 +217,6 @@ export function ArrayOutputWidget(props: ArrayOutputWidgetProps) {
 								tooltip="Expand/Collapse"
 								onClick={handleExpand}
 								data-testid={`${id}-expand-icon-mapping-target-node`}
-								sx={{ marginLeft: indentation }}
 							>
 								{expanded ? <Codicon name="chevron-down" /> : <Codicon name="chevron-right" />}
 							</Button>
@@ -237,7 +235,7 @@ export function ArrayOutputWidget(props: ArrayOutputWidgetProps) {
 						</FieldActionWrapper>
 					)}
 				</TreeHeader>
-				{expanded && outputType && isBodyArrayLitExpr && (
+				{expanded && outputType && (
 					<TreeBody>
 						<ArrayOutputFieldWidget
 							key={id}
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx
index afc39c2fc7a..fee23c12d62 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx
@@ -25,7 +25,7 @@ import classnames from "classnames";
 import { LinkConnectorNode } from './LinkConnectorNode';
 import { useIntermediateNodeStyles } from '../../../styles';
 import { DiagnosticWidget } from '../../Diagnostic/DiagnosticWidget';
-import { renderDeleteButton, renderEditButton, renderIconButton, renderPortWidget } from './LinkConnectorWidgetComponents';
+import { renderDeleteButton, renderEditButton, renderIconButton, renderIndexingButton, renderPortWidget } from './LinkConnectorWidgetComponents';
 import { useDMExpressionBarStore } from "../../../../store/store";
 import { InputOutputPortModel } from "../../Port";
 
@@ -66,27 +66,28 @@ export function LinkConnectorNodeWidget(props: LinkConnectorNodeWidgetProps) {
     );
 
     return (!node.hidden && (
-            <div className={classes.root} data-testid={`link-connector-node-${node?.value}`}>
-                <div className={classes.header}>
-                    {renderPortWidget(engine, node.inPort, `${node?.value}-input`)}
-                    {renderIconButton(node)}
-                    {renderEditButton(onClickEdit, node?.value)}
-                    {deleteInProgress ? (
-                        loadingScreen
-                    ) : (
-                        renderDeleteButton(onClickDelete, node?.value)
-                    )}
-                    {diagnostic && (
-                        <DiagnosticWidget
-                            diagnostic={diagnostic}
-                            value={value}
-                            onClick={onClickEdit}
-                            btnSx={{ margin: "0 2px" }}
-                        />
-                    )}
-                    {renderPortWidget(engine, node.outPort, `${node?.value}-output`)}
-                </div>
+        <div className={classes.root} data-testid={`link-connector-node-${node?.value}`}>
+            <div className={classes.header}>
+                {renderPortWidget(engine, node.inPort, `${node?.value}-input`)}
+                {renderIconButton(node)}
+                {node.mapping.elementAccessIndex ?
+                    renderIndexingButton(onClickEdit, node) :
+                    renderEditButton(onClickEdit, node?.value)
+                }
+                {deleteInProgress ?
+                    loadingScreen :
+                    renderDeleteButton(onClickDelete, node?.value)
+                }
+                {diagnostic && (
+                    <DiagnosticWidget
+                        diagnostic={diagnostic}
+                        value={value}
+                        onClick={onClickEdit}
+                        btnSx={{ margin: "0 2px" }}
+                    />
+                )}
+                {renderPortWidget(engine, node.outPort, `${node?.value}-output`)}
             </div>
-        )
-    );
+        </div>
+    ));
 }
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorWidgetComponents.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorWidgetComponents.tsx
index fbcde7aeaa1..5b7689a1f64 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorWidgetComponents.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorWidgetComponents.tsx
@@ -18,7 +18,7 @@
 // tslint:disable: jsx-no-multiline-js
 import * as React from 'react';
 import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import { Button, Codicon, Icon } from '@wso2/ui-toolkit';
+import { Button, Codicon, Icon, TruncatedLabel } from '@wso2/ui-toolkit';
 
 import { DataMapperPortWidget, IntermediatePortModel } from '../../Port';
 import { LinkConnectorNode } from './LinkConnectorNode';
@@ -78,6 +78,24 @@ export const renderIconButton = (node: LinkConnectorNode) => {
     return renderExpressionIcon();
 }
 
+export const renderIndexingButton = (onClick: () => void, node: LinkConnectorNode) => (
+    <Button
+        appearance="icon"
+        onClick={onClick}
+        data-testid={`link-connector-indexing-${node?.value}`}
+        tooltip='indexing'
+    >
+        <div style={{ maxWidth: '40px', display: 'flex' }}>
+            {"["}
+            <TruncatedLabel>
+                {node.mapping.elementAccessIndex.toString()}
+            </TruncatedLabel>
+            {"]"}
+        </div>
+    </Button>
+);
+
+
 export const renderEditButton = (onClick: () => void, nodeValue: string) => (
     <Button
         appearance="icon"
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNode.ts
index 6033018d1d4..18ae0426dd1 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNode.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNode.ts
@@ -107,8 +107,8 @@ export class ObjectOutputNode extends DataMapperNodeModel {
 
     private createLinks(mappings: Mapping[]) {
         mappings.forEach((mapping) => {    
-            const { isComplex, isQueryExpression, isFunctionCall, inputs, output, expression, diagnostics } = mapping;
-            if (isComplex || isQueryExpression || isFunctionCall || inputs.length !== 1) {
+            const { isComplex, isQueryExpression, isFunctionCall, elementAccessIndex, inputs, output, expression, diagnostics } = mapping;
+            if (isComplex || isQueryExpression || isFunctionCall || inputs.length !== 1 || elementAccessIndex) {
                 // Complex mappings are handled in the LinkConnectorNode
                 return;
             }
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNode.ts
index 96dc96e0f69..7f2989803bf 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNode.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNode.ts
@@ -103,8 +103,8 @@ export class PrimitiveOutputNode extends DataMapperNodeModel {
         const query = this.context.model?.query;
 
         mappings.forEach((mapping) => {
-            const { isComplex, isQueryExpression, isFunctionCall, inputs, output, expression, diagnostics } = mapping;
-            if (isComplex || isQueryExpression || isFunctionCall || inputs.length !== 1) {
+            const { isComplex, isQueryExpression, isFunctionCall, elementAccessIndex, inputs, output, expression, diagnostics } = mapping;
+            if (isComplex || isQueryExpression || isFunctionCall || inputs.length !== 1 || elementAccessIndex) {
                 // Complex mappings are handled in the LinkConnectorNode
                 return;
             }
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeWidget.tsx
index 200d8c87050..51f2c91f80f 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeWidget.tsx
@@ -25,7 +25,7 @@ import { useIntermediateNodeStyles } from '../../../styles';
 import { QueryExprConnectorNode } from './QueryExprConnectorNode';
 import { renderDeleteButton, renderEditButton, renderPortWidget } from "../LinkConnector/LinkConnectorWidgetComponents";
 import { DiagnosticWidget } from "../../Diagnostic/DiagnosticWidget";
-import { expandArrayFn, getTargetField } from "../../utils/common-utils";
+import { expandArrayFn } from "../../utils/common-utils";
 import { useDMCollapsedFieldsStore, useDMExpandedFieldsStore, useDMExpressionBarStore } from "../../../../store/store";
 
 export interface QueryExprConnectorNodeWidgetWidgetProps {
@@ -71,11 +71,9 @@ export function QueryExprConnectorNodeWidget(props: QueryExprConnectorNodeWidget
         expandedFieldsStore.removeField(targetPort);
 
         const context = node.context;
-
 	    const lastView = context.views[context.views.length - 1];
-        const targetField = getTargetField(lastView.targetField, node.targetMappedPort.attributes.value?.output);
-
-        expandArrayFn(context, node.targetMappedPort.attributes.value.inputs[0], targetField);
+        const mapping = node.targetMappedPort.attributes.value; 
+        expandArrayFn(context, mapping.inputs[0], mapping.output, lastView.targetField);
     };
 
     const loadingScreen = (
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputWidget.tsx
index 78bf83c4735..de6d0ed7000 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputWidget.tsx
@@ -113,10 +113,10 @@ export function QueryOutputWidget(props: QueryOutputWidgetProps) {
 
 	return (
 		<>
-			<TreeContainer data-testid={`${id}-node`} onContextMenu={onRightClick}>
+			<TreeContainer data-testid={`${id}.#-node`} onContextMenu={onRightClick}>
 				<TreeHeader
 					isSelected={portState !== PortState.Unselected}
-					id={"recordfield-" + id}
+					id={"recordfield-" + id + ".#"}
 					onMouseEnter={onMouseEnter}
 					onMouseLeave={onMouseLeave}
 				>
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingItemWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingItemWidget.tsx
index e1f6bfc915a..76ddf9e682e 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingItemWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingItemWidget.tsx
@@ -122,7 +122,7 @@ export function SubMappingItemWidget(props: SubMappingItemProps) {
 
     const onClickOnExpand = () => {
         const subMapping = subMappings[index];
-        const label = getSubMappingViewLabel(subMapping.name, subMapping.type);
+        const label = subMapping.name;
 
         addView(
             {
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/hooks/useDiagramModel.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/hooks/useDiagramModel.ts
index 85babd4ccc0..5b58e767f9a 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/hooks/useDiagramModel.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/hooks/useDiagramModel.ts
@@ -26,6 +26,7 @@ import { useDMSearchStore } from "../../../store/store";
 import { InputNode } from "../Node";
 import { getErrorKind } from "../utils/common-utils";
 import { OverlayLayerModel } from "../OverlayLayer/OverlayLayerModel";
+import { IOType } from "@wso2/ballerina-core";
 import { useEffect } from "react";
 
 export const useDiagramModel = (
@@ -45,7 +46,7 @@ export const useDiagramModel = (
     const context = nodes.find(node => node.context)?.context;
     const { model } = context ?? {};
     const mappings = model?.mappings.map(mapping => mapping.output + ':' + mapping.expression).toString();
-    const subMappings = model?.subMappings?.map(mapping => mapping.id).toString();
+    const subMappings = model?.subMappings?.map(mapping => (mapping as IOType).id).toString();
     const collapsedFields = useDMCollapsedFieldsStore(state => state.fields); // Subscribe to collapsedFields
     const expandedFields = useDMExpandedFieldsStore(state => state.fields); // Subscribe to expandedFields
     const { inputSearch, outputSearch } = useDMSearchStore();
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts
index 069a7f4d117..1871503886c 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts
@@ -142,18 +142,14 @@ export function isMergeable(typeName: string): boolean {
 }
 
 
-export function genArrayElementAccessSuffix(sourcePort: PortModel, targetPort: PortModel) {
-    if (sourcePort instanceof InputOutputPortModel && targetPort instanceof InputOutputPortModel) {
-        let suffix = '';
-        const sourceDim = getDMTypeDim(sourcePort.attributes.field);
-        const targetDim = getDMTypeDim(targetPort.attributes.field);
-        const dimDelta = sourceDim - targetDim;
-        for (let i = 0; i < dimDelta; i++) {
-            suffix += '[0]';
-        }
-        return suffix;
-    }
-    return '';
+export function genArrayElementAccessSuffix(link: DataMapperLinkModel): string {
+    const sourcePort = link.getSourcePort() as InputOutputPortModel;
+    const targetPort = link.getTargetPort() as InputOutputPortModel;
+    
+    const sourceDim = getDMTypeDim(sourcePort.attributes.field);
+    const targetDim = getDMTypeDim(targetPort.attributes.field);
+    
+    return '[0]'.repeat(sourceDim - targetDim);
 };
 
 export function isDefaultValue(field: IOType, value: string): boolean {
@@ -222,7 +218,7 @@ export function getErrorKind(node: DataMapperNodeModel): ErrorNodeKind {
 	}
 }
 
-export function expandArrayFn(context: IDataMapperContext, sourceField: string, targetField: string): void {
+export function expandArrayFn(context: IDataMapperContext, inputId: string, outputId: string, viewId: string): void {
 
     const { addView, views } = context;
     
@@ -231,12 +227,23 @@ export function expandArrayFn(context: IDataMapperContext, sourceField: string,
     }
 
     const lastView = views[views.length - 1];
-    
+
+    const outputIdDotIndex = outputId.indexOf(".");
+    let label: string;
+    let targetField: string;
+    if (outputIdDotIndex !== -1) {
+        label = outputId.slice(outputIdDotIndex + 1);
+        targetField = viewId + "." + label;
+    } else {
+        label = "[]";
+        targetField = viewId + ".0";
+    }
+
     // Create base view properties
     const baseView: View = {
-        label: targetField,
-        sourceField,
-        targetField
+        label: label,
+        sourceField: inputId,
+        targetField: targetField
     };
 
     // Create the new view with or without sub-mapping info
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/utils/modification-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/modification-utils.ts
index 7c9085fc974..4a203ac8d58 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/utils/modification-utils.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/modification-utils.ts
@@ -21,9 +21,9 @@ import { InputOutputPortModel, ValueType } from "../Port";
 import { IDataMapperContext } from "../../../utils/DataMapperContext/DataMapperContext";
 import { MappingFindingVisitor } from "../../../visitors/MappingFindingVisitor";
 import { traverseNode } from "../../../utils/model-utils";
-import { expandArrayFn, getTargetField, getValueType } from "./common-utils";
+import { expandArrayFn, getValueType } from "./common-utils";
 import { FnMetadata, FnParams, FnReturnType, Mapping, ResultClauseType } from "@wso2/ballerina-core";
-import { getImportTypeInfo, getTypeName, isEnumMember } from "./type-utils";
+import { getImportTypeInfo, isEnumMember } from "./type-utils";
 import { InputNode } from "../Node/Input/InputNode";
 
 export async function createNewMapping(link: DataMapperLinkModel, modifier?: (expr: string) => string) {
@@ -172,7 +172,7 @@ export async function mapWithQuery(link: DataMapperLinkModel, clauseType: Result
 
 	await context.convertToQuery(mapping, clauseType, viewId, name);
 
-	expandArrayFn(context, input, getTargetField(viewId, output));
+	expandArrayFn(context, input, output, viewId);
 }
 
 export function buildInputAccessExpr(fieldFqn: string): string {
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/utils/port-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/port-utils.ts
index 53e8a9e8186..87022cdaf13 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/utils/port-utils.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/port-utils.ts
@@ -71,3 +71,7 @@ export function getTargetPortPrefix(node: NodeModel): string {
 			return "";
 	}
 }
+
+export function isQueryHeaderPort(port: InputOutputPortModel): boolean {
+    return port.attributes.portName.endsWith(".#");
+}
diff --git a/workspaces/ballerina/data-mapper/src/components/Hooks/index.tsx b/workspaces/ballerina/data-mapper/src/components/Hooks/index.tsx
index e9713a1ce8e..c3ff0136fe3 100644
--- a/workspaces/ballerina/data-mapper/src/components/Hooks/index.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Hooks/index.tsx
@@ -41,6 +41,7 @@ import {
 import { GAP_BETWEEN_INPUT_NODES, IO_NODE_DEFAULT_WIDTH, OFFSETS } from '../Diagram/utils/constants';
 import { InputDataImportNodeModel, OutputDataImportNodeModel } from '../Diagram/Node/DataImport/DataImportNode';
 import { excludeEmptyInputNodes, getErrorKind } from '../Diagram/utils/common-utils';
+import { IOType } from '@wso2/ballerina-core';
 
 export interface FieldCount {
     id: string;
@@ -127,7 +128,7 @@ export const useDiagramModel = (
     const context = nodes.find(node => node.context)?.context;
     const { model } = context ?? {};
     const mappings = model.mappings.map(mapping => mapping.expression).toString();
-    const subMappings = model?.subMappings?.map(mapping => mapping.id).toString();
+    const subMappings = model?.subMappings?.map(mapping => (mapping as IOType).id).toString();
     const collapsedFields = useDMCollapsedFieldsStore(state => state.fields); // Subscribe to collapsedFields
     const expandedFields = useDMExpandedFieldsStore(state => state.fields); // Subscribe to expandedFields
     const { inputSearch, outputSearch } = useDMSearchStore();
diff --git a/workspaces/ballerina/data-mapper/src/index.tsx b/workspaces/ballerina/data-mapper/src/index.tsx
index e46a4914ea2..85f1e575359 100644
--- a/workspaces/ballerina/data-mapper/src/index.tsx
+++ b/workspaces/ballerina/data-mapper/src/index.tsx
@@ -62,6 +62,7 @@ export interface ExpressionBarProps {
 export interface DataMapperEditorProps {
     modelState: ModelState;
     name: string;
+    reusable?: boolean;
     applyModifications: (outputId: string, expression: string, viewId: string, name: string) => Promise<void>;
     addArrayElement: (outputId: string, viewId: string, name: string) => Promise<void>;
     convertToQuery: (mapping: Mapping, clauseType: ResultClauseType, viewId: string, name: string) => Promise<void>;
diff --git a/workspaces/ballerina/data-mapper/src/utils/model-utils.ts b/workspaces/ballerina/data-mapper/src/utils/model-utils.ts
index 3ef2bbe436b..e48f3a5c39e 100644
--- a/workspaces/ballerina/data-mapper/src/utils/model-utils.ts
+++ b/workspaces/ballerina/data-mapper/src/utils/model-utils.ts
@@ -39,7 +39,7 @@ export function traverseNode(model: ExpandedDMModel, visitor: BaseVisitor) {
     // Visit sub mappings
     if (model?.subMappings && model.subMappings.length > 0) {
         for (const subMapping of model.subMappings) {
-            traverseSubMappingType(subMapping, model, visitor);
+            traverseSubMappingType(subMapping as IOType, model, visitor);
         }
     }
 
diff --git a/workspaces/ballerina/data-mapper/src/visitors/IntermediateNodeInitVisitor.ts b/workspaces/ballerina/data-mapper/src/visitors/IntermediateNodeInitVisitor.ts
index c6118a068bd..f8cecbcd587 100644
--- a/workspaces/ballerina/data-mapper/src/visitors/IntermediateNodeInitVisitor.ts
+++ b/workspaces/ballerina/data-mapper/src/visitors/IntermediateNodeInitVisitor.ts
@@ -38,7 +38,7 @@ export class IntermediateNodeInitVisitor implements BaseVisitor {
             // Create query expression connector node
             const queryExprNode = new QueryExprConnectorNode(this.context, node);
             this.intermediateNodes.push(queryExprNode);
-        } else if (node.inputs.length > 1 || node.isComplex || node.isFunctionCall) {
+        } else if (node.inputs.length > 1 || node.isComplex || node.isFunctionCall || node.elementAccessIndex) {
             // Create link connector node
             const linkConnectorNode = new LinkConnectorNode(this.context, node);
             this.intermediateNodes.push(linkConnectorNode);
diff --git a/workspaces/ballerina/trace-visualizer/package.json b/workspaces/ballerina/trace-visualizer/package.json
new file mode 100644
index 00000000000..629a004390f
--- /dev/null
+++ b/workspaces/ballerina/trace-visualizer/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@wso2/trace-visualizer",
+  "version": "1.0.0",
+  "description": "Ballerina Trace Visualizer Webview",
+  "files": [
+    "lib"
+  ],
+  "main": "lib/TraceVisualizer.js",
+  "types": "lib/TraceVisualizer.d.ts",
+  "scripts": {
+    "start": "webpack-dev-server --mode=development --progress",
+    "build": "webpack --config webpack.config.js --mode=production && pnpm run postbuild",
+    "postbuild": "copyfiles -u 1 -V build/*.js build/fonts/* build/images/* -e build/*.txt ../ballerina-extension/resources/jslibs"
+  },
+  "keywords": [],
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@vscode/webview-ui-toolkit": "^1.4.0",
+    "@wso2/ui-toolkit": "workspace:*",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
+    "@types/webpack": "^5.28.5",
+    "buffer": "^6.0.3",
+    "copyfiles": "^2.4.1",
+    "css-loader": "^7.1.2",
+    "sass-loader": "^16.0.5",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.2",
+    "typescript": "5.8.3",
+    "webpack": "^5.99.8",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.2.1"
+  },
+  "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/trace-visualizer/src/TraceDetails.tsx b/workspaces/ballerina/trace-visualizer/src/TraceDetails.tsx
new file mode 100644
index 00000000000..57046de3563
--- /dev/null
+++ b/workspaces/ballerina/trace-visualizer/src/TraceDetails.tsx
@@ -0,0 +1,1019 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, useEffect } from "react";
+import styled from "@emotion/styled";
+import { TraceData, SpanData } from "./index";
+import { Codicon } from "@wso2/ui-toolkit";
+
+interface TraceDetailsProps {
+    traceData: TraceData;
+    isAgentChat: boolean;
+}
+
+const Container = styled.div`
+    margin: 0;
+    padding: 20px;
+    font-family: var(--vscode-font-family);
+    background-color: var(--vscode-editor-background);
+    color: var(--vscode-editor-foreground);
+    font-size: 13px;
+    line-height: 1.5;
+    height: 100vh;
+    overflow-y: auto;
+`;
+
+const Header = styled.div`
+    border-bottom: 2px solid var(--vscode-panel-border);
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+`;
+
+const Title = styled.h1`
+    margin: 0 0 10px 0;
+    font-size: 18px;
+    color: var(--vscode-textLink-foreground);
+`;
+
+const Section = styled.div`
+    margin-bottom: 30px;
+`;
+
+const SectionTitle = styled.div`
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: var(--vscode-textLink-foreground);
+    border-bottom: 1px solid var(--vscode-panel-border);
+    padding-bottom: 5px;
+`;
+
+const InfoGrid = styled.div`
+    display: grid;
+    grid-template-columns: 150px 1fr;
+    gap: 8px 12px;
+    margin-bottom: 15px;
+`;
+
+const InfoLabel = styled.div`
+    font-weight: 600;
+    color: var(--vscode-descriptionForeground);
+`;
+
+const InfoValue = styled.div`
+    font-family: 'Consolas', 'Monaco', monospace;
+    word-break: break-all;
+    color: var(--vscode-editor-foreground);
+`;
+
+const AttributesContainer = styled.div`
+    margin-top: 10px;
+`;
+
+const AttributeItem = styled.div`
+    padding: 4px 0;
+    margin-bottom: 5px;
+`;
+
+const AttributeKey = styled.span`
+    font-weight: 600;
+    color: var(--vscode-textLink-foreground);
+`;
+
+const AttributeValue = styled.span`
+    font-family: 'Consolas', 'Monaco', monospace;
+    margin-left: 10px;
+    color: var(--vscode-editor-foreground);
+`;
+
+const CollapsibleSection = styled.div`
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+        opacity: 0.8;
+    }
+`;
+
+const CollapsibleContent = styled.div<{ isOpen: boolean }>`
+    display: ${(props: { isOpen: boolean }) => props.isOpen ? 'block' : 'none'};
+`;
+
+// Span Tree Styles
+const SpanTreeContainer = styled.div`
+    background-color: var(--vscode-editor-background);
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 20px;
+    max-height: 400px;
+    overflow-y: auto;
+`;
+
+const TreeItem = styled.div<{ level: number; isSelected: boolean }>`
+    display: flex;
+    align-items: center;
+    padding: 4px 6px;
+    padding-left: ${(props: { level: number }) => props.level * 16}px;
+    cursor: pointer;
+    border-radius: 3px;
+    gap: 8px;
+    background-color: ${(props: { isSelected: boolean }) =>
+        props.isSelected ? 'var(--vscode-list-inactiveSelectionBackground)' : 'transparent'};
+
+    &:hover {
+        background-color: ${(props: { isSelected: boolean }) =>
+            props.isSelected ? 'var(--vscode-list-inactiveSelectionBackground)' : 'var(--vscode-list-hoverBackground)'};
+    }
+`;
+
+const TreeChevron = styled.span`
+    display: inline-flex;
+    width: 16px;
+    height: 16px;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+`;
+
+const SpanNameInTree = styled.span`
+    flex: 1;
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+
+const SpanKindBadge = styled.span`
+    font-size: 10px;
+    padding: 2px 6px;
+    border-radius: 3px;
+    background-color: var(--vscode-badge-background);
+    color: var(--vscode-badge-foreground);
+    flex-shrink: 0;
+`;
+
+// Span Details Panel Styles
+const DetailsPanel = styled.div`
+    background-color: var(--vscode-editor-background);
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 4px;
+    padding: 16px;
+    margin-bottom: 4px;
+`;
+
+const DetailsPanelHeader = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--vscode-panel-border);
+`;
+
+const DetailsPanelTitle = styled.h3`
+    margin: 0;
+    font-size: 16px;
+    color: var(--vscode-textLink-foreground);
+`;
+
+const DetailsPanelKind = styled.span`
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 3px;
+    background-color: var(--vscode-badge-background);
+    color: var(--vscode-badge-foreground);
+`;
+
+const DetailsGrid = styled.div`
+    display: grid;
+    grid-template-columns: 150px 1fr;
+    gap: 8px 12px;
+    margin-bottom: 20px;
+`;
+
+const AttributesSection = styled.div`
+    margin-top: 20px;
+`;
+
+const AttributesSectionTitle = styled.div`
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 12px;
+    color: var(--vscode-descriptionForeground);
+`;
+
+// Navigation button styles
+const NavigationBar = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--vscode-panel-border);
+`;
+
+const NavButton = styled.button`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background-color: var(--vscode-button-background);
+    color: var(--vscode-button-foreground);
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 13px;
+    font-family: var(--vscode-font-family);
+
+    &:hover {
+        background-color: var(--vscode-button-hoverBackground);
+    }
+`;
+
+const BackButton = styled.button`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    background-color: transparent;
+    color: var(--vscode-textLink-foreground);
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: var(--vscode-font-family);
+
+    &:hover {
+        text-decoration: underline;
+        color: var(--vscode-textLink-activeForeground);
+    }
+`;
+
+// Agent Chat Logs Styles
+const AgentChatLogsContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+`;
+
+const AISpanTreeContainer = styled.div`
+    background-color: var(--vscode-editor-background);
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 4px;
+    padding: 12px;
+    max-height: 400px;
+    overflow-y: auto;
+`;
+
+const AISpanTreeItem = styled.div<{ level: number; isSelected: boolean }>`
+    display: flex;
+    align-items: center;
+    padding: 6px 8px;
+    padding-left: ${(props: { level: number }) => props.level * 20 + 8}px;
+    cursor: pointer;
+    border-radius: 3px;
+    gap: 8px;
+    position: relative;
+    background-color: ${(props: { isSelected: boolean }) =>
+        props.isSelected ? 'var(--vscode-list-inactiveSelectionBackground)' : 'transparent'};
+
+    &:hover {
+        background-color: ${(props: { isSelected: boolean }) =>
+            props.isSelected ? 'var(--vscode-list-inactiveSelectionBackground)' : 'var(--vscode-list-hoverBackground)'};
+    }
+
+    /* Vertical line for tree structure */
+    ${(props: { level: number }) => props.level > 0 && `
+        &::before {
+            content: '';
+            position: absolute;
+            left: ${props.level * 20 - 4}px;
+            top: 0;
+            bottom: 50%;
+            width: 1px;
+            background-color: var(--vscode-tree-indentGuidesStroke);
+            opacity: 0.4;
+        }
+
+        /* Horizontal branch line */
+        &::after {
+            content: '';
+            position: absolute;
+            left: ${props.level * 20 - 4}px;
+            top: 50%;
+            width: 8px;
+            height: 1px;
+            background-color: var(--vscode-tree-indentGuidesStroke);
+            opacity: 0.4;
+        }
+    `}
+`;
+
+const AISpanBadge = styled.span<{ type: string }>`
+    font-size: 10px;
+    padding: 3px 8px;
+    border-radius: 3px;
+    font-weight: 500;
+    flex-shrink: 0;
+    background-color: var(--vscode-badge-background);
+    color: var(--vscode-badge-foreground);
+`;
+
+const AISpanLabel = styled.span`
+    flex: 1;
+    font-size: 13px;
+`;
+
+const AISpanDuration = styled.span`
+    font-size: 11px;
+    color: var(--vscode-descriptionForeground);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+`;
+
+const EmptyState = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+    text-align: center;
+    padding: 40px;
+    color: var(--vscode-descriptionForeground);
+`;
+
+const EmptyStateIcon = styled.div`
+    font-size: 48px;
+    margin-bottom: 20px;
+    opacity: 0.5;
+`;
+
+const EmptyStateText = styled.div`
+    font-size: 16px;
+    margin-bottom: 8px;
+`;
+
+export function TraceDetails({ traceData, isAgentChat }: TraceDetailsProps) {
+    const [expandedSections, setExpandedSections] = useState<Set<string>>(
+        new Set(['trace', 'resource', 'scope', 'spans'])
+    );
+    const [expandedSpans, setExpandedSpans] = useState<Set<string>>(new Set());
+    const [selectedSpanId, setSelectedSpanId] = useState<string | null>(null);
+    const [showFullTrace, setShowFullTrace] = useState<boolean>(false);
+
+    // Update page title when switching views
+    useEffect(() => {
+        if (isAgentChat) {
+            document.title = showFullTrace ? 'Trace Details' : 'Agent Chat Logs';
+        }
+    }, [isAgentChat, showFullTrace]);
+
+    const toggleSection = (section: string) => {
+        const newExpanded = new Set(expandedSections);
+        if (newExpanded.has(section)) {
+            newExpanded.delete(section);
+        } else {
+            newExpanded.add(section);
+        }
+        setExpandedSections(newExpanded);
+    };
+
+    const toggleSpanExpansion = (spanId: string) => {
+        const newExpanded = new Set(expandedSpans);
+        if (newExpanded.has(spanId)) {
+            newExpanded.delete(spanId);
+        } else {
+            newExpanded.add(spanId);
+        }
+        setExpandedSpans(newExpanded);
+    };
+
+    const selectSpan = (spanId: string) => {
+        setSelectedSpanId(spanId);
+        // Auto-expand parent spans
+        expandParentSpans(spanId);
+    };
+
+    const expandParentSpans = (spanId: string) => {
+        const span = traceData.spans.find(s => s.spanId === spanId);
+        if (!span) return;
+
+        const newExpanded = new Set(expandedSpans);
+        let currentParentId = span.parentSpanId;
+
+        while (currentParentId && currentParentId !== '0000000000000000') {
+            const parentSpan = traceData.spans.find(s => s.spanId === currentParentId);
+            if (parentSpan) {
+                newExpanded.add(currentParentId);
+                currentParentId = parentSpan.parentSpanId;
+            } else {
+                break;
+            }
+        }
+
+        setExpandedSpans(newExpanded);
+    };
+
+    const duration = new Date(traceData.lastSeen).getTime() - new Date(traceData.firstSeen).getTime();
+
+    const getSpanKindLabel = (kind: string | number): string => {
+        if (typeof kind === 'string') {
+            return kind;
+        }
+        const kindMap: { [key: number]: string } = {
+            0: 'UNSPECIFIED',
+            1: 'INTERNAL',
+            2: 'SERVER',
+            3: 'CLIENT',
+            4: 'PRODUCER',
+            5: 'CONSUMER'
+        };
+        return kindMap[kind] || `UNKNOWN(${kind})`;
+    };
+
+    // Build span hierarchy
+    const spanMap = new Map<string, SpanData>();
+    const rootSpans: SpanData[] = [];
+
+    traceData.spans.forEach(span => {
+        spanMap.set(span.spanId, span);
+    });
+
+    traceData.spans.forEach(span => {
+        const parentSpanId = span.parentSpanId || '';
+        if (!parentSpanId ||
+            parentSpanId === '0000000000000000' ||
+            parentSpanId === '' ||
+            !spanMap.has(parentSpanId)) {
+            rootSpans.push(span);
+        }
+    });
+
+    // Sort root spans: umbrella spans (those that contain others) come first, then by start time
+    rootSpans.sort((a, b) => {
+        const aStart = a.startTime ? new Date(a.startTime).getTime() : 0;
+        const aEnd = a.endTime ? new Date(a.endTime).getTime() : 0;
+        const bStart = b.startTime ? new Date(b.startTime).getTime() : 0;
+        const bEnd = b.endTime ? new Date(b.endTime).getTime() : 0;
+
+        // Check if 'a' contains 'b' (a is umbrella over b)
+        const aContainsB = aStart <= bStart && aEnd >= bEnd && (aStart < bStart || aEnd > bEnd);
+        // Check if 'b' contains 'a' (b is umbrella over a)
+        const bContainsA = bStart <= aStart && bEnd >= aEnd && (bStart < aStart || bEnd > aEnd);
+
+        if (aContainsB) return -1; // a comes before b (a is umbrella)
+        if (bContainsA) return 1;  // b comes before a (b is umbrella)
+
+        // Neither contains the other, sort by start time
+        return aStart - bStart;
+    });
+
+    // Select first span on load
+    useEffect(() => {
+        if (!selectedSpanId && rootSpans.length > 0) {
+            setSelectedSpanId(rootSpans[0].spanId);
+        }
+    }, [rootSpans.length]);
+
+    const formatDate = (dateString: string): string => {
+        return new Date(dateString).toLocaleString();
+    };
+
+    const getChildSpans = (spanId: string): SpanData[] => {
+        const children = traceData.spans.filter(s => s.parentSpanId === spanId);
+
+        // Sort children: umbrella spans first, then by start time
+        return children.sort((a, b) => {
+            const aStart = a.startTime ? new Date(a.startTime).getTime() : 0;
+            const aEnd = a.endTime ? new Date(a.endTime).getTime() : 0;
+            const bStart = b.startTime ? new Date(b.startTime).getTime() : 0;
+            const bEnd = b.endTime ? new Date(b.endTime).getTime() : 0;
+
+            // Check if 'a' contains 'b' (a is umbrella over b)
+            const aContainsB = aStart <= bStart && aEnd >= bEnd && (aStart < bStart || aEnd > bEnd);
+            // Check if 'b' contains 'a' (b is umbrella over a)
+            const bContainsA = bStart <= aStart && bEnd >= aEnd && (bStart < aStart || bEnd > aEnd);
+
+            if (aContainsB) return -1; // a comes before b (a is umbrella)
+            if (bContainsA) return 1;  // b comes before a (b is umbrella)
+
+            // Neither contains the other, sort by start time
+            return aStart - bStart;
+        });
+    };
+
+    const renderTreeItem = (span: SpanData, level: number = 0): React.ReactNode => {
+        const childSpans = getChildSpans(span.spanId);
+        const hasChildren = childSpans.length > 0;
+        const isExpanded = expandedSpans.has(span.spanId);
+        const isSelected = selectedSpanId === span.spanId;
+        const spanKind = getSpanKindLabel(span.kind);
+
+        return (
+            <React.Fragment key={span.spanId}>
+                <TreeItem level={level} isSelected={isSelected} onClick={() => selectSpan(span.spanId)}>
+                    <TreeChevron onClick={(e) => {
+                        e.stopPropagation();
+                        if (hasChildren) {
+                            toggleSpanExpansion(span.spanId);
+                        }
+                    }}>
+                        {hasChildren ? (
+                            <Codicon name={isExpanded ? 'chevron-down' : 'chevron-right'} />
+                        ) : (
+                            <span style={{ width: '16px', display: 'inline-block' }} />
+                        )}
+                    </TreeChevron>
+                    <SpanNameInTree>
+                        {span.name}
+                    </SpanNameInTree>
+                    <SpanKindBadge>{spanKind}</SpanKindBadge>
+                </TreeItem>
+                {hasChildren && isExpanded && (
+                    <>
+                        {childSpans.map(child => renderTreeItem(child, level + 1))}
+                    </>
+                )}
+            </React.Fragment>
+        );
+    };
+
+    const selectedSpan = selectedSpanId ? spanMap.get(selectedSpanId) : null;
+    const selectedSpanKind = selectedSpan ? getSpanKindLabel(selectedSpan.kind) : '';
+    const selectedSpanDuration = selectedSpan && selectedSpan.startTime && selectedSpan.endTime
+        ? new Date(selectedSpan.endTime).getTime() - new Date(selectedSpan.startTime).getTime()
+        : null;
+
+    // Build AI span hierarchy based on time containment
+    const buildAISpanHierarchy = () => {
+        // First, identify all AI spans
+        const aiSpans = traceData.spans.filter(span =>
+            span.attributes?.some(attr => attr.key === 'span.type' && attr.value === 'ai')
+        );
+
+        // Helper function to check if span A contains span B based on time
+        const timeContains = (spanA: SpanData, spanB: SpanData): boolean => {
+            if (!spanA.startTime || !spanA.endTime || !spanB.startTime || !spanB.endTime) {
+                return false;
+            }
+            const aStart = new Date(spanA.startTime).getTime();
+            const aEnd = new Date(spanA.endTime).getTime();
+            const bStart = new Date(spanB.startTime).getTime();
+            const bEnd = new Date(spanB.endTime).getTime();
+
+            // A contains B if A starts before or at the same time as B, and ends after or at the same time as B
+            // But they should not be identical
+            return aStart <= bStart && aEnd >= bEnd && (aStart < bStart || aEnd > bEnd);
+        };
+
+        // For each AI span, find its time-based parent (the smallest span that contains it)
+        const timeBasedParents = new Map<string, string>();
+
+        aiSpans.forEach(span => {
+            let smallestParent: SpanData | null = null;
+            let smallestParentDuration = Infinity;
+
+            aiSpans.forEach(potentialParent => {
+                if (potentialParent.spanId === span.spanId) return;
+
+                if (timeContains(potentialParent, span)) {
+                    const parentStart = new Date(potentialParent.startTime!).getTime();
+                    const parentEnd = new Date(potentialParent.endTime!).getTime();
+                    const parentDuration = parentEnd - parentStart;
+
+                    // Find the smallest containing span (most immediate parent)
+                    if (parentDuration < smallestParentDuration) {
+                        smallestParent = potentialParent;
+                        smallestParentDuration = parentDuration;
+                    }
+                }
+            });
+
+            if (smallestParent) {
+                timeBasedParents.set(span.spanId, smallestParent.spanId);
+            }
+        });
+
+        // Find root AI spans (those with no time-based parent)
+        const rootAISpans = aiSpans.filter(span => !timeBasedParents.has(span.spanId));
+
+        return rootAISpans.sort((a, b) => {
+            const aTime = a.startTime ? new Date(a.startTime).getTime() : 0;
+            const bTime = b.startTime ? new Date(b.startTime).getTime() : 0;
+            return aTime - bTime;
+        });
+    };
+
+    const rootAISpans = buildAISpanHierarchy();
+
+    // Select first AI span when in agent chat view
+    useEffect(() => {
+        if (isAgentChat && !showFullTrace && rootAISpans.length > 0) {
+            setSelectedSpanId(rootAISpans[0].spanId);
+        }
+    }, [isAgentChat, showFullTrace, rootAISpans.length]);
+
+    // Get span type badge
+    const getSpanTypeBadge = (span: SpanData): string => {
+        const operationName = span.attributes?.find(attr => attr.key === 'gen_ai.operation.name')?.value || '';
+        if (operationName.includes('invoke')) return 'invoke';
+        if (operationName.includes('chat') || span.name.toLowerCase().includes('chat')) return 'chat';
+        if (operationName.includes('tool') || span.name.toLowerCase().includes('tool')) return 'tool';
+        return 'other';
+    };
+
+    // Get AI child spans based on time containment
+    const getAIChildSpans = (spanId: string): SpanData[] => {
+        const parentSpan = traceData.spans.find(s => s.spanId === spanId);
+        if (!parentSpan || !parentSpan.startTime || !parentSpan.endTime) {
+            return [];
+        }
+
+        const parentStart = new Date(parentSpan.startTime).getTime();
+        const parentEnd = new Date(parentSpan.endTime).getTime();
+
+        // Get all AI spans
+        const aiSpans = traceData.spans.filter(span =>
+            span.attributes?.some(attr => attr.key === 'span.type' && attr.value === 'ai')
+        );
+
+        // Find direct children: spans that are contained by this span but not by any smaller span
+        const children: SpanData[] = [];
+
+        aiSpans.forEach(potentialChild => {
+            if (potentialChild.spanId === spanId) return;
+            if (!potentialChild.startTime || !potentialChild.endTime) return;
+
+            const childStart = new Date(potentialChild.startTime).getTime();
+            const childEnd = new Date(potentialChild.endTime).getTime();
+
+            // Check if parent contains this child
+            const parentContainsChild = parentStart <= childStart && parentEnd >= childEnd &&
+                (parentStart < childStart || parentEnd > childEnd);
+
+            if (!parentContainsChild) return;
+
+            // Check if there's any other span that also contains this child but is smaller than parent
+            let hasIntermediateParent = false;
+            aiSpans.forEach(intermediateSpan => {
+                if (intermediateSpan.spanId === spanId || intermediateSpan.spanId === potentialChild.spanId) return;
+                if (!intermediateSpan.startTime || !intermediateSpan.endTime) return;
+
+                const intStart = new Date(intermediateSpan.startTime).getTime();
+                const intEnd = new Date(intermediateSpan.endTime).getTime();
+
+                // Check if intermediate span contains the child
+                const intermediateContainsChild = intStart <= childStart && intEnd >= childEnd &&
+                    (intStart < childStart || intEnd > childEnd);
+
+                // Check if parent contains the intermediate span
+                const parentContainsIntermediate = parentStart <= intStart && parentEnd >= intEnd &&
+                    (parentStart < intStart || parentEnd > intEnd);
+
+                if (intermediateContainsChild && parentContainsIntermediate) {
+                    hasIntermediateParent = true;
+                }
+            });
+
+            if (!hasIntermediateParent) {
+                children.push(potentialChild);
+            }
+        });
+
+        // Sort children by start time
+        return children.sort((a, b) => {
+            const aTime = a.startTime ? new Date(a.startTime).getTime() : 0;
+            const bTime = b.startTime ? new Date(b.startTime).getTime() : 0;
+            return aTime - bTime;
+        });
+    };
+
+    // Render AI span tree item recursively (always expanded)
+    const renderAISpanTreeItem = (span: SpanData, level: number = 0): React.ReactNode => {
+        const children = getAIChildSpans(span.spanId);
+        const isSelected = selectedSpanId === span.spanId;
+        const duration = span.startTime && span.endTime
+            ? new Date(span.endTime).getTime() - new Date(span.startTime).getTime()
+            : null;
+        const badgeType = getSpanTypeBadge(span);
+
+        return (
+            <React.Fragment key={span.spanId}>
+                <AISpanTreeItem
+                    level={level}
+                    isSelected={isSelected}
+                    onClick={() => setSelectedSpanId(span.spanId)}
+                >
+                    <AISpanBadge type={badgeType}>
+                        {badgeType === 'invoke' && 'Invoke Agent'}
+                        {badgeType === 'chat' && 'Chat'}
+                        {badgeType === 'tool' && 'Execute Tool'}
+                        {badgeType === 'other' && 'Operation'}
+                    </AISpanBadge>
+                    <AISpanLabel>{span.name}</AISpanLabel>
+                    {duration !== null && (
+                        <AISpanDuration>
+                            <Codicon name="clock" />
+                            {duration < 1000 ? `${duration}ms` : `${(duration / 1000).toFixed(2)}s`}
+                        </AISpanDuration>
+                    )}
+                </AISpanTreeItem>
+                {children.length > 0 && (
+                    <>
+                        {children.map(child => renderAISpanTreeItem(child, level + 1))}
+                    </>
+                )}
+            </React.Fragment>
+        );
+    };
+
+    // Render Agent Chat Logs view
+    const renderAgentChatLogs = () => (
+        <>
+            <NavigationBar>
+                <div />
+                <BackButton onClick={() => setShowFullTrace(true)}>
+                    Show Full Trace
+                </BackButton>
+            </NavigationBar>
+            {rootAISpans.length === 0 ? (
+                <EmptyState>
+                    <EmptyStateIcon>
+                        <Codicon name="comment-discussion" />
+                    </EmptyStateIcon>
+                    <EmptyStateText>
+                        No AI agent interactions found in this trace
+                    </EmptyStateText>
+                    <EmptyStateText style={{ fontSize: '14px', opacity: 0.7 }}>
+                        AI spans with span.type='ai' will appear here
+                    </EmptyStateText>
+                </EmptyState>
+            ) : (
+                <AgentChatLogsContainer>
+                    <AISpanTreeContainer>
+                        {rootAISpans.map(span => renderAISpanTreeItem(span, 0))}
+                    </AISpanTreeContainer>
+                    {selectedSpan && (
+                        <DetailsPanel>
+                            <DetailsPanelHeader>
+                                <DetailsPanelTitle>{selectedSpan.name}</DetailsPanelTitle>
+                                <DetailsPanelKind>{selectedSpanKind}</DetailsPanelKind>
+                            </DetailsPanelHeader>
+
+                            <DetailsGrid>
+                                <InfoLabel>Span ID:</InfoLabel>
+                                <InfoValue>{selectedSpan.spanId}</InfoValue>
+                                <InfoLabel>Trace ID:</InfoLabel>
+                                <InfoValue>{selectedSpan.traceId}</InfoValue>
+                                {selectedSpan.parentSpanId && selectedSpan.parentSpanId !== '0000000000000000' ? (
+                                    <>
+                                        <InfoLabel>Parent Span ID:</InfoLabel>
+                                        <InfoValue>{selectedSpan.parentSpanId}</InfoValue>
+                                    </>
+                                ) : (
+                                    <>
+                                        <InfoLabel>Parent:</InfoLabel>
+                                        <InfoValue>Root Span</InfoValue>
+                                    </>
+                                )}
+                                {selectedSpan.startTime && (
+                                    <>
+                                        <InfoLabel>Start Time:</InfoLabel>
+                                        <InfoValue>{formatDate(selectedSpan.startTime)}</InfoValue>
+                                    </>
+                                )}
+                                {selectedSpan.endTime && (
+                                    <>
+                                        <InfoLabel>End Time:</InfoLabel>
+                                        <InfoValue>{formatDate(selectedSpan.endTime)}</InfoValue>
+                                    </>
+                                )}
+                                {selectedSpanDuration !== null && (
+                                    <>
+                                        <InfoLabel>Duration:</InfoLabel>
+                                        <InfoValue>{selectedSpanDuration}ms</InfoValue>
+                                    </>
+                                )}
+                            </DetailsGrid>
+
+                            {selectedSpan.attributes && selectedSpan.attributes.length > 0 && (
+                                <AttributesSection>
+                                    <AttributesSectionTitle>
+                                        Attributes ({selectedSpan.attributes.length})
+                                    </AttributesSectionTitle>
+                                    {selectedSpan.attributes.map((attr, index) => (
+                                        <AttributeItem key={index}>
+                                            <AttributeKey>{attr.key}:</AttributeKey>
+                                            <AttributeValue>{attr.value}</AttributeValue>
+                                        </AttributeItem>
+                                    ))}
+                                </AttributesSection>
+                            )}
+                        </DetailsPanel>
+                    )}
+                </AgentChatLogsContainer>
+            )}
+        </>
+    );
+
+    // Render Full Trace view
+    const renderFullTrace = () => (
+        <>
+            {isAgentChat && (
+                <NavigationBar>
+                    <div />
+                    <BackButton onClick={() => setShowFullTrace(false)}>
+                        Back to Agent Logs
+                    </BackButton>
+                </NavigationBar>
+            )}
+            <Header>
+                <Title>Trace : {traceData.traceId}</Title>
+            </Header>
+
+            <Section>
+                <CollapsibleSection onClick={() => toggleSection('trace')}>
+                    <SectionTitle>
+                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                            <Codicon name={expandedSections.has('trace') ? 'chevron-down' : 'chevron-right'} />
+                            Trace Information
+                        </span>
+                    </SectionTitle>
+                </CollapsibleSection>
+                <CollapsibleContent isOpen={expandedSections.has('trace')}>
+                    <InfoGrid>
+                        <InfoLabel>Trace ID:</InfoLabel>
+                        <InfoValue>{traceData.traceId}</InfoValue>
+                        <InfoLabel>First Seen:</InfoLabel>
+                        <InfoValue>{formatDate(traceData.firstSeen)}</InfoValue>
+                        <InfoLabel>Last Seen:</InfoLabel>
+                        <InfoValue>{formatDate(traceData.lastSeen)}</InfoValue>
+                        <InfoLabel>Duration:</InfoLabel>
+                        <InfoValue>{duration}ms</InfoValue>
+                    </InfoGrid>
+                </CollapsibleContent>
+            </Section>
+
+            <Section>
+                <CollapsibleSection onClick={() => toggleSection('resource')}>
+                    <SectionTitle>
+                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                            <Codicon name={expandedSections.has('resource') ? 'chevron-down' : 'chevron-right'} />
+                            Resource
+                        </span>
+                    </SectionTitle>
+                </CollapsibleSection>
+                <CollapsibleContent isOpen={expandedSections.has('resource')}>
+                    <InfoGrid>
+                        <InfoLabel>Name:</InfoLabel>
+                        <InfoValue>{traceData.resource.name}</InfoValue>
+                    </InfoGrid>
+                    {traceData.resource.attributes && traceData.resource.attributes.length > 0 && (
+                        <AttributesContainer>
+                            <InfoLabel style={{ marginBottom: '8px' }}>Attributes ({traceData.resource.attributes.length}):</InfoLabel>
+                            {traceData.resource.attributes.map((attr, index) => (
+                                <AttributeItem key={index}>
+                                    <AttributeKey>{attr.key}:</AttributeKey>
+                                    <AttributeValue>{attr.value}</AttributeValue>
+                                </AttributeItem>
+                            ))}
+                        </AttributesContainer>
+                    )}
+                </CollapsibleContent>
+            </Section>
+
+            <Section>
+                <CollapsibleSection onClick={() => toggleSection('scope')}>
+                    <SectionTitle>
+                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                            <Codicon name={expandedSections.has('scope') ? 'chevron-down' : 'chevron-right'} />
+                            Instrumentation Scope
+                        </span>
+                    </SectionTitle>
+                </CollapsibleSection>
+                <CollapsibleContent isOpen={expandedSections.has('scope')}>
+                    <InfoGrid>
+                        <InfoLabel>Name:</InfoLabel>
+                        <InfoValue>{traceData.scope.name}</InfoValue>
+                        {traceData.scope.version && (
+                            <>
+                                <InfoLabel>Version:</InfoLabel>
+                                <InfoValue>{traceData.scope.version}</InfoValue>
+                            </>
+                        )}
+                    </InfoGrid>
+                    {traceData.scope.attributes && traceData.scope.attributes.length > 0 && (
+                        <AttributesContainer>
+                            <InfoLabel style={{ marginBottom: '8px' }}>Attributes ({traceData.scope.attributes.length}):</InfoLabel>
+                            {traceData.scope.attributes.map((attr, index) => (
+                                <AttributeItem key={index}>
+                                    <AttributeKey>{attr.key}:</AttributeKey>
+                                    <AttributeValue>{attr.value}</AttributeValue>
+                                </AttributeItem>
+                            ))}
+                        </AttributesContainer>
+                    )}
+                </CollapsibleContent>
+            </Section>
+
+            <Section>
+                <CollapsibleSection onClick={() => toggleSection('spans')}>
+                    <SectionTitle>
+                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                            <Codicon name={expandedSections.has('spans') ? 'chevron-down' : 'chevron-right'} />
+                            Spans ({traceData.spans.length} total)
+                        </span>
+                    </SectionTitle>
+                </CollapsibleSection>
+                <CollapsibleContent isOpen={expandedSections.has('spans')}>
+                    <SpanTreeContainer>
+                        {rootSpans.map(span => renderTreeItem(span, 0))}
+                    </SpanTreeContainer>
+
+                    {selectedSpan && (
+                        <DetailsPanel>
+                            <DetailsPanelHeader>
+                                <DetailsPanelTitle>{selectedSpan.name}</DetailsPanelTitle>
+                                <DetailsPanelKind>{selectedSpanKind}</DetailsPanelKind>
+                            </DetailsPanelHeader>
+
+                            <DetailsGrid>
+                                <InfoLabel>Span ID:</InfoLabel>
+                                <InfoValue>{selectedSpan.spanId}</InfoValue>
+                                <InfoLabel>Trace ID:</InfoLabel>
+                                <InfoValue>{selectedSpan.traceId}</InfoValue>
+                                {selectedSpan.parentSpanId && selectedSpan.parentSpanId !== '0000000000000000' ? (
+                                    <>
+                                        <InfoLabel>Parent Span ID:</InfoLabel>
+                                        <InfoValue>{selectedSpan.parentSpanId}</InfoValue>
+                                    </>
+                                ) : (
+                                    <>
+                                        <InfoLabel>Parent:</InfoLabel>
+                                        <InfoValue>Root Span</InfoValue>
+                                    </>
+                                )}
+                                {selectedSpan.startTime && (
+                                    <>
+                                        <InfoLabel>Start Time:</InfoLabel>
+                                        <InfoValue>{formatDate(selectedSpan.startTime)}</InfoValue>
+                                    </>
+                                )}
+                                {selectedSpan.endTime && (
+                                    <>
+                                        <InfoLabel>End Time:</InfoLabel>
+                                        <InfoValue>{formatDate(selectedSpan.endTime)}</InfoValue>
+                                    </>
+                                )}
+                                {selectedSpanDuration !== null && (
+                                    <>
+                                        <InfoLabel>Duration:</InfoLabel>
+                                        <InfoValue>{selectedSpanDuration}ms</InfoValue>
+                                    </>
+                                )}
+                            </DetailsGrid>
+
+                            {selectedSpan.attributes && selectedSpan.attributes.length > 0 && (
+                                <AttributesSection>
+                                    <AttributesSectionTitle>
+                                        Attributes ({selectedSpan.attributes.length})
+                                    </AttributesSectionTitle>
+                                    {selectedSpan.attributes.map((attr, index) => (
+                                        <AttributeItem key={index}>
+                                            <AttributeKey>{attr.key}:</AttributeKey>
+                                            <AttributeValue>{attr.value}</AttributeValue>
+                                        </AttributeItem>
+                                    ))}
+                                </AttributesSection>
+                            )}
+                        </DetailsPanel>
+                    )}
+                </CollapsibleContent>
+            </Section>
+        </>
+    );
+
+    // Main return - decide which view to show
+    return (
+        <Container>
+            {isAgentChat && !showFullTrace ? renderAgentChatLogs() : renderFullTrace()}
+        </Container>
+    );
+}
diff --git a/workspaces/ballerina/trace-visualizer/src/index.tsx b/workspaces/ballerina/trace-visualizer/src/index.tsx
new file mode 100644
index 00000000000..1c8f2b346b7
--- /dev/null
+++ b/workspaces/ballerina/trace-visualizer/src/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 React from "react";
+import { createRoot } from "react-dom/client";
+import { TraceDetails } from "./TraceDetails";
+
+export interface TraceData {
+    traceId: string;
+    spans: SpanData[];
+    resource: ResourceData;
+    scope: ScopeData;
+    firstSeen: string;
+    lastSeen: string;
+}
+
+export interface SpanData {
+    spanId: string;
+    traceId: string;
+    parentSpanId: string;
+    name: string;
+    kind: string | number;
+    startTime?: string;
+    endTime?: string;
+    attributes?: AttributeData[];
+}
+
+export interface ResourceData {
+    name: string;
+    attributes: AttributeData[];
+}
+
+export interface ScopeData {
+    name: string;
+    version?: string;
+    attributes?: AttributeData[];
+}
+
+export interface AttributeData {
+    key: string;
+    value: string;
+}
+
+declare global {
+    interface Window {
+        traceVisualizer: {
+            renderWebview: (traceData: TraceData, isAgentChat: boolean, target: HTMLElement) => void;
+        };
+    }
+}
+
+export function renderWebview(traceData: TraceData, isAgentChat: boolean, target: HTMLElement) {
+    const root = createRoot(target);
+    root.render(
+        <React.StrictMode>
+            <TraceDetails traceData={traceData} isAgentChat={isAgentChat} />
+        </React.StrictMode>
+    );
+}
+
+// Make renderWebview available globally
+if (typeof window !== 'undefined') {
+    window.traceVisualizer = {
+        renderWebview
+    };
+}
+
diff --git a/workspaces/ballerina/trace-visualizer/tsconfig.json b/workspaces/ballerina/trace-visualizer/tsconfig.json
new file mode 100644
index 00000000000..c06bd595b7c
--- /dev/null
+++ b/workspaces/ballerina/trace-visualizer/tsconfig.json
@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "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-jsx",
+    "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,
+    "noImplicitAny": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    }
+  },
+  "include": ["src"],
+  "exclude": [
+    "node_modules",
+    "build"
+  ]
+}
+
diff --git a/workspaces/ballerina/trace-visualizer/webpack.config.js b/workspaces/ballerina/trace-visualizer/webpack.config.js
new file mode 100644
index 00000000000..4beaca0fa67
--- /dev/null
+++ b/workspaces/ballerina/trace-visualizer/webpack.config.js
@@ -0,0 +1,92 @@
+const path = require("path");
+const webpack = require('webpack');
+
+module.exports = {
+  entry: "./src/index.tsx",
+  target: "web",
+  devtool: !process.env.CI ? "eval-source-map" : undefined,
+  mode: !process.env.CI ? "development" : "production",
+  output: {
+    path: path.resolve(__dirname, "build"),
+    filename: "TraceVisualizer.js",
+    library: "traceVisualizer",
+  },
+  resolve: {
+    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
+    alias: {
+      'react': path.resolve(__dirname, 'node_modules/react'),
+      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+      "crypto": false,
+      "net": false,
+      "os": false,
+      "path": false,
+      "fs": false,
+      "child_process": false,
+    }
+  },
+  module: {
+    rules: [{
+      test: /\.(ts|tsx)$/,
+      loader: "ts-loader",
+      exclude: '/node_modules/',
+      options: {
+        configFile: path.resolve(__dirname, 'tsconfig.json'),
+      },
+    },
+    {
+      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: [
+        'style-loader',
+        'css-loader',
+        'sass-loader',
+      ],
+    },
+    {
+      test: /\.(woff|woff2|ttf|otf|eot)$/,
+      type: 'asset/inline',
+    },
+    {
+      test: /\.(svg)$/,
+      type: 'asset/resource',
+      generator: {
+        filename: './images/[name][ext]',
+      },
+    }
+    ],
+  },
+  devServer: {
+    allowedHosts: 'all',
+    port: 9001,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    devMiddleware: {
+      mimeTypes: {
+        'text/css': ['css']
+      },
+    },
+    static: path.join(__dirname, "build"),
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    })
+  ]
+};
+
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/ClassEditor.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/ClassEditor.tsx
index 8c93dce275b..047748f9a97 100644
--- a/workspaces/ballerina/type-editor/src/TypeEditor/ClassEditor.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/ClassEditor.tsx
@@ -18,10 +18,11 @@
 
 import React, { useRef, useState } from 'react';
 import { Imports, Type, TypeFunctionModel } from '@wso2/ballerina-core';
-import { Codicon, Button, TextField, LinkButton } from '@wso2/ui-toolkit';
+import { Codicon, Button, TextField, LinkButton, CheckBox } from '@wso2/ui-toolkit';
 import styled from '@emotion/styled';
 import { TypeField } from './TypeField';
 import { IdentifierField } from './IdentifierField';
+import { isGraphQLScalarType } from './TypeUtil';
 
 namespace S {
     export const Container = styled.div`
@@ -147,6 +148,7 @@ interface ParameterFormData {
     type: string;
     defaultValue: string;
     imports: Imports;
+    isGraphqlId?: boolean;
 }
 
 interface FunctionValidationError {
@@ -162,7 +164,8 @@ export function ClassEditor({ type, onChange, isGraphql, onValidationError }: Cl
         name: '',
         type: '',
         defaultValue: '',
-        imports: {}
+        imports: {},
+        isGraphqlId: false
     });
     const [editingParamIndex, setEditingParamIndex] = useState<number | null>(null);
     const [paramNameError, setParamNameError] = useState<string>('');
@@ -273,12 +276,13 @@ export function ClassEditor({ type, onChange, isGraphql, onValidationError }: Cl
                 name: String(param.name),
                 type: String(param.type),
                 defaultValue: param.defaultValue ? String(param.defaultValue) : '',
-                imports: param.imports
+                imports: param.imports,
+                isGraphqlId: param.isGraphqlId || false
             });
             setEditingParamIndex(paramIndex);
         } else {
             // Adding new parameter
-            setParameterForm({ name: '', type: '', defaultValue: '', imports: {} });
+            setParameterForm({ name: '', type: '', defaultValue: '', imports: {}, isGraphqlId: false });
             setEditingParamIndex(null);
         }
         setShowParameterForm(functionIndex);
@@ -299,7 +303,8 @@ export function ClassEditor({ type, onChange, isGraphql, onValidationError }: Cl
             editable: true,
             optional: false,
             advanced: false,
-            imports: parameterForm.imports
+            imports: parameterForm.imports,
+            isGraphqlId: parameterForm.isGraphqlId || false
         };
 
         if (editingParamIndex !== null) {
@@ -324,7 +329,7 @@ export function ClassEditor({ type, onChange, isGraphql, onValidationError }: Cl
         });
 
         // Reset form and hide it
-        setParameterForm({ name: '', type: '', defaultValue: '', imports: {} });
+        setParameterForm({ name: '', type: '', defaultValue: '', imports: {}, isGraphqlId: false });
         setShowParameterForm(null);
         setEditingParamIndex(null);
         setParamNameError(''); // Clear any error message
@@ -390,6 +395,15 @@ export function ClassEditor({ type, onChange, isGraphql, onValidationError }: Cl
 
                     {expandedFunctions.includes(index) && (
                         <S.ParameterContainer>
+
+                            {isGraphql && isGraphQLScalarType(func.returnType) &&
+                                <CheckBox
+                                    label="ID Type"
+                                    checked={func.isGraphqlId || false}
+                                    onChange={() => updateFunction(index, { isGraphqlId: !func.isGraphqlId })}
+                                    disabled={false}
+                                />
+                            }
                             <S.AddParameterLink
                                 onClick={() => openParameterForm(index)}
                             >
@@ -449,10 +463,18 @@ export function ClassEditor({ type, onChange, isGraphql, onValidationError }: Cl
                                         value={parameterForm.defaultValue}
                                         onChange={(e) => setParameterForm(prev => ({ ...prev, defaultValue: e.target.value }))}
                                     />
+                                    {isGraphql && isGraphQLScalarType(parameterForm.type) &&
+                                        <CheckBox
+                                            label="ID Type"
+                                            checked={parameterForm.isGraphqlId || false}
+                                            onChange={() => setParameterForm(prev => ({ ...prev, isGraphqlId: !prev.isGraphqlId }))}
+                                            disabled={false}
+                                        />
+                                    }
                                     <S.ButtonGroup>
                                         <Button onClick={() => {
                                             setShowParameterForm(null);
-                                            setParameterForm({ name: '', type: '', defaultValue: '', imports: {} });
+                                            setParameterForm({ name: '', type: '', defaultValue: '', imports: {}, isGraphqlId: false });
                                             setParamNameError('');
                                         }}>
                                             Cancel
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/BrowseTypesTab.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/BrowseTypesTab.tsx
new file mode 100644
index 00000000000..c16e2ca3ef3
--- /dev/null
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/BrowseTypesTab.tsx
@@ -0,0 +1,370 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, useEffect, useRef } from 'react';
+import styled from '@emotion/styled';
+import { Button, TextField, Typography, ProgressRing, Codicon } from '@wso2/ui-toolkit';
+import { TypeHelperCategory, TypeHelperItem } from '../../TypeHelper';
+import { Type } from '@wso2/ballerina-core';
+import { ContentBody, StickyFooterContainer, FloatingFooter } from './ContextTypeEditor';
+
+
+const SearchContainer = styled.div`
+    width: 100%;
+    margin-bottom: 8px;
+    margin-top: 5px;
+`;
+
+const CategorySection = styled.div`
+    margin-top: 8px;
+`;
+
+const CategoryTitle = styled(Typography)`
+    color: var(--vscode-descriptionForeground);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+`;
+
+const SubCategoryContainer = styled.div`
+    margin-left: 12px;
+    margin-top: 8px;
+`;
+
+const TypeList = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    overflow-y: auto;
+    flex: 1;
+`;
+
+const TypeItem = styled.div<{ isSelected?: boolean }>`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 12px;
+    background-color: ${({ isSelected }) =>
+        isSelected
+            ? 'var(--vscode-list-activeSelectionBackground)'
+            : 'var(--vscode-list-inactiveSelectionBackground)'
+    };
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    border: 1px solid ${({ isSelected }) =>
+        isSelected
+            ? 'var(--vscode-focusBorder)'
+            : 'transparent'
+    };
+
+    &:hover {
+        background-color: ${({ isSelected }) =>
+        isSelected
+            ? 'var(--vscode-list-activeSelectionBackground)'
+            : 'var(--vscode-list-hoverBackground)'
+    };
+        border-color: var(--vscode-focusBorder);
+    }
+
+    &:active {
+        background-color: var(--vscode-list-activeSelectionBackground);
+    }
+`;
+
+const TypeName = styled(Typography)<{ isSelected?: boolean }>`
+    font-family: var(--vscode-editor-font-family);
+    color: ${({ isSelected }) =>
+        isSelected
+            ? 'var(--vscode-list-activeSelectionForeground)'
+            : 'var(--vscode-foreground)'
+    };
+    font-weight: ${({ isSelected }) => isSelected ? '500' : '400'};
+`;
+
+const SelectIndicator = styled.div<{ isSelected?: boolean }>`
+    display: flex;
+    align-items: center;
+    opacity: ${({ isSelected }) => isSelected ? '1' : '0'};
+    transition: opacity 0.15s ease;
+    color: var(--vscode-list-activeSelectionForeground);
+`;
+
+const LoadingContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    flex: 1;
+`;
+
+const EmptyState = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    color: var(--vscode-descriptionForeground);
+    flex: 1;
+`;
+
+const ScrollableSection = styled.div`
+    flex: 1;
+    overflow-y: auto;
+    max-height: 390px;
+`;
+
+interface BrowseTypesTabProps {
+    basicTypes: TypeHelperCategory[];
+    importedTypes: TypeHelperCategory[];
+    loading?: boolean;
+    onSearchTypeHelper: (searchText: string, isType?: boolean) => void;
+    onTypeItemClick: (item: TypeHelperItem) => Promise<any>;
+    onTypeSelect: (type: Type) => void;
+    simpleType?: string;
+}
+
+export function BrowseTypesTab(props: BrowseTypesTabProps) {
+    const {
+        basicTypes,
+        importedTypes,
+        loading,
+        onSearchTypeHelper,
+        onTypeItemClick,
+        onTypeSelect,
+        simpleType
+    } = props;
+
+    const firstRender = useRef<boolean>(true);
+    const [searchText, setSearchText] = useState<string>('');
+    const [selectedType, setSelectedType] = useState<TypeHelperItem | null>(null);
+    const [isSelecting, setIsSelecting] = useState<boolean>(false);
+
+    // Set initial selected type if simpleType is provided
+    useEffect(() => {
+        if (simpleType && !selectedType) {
+            setSelectedType({
+                name: simpleType,
+                insertText: simpleType
+            } as unknown as TypeHelperItem);
+        }
+    }, [simpleType]);
+
+    // Trigger initial search when component mounts
+    useEffect(() => {
+        if (firstRender.current) {
+            firstRender.current = false;
+            onSearchTypeHelper('', true);
+            return;
+        }
+    }, []);
+
+    const handleSearch = (value: string) => {
+        setSearchText(value);
+        onSearchTypeHelper(value, true);
+    };
+
+    const handleTypeClick = (item: TypeHelperItem) => {
+        setSelectedType(item);
+    };
+
+    const handleSelectType = async () => {
+        if (!selectedType) return;
+
+        setIsSelecting(true);
+        try {
+            const response = await onTypeItemClick(selectedType);
+
+            // Create a Type object from the selected item
+            const type: Type = {
+                name: selectedType.name,
+                editable: false,
+                metadata: {
+                    label: selectedType.name,
+                    description: selectedType.labelDetails?.description || '',
+                },
+                codedata: selectedType.codedata as any,
+                properties: {},
+                members: [],
+                includes: []
+            };
+
+            onTypeSelect(type);
+        } catch (error) {
+            console.error('Error selecting type:', error);
+        } finally {
+            setIsSelecting(false);
+        }
+    };
+
+    const renderTypeItems = (categories: TypeHelperCategory[]) => {
+        if (!categories || categories.length === 0) {
+            return null;
+        }
+
+        // Filter out unwanted categories
+        const filteredCategories = categories.filter(category =>
+            category.category !== 'Used Variable Types' &&
+            category.category !== 'Behaviour Types' &&
+            category.category !== 'Error Types' &&
+            category.category !== 'Other Types'
+        );
+
+        // Define the desired order and update sortText
+        const categoryOrder = {
+            'Primitive Types': '0',
+            'Data Types': '1',
+            'User-Defined': '2',
+            'Structural Types': '3',
+            'Imported Types': '4'
+        };
+
+        // Update sortText based on the desired order
+        const categoriesWithUpdatedSortText = filteredCategories.map(category => {
+            const sortText = categoryOrder[category.category as keyof typeof categoryOrder] || '99';
+
+            return {
+                ...category,
+                sortText
+            };
+        });
+
+        // Sort categories based on sortText
+        const sortedCategories = categoriesWithUpdatedSortText.sort((a, b) => {
+            return (a.sortText || '99').localeCompare(b.sortText || '99');
+        });
+
+        // TODO: we need this removed from the LS
+        // Filter out "record" from Structural Types
+        const processedCategories = sortedCategories.map(category => {
+            if (category.category === 'Structural Types') {
+                return {
+                    ...category,
+                    items: category.items.filter(item =>
+                        item.name.toLowerCase() !== 'record'
+                    )
+                };
+            }
+            return category;
+        });
+
+        return processedCategories.map((category, categoryIndex) => (
+            <CategorySection key={categoryIndex}>
+                {category.category && (
+                    <CategoryTitle variant="h5">{category.category}</CategoryTitle>
+                )}
+                
+                {/* Render direct items if they exist */}
+                {category.items && category.items.length > 0 && (
+                    <TypeList>
+                        {category.items.map((item, itemIndex) => {
+                            const isSelected = selectedType?.name === item.name;
+                            return (
+                                <TypeItem
+                                    key={itemIndex}
+                                    isSelected={isSelected}
+                                    onClick={() => handleTypeClick(item)}
+                                >
+                                    <TypeName
+                                        variant="body3"
+                                        isSelected={isSelected}
+                                    >
+                                        {item.name}
+                                    </TypeName>
+                                    <SelectIndicator isSelected={isSelected}>
+                                        <Codicon name="check" />
+                                    </SelectIndicator>
+                                </TypeItem>
+                            );
+                        })}
+                    </TypeList>
+                )}
+
+                {/* Render subcategories if they exist (for Imported Types) */}
+                {category.subCategory && category.subCategory.map((subCat, subCatIndex) => (
+                    <SubCategoryContainer key={subCatIndex}>
+                        <CategoryTitle variant="h5">
+                            {subCat.category}
+                        </CategoryTitle>
+                        <TypeList>
+                            {subCat.items.map((item, itemIndex) => {
+                                const isSelected = selectedType?.name === item.name;
+                                return (
+                                    <TypeItem
+                                        key={itemIndex}
+                                        isSelected={isSelected}
+                                        onClick={() => handleTypeClick(item)}
+                                    >
+                                        <TypeName
+                                            variant="body3"
+                                            isSelected={isSelected}
+                                        >
+                                            {item.name}
+                                        </TypeName>
+                                        <SelectIndicator isSelected={isSelected}>
+                                            <Codicon name="check" />
+                                        </SelectIndicator>
+                                    </TypeItem>
+                                );
+                            })}
+                        </TypeList>
+                    </SubCategoryContainer>
+                ))}
+            </CategorySection>
+        ));
+    };
+
+    return (
+        <StickyFooterContainer>
+            <ContentBody>
+                <SearchContainer>
+                    <TextField
+                        value={searchText}
+                        onChange={(e) => handleSearch(e.target.value)}
+                        placeholder="Search types..."
+                        autoFocus
+                    />
+                </SearchContainer>
+                {(loading && (!basicTypes || basicTypes.length === 0) && (!importedTypes || importedTypes.length === 0)) ? (
+                    <LoadingContainer>
+                        <ProgressRing />
+                    </LoadingContainer>
+                ) : (
+                    <ScrollableSection>
+                        {basicTypes && basicTypes.length > 0 && renderTypeItems(basicTypes)}
+                        {importedTypes && importedTypes.length > 0 && renderTypeItems(importedTypes)}
+                        {(!basicTypes || basicTypes.length === 0) && (!importedTypes || importedTypes.length === 0) && !loading && (
+                            <EmptyState>
+                                <Typography variant="body3">No matching types found</Typography>
+                            </EmptyState>
+                        )}
+                    </ScrollableSection>
+                )}
+            </ContentBody>
+            <FloatingFooter>
+                <Button
+                    onClick={handleSelectType}
+                    disabled={!selectedType || isSelecting}
+                >
+                    {isSelecting ? <Typography variant="progress">Saving...</Typography> : 'Save'}
+                </Button>
+            </FloatingFooter>
+        </StickyFooterContainer>
+    );
+}
+
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/ContextTypeCreator.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/ContextTypeCreator.tsx
new file mode 100644
index 00000000000..4966fbde8fd
--- /dev/null
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/ContextTypeCreator.tsx
@@ -0,0 +1,619 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { TextField, Button, ProgressRing, Icon, Typography } from "@wso2/ui-toolkit";
+import styled from "@emotion/styled";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { Member, Type, TypeNodeKind } from "@wso2/ballerina-core";
+import { RecordEditor } from "../RecordEditor";
+import { EnumEditor } from "../EnumEditor";
+import { UnionEditor } from "../UnionEditor";
+import { ClassEditor } from "../ClassEditor";
+import { AdvancedOptions } from "../AdvancedOptions";
+import { ArrayEditor } from "../ArrayEditor";
+import { debounce } from "lodash";
+import { URI, Utils } from "vscode-uri";
+import { EditorContext } from "../Contexts/TypeEditorContext";
+import { SchemaRecordEditor } from "./SchemaRecordEditor";
+import { StickyFooterContainer, FloatingFooter, ContentBody } from "./ContextTypeEditor";
+
+const InputWrapper = styled.div`
+    position: relative;
+    width: 100%;
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+`;
+
+const TextFieldWrapper = styled.div`
+    flex: 1;
+`;
+
+const EditButton = styled(Button)`
+    margin-top: 39px;
+`;
+
+const ButtonGroup = styled.div`
+    display: flex;
+    gap: 8px;
+    margin-bottom: 2px; 
+    margin-top: 38px;
+`;
+
+const StyledButton = styled(Button)`
+    font-size: 14px;
+`;
+
+const WarningText = styled(Typography)`
+    color: var(--vscode-textLink-foreground);
+    font-size: 12px;
+    margin-top: 4px;
+`;
+
+const EditableRow = styled.div`
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    flex-direction: column;
+`;
+
+const EditRow = styled.div`
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    width: 100%;
+`;
+
+const ScrollableSection = styled.div`
+    flex: 1;
+    overflow-y: auto;
+    max-height: 350px;
+`;
+
+const NameContainer = styled.div`
+    width: 100%;
+    margin-bottom: 8px;
+    margin-top: 5px;
+`;
+
+enum TypeKind {
+    RECORD = "Record",
+    ENUM = "Enum",
+    CLASS = "Service Class",
+    UNION = "Union",
+    ARRAY = "Array"
+}
+
+interface ContextTypeCreatorProps {
+    editingType: Type;
+    newType: boolean;
+    isGraphql: boolean;
+    initialTypeKind: TypeNodeKind;
+    onTypeSave: (type: Type) => Promise<void>;
+    isSaving: boolean;
+    setIsSaving: (isSaving: boolean) => void;
+    onTypeChange: (type: Type, rename?: boolean) => void;
+}
+
+export function ContextTypeCreatorTab(props: ContextTypeCreatorProps) {
+    const {
+        editingType,
+        isGraphql,
+        newType,
+        initialTypeKind,
+        onTypeSave,
+        isSaving,
+        setIsSaving,
+        onTypeChange
+    } = props;
+
+    const [type, setType] = useState<Type>(editingType);
+    const [selectedTypeKind, setSelectedTypeKind] = useState<TypeKind>(() => {
+        if (type) {
+            // Map the type's node kind to TypeKind enum
+            const nodeKind = type.codedata.node;
+            switch (nodeKind) {
+                case "RECORD":
+                    return TypeKind.RECORD;
+                case "ENUM":
+                    return TypeKind.ENUM;
+                case "CLASS":
+                    return TypeKind.CLASS;
+                case "UNION":
+                    return TypeKind.UNION;
+                case "ARRAY":
+                    return TypeKind.ARRAY;
+                default:
+                    return TypeKind.RECORD;
+            }
+        }
+        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);
+    const [nameError, setNameError] = useState<string>("");
+    const [isEditing, setIsEditing] = useState(false);
+    const [tempName, setTempName] = useState("");
+    const saveButtonClicked = useRef(false);
+
+    const { rpcClient } = useRpcContext();
+
+    const nameInputRef = useRef<HTMLInputElement | null>(null);
+
+    useEffect(() => {
+        if (editingType) {
+            handleSetType(editingType);
+            validateTypeName(editingType.name);
+
+            const nodeKind = editingType.codedata.node;
+            switch (nodeKind) {
+                case "RECORD":
+                    setSelectedTypeKind(TypeKind.RECORD);
+                    break;
+                case "ENUM":
+                    setSelectedTypeKind(TypeKind.ENUM);
+                    break;
+                case "CLASS":
+                    setSelectedTypeKind(TypeKind.CLASS);
+                    break;
+                case "UNION":
+                    setSelectedTypeKind(TypeKind.UNION);
+                    break;
+                case "ARRAY":
+                    setSelectedTypeKind(TypeKind.ARRAY);
+                    break;
+                default:
+                    setSelectedTypeKind(TypeKind.RECORD);
+            }
+        }
+
+        setIsNewType(newType);
+    }, [editingType?.name, newType]);
+
+    const handleSetType = (type: Type) => {
+        replaceTop({
+            type: type,
+            isDirty: true
+        })
+        setType(type);
+    }
+
+
+    const handleTypeKindChange = (value: string) => {
+        // Convert display name back to internal TypeKind
+        let selectedKind: TypeKind;
+        if (isGraphql) {
+            switch (value) {
+                case "Input Object":
+                    selectedKind = TypeKind.RECORD;
+                    break;
+                case "Object":
+                    selectedKind = TypeKind.CLASS;
+                    break;
+                default:
+                    selectedKind = value as TypeKind;
+            }
+        } else {
+            selectedKind = value as TypeKind;
+        }
+        setSelectedTypeKind(selectedKind);
+
+        // Reset validation error state when changing type kinds
+        setOnValidationError(false);
+
+        const typeValue = selectedKind === TypeKind.CLASS ? "CLASS" : selectedKind.toUpperCase();
+
+        // Always create a new type with the selected kind, preserving the name
+        handleSetType({
+            ...type!,
+            name: type!.name, // Explicitly preserve the name
+            kind: typeValue,
+            members: [] as Member[],
+            codedata: {
+                ...type!.codedata, // Check the location of the type
+                node: typeValue.toUpperCase() as TypeNodeKind
+            }
+        } as any);
+    };
+
+    // Add a helper function to get the display label
+    const getTypeKindLabel = (kind: TypeKind, isGraphql?: boolean): string => {
+        if (isGraphql) {
+            switch (kind) {
+                case TypeKind.RECORD:
+                    return "Input Object";
+                case TypeKind.CLASS:
+                    return "Object";
+                default:
+                    return kind;
+            }
+        }
+        return kind;
+    };
+
+    const getAvailableTypeKinds = (isGraphql: boolean | undefined, currentType?: TypeKind): TypeKind[] => {
+        if (isGraphql) {
+            // For GraphQL mode, filter options based on current type
+            if (initialTypeKind === "RECORD") {
+                return [TypeKind.RECORD, TypeKind.ENUM];
+            } else if (initialTypeKind === "CLASS") {
+                return [TypeKind.CLASS, TypeKind.ENUM, TypeKind.UNION];
+            }
+        }
+        // Return all options for non-GraphQL mode
+        return Object.values(TypeKind);
+    };
+
+    const handleValidationError = (isError: boolean) => {
+        setOnValidationError(isError);
+    }
+
+    const startEditing = () => {
+        setTempName(type.name);
+        saveButtonClicked.current = false;
+        setIsEditing(true);
+    };
+
+    const cancelEditing = () => {
+        validateTypeName(type.name);
+
+        setIsEditing(false);
+        setTempName("");
+    };
+
+    const editTypeName = async () => {
+        saveButtonClicked.current = true;
+        if (!tempName || tempName === type.name) {
+            cancelEditing();
+            return;
+        }
+
+        setIsSaving(true);
+        try {
+            await rpcClient.getBIDiagramRpcClient().renameIdentifier({
+                fileName: type.codedata.lineRange.fileName,
+                position: {
+                    line: type.codedata.lineRange.startLine.line,
+                    character: type.codedata.lineRange.startLine.offset
+                },
+                newName: tempName
+            });
+
+            const renamedType = {
+                ...type,
+                name: tempName,
+                properties: {
+                    ...type.properties,
+                    name: {
+                        ...type.properties["name"],
+                        value: tempName
+                    }
+                }
+            };
+            handleSetType(renamedType);
+            onTypeChange(renamedType, true);
+            cancelEditing();
+        } catch (error) {
+            console.error('Error renaming service class:', error);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleOnBlur = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!saveButtonClicked.current) {
+            await validateTypeName(e.target.value);
+        }
+    };
+
+    const handleOnFieldFocus = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        await validateTypeName(e.target.value);
+    }
+
+    const performValidation = async (value: string): Promise<{ isValid: boolean; error: string }> => {
+        if (saveButtonClicked.current) {
+            return { isValid: isTypeNameValid, error: nameError };
+        }
+
+        const projectUri = await rpcClient.getVisualizerLocation().then((res) => res.projectUri);
+
+        const endPosition = await rpcClient.getBIDiagramRpcClient().getEndOfFile({
+            filePath: Utils.joinPath(URI.file(projectUri), 'types.bal').fsPath
+        });
+
+        const response = await rpcClient.getBIDiagramRpcClient().getExpressionDiagnostics({
+            filePath: type?.codedata?.lineRange?.fileName || "types.bal",
+            context: {
+                expression: value,
+                startLine: {
+                    line: type?.codedata?.lineRange?.startLine?.line ?? endPosition.line,
+                    offset: type?.codedata?.lineRange?.startLine?.offset ?? endPosition.offset
+                },
+                offset: 0,
+                lineOffset: 0,
+                codedata: {
+                    node: "VARIABLE",
+                    lineRange: {
+                        startLine: {
+                            line: type?.codedata?.lineRange?.startLine?.line ?? endPosition.line,
+                            offset: type?.codedata?.lineRange?.startLine?.offset ?? endPosition.offset
+                        },
+                        endLine: {
+                            line: type?.codedata?.lineRange?.endLine?.line ?? endPosition.line,
+                            offset: type?.codedata?.lineRange?.endLine?.offset ?? endPosition.offset
+                        },
+                        fileName: type?.codedata?.lineRange?.fileName
+                    },
+                },
+                property: type?.properties["name"] ?
+                    {
+                        ...type.properties["name"],
+                        valueTypeConstraint: "Global"
+                    } :
+                    {
+                        metadata: {
+                            label: "",
+                            description: "",
+                        },
+                        valueType: "IDENTIFIER",
+                        value: "",
+                        valueTypeConstraint: "Global",
+                        optional: false,
+                        editable: true
+                    }
+            }
+        });
+
+        const hasErrors = response && response.diagnostics && response.diagnostics.length > 0;
+        const errorMessage = hasErrors ? response.diagnostics[0].message : "";
+
+        return {
+            isValid: !hasErrors,
+            error: errorMessage
+        };
+    };
+
+    // Debounced version for real-time validation (updates UI state)
+    const validateTypeName = useCallback(debounce(async (value: string) => {
+        const result = await performValidation(value);
+        setNameError(result.error);
+        setIsTypeNameValid(result.isValid);
+    }, 250), [performValidation]);
+
+    // Immediate version for save validation (returns result without updating UI)
+    const validateTypeNameSync = async (value: string): Promise<{ isValid: boolean; error: string }> => {
+        return await performValidation(value);
+    };
+
+    const handleOnTypeNameUpdate = (value: string) => {
+        setTempName(value);
+        validateTypeName(value);
+    }
+
+    const handleOnTypeNameChange = (value: string) => {
+        handleSetType({ ...type, name: value });
+        validateTypeName(value);
+    }
+
+    // Function to validate before saving to verify names created in nested forms
+    const handleSaveWithValidation = async (typeToSave: Type) => {
+        try {
+            setIsSaving(true);
+
+            // Perform immediate validation
+            const validationResult = await validateTypeNameSync(typeToSave.name);
+
+            // Update the UI state with validation results
+            if (validationResult.isValid) {
+                setNameError("");
+                setIsTypeNameValid(true);
+                await onTypeSave(typeToSave);
+            } else {
+                setNameError(validationResult.error);
+                setIsTypeNameValid(false);
+            }
+        } catch (error) {
+            console.error('Error during validation', error);
+            if (isTypeNameValid && !onValidationError) {
+                await onTypeSave(typeToSave);
+            }
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const renderEditor = () => {
+        if (!type) {
+            return <ProgressRing />;
+        }
+        switch (selectedTypeKind) {
+            case TypeKind.RECORD:
+                return (
+                    <>
+                        <RecordEditor
+                            type={type}
+                            isAnonymous={false}
+                            onChange={handleSetType}
+                            newType={newType}
+                            isGraphql={isGraphql}
+                            onValidationError={handleValidationError}
+                        />
+                        <AdvancedOptions type={type} onChange={handleSetType} />
+                    </>
+                );
+            case TypeKind.ENUM:
+                return (
+                    <EnumEditor
+                        type={type}
+                        onChange={handleSetType}
+                        onValidationError={handleValidationError}
+                    />
+                );
+            case TypeKind.UNION:
+                return (
+                    <>
+                        <UnionEditor
+                            type={type}
+                            onChange={handleSetType}
+                            rpcClient={rpcClient}
+                            onValidationError={handleValidationError}
+                        />
+                        <AdvancedOptions type={type} onChange={handleSetType} />
+                    </>
+                );
+            case TypeKind.CLASS:
+                return (
+                    <ClassEditor
+                        type={type}
+                        isGraphql={isGraphql}
+                        onChange={handleSetType}
+                        onValidationError={handleValidationError}
+                    />
+                );
+            case TypeKind.ARRAY:
+                return (
+                    <>
+                        <ArrayEditor
+                            type={type}
+                            onChange={handleSetType}
+                            onValidationError={handleValidationError}
+                        />
+                        <AdvancedOptions type={type} onChange={handleSetType} />
+                    </>
+                );
+            default:
+                return <div>Editor for {selectedTypeKind} type is not implemented yet</div>;
+        }
+    };
+
+    return (
+        <StickyFooterContainer>
+            <ContentBody>
+                <NameContainer>
+                    {!isNewType && !isEditing && !type.properties["name"]?.editable && (
+                        <InputWrapper>
+                            <TextFieldWrapper>
+                                <TextField
+                                    id={type.name}
+                                    data-testid="type-name-display"
+                                    name={type.name}
+                                    value={type.name}
+                                    label={type?.properties["name"]?.metadata?.label}
+                                    required={!type?.properties["name"]?.optional}
+                                    description={type?.properties["name"]?.metadata?.description}
+                                    readOnly={!type.properties["name"]?.editable}
+                                />
+                            </TextFieldWrapper>
+                            <EditButton appearance="icon" onClick={startEditing} tooltip="Rename">
+                                <Icon name="bi-edit" sx={{ width: 18, height: 18, fontSize: 18 }} />
+                            </EditButton>
+                        </InputWrapper>
+                    )}
+                    {isEditing && (
+                        <>
+                            <EditableRow>
+                                <EditRow>
+                                    <TextFieldWrapper>
+                                        <TextField
+                                            id={type.name}
+                                            label={type.properties["name"]?.metadata.label}
+                                            value={tempName}
+                                            errorMsg={nameError}
+                                            onBlur={handleOnBlur}
+                                            onFocus={handleOnFieldFocus}
+                                            onChange={(e) => handleOnTypeNameUpdate(e.target.value)}
+                                            description={type.properties["name"]?.metadata.description}
+                                            required={!type.properties["name"]?.optional}
+                                            autoFocus
+                                        />
+                                    </TextFieldWrapper>
+                                    <ButtonGroup>
+                                        <StyledButton
+                                            appearance="secondary"
+                                            onClick={cancelEditing}
+                                            disabled={isSaving}
+                                        >
+                                            Cancel
+                                        </StyledButton>
+                                        <StyledButton
+                                            appearance="primary"
+                                            onClick={editTypeName}
+                                            disabled={!isTypeNameValid || !tempName || isSaving}
+                                        >
+                                            {isSaving ? <Typography variant="progress">Saving...</Typography> : "Save"}
+                                        </StyledButton>
+                                    </ButtonGroup>
+                                </EditRow>
+
+                                <WarningText variant="body3">
+                                    Note: Renaming will update all references across the project
+                                </WarningText>
+                            </EditableRow>
+                        </>
+                    )}
+                    {isNewType && (
+                        <TextFieldWrapper>
+                            <TextField
+                                label="Name"
+                                value={type.name}
+                                errorMsg={nameError}
+                                onBlur={handleOnBlur}
+                                onChange={(e) => handleOnTypeNameChange(e.target.value)}
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                        handleOnTypeNameChange((e.target as HTMLInputElement).value);
+                                    }
+                                }}
+                                onFocus={(e) => { e.target.select(); validateTypeName(e.target.value) }}
+                                ref={nameInputRef}
+                            />
+                        </TextFieldWrapper>
+                    )}
+                </NameContainer>
+                <ScrollableSection>
+                    <>
+                        <SchemaRecordEditor
+                            type={type}
+                            isAnonymous={false}
+                            onChange={handleSetType}
+                            newType={newType}
+                            isGraphql={isGraphql}
+                            onValidationError={handleValidationError}
+                        />
+                        <AdvancedOptions type={type} onChange={handleSetType} />
+                    </>
+
+                </ScrollableSection>
+            </ContentBody>
+            <FloatingFooter>
+                <Button
+                    data-testid="type-create-save"
+                    onClick={() => handleSaveWithValidation(type)}
+                    disabled={onValidationError || !isTypeNameValid || isEditing || isSaving}>
+                    {isSaving ? <Typography variant="progress">Saving...</Typography> : "Save"}
+                </Button>
+            </FloatingFooter>
+        </StickyFooterContainer>
+    );
+}
+
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/ContextTypeEditor.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/ContextTypeEditor.tsx
new file mode 100644
index 00000000000..9ce33046b93
--- /dev/null
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/ContextTypeEditor.tsx
@@ -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 React, { useState } from "react";
+import { ProgressRing, Icon, TabPanel, ThemeColors } from "@wso2/ui-toolkit";
+import styled from "@emotion/styled";
+import { BallerinaRpcClient } from "@wso2/ballerina-rpc-client";
+import { Member, Type, TypeNodeKind, Imports, AddImportItemResponse, EVENT_TYPE, UpdateTypeResponse, PayloadContext } from "@wso2/ballerina-core";
+import { TypeHelperCategory, TypeHelperItem, TypeHelperOperator } from "../../TypeHelper";
+import { TypeHelperContext } from "../../Context";
+import { GenericImportTab } from "./GenericImportTab";
+import { ContextTypeCreatorTab } from "./ContextTypeCreator";
+import { BrowseTypesTab } from "./BrowseTypesTab";
+
+export const TabContainer = styled.div`
+        height: 100%;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 0px;
+        padding-top: 10px;
+    `;
+
+export const ContentBody = styled.div`
+    height: 430px;
+`;
+
+export const Footer = styled.div`
+    display: flex;
+    gap: 8px;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: 16px;
+    flex-shrink: 0;
+`;
+
+export const StickyFooterContainer = styled.div`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+`;
+
+export const FloatingFooter = styled.div`
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: ${ThemeColors.SURFACE_DIM};
+    border-top: 1px solid var(--vscode-panel-border);
+    box-shadow: 0 -1px 10px 0 rgba(0, 0, 0, 0.1);
+    z-index: 10;
+    padding-top: 16px;
+    padding-bottom: 5px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+`;
+
+interface ContextTypeEditorProps {
+    type?: Type;
+    imports?: Imports;
+    rpcClient: BallerinaRpcClient;
+    onTypeChange: (type: Type, rename?: boolean) => void;
+    onSaveType: (type: Type | string) => void;
+    newType: boolean;
+    newTypeValue?: string;
+    isPopupTypeForm: boolean;
+    simpleType?: string;
+    isGraphql?: boolean;
+    payloadContext?: PayloadContext;
+    typeHelper: {
+        loading?: boolean;
+        loadingTypeBrowser?: boolean;
+        referenceTypes: TypeHelperCategory[];
+        basicTypes: TypeHelperCategory[];
+        importedTypes: TypeHelperCategory[];
+        operators: TypeHelperOperator[];
+        typeBrowserTypes: TypeHelperCategory[];
+        onSearchTypeHelper: (searchText: string, isType?: boolean) => void;
+        onSearchTypeBrowser: (searchText: string) => void;
+        onTypeItemClick: (item: TypeHelperItem) => Promise<AddImportItemResponse>;
+        onCloseCompletions?: () => void;
+        onTypeCreate?: (typeName?: string) => void;
+    }
+}
+
+
+export function ContextTypeEditor(props: ContextTypeEditorProps) {
+    const { isGraphql, newType, isPopupTypeForm, simpleType, payloadContext } = props;
+
+    const [initialTypeKind] = useState<TypeNodeKind>(() =>
+        (props.type?.codedata?.node ?? "RECORD") as TypeNodeKind
+    );
+    const [isSaving, setIsSaving] = useState(false);
+
+    const type: Type = (() => {
+        if (props.type) {
+            return props.type;
+        }
+        // Initialize with default type for new types
+        const defaultType = {
+            name: props.newTypeValue ?? "",
+            members: [] as Member[],
+            editable: true,
+            metadata: {
+                description: "",
+                deprecated: false,
+                readonly: false,
+                label: ""
+            },
+            properties: {},
+            codedata: {
+                node: "RECORD" as TypeNodeKind
+            },
+            includes: [] as string[],
+            allowAdditionalFields: false
+        };
+
+        return defaultType as unknown as Type;
+    })();
+
+    // Determine initial tab based on edit mode
+    const getInitialTab = () => {
+        if (newType) {
+            return "import";
+        }
+        // For edit mode: if simple type, show browse tab; otherwise show create tab
+        if (simpleType) {
+            return "browse-exisiting-types";
+        }
+        return "create-from-scratch";
+    };
+
+    const [activeTab, setActiveTab] = useState<string>(getInitialTab());
+
+
+    const onTypeSave = async (type: Type) => {
+        const name = type.name;
+        setIsSaving(true);
+        // 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: UpdateTypeResponse = await props.rpcClient
+                .getBIDiagramRpcClient()
+                .createGraphqlClassType({ filePath: type.codedata?.lineRange?.fileName || 'types.bal', type, description: "" });
+            if (!isPopupTypeForm) {
+                await props.rpcClient
+                    .getVisualizerRpcClient()
+                    .openView({ type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { identifier: response.name, addType: false } });
+            }
+
+        } else {
+            const response: UpdateTypeResponse = await props.rpcClient
+                .getBIDiagramRpcClient()
+                .updateType({ filePath: type.codedata?.lineRange?.fileName || 'types.bal', type, description: "" });
+            if (!isPopupTypeForm) {
+                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);
+    }
+
+    const handleTabChange = (tabId: string) => {
+        setActiveTab(tabId);
+    }
+
+    return (
+        <TypeHelperContext.Provider value={props.typeHelper}>
+                {!type ? (
+                    <ProgressRing />
+                ) : (
+                    <TabPanel
+                        views={[
+                            {
+                                id: 'import',
+                                name: 'Import',
+                                icon: <Icon
+                                    name="bi-import"
+                                    sx={{ marginRight: '5px' }}
+                                    iconSx={{ fontSize: '15px', display: 'flex', alignItems: 'center' }}
+                                />
+                            },
+                            {
+                                id: 'create-from-scratch',
+                                name: 'Create Type Schema',
+                                icon: <Icon
+                                    name="bi-edit"
+                                    sx={{ marginRight: '5px' }}
+                                    iconSx={{ fontSize: '12px', display: 'flex', alignItems: 'center', paddingTop: '2px' }}
+                                />
+                            },
+                            {
+                                id: 'browse-exisiting-types',
+                                name: 'Browse Existing Types',
+                                icon: <Icon
+                                    name="bi-type"
+                                    sx={{ marginRight: '5px' }}
+                                    iconSx={{ fontSize: '15px', display: 'flex', alignItems: 'center' }}
+                                />
+                            }
+                        ]}
+                        currentViewId={activeTab}
+                        onViewChange={handleTabChange}
+                        childrenSx={{ height: '100%', overflow: 'hidden' }}
+                    >
+                        <TabContainer id="import" data-testid="import-tab">
+                            <GenericImportTab
+                                type={type}
+                                onTypeSave={onTypeSave}
+                                isSaving={isSaving}
+                                isPopupTypeForm={isPopupTypeForm}
+                                setIsSaving={setIsSaving}
+                                payloadContext={payloadContext}
+                                onTypeSelect={props.onSaveType}
+                            />
+                        </TabContainer>
+                        <TabContainer id="create-from-scratch" data-testid="create-from-scratch-tab">
+                            <ContextTypeCreatorTab
+                                onTypeChange={props.onTypeChange}
+                                editingType={type}
+                                newType={simpleType ? true : newType}
+                                isGraphql={isGraphql}
+                                initialTypeKind={initialTypeKind}
+                                onTypeSave={onTypeSave}
+                                isSaving={isSaving}
+                                setIsSaving={setIsSaving}
+                            />
+                        </TabContainer>
+                        <TabContainer id="browse-exisiting-types" data-testid="browse-exisiting-types-tab">
+                            <BrowseTypesTab
+                                basicTypes={props.typeHelper.basicTypes}
+                                importedTypes={props.typeHelper.importedTypes}
+                                loading={props.typeHelper.loading}
+                                onSearchTypeHelper={props.typeHelper.onSearchTypeHelper}
+                                onTypeItemClick={props.typeHelper.onTypeItemClick}
+                                onTypeSelect={props.onSaveType}
+                                simpleType={simpleType}
+                            />
+                        </TabContainer>
+                    </TabPanel>
+                )}
+        </TypeHelperContext.Provider>
+    );
+}
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/EditTypeView.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/EditTypeView.tsx
new file mode 100644
index 00000000000..71781ac5cb2
--- /dev/null
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/EditTypeView.tsx
@@ -0,0 +1,571 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, { 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";
+import { Member, Type, TypeNodeKind } from "@wso2/ballerina-core";
+import { RecordEditor } from "../RecordEditor";
+import { EnumEditor } from "../EnumEditor";
+import { UnionEditor } from "../UnionEditor";
+import { ClassEditor } from "../ClassEditor";
+import { AdvancedOptions } from "../AdvancedOptions";
+import { ArrayEditor } from "../ArrayEditor";
+import { debounce } from "lodash";
+import { URI, Utils } from "vscode-uri";
+import { EditorContext } from "../Contexts/TypeEditorContext";
+import { SchemaRecordEditor } from "./SchemaRecordEditor";
+
+const CategoryRow = styled.div<{ showBorder?: boolean }>`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+    margin-top: 8px;
+    padding-bottom: 14px;
+    border-bottom: ${({ showBorder }) => (showBorder ? `1px solid var(--vscode-welcomePage-tileBorder)` : "none")};
+`;
+
+const Footer = styled.div<{}>`
+    display: flex;
+    gap: 8px;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 8px;
+    width: 100%;
+`;
+
+const InputWrapper = styled.div`
+    position: relative;
+    width: 100%;
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+`;
+
+const TextFieldWrapper = styled.div`
+    flex: 1;
+`;
+
+const EditButton = styled(Button)`
+    margin-top: 39px;
+`;
+
+const ButtonGroup = styled.div`
+    display: flex;
+    gap: 8px;
+    margin-bottom: 2px; 
+    margin-top: 38px;
+`;
+
+const StyledButton = styled(Button)`
+    font-size: 14px;
+`;
+
+const WarningText = styled(Typography)`
+    color: var(--vscode-textLink-foreground);
+    font-size: 12px;
+    margin-top: 4px;
+`;
+
+const EditableRow = styled.div`
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    flex-direction: column;
+`;
+
+const EditRow = styled.div`
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    width: 100%;
+`;
+
+enum TypeKind {
+    RECORD = "Record",
+    ENUM = "Enum",
+    CLASS = "Service Class",
+    UNION = "Union",
+    ARRAY = "Array"
+}
+
+interface EditTypeViewProps {
+    editingType: Type;
+    newType: boolean;
+    isGraphql: boolean;
+    initialTypeKind: TypeNodeKind;
+    onTypeSave: (type: Type) => Promise<void>;
+    isSaving: boolean;
+    setIsSaving: (isSaving: boolean) => void;
+    onTypeChange: (type: Type, rename?: boolean) => void;
+}
+
+export function EditTypeView(props: EditTypeViewProps) {
+    const {
+        editingType,
+        isGraphql,
+        newType,
+        initialTypeKind,
+        onTypeSave,
+        isSaving,
+        setIsSaving,
+        onTypeChange
+    } = props;
+
+    const [type, setType] = useState<Type>(editingType);
+    const [selectedTypeKind, setSelectedTypeKind] = useState<TypeKind>(() => {
+        if (type) {
+            // Map the type's node kind to TypeKind enum
+            const nodeKind = type.codedata.node;
+            switch (nodeKind) {
+                case "RECORD":
+                    return TypeKind.RECORD;
+                case "ENUM":
+                    return TypeKind.ENUM;
+                case "CLASS":
+                    return TypeKind.CLASS;
+                case "UNION":
+                    return TypeKind.UNION;
+                case "ARRAY":
+                    return TypeKind.ARRAY;
+                default:
+                    return TypeKind.RECORD;
+            }
+        }
+        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);
+    const [nameError, setNameError] = useState<string>("");
+    const [isEditing, setIsEditing] = useState(false);
+    const [tempName, setTempName] = useState("");
+    const saveButtonClicked = useRef(false);
+
+    const { rpcClient } = useRpcContext();
+
+    const nameInputRef = useRef<HTMLInputElement | null>(null);
+
+    useEffect(() => {
+        if (editingType) {
+            handleSetType(editingType);
+            validateTypeName(editingType.name);
+
+            const nodeKind = editingType.codedata.node;
+            switch (nodeKind) {
+                case "RECORD":
+                    setSelectedTypeKind(TypeKind.RECORD);
+                    break;
+                case "ENUM":
+                    setSelectedTypeKind(TypeKind.ENUM);
+                    break;
+                case "CLASS":
+                    setSelectedTypeKind(TypeKind.CLASS);
+                    break;
+                case "UNION":
+                    setSelectedTypeKind(TypeKind.UNION);
+                    break;
+                case "ARRAY":
+                    setSelectedTypeKind(TypeKind.ARRAY);
+                    break;
+                default:
+                    setSelectedTypeKind(TypeKind.RECORD);
+            }
+        }
+
+        setIsNewType(newType);
+    }, [editingType?.name, newType]);
+
+    const handleSetType = (type: Type) => {
+        replaceTop({
+            type: type,
+            isDirty: true
+        })
+        setType(type);
+    }
+
+
+    const handleTypeKindChange = (value: string) => {
+        // Convert display name back to internal TypeKind
+        let selectedKind: TypeKind;
+        if (isGraphql) {
+            switch (value) {
+                case "Input Object":
+                    selectedKind = TypeKind.RECORD;
+                    break;
+                case "Object":
+                    selectedKind = TypeKind.CLASS;
+                    break;
+                default:
+                    selectedKind = value as TypeKind;
+            }
+        } else {
+            selectedKind = value as TypeKind;
+        }
+        setSelectedTypeKind(selectedKind);
+
+        // Reset validation error state when changing type kinds
+        setOnValidationError(false);
+
+        const typeValue = selectedKind === TypeKind.CLASS ? "CLASS" : selectedKind.toUpperCase();
+
+        // Always create a new type with the selected kind, preserving the name
+        handleSetType({
+            ...type!,
+            name: type!.name, // Explicitly preserve the name
+            kind: typeValue,
+            members: [] as Member[],
+            codedata: {
+                ...type!.codedata, // Check the location of the type
+                node: typeValue.toUpperCase() as TypeNodeKind
+            }
+        } as any);
+    };
+
+    // Add a helper function to get the display label
+    const getTypeKindLabel = (kind: TypeKind, isGraphql?: boolean): string => {
+        if (isGraphql) {
+            switch (kind) {
+                case TypeKind.RECORD:
+                    return "Input Object";
+                case TypeKind.CLASS:
+                    return "Object";
+                default:
+                    return kind;
+            }
+        }
+        return kind;
+    };
+
+    const getAvailableTypeKinds = (isGraphql: boolean | undefined, currentType?: TypeKind): TypeKind[] => {
+        if (isGraphql) {
+            // For GraphQL mode, filter options based on current type
+            if (initialTypeKind === "RECORD") {
+                return [TypeKind.RECORD, TypeKind.ENUM];
+            } else if (initialTypeKind === "CLASS") {
+                return [TypeKind.CLASS, TypeKind.ENUM, TypeKind.UNION];
+            }
+        }
+        // Return all options for non-GraphQL mode
+        return Object.values(TypeKind);
+    };
+
+    const handleValidationError = (isError: boolean) => {
+        setOnValidationError(isError);
+    }
+
+    const startEditing = () => {
+        setTempName(type.name);
+        saveButtonClicked.current = false;
+        setIsEditing(true);
+    };
+
+    const cancelEditing = () => {
+        validateTypeName(type.name);
+
+        setIsEditing(false);
+        setTempName("");
+    };
+
+    const editTypeName = async () => {
+        saveButtonClicked.current = true;
+        if (!tempName || tempName === type.name) {
+            cancelEditing();
+            return;
+        }
+
+        setIsSaving(true);
+        try {
+            await rpcClient.getBIDiagramRpcClient().renameIdentifier({
+                fileName: type.codedata.lineRange.fileName,
+                position: {
+                    line: type.codedata.lineRange.startLine.line,
+                    character: type.codedata.lineRange.startLine.offset
+                },
+                newName: tempName
+            });
+
+            const renamedType = {
+                ...type,
+                name: tempName,
+                properties: {
+                    ...type.properties,
+                    name: {
+                        ...type.properties["name"],
+                        value: tempName
+                    }
+                }
+            };
+            handleSetType(renamedType);
+            onTypeChange(renamedType, true);
+            cancelEditing();
+        } catch (error) {
+            console.error('Error renaming service class:', error);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleOnBlur = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!saveButtonClicked.current) {
+            await validateTypeName(e.target.value);
+        }
+    };
+
+    const handleOnFieldFocus = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        await validateTypeName(e.target.value);
+    }
+
+    const validateTypeName = useCallback(debounce(async (value: string) => {
+        if (saveButtonClicked.current) {
+            return;
+        }
+
+        const projectUri = await rpcClient.getVisualizerLocation().then((res) => res.projectUri);
+
+        const endPosition = await rpcClient.getBIDiagramRpcClient().getEndOfFile({
+            filePath: Utils.joinPath(URI.file(projectUri), 'types.bal').fsPath
+        });
+
+        const response = await rpcClient.getBIDiagramRpcClient().getExpressionDiagnostics({
+            filePath: type?.codedata?.lineRange?.fileName || "types.bal",
+            context: {
+                expression: value,
+                startLine: {
+                    line: type?.codedata?.lineRange?.startLine?.line ?? endPosition.line,
+                    offset: type?.codedata?.lineRange?.startLine?.offset ?? endPosition.offset
+                },
+                offset: 0,
+                lineOffset: 0,
+                codedata: {
+                    node: "VARIABLE",
+                    lineRange: {
+                        startLine: {
+                            line: type?.codedata?.lineRange?.startLine?.line ?? endPosition.line,
+                            offset: type?.codedata?.lineRange?.startLine?.offset ?? endPosition.offset
+                        },
+                        endLine: {
+                            line: type?.codedata?.lineRange?.endLine?.line ?? endPosition.line,
+                            offset: type?.codedata?.lineRange?.endLine?.offset ?? endPosition.offset
+                        },
+                        fileName: type?.codedata?.lineRange?.fileName
+                    },
+                },
+                property: type?.properties["name"] ?
+                    {
+                        ...type.properties["name"],
+                        valueTypeConstraint: "Global"
+                    } :
+                    {
+                        metadata: {
+                            label: "",
+                            description: "",
+                        },
+                        valueType: "IDENTIFIER",
+                        value: "",
+                        valueTypeConstraint: "Global",
+                        optional: false,
+                        editable: true
+                    }
+            }
+        });
+
+
+        if (response && response.diagnostics && response.diagnostics.length > 0) {
+            setNameError(response.diagnostics[0].message);
+            setIsTypeNameValid(false);
+        } else {
+            setNameError("");
+            setIsTypeNameValid(true);
+        }
+    }, 250), [rpcClient, type]);
+
+    const handleOnTypeNameUpdate = (value: string) => {
+        setTempName(value);
+        validateTypeName(value);
+    }
+
+    const handleOnTypeNameChange = (value: string) => {
+        handleSetType({ ...type, name: value });
+        validateTypeName(value);
+    }
+
+    const renderEditor = () => {
+        if (!type) {
+            return <ProgressRing />;
+        }
+        switch (selectedTypeKind) {
+            case TypeKind.RECORD:
+                return (
+                    <>
+                        <RecordEditor
+                            type={type}
+                            isAnonymous={false}
+                            onChange={handleSetType}
+                            newType={newType}
+                            isGraphql={isGraphql}
+                            onValidationError={handleValidationError}
+                        />
+                        <AdvancedOptions type={type} onChange={handleSetType} />
+                    </>
+                );
+            case TypeKind.ENUM:
+                return (
+                    <EnumEditor
+                        type={type}
+                        onChange={handleSetType}
+                        onValidationError={handleValidationError}
+                    />
+                );
+            case TypeKind.UNION:
+                return (
+                    <>
+                    <UnionEditor
+                        type={type}
+                        onChange={handleSetType}
+                        rpcClient={rpcClient}
+                        onValidationError={handleValidationError}
+                    />
+                    <AdvancedOptions type={type} onChange={handleSetType} />
+                    </>
+                );
+            case TypeKind.CLASS:
+                return (
+                    <ClassEditor
+                        type={type}
+                        isGraphql={isGraphql}
+                        onChange={handleSetType}
+                        onValidationError={handleValidationError}
+                    />
+                );
+            case TypeKind.ARRAY:
+                return (
+                    <>
+                    <ArrayEditor
+                        type={type}
+                        onChange={handleSetType}
+                        onValidationError={handleValidationError}
+                    />
+                    <AdvancedOptions type={type} onChange={handleSetType} />
+                    </>
+                );
+            default:
+                return <div>Editor for {selectedTypeKind} type is not implemented yet</div>;
+        }
+    };
+
+    return (
+        <>
+            <CategoryRow>
+                {!isNewType && !isEditing && !type.properties["name"]?.editable && (
+                    <InputWrapper>
+                        <TextFieldWrapper>
+                            <TextField
+                                id={type.name}
+                                data-testid="type-name-display"
+                                name={type.name}
+                                value={type.name}
+                                label={type?.properties["name"]?.metadata?.label}
+                                required={!type?.properties["name"]?.optional}
+                                description={type?.properties["name"]?.metadata?.description}
+                                readOnly={!type.properties["name"]?.editable}
+                            />
+                        </TextFieldWrapper>
+                        <EditButton appearance="icon" onClick={startEditing} tooltip="Rename">
+                            <Icon name="bi-edit" sx={{ width: 18, height: 18, fontSize: 18 }} />
+                        </EditButton>
+                    </InputWrapper>
+                )}
+                {isEditing && (
+                    <>
+                        <EditableRow>
+                            <EditRow>
+                                <TextFieldWrapper>
+                                    <TextField
+                                        id={type.name}
+                                        label={type.properties["name"]?.metadata.label}
+                                        value={tempName}
+                                        errorMsg={nameError}
+                                        onBlur={handleOnBlur}
+                                        onFocus={handleOnFieldFocus}
+                                        onChange={(e) => handleOnTypeNameUpdate(e.target.value)}
+                                        description={type.properties["name"]?.metadata.description}
+                                        required={!type.properties["name"]?.optional}
+                                        autoFocus
+                                    />
+                                </TextFieldWrapper>
+                                <ButtonGroup>
+                                    <StyledButton
+                                        appearance="secondary"
+                                        onClick={cancelEditing}
+                                        disabled={isSaving}
+                                    >
+                                        Cancel
+                                    </StyledButton>
+                                    <StyledButton
+                                        appearance="primary"
+                                        onClick={editTypeName}
+                                        disabled={!isTypeNameValid || !tempName || isSaving}
+                                    >
+                                        {isSaving ? <Typography variant="progress">Saving...</Typography> : "Save"}
+                                    </StyledButton>
+                                </ButtonGroup>
+                            </EditRow>
+
+                            <WarningText variant="body3">
+                                Note: Renaming will update all references across the project
+                            </WarningText>
+                        </EditableRow>
+                    </>
+                )}
+            </CategoryRow>
+
+            <div style={{ overflow: 'auto', maxHeight: '70vh' }}>
+                <>
+                    <SchemaRecordEditor
+                        type={type}
+                        isAnonymous={false}
+                        onChange={handleSetType}
+                        newType={newType}
+                        isGraphql={isGraphql}
+                        onValidationError={handleValidationError}
+                    />
+                    <AdvancedOptions type={type} onChange={handleSetType} />
+                </>
+
+           </div>
+            <Footer>
+                <Button
+                    data-testid="type-create-save"
+                    onClick={() => onTypeSave(type)}
+                    disabled={onValidationError || !isTypeNameValid || isEditing || isSaving}>
+                    {isSaving ? <Typography variant="progress">Saving...</Typography> : "Save"}
+                </Button>
+            </Footer>
+        </>
+    );
+}
+
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/GenericImportTab.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/GenericImportTab.tsx
new file mode 100644
index 00000000000..0e2ca1f2ae0
--- /dev/null
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/GenericImportTab.tsx
@@ -0,0 +1,636 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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, { useCallback, useEffect, useRef, useState } from "react";
+import { TextField, Button, TextArea, Typography, Icon, Codicon, LinkButton, ProgressRing } from "@wso2/ui-toolkit";
+import styled from "@emotion/styled";
+import { BallerinaRpcClient, useRpcContext } from "@wso2/ballerina-rpc-client";
+import { Type, EVENT_TYPE, JsonToTypeResponse, TypeDataWithReferences, PayloadContext } from "@wso2/ballerina-core";
+import { debounce } from "lodash";
+import { Utils, URI } from "vscode-uri";
+import { ContentBody, StickyFooterContainer, FloatingFooter } from "./ContextTypeEditor";
+
+const CategoryRow = styled.div<{ showBorder?: boolean }>`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+    margin-top: 8px;
+    padding-bottom: 14px;
+    border-bottom: ${({ showBorder }) => (showBorder ? `1px solid var(--vscode-welcomePage-tileBorder)` : "none")};
+`;
+
+const TextFieldWrapper = styled.div`
+    flex: 1;
+`;
+
+const InfoBanner = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px;
+    background-color: var(--vscode-textCodeBlock-background);
+    border-radius: 4px;
+    margin-bottom: 20px;
+`;
+
+const InfoText = styled(Typography)`
+    color: var(--vscode-descriptionForeground);
+    font-size: 12px;
+`;
+
+const HeaderRow = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+const Title = styled(Typography)`
+    font-weight: 500;
+`;
+
+const UploadButtonWrapper = styled.div`
+    display: flex;
+    gap: 8px;
+`;
+
+const ScrollableSection = styled.div`
+    flex: 1;
+    overflow-y: auto;
+    max-height: 350px;
+`;
+
+const LoaderOverlay = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    background-color: rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(2px);
+    border-radius: 4px;
+    z-index: 10;
+`;
+
+enum DetectedFormat {
+    JSON = "JSON",
+    XML = "XML",
+    UNKNOWN = "UNKNOWN",
+    EMPTY = "EMPTY"
+}
+
+interface GenericImportTabProps {
+    type: Type;
+    onTypeSave: (type: Type) => void;
+    isSaving: boolean;
+    setIsSaving: (isSaving: boolean) => void;
+    isPopupTypeForm: boolean;
+    payloadContext?: PayloadContext;
+    onTypeSelect: (type: Type | string) => void;
+}
+
+export function GenericImportTab(props: GenericImportTabProps) {
+    const {
+        type,
+        onTypeSave,
+        isSaving,
+        setIsSaving,
+        isPopupTypeForm,
+        payloadContext,
+        onTypeSelect
+    } = props;
+
+    const nameInputRef = useRef<HTMLInputElement | null>(null);
+    const [content, setContent] = useState<string>("");
+    const [detectedFormat, setDetectedFormat] = useState<DetectedFormat>(DetectedFormat.EMPTY);
+    const [importTypeName, setImportTypeName] = useState<string>(type.name);
+    const [isTypeNameValid, setIsTypeNameValid] = useState<boolean>(true);
+    const [nameError, setNameError] = useState<string>("");
+    const [error, setError] = useState<string>("");
+    const [isGenerating, setIsGenerating] = useState<boolean>(false);
+    const [isUserAuthenticated, setIsUserAuthenticated] = useState<boolean>(false);
+
+    const { rpcClient } = useRpcContext();
+
+    // Check user authentication status on mount
+    useEffect(() => {
+        const checkAuthStatus = async () => {
+            try {
+                const authenticated = await rpcClient.getAiPanelRpcClient().isUserAuthenticated();
+                setIsUserAuthenticated(authenticated);
+            } catch (error) {
+                console.error("Error checking user authentication:", error);
+                setIsUserAuthenticated(false);
+            }
+        };
+        checkAuthStatus();
+    }, [rpcClient]);
+
+    useEffect(() => {
+        if (detectedFormat === DetectedFormat.JSON) {
+            validateTypeName(importTypeName);
+        }
+        if (detectedFormat === DetectedFormat.EMPTY) {
+            setError("");
+        }
+        if (detectedFormat === DetectedFormat.UNKNOWN) {
+            setError("Invalid format. Please ensure the content is valid JSON or XML.");
+        }
+    }, [type, detectedFormat, importTypeName]);
+
+    // Auto-detect format based on content
+    const detectFormat = (value: string): DetectedFormat => {
+        if (!value || value.trim() === "") {
+            return DetectedFormat.EMPTY;
+        }
+
+        const trimmed = value.trim();
+
+        // Try to detect JSON
+        if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+            (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+            try {
+                JSON.parse(trimmed);
+                setError("");
+                return DetectedFormat.JSON;
+            } catch (e) {
+                // Not valid JSON, continue checking
+                setError("Invalid JSON format");
+            }
+        }
+
+        // Try to detect XML
+        if (trimmed.startsWith('<') && trimmed.endsWith('>')) {
+            try {
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(trimmed, "text/xml");
+                // Check if parsing produced an error node
+                if (doc.getElementsByTagName("parsererror").length === 0) {
+                    setError("");
+                    return DetectedFormat.XML;
+                }
+            } catch (e) {
+                // Not valid XML
+                setError("Invalid XML format");
+            }
+        }
+
+        return DetectedFormat.UNKNOWN;
+    };
+
+    const validateTypeName = useCallback(debounce(async (value: string) => {
+        const projectUri = await rpcClient.getVisualizerLocation().then((res) => res.projectUri);
+
+        const endPosition = await rpcClient.getBIDiagramRpcClient().getEndOfFile({
+            filePath: Utils.joinPath(URI.file(projectUri), 'types.bal').fsPath
+        });
+
+        const response = await rpcClient.getBIDiagramRpcClient().getExpressionDiagnostics({
+            filePath: type?.codedata?.lineRange?.fileName || "types.bal",
+            context: {
+                expression: value,
+                startLine: {
+                    line: type?.codedata?.lineRange?.startLine?.line ?? endPosition.line,
+                    offset: type?.codedata?.lineRange?.startLine?.offset ?? endPosition.offset
+                },
+                offset: 0,
+                lineOffset: 0,
+                codedata: {
+                    node: "VARIABLE",
+                    lineRange: {
+                        startLine: {
+                            line: type?.codedata?.lineRange?.startLine?.line ?? endPosition.line,
+                            offset: type?.codedata?.lineRange?.startLine?.offset ?? endPosition.offset
+                        },
+                        endLine: {
+                            line: type?.codedata?.lineRange?.endLine?.line ?? endPosition.line,
+                            offset: type?.codedata?.lineRange?.endLine?.offset ?? endPosition.offset
+                        },
+                        fileName: type?.codedata?.lineRange?.fileName
+                    },
+                },
+                property: type?.properties["name"] ?
+                    {
+                        ...type.properties["name"],
+                        valueTypeConstraint: "Global"
+                    } :
+                    {
+                        metadata: {
+                            label: "",
+                            description: "",
+                        },
+                        valueType: "IDENTIFIER",
+                        value: "",
+                        valueTypeConstraint: "Global",
+                        optional: false,
+                        editable: true
+                    }
+            }
+        });
+
+
+        if (response && response.diagnostics && response.diagnostics.length > 0) {
+            setNameError(response.diagnostics[0].message);
+            setIsTypeNameValid(false);
+        } else {
+            setNameError("");
+            setIsTypeNameValid(true);
+        }
+    }, 250), [rpcClient, type]);
+
+    const handleOnBlur = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        await validateTypeName(e.target.value);
+    };
+
+    const handleNameChange = async (value: string) => {
+        setImportTypeName(value);
+        await validateTypeName(value);
+    };
+
+    const handleContentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const newContent = event.target.value;
+        setContent(newContent);
+
+        // Detect format
+        const format = detectFormat(newContent);
+        setDetectedFormat(format);
+    };
+
+    const handleFileUpload = (fileContent: string) => {
+        setContent(fileContent);
+
+        // Auto-detect format from uploaded file content
+        const format = detectFormat(fileContent);
+        setDetectedFormat(format);
+    };
+
+    const importAsJson = async () => {
+        setIsSaving(true);
+        setError("");
+
+        try {
+            const typesFromJson: JsonToTypeResponse = await rpcClient.getBIDiagramRpcClient().getTypeFromJson({
+                jsonString: content,
+                typeName: importTypeName
+            });
+
+            // Since the LS issue where all types are created with first letter capital we cant carry exact string match.
+            // Therefore we are considering the last type to be the main records, and the rest are dependencies.
+            const record = typesFromJson.types[typesFromJson.types.length - 1];
+            const otherRecords = typesFromJson.types
+                .slice(0, -1)
+                .map((t) => t.type);
+
+            if (otherRecords.length > 0) {
+                await rpcClient.getBIDiagramRpcClient().updateTypes({
+                    filePath: 'types.bal',
+                    types: otherRecords
+                });
+
+                if (!isPopupTypeForm) {
+                    await rpcClient.getVisualizerRpcClient().openView(
+                        { type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { addType: false } }
+                    );
+                }
+            }
+
+            if (record) {
+                await onTypeSave(record.type);
+            }
+        } catch (err) {
+            setError("Could not import JSON as type.");
+            console.error("Error importing JSON as type:", err);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const importAsXml = async () => {
+        setIsSaving(true);
+        setError("");
+
+        try {
+            const resp: TypeDataWithReferences = await rpcClient.getRecordCreatorRpcClient().convertXmlToRecordType({
+                xmlValue: content,
+                prefix: ""
+            });
+
+            const lastRecord = resp.types[resp.types.length - 1];
+            const otherRecords = resp.types
+                .filter((t) => t.type.name !== lastRecord.type.name)
+                .map((t) => t.type);
+
+            if (otherRecords.length > 0) {
+                await rpcClient.getBIDiagramRpcClient().updateTypes({
+                    filePath: 'types.bal',
+                    types: otherRecords
+                });
+
+                if (!isPopupTypeForm) {
+                    await rpcClient.getVisualizerRpcClient().openView(
+                        { type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { addType: false } }
+                    );
+                }
+            }
+
+            if (lastRecord) {
+                await onTypeSave(lastRecord.type);
+            }
+        } catch (err) {
+            setError("Failed to import XML as type.");
+            console.error("Error importing XML as type:", err);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleImport = async () => {
+        if (detectedFormat === DetectedFormat.JSON) {
+            await importAsJson();
+        } else if (detectedFormat === DetectedFormat.XML) {
+            await importAsXml();
+        }
+    };
+
+    const isImportDisabled = () => {
+        if (!content.trim()) return true;
+        if (detectedFormat === DetectedFormat.UNKNOWN) return true;
+        if (detectedFormat === DetectedFormat.JSON && (!importTypeName.trim() || !isTypeNameValid)) return true;
+        if (isSaving) return true;
+        return false;
+    };
+
+    // Create a hidden file input ref for the upload button
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleUploadClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            const content = event.target?.result as string;
+            handleFileUpload(content);
+        };
+        reader.readAsText(file);
+    };
+
+    const generateSampleJson = async () => {
+        if (!payloadContext) {
+            console.error("No payload context available for JSON generation");
+            return;
+        }
+
+        try {
+            // Set loading state for generation
+            setIsGenerating(true);
+            setError("");
+
+            console.log("Generating sample JSON with context:", payloadContext);
+            let generatedJson: string;
+            try {
+                const generatedJsonObj = await rpcClient.getServiceDesignerRpcClient().generateExamplePayloadJson(payloadContext);
+
+                // // Populate the textarea with the generated JSON
+                generatedJson = JSON.stringify(generatedJsonObj, null, 2);
+            } catch (error) {
+                console.error("Error during AI Example JSON generation:", error);
+
+                // Use fallback mock data
+                const mockGeneratedJson = {
+                    id: 1,
+                    name: "Sample User",
+                    email: "user@example.com",
+                    age: 25,
+                };
+                generatedJson = JSON.stringify(mockGeneratedJson, null, 2);
+            }
+
+            setContent(generatedJson);
+
+            // Auto-detect format for the generated content
+            const format = detectFormat(generatedJson);
+            setDetectedFormat(format);
+
+            console.log("Generated JSON:", generatedJson);
+
+        } catch (err) {
+            console.error("Error generating sample JSON:", err);
+            setError("Failed to generate sample JSON. Please try again.");
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    const selectJsonType = () => {
+        const jsonType: Type = {
+            name: "json",
+            editable: false,
+            metadata: {
+                label: "json",
+                description: "",
+            },
+            codedata: {
+                node: "TYPEDESC"
+            },
+            properties: {},
+            members: [],
+            includes: []
+        };
+
+
+        onTypeSelect(jsonType);
+    };
+
+    return (
+        <StickyFooterContainer>
+            <ContentBody>
+                <InfoBanner>
+                    <Codicon name="info" />
+                    <InfoText variant="body3">
+                        Supports JSON and XML formats — just paste a Sample or Upload a file
+                    </InfoText>
+                </InfoBanner>
+                <HeaderRow>
+                    <Title variant="h4" sx={{ margin: '0px' }}>Sample data</Title>
+                    <UploadButtonWrapper>
+                        <input
+                            type="file"
+                            ref={fileInputRef}
+                            onChange={handleFileSelect}
+                            accept=".json,.xml"
+                            style={{ display: 'none' }}
+                        />
+                        <LinkButton
+                            onClick={handleUploadClick}
+                            sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '4px',
+                                backgroundColor: 'transparent',
+                                border: '1px solid var(--vscode-textLink-foreground)',
+                                color: 'var(--vscode-textLink-foreground)',
+                                padding: '6px 12px',
+                                fontSize: '13px'
+                            }}
+                        >
+                            <Icon
+                                name="bi-import"
+                                iconSx={{ fontSize: "15px" }}
+                                sx={{ marginRight: "5px" }}
+                            />
+                            <Typography variant="body3">
+                                Upload File
+                            </Typography>
+                        </LinkButton>
+                    </UploadButtonWrapper>
+                </HeaderRow>
+
+
+                <div style={{ position: 'relative' }}>
+                    <TextArea
+                        rows={15}
+                        value={content}
+                        onChange={handleContentChange}
+                        errorMsg={error}
+                        placeholder=""
+                    />
+                    {/* Loading overlay for generation */}
+                    {isGenerating && (
+                        <LoaderOverlay>
+                            <ProgressRing />
+                            <Typography variant="body3" sx={{ color: 'var(--vscode-foreground)' }}>
+                                Generating sample JSON...
+                            </Typography>
+                        </LoaderOverlay>
+                    )}
+                    {!content && !isGenerating && (
+                        <div style={{
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            gap: '12px',
+                            pointerEvents: 'none',
+                            zIndex: 1
+                        }}>
+                            <Typography
+                                variant="body3"
+                                sx={{ color: 'var(--vscode-input-placeholderForeground)', textAlign: 'center' }}
+                            >
+                                Paste JSON or XML here...
+                            </Typography>
+                            <Typography
+                                variant="body3"
+                                sx={{ color: 'var(--vscode-input-placeholderForeground)', textAlign: 'center' }}
+                            >
+                                or
+                            </Typography>
+                            {payloadContext && isUserAuthenticated && (
+                                <>
+                                    <LinkButton
+                                        onClick={() => generateSampleJson()}
+                                        sx={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '8px',
+                                            backgroundColor: 'transparent',
+                                            color: 'var(--vscode-textLink-foreground)',
+                                            padding: '8px 16px',
+                                            fontSize: '13px',
+                                            borderRadius: '4px',
+                                            pointerEvents: 'auto'
+                                        }}
+                                    >
+                                        <Codicon name="wand" sx={{ fontSize: '14px' }} />
+                                        Generate Sample JSON
+                                    </LinkButton>
+                                    <Typography
+                                        variant="body3"
+                                        sx={{ color: 'var(--vscode-input-placeholderForeground)', textAlign: 'center' }}
+                                    >
+                                        or
+                                    </Typography>
+                                </>
+                            )}
+                            <LinkButton
+                                onClick={() => selectJsonType()}
+                                sx={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '8px',
+                                    backgroundColor: 'transparent',
+                                    color: 'var(--vscode-textLink-foreground)',
+                                    padding: '8px 16px',
+                                    fontSize: '13px',
+                                    borderRadius: '4px',
+                                    pointerEvents: 'auto'
+                                }}
+                            >
+                                Continue with JSON Type
+                            </LinkButton>
+                        </div>
+                    )}
+                </div>
+
+                {detectedFormat === DetectedFormat.JSON && (
+                    <CategoryRow showBorder={false}>
+                        <TextFieldWrapper>
+                            <TextField
+                                label="Type Name"
+                                value={importTypeName}
+                                errorMsg={nameError}
+                                onBlur={handleOnBlur}
+                                onChange={(e) => handleNameChange(e.target.value)}
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                        handleNameChange((e.target as HTMLInputElement).value);
+                                    }
+                                }}
+                                onFocus={(e) => {
+                                    e.target.select();
+                                    validateTypeName(e.target.value);
+                                }}
+                                ref={nameInputRef}
+                            />
+                        </TextFieldWrapper>
+                    </CategoryRow>
+                )}
+            </ContentBody>
+            <FloatingFooter>
+                <Button onClick={handleImport} disabled={isImportDisabled()}>
+                    {isSaving ? <Typography variant="progress">Importing...</Typography> : "Import Type"}
+                </Button>
+            </FloatingFooter>
+        </StickyFooterContainer>
+    );
+}
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/SchemaRecordEditor.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/SchemaRecordEditor.tsx
new file mode 100644
index 00000000000..0c34e27ca99
--- /dev/null
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/ContextBasedTypeEditor/SchemaRecordEditor.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, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Member, Type } from '@wso2/ballerina-core';
+import { Codicon } from '@wso2/ui-toolkit';
+import { Button } from '@wso2/ui-toolkit';
+import styled from '@emotion/styled';
+import { FieldEditor } from '../FieldEditor';
+
+
+const Header = styled.div`
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding: 8px 0px;
+    `;
+
+const SectionTitle = styled.div`
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--vscode-editor-foreground);
+        margin-bottom: 4px;
+    `;
+
+interface SchemaRecordEditorProps {
+    type: Type;
+    isAnonymous: boolean;
+    onChange: (type: Type) => void;
+    isGraphql?: boolean;
+    newType?: boolean;
+    onValidationError: (isError: boolean) => void;
+}
+
+interface FieldValidationError {
+    identifier: boolean;
+    type: boolean;
+}
+
+export const SchemaRecordEditor = forwardRef<{ addMember: () => void }, SchemaRecordEditorProps>((props, ref) => {
+    const { type, isAnonymous = false, onChange, isGraphql, onValidationError, newType } = props;
+
+    const [validationErrors, setValidationErrors] = useState<FieldValidationError[]>([{ identifier: false, type: false }]);
+    const [hasRecordError, setHasRecordError] = useState(false);
+
+
+    const handleFieldValidation = (functionIndex: number, isIdentifier: boolean, hasError: boolean) => {
+        setValidationErrors(prev => {
+            const newErrors = [...prev];
+            if (!newErrors[functionIndex]) {
+                newErrors[functionIndex] = { identifier: false, type: false };
+            }
+            if (isIdentifier) {
+                newErrors[functionIndex] = { ...newErrors[functionIndex], identifier: hasError };
+            } else {
+                newErrors[functionIndex] = { ...newErrors[functionIndex], type: hasError };
+            }
+
+            return newErrors;
+        });
+    };
+
+    // Handle nested record validation
+    const handleNestedRecordError = (hasError: boolean) => {
+        setHasRecordError(hasError);
+    };
+
+    useEffect(() => {
+        // Check if any field has validation errors OR if there's a nested record error
+        const hasAnyFieldError = validationErrors.some(error => error && (error.identifier || error.type));
+        const hasAnyError = hasAnyFieldError || hasRecordError;
+        onValidationError?.(hasAnyError);
+    }, [validationErrors, hasRecordError, onValidationError]);
+
+    const addMember = () => {
+        const memberCount = Object.keys(type.members).length;
+        const newMemberName = `name${memberCount + 1}`;
+        const newMember: Member = {
+            name: newMemberName,
+            type: "string",
+            kind: "FIELD",
+            refs: [],
+            docs: ""
+        }
+        onChange({ ...type, members: [...type.members, newMember] });
+    }
+
+    useImperativeHandle(ref, () => ({
+        addMember
+    }));
+
+    const handleMemberChange = (index: number) => (member: Member) => {
+        const newMembers = [...type.members];
+        newMembers[index] = member;
+        onChange({ ...type, members: newMembers });
+    }
+
+    const handleDeleteMember = (index: number) => () => {
+        const newMembers = type.members.filter((_, i) => i !== index);
+        onChange({ ...type, members: newMembers });
+    }
+
+    return (
+        <div className="record-editor">
+            {!isAnonymous &&
+                <Header>
+                    <SectionTitle>{isGraphql ?  (newType? 'Input Object Fields' : 'Object Fields'): 'Fields'}</SectionTitle>
+                    <div style={{ display: 'flex', gap: '8px' }} data-testid="add-field-button">
+                        <Button appearance="icon" onClick={addMember} tooltip='Add Field'><Codicon name="add" /></Button>
+                    </div>
+                </Header>
+            }
+            {type.members.map((member, index) => (
+                <>
+                    <FieldEditor
+                        key={index}
+                        member={member}
+                        onChange={handleMemberChange(index)}
+                        onDelete={handleDeleteMember(index)}
+                        type={type}
+                        onValidationError={onValidationError}
+                        onFieldValidation={(isIdentifier, hasError) => handleFieldValidation(index, isIdentifier, hasError)}
+                        onRecordValidation={handleNestedRecordError}
+                    />
+                </>
+            ))}
+        </div >
+    );
+});
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/FieldEditor.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/FieldEditor.tsx
index 8a2bd17ab27..84a0d65be60 100644
--- a/workspaces/ballerina/type-editor/src/TypeEditor/FieldEditor.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/FieldEditor.tsx
@@ -20,7 +20,7 @@ import React, { useRef, useState } from 'react';
 import { Imports, Member, Type } from '@wso2/ballerina-core';
 import { Button, CheckBox, Codicon, TextField } from '@wso2/ui-toolkit';
 import styled from '@emotion/styled';
-import { typeToSource, defaultAnonymousRecordType } from './TypeUtil';
+import { typeToSource, defaultAnonymousRecordType, isGraphQLScalarType } from './TypeUtil';
 import { RecordEditor } from './RecordEditor';
 import { AdvancedOptions } from './AdvancedOptions';
 import { IdentifierField } from './IdentifierField';
@@ -35,6 +35,7 @@ interface FieldEditorProps {
     onFieldValidation: (isIdentifier: boolean, hasError: boolean) => void;
     onRecordValidation: (hasError: boolean) => void;
     onDelete: () => void;
+    isGraphql?: boolean;
 }
 
 const ButtonDeactivated = styled.div<{}>`
@@ -64,8 +65,15 @@ const CollapsibleSection = styled.div`
     border-radius: 4px;
 `;
 
+const CheckBoxGroup = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-left: 5px;
+`;
+
 export const FieldEditor: React.FC<FieldEditorProps> = (props) => {
-    const { member, onChange, onDelete, type, onValidationError, onFieldValidation, onRecordValidation } = props;
+    const { member, onChange, onDelete, type, onValidationError, onFieldValidation, onRecordValidation, isGraphql } = props;
     const [panelOpened, setPanelOpened] = useState<boolean>(false);
     const recordEditorRef = useRef<{ addMember: () => void }>(null);
     const currentImports = useRef<Imports | undefined>();
@@ -140,7 +148,7 @@ export const FieldEditor: React.FC<FieldEditorProps> = (props) => {
 
     return (
         <>
-            <div style={{ display: 'flex', gap: '8px', alignItems: 'start' }}>
+            <div style={{ display: 'flex', gap: '8px', alignItems: 'start', justifyContent: 'space-between' }}>
                 <ExpandIconButton
                     data-testid={`field-expand-btn`}
                     appearance="icon"
@@ -148,21 +156,25 @@ export const FieldEditor: React.FC<FieldEditorProps> = (props) => {
                 >
                     <Codicon name={panelOpened ? "chevron-down" : "chevron-right"} />
                 </ExpandIconButton>
-                <IdentifierField
-                    value={member.name}
-                    onChange={handleNameChange}
-                    rootType={type}
-                    onValidationError={(hasError) => onFieldValidation(true, hasError)}
-                />
-                <TypeField
-                    type={member.type}
-                    memberName={typeToSource(member.type)}
-                    onChange={handleTypeChange}
-                    onUpdateImports={handleUpdateImports}
-                    onValidationError={(hasError) => onFieldValidation(false, hasError)}
-                    rootType={type}
-                    isAnonymousRecord={isRecord(member.type)}
-                />
+                <div style={{ width: '100%' }}>
+                    <IdentifierField
+                        value={member.name}
+                        onChange={handleNameChange}
+                        rootType={type}
+                        onValidationError={(hasError) => onFieldValidation(true, hasError)}
+                    />
+                </div>
+                <div style={{ width: '100%' }}>
+                    <TypeField
+                        type={member.type}
+                        memberName={typeToSource(member.type)}
+                        onChange={handleTypeChange}
+                        onUpdateImports={handleUpdateImports}
+                        onValidationError={(hasError) => onFieldValidation(false, hasError)}
+                        rootType={type}
+                        isAnonymousRecord={isRecord(member.type)}
+                    />
+                </div>
                 <div style={{ display: 'flex', gap: '1px' }}>
                     {isRecord(member.type) &&
                         <Button appearance="icon" onClick={() => recordEditorRef.current?.addMember()} tooltip='Add Field'>
@@ -184,19 +196,31 @@ 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 
-                                }
-                            );
-                        }}
-                    />
+                    <CheckBoxGroup>
+                        <CheckBox
+                            label="Readonly"
+                            checked={member.readonly}
+                            onChange={(checked: boolean) => {
+                                onChange({
+                                    ...member,
+                                    readonly: checked
+                                    }
+                                );
+                            }}
+                        />
+                        {isGraphql && isGraphQLScalarType(member.type) &&
+                            <CheckBox
+                                label="ID Type"
+                                checked={member.isGraphqlId || false}
+                                onChange={(checked: boolean) => {
+                                    onChange({
+                                        ...member,
+                                        isGraphqlId: checked
+                                    });
+                                }}
+                            />
+                        }
+                    </CheckBoxGroup>
                 </CollapsibleSection>
             )}
             {isRecord(member.type) && typeof member.type !== 'string' && (
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/RecordEditor.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/RecordEditor.tsx
index 96ee0b0b8bf..9cd1f46e9f2 100644
--- a/workspaces/ballerina/type-editor/src/TypeEditor/RecordEditor.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/RecordEditor.tsx
@@ -129,6 +129,7 @@ export const RecordEditor = forwardRef<{ addMember: () => void }, RecordEditorPr
             {type.members.map((member, index) => (
                 <>
                     <FieldEditor
+                        isGraphql={isGraphql}
                         key={index}
                         member={member}
                         onChange={handleMemberChange(index)}
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/Tabs/TypeCreatorTab.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/Tabs/TypeCreatorTab.tsx
index c09f6538a6c..c18132123d3 100644
--- a/workspaces/ballerina/type-editor/src/TypeEditor/Tabs/TypeCreatorTab.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/Tabs/TypeCreatorTab.tsx
@@ -193,6 +193,9 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
                 default:
                     setSelectedTypeKind(TypeKind.RECORD);
             }
+
+            // Ensure tempName is initialized when editing a new type (prevents focus loss due to replacing the main type on each keystroke)
+            setTempName(editingType.name);
         }
 
         setIsNewType(newType);
@@ -263,7 +266,7 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
         if (isGraphql) {
             // For GraphQL mode, filter options based on current type
             if (initialTypeKind === "RECORD") {
-                return [TypeKind.RECORD, TypeKind.ENUM, TypeKind.UNION];
+                return [TypeKind.RECORD, TypeKind.ENUM];
             } else if (initialTypeKind === "CLASS") {
                 return [TypeKind.CLASS, TypeKind.ENUM, TypeKind.UNION];
             }
@@ -338,9 +341,10 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
         await validateTypeName(e.target.value);
     }
 
-    const validateTypeName = useCallback(debounce(async (value: string) => {
+    // Core validation logic - shared between debounced and immediate validation
+    const performValidation = async (value: string): Promise<{ isValid: boolean; error: string }> => {
         if (saveButtonClicked.current) {
-            return;
+            return { isValid: isTypeNameValid, error: nameError };
         }
 
         const projectUri = await rpcClient.getVisualizerLocation().then((res) => res.projectUri);
@@ -392,15 +396,26 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
             }
         });
 
+        const hasErrors = response && response.diagnostics && response.diagnostics.length > 0;
+        const errorMessage = hasErrors ? response.diagnostics[0].message : "";
 
-        if (response && response.diagnostics && response.diagnostics.length > 0) {
-            setNameError(response.diagnostics[0].message);
-            setIsTypeNameValid(false);
-        } else {
-            setNameError("");
-            setIsTypeNameValid(true);
-        }
-    }, 250), [rpcClient, type]);
+        return {
+            isValid: !hasErrors,
+            error: errorMessage
+        };
+    };
+
+    // Debounced version for real-time validation (updates UI state)
+    const validateTypeName = useCallback(debounce(async (value: string) => {
+        const result = await performValidation(value);
+        setNameError(result.error);
+        setIsTypeNameValid(result.isValid);
+    }, 250), [performValidation]);
+
+    // Immediate version for save validation (returns result without updating UI)
+    const validateTypeNameSync = async (value: string): Promise<{ isValid: boolean; error: string }> => {
+        return await performValidation(value);
+    };
 
     const handleOnTypeNameUpdate = (value: string) => {
         setTempName(value);
@@ -408,10 +423,55 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
     }
 
     const handleOnTypeNameChange = (value: string) => {
+        if (isNewType) {
+            setTempName(value);
+            validateTypeName(value);
+            return;
+        }
         handleSetType({ ...type, name: value });
         validateTypeName(value);
     }
 
+    const commitNewTypeName = () => {
+        if (!isNewType) {
+            return;
+        }
+        if (tempName && tempName !== type.name) {
+            handleSetType({ ...type, name: tempName } as Type);
+        }
+    };
+
+    // Function to validate before saving to verify names created in nested forms
+    const handleSaveWithValidation = async (typeToSave: Type) => {
+
+        try {
+            setIsSaving(true);
+
+            // Perform immediate validation
+            const validationResult = await validateTypeNameSync(typeToSave.name);
+
+            // Update the UI state with validation results
+            if (validationResult.isValid) {
+                setNameError("");
+                setIsTypeNameValid(true);
+                // Proceed with save
+                await onTypeSave(typeToSave);
+            } else {
+                setNameError(validationResult.error);
+                setIsTypeNameValid(false);
+                // Don't save if validation fails
+            }
+        } catch (error) {
+            console.error('Error during validation', error);
+            // If the previous validation was successful, attempt to save
+            if (isTypeNameValid && !onValidationError) {
+                await onTypeSave(typeToSave);
+            }
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
     const renderEditor = () => {
         if (!type) {
             return <ProgressRing />;
@@ -442,13 +502,13 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
             case TypeKind.UNION:
                 return (
                     <>
-                    <UnionEditor
-                        type={type}
-                        onChange={handleSetType}
-                        rpcClient={rpcClient}
-                        onValidationError={handleValidationError}
-                    />
-                    <AdvancedOptions type={type} onChange={handleSetType} />
+                        <UnionEditor
+                            type={type}
+                            onChange={handleSetType}
+                            rpcClient={rpcClient}
+                            onValidationError={handleValidationError}
+                        />
+                        <AdvancedOptions type={type} onChange={handleSetType} />
                     </>
                 );
             case TypeKind.CLASS:
@@ -463,12 +523,12 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
             case TypeKind.ARRAY:
                 return (
                     <>
-                    <ArrayEditor
-                        type={type}
-                        onChange={handleSetType}
-                        onValidationError={handleValidationError}
-                    />
-                    <AdvancedOptions type={type} onChange={handleSetType} />
+                        <ArrayEditor
+                            type={type}
+                            onChange={handleSetType}
+                            onValidationError={handleValidationError}
+                        />
+                        <AdvancedOptions type={type} onChange={handleSetType} />
                     </>
                 );
             default:
@@ -557,13 +617,18 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
                     <TextFieldWrapper>
                         <TextField
                             label="Name"
-                            value={type.name}
+                            value={tempName}
                             errorMsg={nameError}
-                            onBlur={handleOnBlur}
+                            onBlur={(e) => {
+                                // commit local name into type on blur and validate
+                                commitNewTypeName();
+                                handleOnBlur(e);
+                            }}
                             onChange={(e) => handleOnTypeNameChange(e.target.value)}
                             onKeyDown={(e) => {
                                 if (e.key === 'Enter') {
-                                    handleOnTypeNameChange((e.target as HTMLInputElement).value);
+                                    // commit on Enter
+                                    commitNewTypeName();
                                 }
                             }}
                             onFocus={(e) => { e.target.select(); validateTypeName(e.target.value) }}
@@ -573,13 +638,17 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
                 )}
             </CategoryRow>
 
-           <div style={{overflow: 'auto', maxHeight: '70vh'}}>
-             {renderEditor()}
-           </div>
+            <div style={{ overflow: 'auto', maxHeight: '70vh' }}>
+                {renderEditor()}
+            </div>
             <Footer>
                 <Button
                     data-testid="type-create-save"
-                    onClick={() => onTypeSave(type)}
+                    onClick={() => {
+                        // Ensure Save uses the latest tempName for new types without causing extra re-renders
+                        const typeToSave = isNewType ? { ...type, name: tempName } : type;
+                        handleSaveWithValidation(typeToSave);
+                    }}
                     disabled={onValidationError || !isTypeNameValid || isEditing || isSaving}>
                     {isSaving ? <Typography variant="progress">Saving...</Typography> : "Save"}
                 </Button>
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/TypeEditor.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/TypeEditor.tsx
index a629a20e35b..26b19a26761 100644
--- a/workspaces/ballerina/type-editor/src/TypeEditor/TypeEditor.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/TypeEditor.tsx
@@ -64,7 +64,9 @@ interface TypeEditorProps {
 export function TypeEditor(props: TypeEditorProps) {
     const { isGraphql, newType, isPopupTypeForm } = props;
 
-    let initialTypeKind = props.type?.codedata?.node ?? "RECORD" as TypeNodeKind;
+    const [initialTypeKind] = useState<TypeNodeKind>(() =>
+        (props.type?.codedata?.node ?? "RECORD") as TypeNodeKind
+    );
     const [isSaving, setIsSaving] = useState(false);
 
     const type: Type = (() => {
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/TypeUtil.ts b/workspaces/ballerina/type-editor/src/TypeEditor/TypeUtil.ts
index 62b38cfe55c..578329ebe8c 100644
--- a/workspaces/ballerina/type-editor/src/TypeEditor/TypeUtil.ts
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/TypeUtil.ts
@@ -176,3 +176,56 @@ export const isValidBallerinaIdentifier = (name: string): boolean => {
     const regex = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
     return name.length > 0 && regex.test(name);
 };
+
+export const isGraphQLScalarType = (type: string | Type): boolean => {
+    // If type is an object (complex type), it's not a scalar
+    if (typeof type !== 'string') {
+        return false;
+    }
+
+    // List of Ballerina types that can be GraphQL scalars
+    const scalarTypes = [
+        'string',
+        'int',
+        'float',
+        'decimal',
+    ];
+
+    const isScalarOrArrayOfScalar = (t: string): boolean => {
+        let cleanType = t.trim().replace(/\?$/, '');
+
+        if (cleanType.endsWith('[]')) {
+            const baseType = cleanType.slice(0, -2).trim();
+            return isScalarOrArrayOfScalar(baseType);
+        }
+
+        if (cleanType.startsWith('(') && cleanType.endsWith(')')) {
+            cleanType = cleanType.slice(1, -1).trim();
+            if (cleanType.includes('|')) {
+                const unionParts = cleanType.split('|').map(part => part.trim());
+                return unionParts.every(part => isScalarOrArrayOfScalar(part));
+            }
+        }
+
+        return scalarTypes.includes(cleanType.toLowerCase());
+    };
+
+    let cleanType = type.trim().replace(/\?$/, '');
+
+    if (cleanType.endsWith('[]') && cleanType.includes('(') && cleanType.includes('|')) {
+        const baseType = cleanType.slice(0, -2).trim();
+        return isScalarOrArrayOfScalar(baseType);
+    }
+
+    if (cleanType.includes('|')) {
+        const unionParts = cleanType.split('|').map(part => part.trim());
+        return unionParts.every(part => isScalarOrArrayOfScalar(part));
+    }
+
+    if (cleanType.endsWith('[]')) {
+        const baseType = cleanType.slice(0, -2).trim();
+        return isScalarOrArrayOfScalar(baseType);
+    }
+
+    return isScalarOrArrayOfScalar(cleanType);
+};
diff --git a/workspaces/ballerina/type-editor/src/TypeHelper/ExpandableList.tsx b/workspaces/ballerina/type-editor/src/TypeHelper/ExpandableList.tsx
index b84e7a0ed86..284757d94e9 100644
--- a/workspaces/ballerina/type-editor/src/TypeHelper/ExpandableList.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeHelper/ExpandableList.tsx
@@ -61,7 +61,7 @@ interface ExpandableListSectionProps {
 const Section = ({ children, title, level = 0, sx }: ExpandableListSectionProps) => {
     return (
         <ExpandableListSection style={{ ...sx, display: 'flex', flexDirection: 'column' }}>
-            <ExpandableListSectionTitle>{title}</ExpandableListSectionTitle>
+            <ExpandableListSectionTitle style={{ marginLeft: '8px'}}>{title}</ExpandableListSectionTitle>
             {children}
         </ExpandableListSection>
     );
diff --git a/workspaces/ballerina/type-editor/src/TypeHelper/FooterButtons.tsx b/workspaces/ballerina/type-editor/src/TypeHelper/FooterButtons.tsx
new file mode 100644
index 00000000000..6452b276b8d
--- /dev/null
+++ b/workspaces/ballerina/type-editor/src/TypeHelper/FooterButtons.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 React from "react";
+import { Icon, ThemeColors } from "@wso2/ui-toolkit";
+import styled from '@emotion/styled';
+
+const FooterContainer = styled.div`
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 8px 12px;
+    margin-inline: 4px;
+    transition: background-color 0.2s ease;
+    border-radius: 6px;
+    height: 36px;
+    cursor: pointer;
+    
+    &:hover {
+        background-color: ${ThemeColors.SURFACE_DIM_2};
+        outline: 1px solid var(--dropdown-border);
+        outline-offset: -1px;
+    }
+`;
+
+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 = {
+    title: string;
+    onClick: () => void;
+    startIcon?: string;
+    sx?: React.CSSProperties;
+    disabled?:boolean;
+}
+
+const FooterButtons = (props: FooterButtonProps) => {
+    const { onClick, startIcon, title, sx } = props;
+    return (
+        <FooterContainer style={sx} onClick={onClick}>
+            <InvisibleButton 
+            disabled={props.disabled}
+            onClick={(e) => {
+                e.stopPropagation();
+                onClick?.();
+            }}>
+                <Icon name={startIcon ||"bi-plus"} sx={{color: ThemeColors.PRIMARY, fontSize: "16px"}}/>
+                <span style={{color: ThemeColors.PRIMARY, marginLeft: "10px" }}>{title}</span>
+            </InvisibleButton>
+        </FooterContainer>
+    )
+}
+
+export default FooterButtons;
diff --git a/workspaces/ballerina/type-editor/src/TypeHelper/TypeBrowser.tsx b/workspaces/ballerina/type-editor/src/TypeHelper/TypeBrowser.tsx
index 79ad1de1e8a..b2fac87af9a 100644
--- a/workspaces/ballerina/type-editor/src/TypeHelper/TypeBrowser.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeHelper/TypeBrowser.tsx
@@ -17,20 +17,11 @@
  */
 
 import React, { RefObject, useEffect, useRef, useState } from 'react';
-import { Codicon, getIcon, HelperPane } from '@wso2/ui-toolkit';
-import styled from '@emotion/styled';
+import { BrowserEmptyMessage, BrowserItemContainer, BrowserItemLabel, BrowserLoaderContainer, BrowserSectionBody, BrowserSectionContainer, HelperPane, Typography, getIcon } from '@wso2/ui-toolkit';
 
 import { TypeHelperCategory, TypeHelperItem } from '.';
 import { EMPTY_SEARCH_RESULT_MSG, EMPTY_SEARCH_TEXT_MSG } from './constant';
 
-const SearchMsg = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    color: var(--vscode-descriptionForeground)
-`;
-
 type TypeBrowserProps = {
     typeBrowserRef: RefObject<HTMLDivElement>;
     loadingTypeBrowser: boolean;
@@ -76,51 +67,71 @@ export const TypeBrowser = (props: TypeBrowserProps) => {
             title="Type Browser"
             titleSx={{ fontFamily: 'GilmerRegular' }}
         >
-            {typeBrowserTypes?.length > 0 ? (
-                typeBrowserTypes.map((category) => (
-                    <HelperPane.Section
-                        key={category.category}
-                        title={category.category}
-                        titleSx={{ fontFamily: 'GilmerMedium' }}
-                        {...(category.items?.length > 0 &&
-                            category.subCategory?.length === 0 && {
-                                columns: 3
-                            })}
-                    >
-                        {category.items?.map((item) => (
-                            <HelperPane.CompletionItem
-                                key={`${category.category}-${item.name}`}
-                                label={item.name}
-                                getIcon={() => getIcon(item.type)}
-                                onClick={() => onTypeItemClick(item)}
-                            />
-                        ))}
-                        {category.subCategory?.map((subCategory) => (
-                            <HelperPane.LibraryBrowserSubSection
-                                key={subCategory.category}
-                                title={subCategory.category}
-                                columns={3}
-                            >
-                                {subCategory.items?.map((item) => (
-                                    <HelperPane.CompletionItem
-                                        key={`${subCategory.category}-${item.name}`}
-                                        label={item.name}
-                                        getIcon={() => getIcon(item.type)}
-                                        onClick={() => onTypeItemClick(item)}
-                                    />
+            {loadingTypeBrowser ? (
+                    <BrowserLoaderContainer>
+                        <Typography variant="body3">Loading...</Typography>
+                    </BrowserLoaderContainer>
+                ) : typeBrowserTypes?.length > 0 ? (
+                    typeBrowserTypes
+                        .filter((category) => 
+                            (category.items && category.items.length > 0) || 
+                            (category.subCategory && category.subCategory.some(sub => sub.items && sub.items.length > 0))
+                        )
+                        .map((category) => (
+                        <BrowserSectionContainer key={category.category}>
+                            <Typography variant="h2" sx={{ margin: 0, fontFamily: 'GilmerMedium', fontSize: '16px', fontWeight: '600' }}>
+                                {category.category}
+                            </Typography>
+                            <BrowserSectionBody columns={category.items?.length > 0 && category.subCategory?.length === 0 ? 3 : 1}>
+                                {category.items?.length > 0 ? (
+                                    category.items.map((item) => (
+                                        <BrowserItemContainer
+                                            key={`${category.category}-${item.name}`}
+                                            onClick={() => onTypeItemClick(item)}
+                                        >
+                                            {getIcon(item.type)}
+                                            <BrowserItemLabel>{item.name}</BrowserItemLabel>
+                                        </BrowserItemContainer>
+                                    ))
+                                ) : (
+                                    !category.subCategory?.length && (
+                                        <BrowserEmptyMessage>
+                                            No items found
+                                        </BrowserEmptyMessage>
+                                    )
+                                )}
+                                {category.subCategory?.filter(sub => sub.items && sub.items.length > 0).map((subCategory) => (
+                                    <div key={`${category.category}-${subCategory.category}`} style={{ marginTop: '12px' }}>
+                                        <Typography variant="body3" sx={{ fontStyle: "italic", marginBottom: '8px' }}>
+                                            {subCategory.category}
+                                        </Typography>
+                                        <BrowserSectionBody columns={3}>
+                                            {subCategory.items?.length > 0 ? (
+                                                subCategory.items.map((item) => (
+                                                    <BrowserItemContainer
+                                                        key={`${subCategory.category}-${item.name}`}
+                                                        onClick={() => onTypeItemClick(item)}
+                                                    >
+                                                        {getIcon(item.type)}
+                                                        <BrowserItemLabel>{item.name}</BrowserItemLabel>
+                                                    </BrowserItemContainer>
+                                                ))
+                                            ) : (
+                                                <BrowserEmptyMessage>
+                                                    No items found
+                                                </BrowserEmptyMessage>
+                                            )}
+                                        </BrowserSectionBody>
+                                    </div>
                                 ))}
-                            </HelperPane.LibraryBrowserSubSection>
-                        ))}
-                    </HelperPane.Section>
-                ))
-            ) : (
-                <SearchMsg>
-                    <Codicon name='search' sx={{ marginRight: '10px' }} />
-                    <p>
+                            </BrowserSectionBody>
+                        </BrowserSectionContainer>
+                    ))
+                ) : (
+                    <BrowserEmptyMessage style={{ textAlign: 'center', padding: '20px' }}>
                         {searchValue !== "" ? EMPTY_SEARCH_RESULT_MSG : EMPTY_SEARCH_TEXT_MSG}
-                    </p>
-                </SearchMsg>
-            )}
+                    </BrowserEmptyMessage>
+                )}
         </HelperPane.LibraryBrowser>
     );
 };
diff --git a/workspaces/ballerina/type-editor/src/TypeHelper/TypeHelper.tsx b/workspaces/ballerina/type-editor/src/TypeHelper/TypeHelper.tsx
index aa50bec881f..1924c533c9f 100644
--- a/workspaces/ballerina/type-editor/src/TypeHelper/TypeHelper.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeHelper/TypeHelper.tsx
@@ -22,10 +22,10 @@ import {
     Codicon,
     Divider,
     FormExpressionEditorRef,
-    getIcon,
     HelperPane,
     HelperPaneCustom,
     HelperPaneHeight,
+    Icon,
     SearchBox,
     ThemeColors
 } from '@wso2/ui-toolkit';
@@ -36,6 +36,7 @@ import { getTypeCreateText, isTypePanelOpen } from './utils';
 import ExpandableList from './ExpandableList';
 import { ScrollableContainer, SlidingPane, SlidingPaneNavContainer, SlidingWindow } from '@wso2/ui-toolkit/lib/components/ExpressionEditor/components/Common/SlidingPane';
 import { EMPTY_SEARCH_RESULT_MSG } from './constant';
+import FooterButtons from './FooterButtons';
 
 /* Constants */
 const PANEL_TABS = {
@@ -307,13 +308,13 @@ export const TypeHelperComponent = (props: TypeHelperComponentProps) => {
                                                     level={0}
                                                 >
                                                     <div style={{ marginTop: '10px' }}>
-                                                        {category.items.map((item) => (
+                                                        {category.items.filter((item) => item.name !== "record").map((item) => (
                                                             <SlidingPaneNavContainer
                                                                 key={`${category.category}-${item.name}`}
                                                                 onClick={() => handleTypeItemClick(item)}
                                                             >
                                                                 <ExpandableList.Item>
-                                                                    {getIcon(item.type)}
+                                                                    <Icon name="bi-type" sx={{ fontSize: '16px' }} />
                                                                     <FunctionItemLabel>{item.name}</FunctionItemLabel>
                                                                 </ExpandableList.Item>
                                                             </SlidingPaneNavContainer>
@@ -350,7 +351,7 @@ export const TypeHelperComponent = (props: TypeHelperComponentProps) => {
                                                                             <ExpandableList.Item
                                                                                 key={`${subCategory.category}-${item.name}`}
                                                                             >
-                                                                                {getIcon(item.type)}
+                                                                                <Icon name="bi-type" sx={{ fontSize: '16px' }} />
                                                                                 <FunctionItemLabel>{item.name}</FunctionItemLabel>
                                                                             </ExpandableList.Item>
                                                                         </SlidingPaneNavContainer>
@@ -374,25 +375,22 @@ export const TypeHelperComponent = (props: TypeHelperComponentProps) => {
 
                             <Divider sx={{ margin: '0px' }} />
                             <div style={{
-                                marginTop: "auto",
+                                margin: '4px 0',
                                 display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'space-around',
-                                padding: '8px'
+                                flexDirection: 'column'
                             }}>
                                 {onTypeCreate && (
                                     <FooterButtons
                                         sx={{ display: 'flex', justifyContent: 'space-between' }}
-                                        startIcon='add'
                                         title={getTypeCreateText(currentType, referenceTypes, newTypeName)}
                                         onClick={() => onTypeCreate(newTypeName.current)}
                                     />
                                 )}
                                 <FooterButtons
                                     sx={{ display: 'flex', justifyContent: 'space-between' }}
-                                    startIcon='library'
                                     title="Open Type Browser"
                                     onClick={() => setIsTypeBrowserOpen(true)}
+                                    startIcon="bi-arrow-outward"
                                 />
                             </div>
                         </SlidingPane>
@@ -414,40 +412,40 @@ export const TypeHelperComponent = (props: TypeHelperComponentProps) => {
     );
 };
 
-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>
-    )
-}
+// 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 1eac8fdbf64..a4d843db9ea 100644
--- a/workspaces/ballerina/type-editor/src/TypeHelper/index.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeHelper/index.tsx
@@ -39,7 +39,7 @@ export type TypeHelperItem = {
     name: string;
     insertText: string;
     sortText?: string;
-    type: CompletionItemKind;
+    type?: CompletionItemKind;
     codedata?: CodeData;
     kind?: FunctionKind;
     labelDetails?: {
diff --git a/workspaces/ballerina/type-editor/src/TypeHelper/styles/HorizontalList.tsx b/workspaces/ballerina/type-editor/src/TypeHelper/styles/HorizontalList.tsx
index bd599aa568b..5f6630f7a6d 100644
--- a/workspaces/ballerina/type-editor/src/TypeHelper/styles/HorizontalList.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeHelper/styles/HorizontalList.tsx
@@ -27,9 +27,11 @@ export const HorizontalListContainer = styled.div`
 export const HorizontalListItem = styled.div`
     display: flex;
     width: 100%;
-    gap: 3px;
     justify-content: space-between;
     align-items: center;
+    gap: 12px;
+    padding-left: 8px;
+    padding-right: 10px;
 `;
 
 export const HorizontalListItemLeftContent = styled.div`
diff --git a/workspaces/ballerina/type-editor/src/index.tsx b/workspaces/ballerina/type-editor/src/index.tsx
index 3f2fbc6092d..10697e4669f 100644
--- a/workspaces/ballerina/type-editor/src/index.tsx
+++ b/workspaces/ballerina/type-editor/src/index.tsx
@@ -17,6 +17,7 @@
  */
 
 export { TypeEditor } from "./TypeEditor/TypeEditor";
+export { ContextTypeEditor } from "./TypeEditor/ContextBasedTypeEditor/ContextTypeEditor";
 export * from "./TypeEditor/Contexts/TypeEditorContext"
 export type { TypeHelperCategory, TypeHelperOperator, TypeHelperItem } from "./TypeHelper";
 export { TypeHelperComponent } from "./TypeHelper/TypeHelper";
diff --git a/workspaces/bi/bi-extension/CHANGELOG.md b/workspaces/bi/bi-extension/CHANGELOG.md
index 9a34550e2af..e3d7a48fe11 100644
--- a/workspaces/bi/bi-extension/CHANGELOG.md
+++ b/workspaces/bi/bi-extension/CHANGELOG.md
@@ -6,19 +6,46 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 ## [Unreleased]
 
+### Added
+
+- **Editor** — Added visual editing for mono-repositories with multiple Ballerina projects, along with support for "Natural expressions" in Ballerina 2201.13.0.
+
+## [1.4.0](https://github.com/wso2/vscode-extensions/compare/ballerina-integrator-1.3.2...ballerina-integrator-1.4.0) - 2025-11-05
+
+### Added
+
+- **Service & Data Handling** — Introduced MCP AI and Solace Event integrations, redesigned Service and Event Integration flows with AI-powered payload generation, and introduced an LLM-based Data Mapper.
+- **GraphQL Designer** — Added schema-based service generation, GraphQL-based type suggestions, `graphql:ID` annotation support, and documentation on GraphQL fields.
+- **Expression Editor** — Enhanced the expression editor with improved syntax highlighting. The expression helper now offers distinct modes for both text and expression inputs.
+
+### Changed
+
+- **AI & Copilot** — Improved AI code generation formatting, step handling, and system prompts for better response structure.
+- **Service Designer** — Revamped the view with more organized listener and service properties, enhanced with readable listener names, and refactored metadata display.
+- **Data Mapper** — Improved breadcrumb labels and refactored preview behavior for output-side arrays.
+- **UI & UX** — Enhanced the Helper Pane UI and navigation, and refactored the Resource form styles. Improved the Type Editor with type import capability and automatic generation of sample JSON for payload types.
+
+### Fixed
+
+- **Data Mapper** — Corrected issues with mappings generated for output header ports.
+- **Service Designer** — Resolved an infinite re-render issue and fixed bugs in the API designer and MCP tool editing.
+- **Expression Editor** — Fixed issues with constrained language in Windows PowerShell, delete key behavior, and text selection.
+- **UI & UX** — Addressed UI glitches, including a popup movement issue when dragging the terminal, and fixed `undo/redo` stack reset conditions.
+- **GraphQL** — Removed Union Types from GraphQL Input Types.
+- **AI & Copilot** — Fixed invalid markdown characters in the chat window, file creation issues, and state management in the chat window. Resolved a bug where the reusable model provider form was not displaying correctly.
 
 ## [1.3.2](https://github.com/wso2/vscode-extensions/compare/ballerina-integrator-1.3.1...ballerina-integrator-1.3.2) - 2025-10-26
 
 ### Changed
 
-- **Data Mapper** Enable reset and refresh options.
+- **Data Mapper** — Enabled reset and refresh options.
 
 ### Fixed
 
-- **Editor** Allow artifact creation even when corresponding source files are missing.
-- **Data Mapper** — Add support for mappings with built-in Ballerina sub-types (e.g., int:Signed32), fix creation using types from sub-modules, enable expression-bar completions for reusable mappers, and correct link rendering for optional field access.
-- **Type Browser** — Improve type filtering based on user queries.
-- **Service Class Designer** — Enable connection generation for clients created from WSDL files.
+- **Editor** — Allowed artifact creation even when corresponding source files are missing.
+- **Data Mapper** — Added support for mappings with built-in Ballerina sub-types (e.g., `int:Signed32`), fixed creation using types from sub-modules, enabled expression-bar completions for reusable mappers, and corrected link rendering for optional field access.
+- **Type Browser** — Improved type filtering based on user queries.
+- **Service Class Designer** — Enabled connection generation for clients created from WSDL files.
 
 
 ## [1.3.1](https://github.com/wso2/vscode-extensions/compare/ballerina-integrator-1.3.0...ballerina-integrator-1.3.1) - 2025-10-15
diff --git a/workspaces/bi/bi-extension/assets/dark-bi-mcp.svg b/workspaces/bi/bi-extension/assets/dark-bi-mcp.svg
new file mode 100644
index 00000000000..46d5bd6508f
--- /dev/null
+++ b/workspaces/bi/bi-extension/assets/dark-bi-mcp.svg
@@ -0,0 +1,22 @@
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT 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="22.59" height="24" viewBox="0 0 16 17">
+    <path fill="#fff" fill-rule="evenodd"
+        d="m14.557 8.468l-.055.054l-5.804 5.691a.183.183 0 0 0-.003.259l.003.003l1.192 1.17a.55.55 0 0 1 .011.776l-.01.01a.575.575 0 0 1-.803 0l-1.192-1.168a1.28 1.28 0 0 1 0-1.836l5.805-5.692a1.647 1.647 0 0 0 .031-2.328l-.031-.032l-.034-.032a1.725 1.725 0 0 0-2.405-.002l-4.781 4.69h-.002l-.065.065a.575.575 0 0 1-.803 0a.55.55 0 0 1-.01-.776l.01-.01l4.849-4.756c.65-.636.663-1.678.027-2.329l-.029-.03a1.725 1.725 0 0 0-2.407 0L1.635 8.489a.575.575 0 0 1-.802 0a.55.55 0 0 1-.011-.776l.011-.01L7.25 1.407a2.875 2.875 0 0 1 4.01 0c.63.613.929 1.49.803 2.36c.88-.125 1.77.166 2.406.787l.034.033a2.743 2.743 0 0 1 .053 3.88m-1.691-1.553a.55.55 0 0 0 .01-.776l-.01-.01a.575.575 0 0 0-.803 0l-4.746 4.654a1.725 1.725 0 0 1-2.407 0a1.647 1.647 0 0 1 0-2.36l4.747-4.655a.55.55 0 0 0 .011-.776l-.011-.01a.575.575 0 0 0-.803 0L4.108 7.635a2.743 2.743 0 0 0 0 3.933a2.876 2.876 0 0 0 4.011 0z"
+        clip-rule="evenodd" />
+</svg>
diff --git a/workspaces/bi/bi-extension/assets/dark-bi-solace.svg b/workspaces/bi/bi-extension/assets/dark-bi-solace.svg
new file mode 100644
index 00000000000..b7f781d4a20
--- /dev/null
+++ b/workspaces/bi/bi-extension/assets/dark-bi-solace.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1800" height="1800" viewBox="0 0 1800 1800">
+<g transform="translate(900, 900)">
+<g transform="translate(-900, -250)">
+<path d="M0 0 C0.79912811 -0.00067474 1.59825623 -0.00134949 2.42160034 -0.00204468 C36.6019933 0.04367103 76.40389152 6.10617789 101.8359375 31.18359375 C120.44122593 51.3731753 122.01476826 79.08044023 122.03271484 105.13452148 C122.03739616 106.68333578 122.04254183 108.23214873 122.04811096 109.78096008 C122.05929219 113.08799036 122.06777311 116.39501216 122.07423019 119.70205498 C122.08500342 124.93454626 122.10526663 130.16697507 122.12734985 135.39942932 C122.18898096 150.26845471 122.24338135 165.137473 122.27636719 180.0065918 C122.29471129 188.24011593 122.32362939 196.47353187 122.3643719 204.70697647 C122.38541555 209.0553492 122.40089574 213.40358592 122.40317917 217.75201225 C122.40532609 221.83404534 122.42119956 225.91579351 122.44756889 229.99773979 C122.45475696 231.49328032 122.45686523 232.98885539 122.45346642 234.48440933 C122.44956257 236.52884637 122.46580693 238.57329206 122.48300171 240.61766052 C122.48796693 242.33175692 122.48796693 242.33175692 122.49303246 244.08048153 C123.02721665 248.51307455 124.63811829 251.82987656 127.5625 255.1875 C131.18636119 256.8525173 134.22113099 256.54447715 137.875 255.25 C141.09742078 253.15667549 144.00193684 250.79718331 146.875 248.25 C149.73698697 250.96266591 151.98432246 253.69168017 154.125 257 C154.64578125 257.79921875 155.1665625 258.5984375 155.703125 259.421875 C156.28320312 260.32679688 156.28320312 260.32679688 156.875 261.25 C150.75157663 275.51627358 130.57300251 286.71188285 116.875 292.25 C99.16940457 298.29104611 77.93815442 299.99027615 60.58984375 291.8515625 C47.26504214 283.99088817 41.7327283 272.72782737 37.875 258.25 C34.95275678 257.91849995 34.95275678 257.91849995 33.54296875 259.4296875 C33.05441406 259.98914063 32.56585937 260.54859375 32.0625 261.125 C9.64708226 284.38451297 -25.54360609 296.46013764 -57.19140625 297.30517578 C-76.87420066 297.41949504 -96.87729112 289.32792525 -111.01171875 275.62109375 C-125.70277978 259.13777759 -126.26338802 239.23704164 -125.125 218.25 C-122.97688347 199.2048431 -110.83761373 183.22680908 -96.27734375 171.5859375 C-91.10651695 167.75427154 -85.72368037 164.41313109 -80.125 161.25 C-79.526875 160.90646484 -78.92875 160.56292969 -78.3125 160.20898438 C-49.24617667 143.64723556 -16.75253602 133.18850966 15 123.0625 C15.91274689 122.77006409 16.82549377 122.47762817 17.76589966 122.17633057 C20.3651927 121.34614146 22.96710505 120.52485271 25.5703125 119.70703125 C26.35124771 119.45761276 27.13218292 119.20819427 27.93678284 118.95121765 C31.43997814 117.86283755 34.17149014 117.25 37.875 117.25 C37.80718474 110.15535924 37.71707876 103.06123484 37.61254883 95.96704102 C37.57960062 93.56117927 37.55147853 91.15524581 37.52856445 88.74926758 C37.76968511 59.31491302 37.76968511 59.31491302 25.5 33.3125 C11.53322243 22.33860334 -5.23941181 20.13634309 -22.609375 21.70703125 C-32.10559089 23.17366904 -40.08563314 26.21063314 -46.9375 33.0625 C-49.46225593 36.74143007 -50.125 38.80078963 -50.125 43.25 C-48.43774639 49.51694198 -44.42162514 53.57506671 -40.28515625 58.46484375 C-33.46146517 67.26283966 -32.47399661 76.4040378 -33.125 87.25 C-34.45741101 96.57687708 -38.26305995 103.36950748 -45.640625 109.2578125 C-56.79941228 116.8776701 -68.85141717 119.06298521 -82.1796875 116.7109375 C-93.30983054 113.90527818 -103.74213574 108.56478031 -109.8359375 98.39453125 C-116.18205331 84.80357225 -115.80897253 68.86921139 -111.4453125 54.6796875 C-103.74093363 34.66653767 -87.43087279 21.93036529 -68.5234375 13.1328125 C-54.90936972 7.13265356 -40.86088756 3.18893257 -26.125 1.25 C-24.18753906 0.97542969 -24.18753906 0.97542969 -22.2109375 0.6953125 C-14.84179896 -0.09154564 -7.40314366 0.0056137 0 0 Z M-18.375 168 C-31.54430914 181.83893503 -36.62113284 198.06378728 -36.33984375 216.91015625 C-35.96435853 227.58466451 -32.78597026 236.12293272 -25.625 244 C-18.40009776 250.50241202 -13.20248623 252.75681114 -3.4140625 252.5625 C12.74896406 251.02682052 23.42833453 241.65477237 34.48698425 230.65097046 C37.64524191 226.80023789 37.55082009 223.31340893 37.44262695 218.49072266 C37.44335709 217.63153229 37.44408722 216.77234192 37.44483948 215.88711548 C37.44137066 213.06211043 37.40254386 210.2387776 37.36328125 207.4140625 C37.35395059 205.44966533 37.34683567 203.48525649 37.34184265 201.52084351 C37.3227928 196.36175155 37.27370909 191.20336842 37.21832275 186.04455566 C37.16708698 180.77589506 37.14431935 175.50711942 37.11914062 170.23828125 C37.06558861 159.9085435 36.98029998 149.5793308 36.875 139.25 C17.31074033 139.25 -4.62647457 155.30905345 -18.375 168 Z " fill="white" transform="translate(852.125,162.75)"/>
+<path d="M0 0 C15.0988696 13.86583403 26.72235964 30.05263559 35.0625 48.75 C35.60519531 49.93722656 36.14789062 51.12445313 36.70703125 52.34765625 C53.4032044 91.19267683 52.60210605 139.39758721 37.24609375 178.5078125 C23.80286807 210.98468685 -1.42758817 240.4390806 -33.9375 254.75 C-70.01525884 269.27996891 -110.1993786 268.40109769 -146.0625 254 C-157.4607898 248.93697833 -167.42945753 241.77027323 -176.9375 233.75 C-177.57171875 233.23824219 -178.2059375 232.72648437 -178.859375 232.19921875 C-183.41299931 228.46162004 -187.19755822 224.29187862 -190.9375 219.75 C-192.19240234 218.25146484 -192.19240234 218.25146484 -193.47265625 216.72265625 C-217.13867594 187.94524904 -227.435416 153.04413864 -227.25 116.0625 C-227.24850952 115.32220551 -227.24701904 114.58191101 -227.2454834 113.81918335 C-227.20259882 101.92879308 -226.52744807 90.38403566 -223.9375 78.75 C-223.7206958 77.75395752 -223.7206958 77.75395752 -223.49951172 76.73779297 C-217.16154796 48.55736716 -203.2198039 24.14281645 -182.9375 3.75 C-182.20660156 3.01305908 -182.20660156 3.01305908 -181.4609375 2.26123047 C-174.02344938 -5.13399919 -166.03569697 -11.04554326 -156.9375 -16.25 C-156.32422852 -16.60191406 -155.71095703 -16.95382813 -155.07910156 -17.31640625 C-140.90267732 -25.28283646 -125.11000581 -30.40239919 -108.9375 -32.25 C-108.08929688 -32.35957031 -107.24109375 -32.46914062 -106.3671875 -32.58203125 C-66.93026463 -36.99661217 -29.87247619 -26.15004925 0 0 Z M-117.5 0.25 C-151.52451606 41.18817344 -139.12197517 132.10479146 -134.62890625 181.11621094 C-132.56887503 201.46855646 -128.49215449 222.19131209 -112.9375 236.75 C-105.05269797 242.91612625 -95.73216057 245.21036596 -85.82421875 244.5390625 C-76.08211246 243.32559215 -67.36813774 240.40140985 -60.59375 233.00390625 C-28.00369169 188.65375614 -38.47313666 96.18579876 -45.62695312 44.59399414 C-48.5264849 25.65423861 -52.05272079 7.11592419 -66.9375 -6.25 C-69.50750027 -8.00140759 -72.01658297 -9.20333806 -74.9375 -10.25 C-75.96875 -10.6625 -77 -11.075 -78.0625 -11.5 C-93.92036787 -14.56926475 -106.38943664 -11.28029575 -117.5 0.25 Z " fill="white" transform="translate(496.9375,195.25)"/>
+<path d="M0 0 C0.82886719 0.75796875 1.65773438 1.5159375 2.51171875 2.296875 C3.35089844 3.05484375 4.19007813 3.8128125 5.0546875 4.59375 C29.11304881 27.4212184 37.09458788 58.4744058 41.51171875 90.296875 C41.61919434 91.02583984 41.72666992 91.75480469 41.83740234 92.50585938 C42.7677427 99.55241634 42.51171875 105.99945865 42.51171875 113.296875 C-8.63828125 113.296875 -59.78828125 113.296875 -112.48828125 113.296875 C-105.80212582 168.39852544 -105.80212582 168.39852544 -75.21875 213.22265625 C-60.46860251 224.42770391 -42.94881623 225.99615446 -25.09765625 223.8984375 C-12.22945656 221.1911933 -0.16038561 213.99682577 9.51171875 205.296875 C10.34058594 204.575 11.16945313 203.853125 12.0234375 203.109375 C21.91386373 195.13692955 21.91386373 195.13692955 29.51171875 185.296875 C33.86035527 185.86132325 36.6899953 187.45115464 40.32421875 189.859375 C41.30003906 190.50003906 42.27585937 191.14070312 43.28125 191.80078125 C44.01730469 192.29449219 44.75335937 192.78820312 45.51171875 193.296875 C34.48162692 222.90396359 3.80368337 248.63441826 -24.08959961 261.61645508 C-31.03668155 264.70186235 -38.04639471 266.70938453 -45.48828125 268.296875 C-46.92300781 268.61591797 -46.92300781 268.61591797 -48.38671875 268.94140625 C-80.55926328 275.20468873 -113.28868506 269.30976955 -140.74707031 251.40112305 C-170.95299857 230.85768459 -188.70863371 203.74810295 -195.97705078 167.88525391 C-198.77795893 153.149516 -199.72633275 138.53171026 -199.73828125 123.546875 C-199.73895599 122.78019501 -199.73963074 122.01351501 -199.74032593 121.22360229 C-199.68816449 83.67175295 -191.91615072 46.17629377 -166.48828125 17.296875 C-165.77929688 16.45511719 -165.0703125 15.61335938 -164.33984375 14.74609375 C-147.23673826 -5.10462255 -123.93257581 -18.11436714 -98.48828125 -23.703125 C-97.04582031 -24.04150391 -97.04582031 -24.04150391 -95.57421875 -24.38671875 C-62.17137798 -30.91422806 -25.82171456 -22.38653878 0 0 Z M-95.6484375 3.01953125 C-107.88133632 18.16131472 -110.32927891 39.65278006 -112.48828125 58.296875 C-112.62105469 59.39515625 -112.75382812 60.4934375 -112.890625 61.625 C-113.83372364 70.87511818 -113.48828125 79.92876603 -113.48828125 89.296875 C-87.08828125 89.296875 -60.68828125 89.296875 -33.48828125 89.296875 C-33.28618515 68.11591308 -33.28618515 68.11591308 -34.73828125 47.171875 C-34.87250488 45.96813232 -35.00672852 44.76438965 -35.14501953 43.52416992 C-37.87006727 20.02838266 -37.87006727 20.02838266 -50.58984375 0.765625 C-63.63920841 -9.33017976 -83.70359146 -8.53448138 -95.6484375 3.01953125 Z " fill="white" transform="translate(1479.48828125,188.703125)"/>
+<path d="M0 0 C38.28 0 76.56 0 116 0 C116.01458252 11.0442041 116.02916504 22.0884082 116.04418945 33.46728516 C116.09297367 68.82687661 116.15639022 104.18642832 116.22898628 139.54597858 C116.2402541 145.04074331 116.25139261 150.53550829 116.26245117 156.03027344 C116.26465486 157.12415671 116.26685854 158.21803999 116.269129 159.34507124 C116.30447659 177.04418864 116.32935505 194.743306 116.35034702 212.44244559 C116.37212929 230.61088077 116.40520276 248.77927024 116.44870156 266.94766653 C116.47517645 278.15351884 116.49290248 289.35931423 116.49934604 300.56519626 C116.50461266 308.25526551 116.52087235 315.94526322 116.54566566 323.63529409 C116.55963702 328.06834664 116.56886784 332.50127123 116.56500816 336.93434715 C116.5615749 341.00118508 116.57209403 345.06775064 116.59323552 349.13453285 C116.59846411 350.5977508 116.59878017 352.06099732 116.59339563 353.5242147 C116.55714882 364.5010123 116.61908771 376.6185095 123 386 C129.10603622 391.66539443 138.29671194 393.59272248 146 396 C146 401.28 146 406.56 146 412 C97.82 412 49.64 412 0 412 C0 406.72 0 401.44 0 396 C2.31 395.29875 4.62 394.5975 7 393.875 C14.88643605 391.31125058 21.40379671 388.53051434 25.4375 380.875 C27.4834549 376.30600654 28.12525209 372.31140874 28.13142776 367.30392265 C28.13526891 366.13518793 28.13911005 364.96645321 28.1430676 363.76230228 C28.14220112 362.47730716 28.14133463 361.19231205 28.14044189 359.86837769 C28.14302577 358.49024342 28.14603899 357.11210991 28.1494453 355.73397744 C28.1575161 351.94278998 28.15930491 348.15162146 28.16004276 344.36042643 C28.16189321 340.27300922 28.16944057 336.18560184 28.17617798 332.09819031 C28.18976302 323.15795956 28.19578646 314.2177333 28.20018864 305.27749395 C28.20295112 299.69462966 28.20718852 294.11176709 28.21169281 288.52890396 C28.22388635 273.07055965 28.23418507 257.61221673 28.2375679 242.15386772 C28.23778747 241.16437406 28.23800703 240.17488039 28.23823325 239.15540207 C28.23845153 238.16354149 28.23866981 237.17168091 28.2388947 236.14976394 C28.23933817 234.13988169 28.23978473 232.12999944 28.24023438 230.12011719 C28.2404558 229.12314635 28.24067723 228.12617551 28.24090537 227.09899344 C28.24485224 210.94936617 28.26230248 194.79978407 28.2855939 178.65017425 C28.30931573 162.06819556 28.32177015 145.48623952 28.32293582 128.90424359 C28.32385218 119.59469528 28.32959461 110.28520578 28.34775543 100.97567368 C28.36316773 93.04712114 28.36827026 85.11864559 28.36001733 77.19008093 C28.35611465 73.14632417 28.35702165 69.10272238 28.37107468 65.05898476 C28.38383671 61.35275035 28.38259605 57.646787 28.37048396 53.94055285 C28.3676099 51.97374375 28.37944536 50.00692987 28.39190602 48.04015815 C28.34631333 39.84586273 28.13717421 31.6198164 22.5625 25.1875 C15.93500281 20.51511448 7.68271278 18.1950608 0 16 C0 10.72 0 5.44 0 0 Z " fill="white" transform="translate(561,39)"/>
+<path d="M0 0 C10.77089077 10.38735757 17.87424454 23.44231494 18.29248047 38.63256836 C18.41411086 51.11748333 15.11574666 61.56166588 6.33984375 70.8125 C-2.87402814 79.20782746 -13.32229259 81.53017185 -25.53515625 81.30859375 C-35.76530437 80.58198797 -44.27971876 76.28593169 -51.3125 68.8125 C-57.51407934 61.04329921 -59.17218377 51.75050687 -59.02734375 42.046875 C-59.01468997 40.69922139 -59.00232957 39.35156499 -58.99023438 38.00390625 C-58.96555972 35.91315688 -58.93766171 33.82255908 -58.90405273 31.73193359 C-58.19867216 15.35109116 -58.19867216 15.35109116 -65 1.0625 C-74.20098434 -4.93137305 -82.307363 -5.4989248 -93 -3.9375 C-102.99102152 -1.56893886 -110.77189951 5.12796799 -116.25 13.6875 C-138.73814805 54.98967614 -138.58144081 112.38509351 -125.734375 156.64501953 C-117.99583123 182.11944119 -105.68290641 208.12615659 -81.58203125 221.75 C-64.31235712 230.52853329 -43.69677355 231.05431317 -25.3125 225.25 C-23.52716153 224.5571066 -21.75463851 223.82981898 -20 223.0625 C-18.73542969 222.54042969 -18.73542969 222.54042969 -17.4453125 222.0078125 C-4.88082858 216.3322668 4.5426804 205.79045831 14 196.0625 C17.34820898 197.52875856 19.69266359 199.39908447 22.3125 201.9375 C23.03050781 202.61554688 23.74851562 203.29359375 24.48828125 203.9921875 C26 206.0625 26 206.0625 25.97265625 208.0078125 C13.61036411 234.12253404 -19.6539239 256.1680996 -45.82666016 265.73876953 C-69.70457447 273.86841976 -96.47527586 274.99656043 -121 269.0625 C-121.70624512 268.89621094 -122.41249023 268.72992188 -123.14013672 268.55859375 C-156.49401495 260.4473151 -182.94988783 237.66146166 -201 209.0625 C-204.03161747 203.89792744 -206.6111979 198.55032552 -209 193.0625 C-209.41306396 192.11455566 -209.41306396 192.11455566 -209.83447266 191.14746094 C-226.09778876 152.89582777 -226.69273073 105.62918507 -211.8125 66.8125 C-203.53679525 46.36191624 -192.25157938 28.90241924 -177 13.0625 C-175.94425781 11.89460938 -175.94425781 11.89460938 -174.8671875 10.703125 C-133.11685967 -34.06338621 -46.39135658 -40.37062041 0 0 Z " fill="white" transform="translate(1240,187.9375)"/>
+<path d="M0 0 C13.32404864 4.14525643 13.32404864 4.14525643 26.54174805 1.78125 C27.41925764 0.26429335 28.24820411 -1.28123005 29.04174805 -2.84375 C30.77424805 -5.009375 30.77424805 -5.009375 32.54174805 -7.21875 C37.49174805 -7.21875 42.44174805 -7.21875 47.54174805 -7.21875 C47.54174805 22.15125 47.54174805 51.52125 47.54174805 81.78125 C41.93174805 81.78125 36.32174805 81.78125 30.54174805 81.78125 C29.92299805 79.98494141 29.92299805 79.98494141 29.29174805 78.15234375 C24.07054842 63.30403051 18.25582387 49.58054529 7.54174805 37.78125 C6.38352539 36.50121094 6.38352539 36.50121094 5.2019043 35.1953125 C-6.4398382 22.94665452 -21.41422304 14.9559896 -38.45825195 13.78125 C-49.83554479 13.58686409 -60.35503374 15.10437031 -69.83325195 21.96875 C-76.78195743 29.41379158 -80.61616377 38.16484283 -81.89575195 48.21875 C-80.43951927 60.07664467 -74.13005611 69.43922892 -64.97924805 76.89331055 C-50.6268358 87.64163554 -33.62610985 94.68638994 -17.56079102 102.4128418 C13.73980069 117.49344069 44.30706715 132.44517039 57.41674805 166.84375 C65.14270881 190.25575232 62.50598169 215.0235911 51.97924805 237.05078125 C47.94092571 244.93111858 43.05452746 251.86985803 37.54174805 258.78125 C36.80698242 259.76544922 36.80698242 259.76544922 36.05737305 260.76953125 C23.93690924 276.27659523 2.87302243 284.64745713 -16.0637207 287.40234375 C-46.07815506 290.75263159 -72.23603422 284.66003838 -100.49975586 274.67749023 C-102.12083252 274.11396851 -102.12083252 274.11396851 -103.7746582 273.5390625 C-104.72800049 273.2002002 -105.68134277 272.86133789 -106.66357422 272.51220703 C-111.06871202 271.36002894 -114.30113561 271.25090501 -118.45825195 273.15625 C-122.58759585 276.76942591 -124.82303997 281.02675609 -127.45825195 285.78125 C-128.11825195 286.77125 -128.77825195 287.76125 -129.45825195 288.78125 C-134.73825195 288.78125 -140.01825195 288.78125 -145.45825195 288.78125 C-145.45825195 255.12125 -145.45825195 221.46125 -145.45825195 186.78125 C-139.18825195 186.78125 -132.91825195 186.78125 -126.45825195 186.78125 C-125.75700195 189.606875 -125.05575195 192.4325 -124.33325195 195.34375 C-118.24541303 218.85833102 -107.76453746 239.75320281 -86.45825195 252.78125 C-72.74545135 260.75095574 -59.64139735 265.07549622 -43.70825195 265.21875 C-42.76199951 265.2290625 -41.81574707 265.239375 -40.84082031 265.25 C-29.66931067 265.10995496 -18.23237918 262.34331303 -9.77075195 254.71875 C-2.20527953 246.70315794 -0.11672844 236.56206872 -0.24731445 225.90625 C-0.95845506 215.37083357 -5.742771 206.97112465 -13.45043945 199.8984375 C-18.52553046 195.48295468 -23.95735006 192.51218918 -29.95825195 189.53125 C-31.09319092 188.95334717 -32.22812988 188.37544434 -33.39746094 187.7800293 C-40.78905599 184.03012067 -48.24890088 180.42095079 -55.7121582 176.81640625 C-56.60240692 176.3855069 -57.49265564 175.95460754 -58.40988159 175.51065063 C-62.82173357 173.37597962 -67.23792737 171.25175064 -71.6652832 169.14941406 C-86.83321381 161.89048764 -101.74292754 153.90995221 -114.45825195 142.78125 C-115.28454102 142.09804688 -116.11083008 141.41484375 -116.9621582 140.7109375 C-132.66469256 127.33381663 -142.04866909 109.22043097 -144.45825195 88.78125 C-145.43917553 71.90860694 -144.00167254 56.14668342 -136.45825195 40.78125 C-136.00450195 39.84667969 -135.55075195 38.91210938 -135.08325195 37.94921875 C-127.02321122 22.28908526 -114.86579509 10.17000978 -99.45825195 1.78125 C-98.57524414 1.29785156 -97.69223633 0.81445312 -96.7824707 0.31640625 C-66.59446915 -14.75469012 -30.96954945 -8.72583375 0 0 Z " fill="white" transform="translate(189.458251953125,171.21875)"/>
+<path d="M0 0 C0.59941406 0.5259375 1.19882813 1.051875 1.81640625 1.59375 C19.50251246 17.67948929 28.38305908 43.48043938 29.89794922 66.68115234 C31.05201125 92.90431308 22.78111066 117.82806697 6 138 C5.34386719 138.80308594 4.68773437 139.60617187 4.01171875 140.43359375 C-9.8371727 156.66236783 -28.49258471 166.80769698 -49 172 C-49.94359375 172.24492187 -50.8871875 172.48984375 -51.859375 172.7421875 C-77.20259586 178.08916762 -105.21485966 172.83388734 -127 159 C-151.43141587 142.71238942 -166.88102174 119.6539251 -173 91 C-177.79518983 64.40268042 -171.81563935 36.51182904 -156.75683594 14.15429688 C-139.75685583 -9.80196748 -115.76649709 -23.78039095 -87 -29 C-54.8771662 -34.16548081 -23.02316306 -22.31539855 0 0 Z " fill="white" transform="translate(1726,286)"/>
+</g>
+</g>
+</svg>
diff --git a/workspaces/bi/bi-extension/assets/light-bi-mcp.svg b/workspaces/bi/bi-extension/assets/light-bi-mcp.svg
new file mode 100644
index 00000000000..30d986f0493
--- /dev/null
+++ b/workspaces/bi/bi-extension/assets/light-bi-mcp.svg
@@ -0,0 +1,22 @@
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT 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="22.59" height="24" viewBox="0 0 16 17">
+    <path fill="#000" fill-rule="evenodd"
+        d="m14.557 8.468l-.055.054l-5.804 5.691a.183.183 0 0 0-.003.259l.003.003l1.192 1.17a.55.55 0 0 1 .011.776l-.01.01a.575.575 0 0 1-.803 0l-1.192-1.168a1.28 1.28 0 0 1 0-1.836l5.805-5.692a1.647 1.647 0 0 0 .031-2.328l-.031-.032l-.034-.032a1.725 1.725 0 0 0-2.405-.002l-4.781 4.69h-.002l-.065.065a.575.575 0 0 1-.803 0a.55.55 0 0 1-.01-.776l.01-.01l4.849-4.756c.65-.636.663-1.678.027-2.329l-.029-.03a1.725 1.725 0 0 0-2.407 0L1.635 8.489a.575.575 0 0 1-.802 0a.55.55 0 0 1-.011-.776l.011-.01L7.25 1.407a2.875 2.875 0 0 1 4.01 0c.63.613.929 1.49.803 2.36c.88-.125 1.77.166 2.406.787l.034.033a2.743 2.743 0 0 1 .053 3.88m-1.691-1.553a.55.55 0 0 0 .01-.776l-.01-.01a.575.575 0 0 0-.803 0l-4.746 4.654a1.725 1.725 0 0 1-2.407 0a1.647 1.647 0 0 1 0-2.36l4.747-4.655a.55.55 0 0 0 .011-.776l-.011-.01a.575.575 0 0 0-.803 0L4.108 7.635a2.743 2.743 0 0 0 0 3.933a2.876 2.876 0 0 0 4.011 0z"
+        clip-rule="evenodd" />
+</svg>
diff --git a/workspaces/bi/bi-extension/assets/light-bi-solace.svg b/workspaces/bi/bi-extension/assets/light-bi-solace.svg
new file mode 100644
index 00000000000..c5f8a998bd8
--- /dev/null
+++ b/workspaces/bi/bi-extension/assets/light-bi-solace.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1800" height="1800" viewBox="0 0 1800 1800">
+<g transform="translate(900, 900)">
+<g transform="translate(-900, -250)">
+<path d="M0 0 C0.79912811 -0.00067474 1.59825623 -0.00134949 2.42160034 -0.00204468 C36.6019933 0.04367103 76.40389152 6.10617789 101.8359375 31.18359375 C120.44122593 51.3731753 122.01476826 79.08044023 122.03271484 105.13452148 C122.03739616 106.68333578 122.04254183 108.23214873 122.04811096 109.78096008 C122.05929219 113.08799036 122.06777311 116.39501216 122.07423019 119.70205498 C122.08500342 124.93454626 122.10526663 130.16697507 122.12734985 135.39942932 C122.18898096 150.26845471 122.24338135 165.137473 122.27636719 180.0065918 C122.29471129 188.24011593 122.32362939 196.47353187 122.3643719 204.70697647 C122.38541555 209.0553492 122.40089574 213.40358592 122.40317917 217.75201225 C122.40532609 221.83404534 122.42119956 225.91579351 122.44756889 229.99773979 C122.45475696 231.49328032 122.45686523 232.98885539 122.45346642 234.48440933 C122.44956257 236.52884637 122.46580693 238.57329206 122.48300171 240.61766052 C122.48796693 242.33175692 122.48796693 242.33175692 122.49303246 244.08048153 C123.02721665 248.51307455 124.63811829 251.82987656 127.5625 255.1875 C131.18636119 256.8525173 134.22113099 256.54447715 137.875 255.25 C141.09742078 253.15667549 144.00193684 250.79718331 146.875 248.25 C149.73698697 250.96266591 151.98432246 253.69168017 154.125 257 C154.64578125 257.79921875 155.1665625 258.5984375 155.703125 259.421875 C156.28320312 260.32679688 156.28320312 260.32679688 156.875 261.25 C150.75157663 275.51627358 130.57300251 286.71188285 116.875 292.25 C99.16940457 298.29104611 77.93815442 299.99027615 60.58984375 291.8515625 C47.26504214 283.99088817 41.7327283 272.72782737 37.875 258.25 C34.95275678 257.91849995 34.95275678 257.91849995 33.54296875 259.4296875 C33.05441406 259.98914063 32.56585937 260.54859375 32.0625 261.125 C9.64708226 284.38451297 -25.54360609 296.46013764 -57.19140625 297.30517578 C-76.87420066 297.41949504 -96.87729112 289.32792525 -111.01171875 275.62109375 C-125.70277978 259.13777759 -126.26338802 239.23704164 -125.125 218.25 C-122.97688347 199.2048431 -110.83761373 183.22680908 -96.27734375 171.5859375 C-91.10651695 167.75427154 -85.72368037 164.41313109 -80.125 161.25 C-79.526875 160.90646484 -78.92875 160.56292969 -78.3125 160.20898438 C-49.24617667 143.64723556 -16.75253602 133.18850966 15 123.0625 C15.91274689 122.77006409 16.82549377 122.47762817 17.76589966 122.17633057 C20.3651927 121.34614146 22.96710505 120.52485271 25.5703125 119.70703125 C26.35124771 119.45761276 27.13218292 119.20819427 27.93678284 118.95121765 C31.43997814 117.86283755 34.17149014 117.25 37.875 117.25 C37.80718474 110.15535924 37.71707876 103.06123484 37.61254883 95.96704102 C37.57960062 93.56117927 37.55147853 91.15524581 37.52856445 88.74926758 C37.76968511 59.31491302 37.76968511 59.31491302 25.5 33.3125 C11.53322243 22.33860334 -5.23941181 20.13634309 -22.609375 21.70703125 C-32.10559089 23.17366904 -40.08563314 26.21063314 -46.9375 33.0625 C-49.46225593 36.74143007 -50.125 38.80078963 -50.125 43.25 C-48.43774639 49.51694198 -44.42162514 53.57506671 -40.28515625 58.46484375 C-33.46146517 67.26283966 -32.47399661 76.4040378 -33.125 87.25 C-34.45741101 96.57687708 -38.26305995 103.36950748 -45.640625 109.2578125 C-56.79941228 116.8776701 -68.85141717 119.06298521 -82.1796875 116.7109375 C-93.30983054 113.90527818 -103.74213574 108.56478031 -109.8359375 98.39453125 C-116.18205331 84.80357225 -115.80897253 68.86921139 -111.4453125 54.6796875 C-103.74093363 34.66653767 -87.43087279 21.93036529 -68.5234375 13.1328125 C-54.90936972 7.13265356 -40.86088756 3.18893257 -26.125 1.25 C-24.18753906 0.97542969 -24.18753906 0.97542969 -22.2109375 0.6953125 C-14.84179896 -0.09154564 -7.40314366 0.0056137 0 0 Z M-18.375 168 C-31.54430914 181.83893503 -36.62113284 198.06378728 -36.33984375 216.91015625 C-35.96435853 227.58466451 -32.78597026 236.12293272 -25.625 244 C-18.40009776 250.50241202 -13.20248623 252.75681114 -3.4140625 252.5625 C12.74896406 251.02682052 23.42833453 241.65477237 34.48698425 230.65097046 C37.64524191 226.80023789 37.55082009 223.31340893 37.44262695 218.49072266 C37.44335709 217.63153229 37.44408722 216.77234192 37.44483948 215.88711548 C37.44137066 213.06211043 37.40254386 210.2387776 37.36328125 207.4140625 C37.35395059 205.44966533 37.34683567 203.48525649 37.34184265 201.52084351 C37.3227928 196.36175155 37.27370909 191.20336842 37.21832275 186.04455566 C37.16708698 180.77589506 37.14431935 175.50711942 37.11914062 170.23828125 C37.06558861 159.9085435 36.98029998 149.5793308 36.875 139.25 C17.31074033 139.25 -4.62647457 155.30905345 -18.375 168 Z " fill="black" transform="translate(852.125,162.75)"/>
+<path d="M0 0 C15.0988696 13.86583403 26.72235964 30.05263559 35.0625 48.75 C35.60519531 49.93722656 36.14789062 51.12445313 36.70703125 52.34765625 C53.4032044 91.19267683 52.60210605 139.39758721 37.24609375 178.5078125 C23.80286807 210.98468685 -1.42758817 240.4390806 -33.9375 254.75 C-70.01525884 269.27996891 -110.1993786 268.40109769 -146.0625 254 C-157.4607898 248.93697833 -167.42945753 241.77027323 -176.9375 233.75 C-177.57171875 233.23824219 -178.2059375 232.72648437 -178.859375 232.19921875 C-183.41299931 228.46162004 -187.19755822 224.29187862 -190.9375 219.75 C-192.19240234 218.25146484 -192.19240234 218.25146484 -193.47265625 216.72265625 C-217.13867594 187.94524904 -227.435416 153.04413864 -227.25 116.0625 C-227.24850952 115.32220551 -227.24701904 114.58191101 -227.2454834 113.81918335 C-227.20259882 101.92879308 -226.52744807 90.38403566 -223.9375 78.75 C-223.7206958 77.75395752 -223.7206958 77.75395752 -223.49951172 76.73779297 C-217.16154796 48.55736716 -203.2198039 24.14281645 -182.9375 3.75 C-182.20660156 3.01305908 -182.20660156 3.01305908 -181.4609375 2.26123047 C-174.02344938 -5.13399919 -166.03569697 -11.04554326 -156.9375 -16.25 C-156.32422852 -16.60191406 -155.71095703 -16.95382813 -155.07910156 -17.31640625 C-140.90267732 -25.28283646 -125.11000581 -30.40239919 -108.9375 -32.25 C-108.08929688 -32.35957031 -107.24109375 -32.46914062 -106.3671875 -32.58203125 C-66.93026463 -36.99661217 -29.87247619 -26.15004925 0 0 Z M-117.5 0.25 C-151.52451606 41.18817344 -139.12197517 132.10479146 -134.62890625 181.11621094 C-132.56887503 201.46855646 -128.49215449 222.19131209 -112.9375 236.75 C-105.05269797 242.91612625 -95.73216057 245.21036596 -85.82421875 244.5390625 C-76.08211246 243.32559215 -67.36813774 240.40140985 -60.59375 233.00390625 C-28.00369169 188.65375614 -38.47313666 96.18579876 -45.62695312 44.59399414 C-48.5264849 25.65423861 -52.05272079 7.11592419 -66.9375 -6.25 C-69.50750027 -8.00140759 -72.01658297 -9.20333806 -74.9375 -10.25 C-75.96875 -10.6625 -77 -11.075 -78.0625 -11.5 C-93.92036787 -14.56926475 -106.38943664 -11.28029575 -117.5 0.25 Z " fill="black" transform="translate(496.9375,195.25)"/>
+<path d="M0 0 C0.82886719 0.75796875 1.65773438 1.5159375 2.51171875 2.296875 C3.35089844 3.05484375 4.19007813 3.8128125 5.0546875 4.59375 C29.11304881 27.4212184 37.09458788 58.4744058 41.51171875 90.296875 C41.61919434 91.02583984 41.72666992 91.75480469 41.83740234 92.50585938 C42.7677427 99.55241634 42.51171875 105.99945865 42.51171875 113.296875 C-8.63828125 113.296875 -59.78828125 113.296875 -112.48828125 113.296875 C-105.80212582 168.39852544 -105.80212582 168.39852544 -75.21875 213.22265625 C-60.46860251 224.42770391 -42.94881623 225.99615446 -25.09765625 223.8984375 C-12.22945656 221.1911933 -0.16038561 213.99682577 9.51171875 205.296875 C10.34058594 204.575 11.16945313 203.853125 12.0234375 203.109375 C21.91386373 195.13692955 21.91386373 195.13692955 29.51171875 185.296875 C33.86035527 185.86132325 36.6899953 187.45115464 40.32421875 189.859375 C41.30003906 190.50003906 42.27585937 191.14070312 43.28125 191.80078125 C44.01730469 192.29449219 44.75335937 192.78820312 45.51171875 193.296875 C34.48162692 222.90396359 3.80368337 248.63441826 -24.08959961 261.61645508 C-31.03668155 264.70186235 -38.04639471 266.70938453 -45.48828125 268.296875 C-46.92300781 268.61591797 -46.92300781 268.61591797 -48.38671875 268.94140625 C-80.55926328 275.20468873 -113.28868506 269.30976955 -140.74707031 251.40112305 C-170.95299857 230.85768459 -188.70863371 203.74810295 -195.97705078 167.88525391 C-198.77795893 153.149516 -199.72633275 138.53171026 -199.73828125 123.546875 C-199.73895599 122.78019501 -199.73963074 122.01351501 -199.74032593 121.22360229 C-199.68816449 83.67175295 -191.91615072 46.17629377 -166.48828125 17.296875 C-165.77929688 16.45511719 -165.0703125 15.61335938 -164.33984375 14.74609375 C-147.23673826 -5.10462255 -123.93257581 -18.11436714 -98.48828125 -23.703125 C-97.04582031 -24.04150391 -97.04582031 -24.04150391 -95.57421875 -24.38671875 C-62.17137798 -30.91422806 -25.82171456 -22.38653878 0 0 Z M-95.6484375 3.01953125 C-107.88133632 18.16131472 -110.32927891 39.65278006 -112.48828125 58.296875 C-112.62105469 59.39515625 -112.75382812 60.4934375 -112.890625 61.625 C-113.83372364 70.87511818 -113.48828125 79.92876603 -113.48828125 89.296875 C-87.08828125 89.296875 -60.68828125 89.296875 -33.48828125 89.296875 C-33.28618515 68.11591308 -33.28618515 68.11591308 -34.73828125 47.171875 C-34.87250488 45.96813232 -35.00672852 44.76438965 -35.14501953 43.52416992 C-37.87006727 20.02838266 -37.87006727 20.02838266 -50.58984375 0.765625 C-63.63920841 -9.33017976 -83.70359146 -8.53448138 -95.6484375 3.01953125 Z " fill="black" transform="translate(1479.48828125,188.703125)"/>
+<path d="M0 0 C38.28 0 76.56 0 116 0 C116.01458252 11.0442041 116.02916504 22.0884082 116.04418945 33.46728516 C116.09297367 68.82687661 116.15639022 104.18642832 116.22898628 139.54597858 C116.2402541 145.04074331 116.25139261 150.53550829 116.26245117 156.03027344 C116.26465486 157.12415671 116.26685854 158.21803999 116.269129 159.34507124 C116.30447659 177.04418864 116.32935505 194.743306 116.35034702 212.44244559 C116.37212929 230.61088077 116.40520276 248.77927024 116.44870156 266.94766653 C116.47517645 278.15351884 116.49290248 289.35931423 116.49934604 300.56519626 C116.50461266 308.25526551 116.52087235 315.94526322 116.54566566 323.63529409 C116.55963702 328.06834664 116.56886784 332.50127123 116.56500816 336.93434715 C116.5615749 341.00118508 116.57209403 345.06775064 116.59323552 349.13453285 C116.59846411 350.5977508 116.59878017 352.06099732 116.59339563 353.5242147 C116.55714882 364.5010123 116.61908771 376.6185095 123 386 C129.10603622 391.66539443 138.29671194 393.59272248 146 396 C146 401.28 146 406.56 146 412 C97.82 412 49.64 412 0 412 C0 406.72 0 401.44 0 396 C2.31 395.29875 4.62 394.5975 7 393.875 C14.88643605 391.31125058 21.40379671 388.53051434 25.4375 380.875 C27.4834549 376.30600654 28.12525209 372.31140874 28.13142776 367.30392265 C28.13526891 366.13518793 28.13911005 364.96645321 28.1430676 363.76230228 C28.14220112 362.47730716 28.14133463 361.19231205 28.14044189 359.86837769 C28.14302577 358.49024342 28.14603899 357.11210991 28.1494453 355.73397744 C28.1575161 351.94278998 28.15930491 348.15162146 28.16004276 344.36042643 C28.16189321 340.27300922 28.16944057 336.18560184 28.17617798 332.09819031 C28.18976302 323.15795956 28.19578646 314.2177333 28.20018864 305.27749395 C28.20295112 299.69462966 28.20718852 294.11176709 28.21169281 288.52890396 C28.22388635 273.07055965 28.23418507 257.61221673 28.2375679 242.15386772 C28.23778747 241.16437406 28.23800703 240.17488039 28.23823325 239.15540207 C28.23845153 238.16354149 28.23866981 237.17168091 28.2388947 236.14976394 C28.23933817 234.13988169 28.23978473 232.12999944 28.24023438 230.12011719 C28.2404558 229.12314635 28.24067723 228.12617551 28.24090537 227.09899344 C28.24485224 210.94936617 28.26230248 194.79978407 28.2855939 178.65017425 C28.30931573 162.06819556 28.32177015 145.48623952 28.32293582 128.90424359 C28.32385218 119.59469528 28.32959461 110.28520578 28.34775543 100.97567368 C28.36316773 93.04712114 28.36827026 85.11864559 28.36001733 77.19008093 C28.35611465 73.14632417 28.35702165 69.10272238 28.37107468 65.05898476 C28.38383671 61.35275035 28.38259605 57.646787 28.37048396 53.94055285 C28.3676099 51.97374375 28.37944536 50.00692987 28.39190602 48.04015815 C28.34631333 39.84586273 28.13717421 31.6198164 22.5625 25.1875 C15.93500281 20.51511448 7.68271278 18.1950608 0 16 C0 10.72 0 5.44 0 0 Z " fill="black" transform="translate(561,39)"/>
+<path d="M0 0 C10.77089077 10.38735757 17.87424454 23.44231494 18.29248047 38.63256836 C18.41411086 51.11748333 15.11574666 61.56166588 6.33984375 70.8125 C-2.87402814 79.20782746 -13.32229259 81.53017185 -25.53515625 81.30859375 C-35.76530437 80.58198797 -44.27971876 76.28593169 -51.3125 68.8125 C-57.51407934 61.04329921 -59.17218377 51.75050687 -59.02734375 42.046875 C-59.01468997 40.69922139 -59.00232957 39.35156499 -58.99023438 38.00390625 C-58.96555972 35.91315688 -58.93766171 33.82255908 -58.90405273 31.73193359 C-58.19867216 15.35109116 -58.19867216 15.35109116 -65 1.0625 C-74.20098434 -4.93137305 -82.307363 -5.4989248 -93 -3.9375 C-102.99102152 -1.56893886 -110.77189951 5.12796799 -116.25 13.6875 C-138.73814805 54.98967614 -138.58144081 112.38509351 -125.734375 156.64501953 C-117.99583123 182.11944119 -105.68290641 208.12615659 -81.58203125 221.75 C-64.31235712 230.52853329 -43.69677355 231.05431317 -25.3125 225.25 C-23.52716153 224.5571066 -21.75463851 223.82981898 -20 223.0625 C-18.73542969 222.54042969 -18.73542969 222.54042969 -17.4453125 222.0078125 C-4.88082858 216.3322668 4.5426804 205.79045831 14 196.0625 C17.34820898 197.52875856 19.69266359 199.39908447 22.3125 201.9375 C23.03050781 202.61554688 23.74851562 203.29359375 24.48828125 203.9921875 C26 206.0625 26 206.0625 25.97265625 208.0078125 C13.61036411 234.12253404 -19.6539239 256.1680996 -45.82666016 265.73876953 C-69.70457447 273.86841976 -96.47527586 274.99656043 -121 269.0625 C-121.70624512 268.89621094 -122.41249023 268.72992188 -123.14013672 268.55859375 C-156.49401495 260.4473151 -182.94988783 237.66146166 -201 209.0625 C-204.03161747 203.89792744 -206.6111979 198.55032552 -209 193.0625 C-209.41306396 192.11455566 -209.41306396 192.11455566 -209.83447266 191.14746094 C-226.09778876 152.89582777 -226.69273073 105.62918507 -211.8125 66.8125 C-203.53679525 46.36191624 -192.25157938 28.90241924 -177 13.0625 C-175.94425781 11.89460938 -175.94425781 11.89460938 -174.8671875 10.703125 C-133.11685967 -34.06338621 -46.39135658 -40.37062041 0 0 Z " fill="black" transform="translate(1240,187.9375)"/>
+<path d="M0 0 C13.32404864 4.14525643 13.32404864 4.14525643 26.54174805 1.78125 C27.41925764 0.26429335 28.24820411 -1.28123005 29.04174805 -2.84375 C30.77424805 -5.009375 30.77424805 -5.009375 32.54174805 -7.21875 C37.49174805 -7.21875 42.44174805 -7.21875 47.54174805 -7.21875 C47.54174805 22.15125 47.54174805 51.52125 47.54174805 81.78125 C41.93174805 81.78125 36.32174805 81.78125 30.54174805 81.78125 C29.92299805 79.98494141 29.92299805 79.98494141 29.29174805 78.15234375 C24.07054842 63.30403051 18.25582387 49.58054529 7.54174805 37.78125 C6.38352539 36.50121094 6.38352539 36.50121094 5.2019043 35.1953125 C-6.4398382 22.94665452 -21.41422304 14.9559896 -38.45825195 13.78125 C-49.83554479 13.58686409 -60.35503374 15.10437031 -69.83325195 21.96875 C-76.78195743 29.41379158 -80.61616377 38.16484283 -81.89575195 48.21875 C-80.43951927 60.07664467 -74.13005611 69.43922892 -64.97924805 76.89331055 C-50.6268358 87.64163554 -33.62610985 94.68638994 -17.56079102 102.4128418 C13.73980069 117.49344069 44.30706715 132.44517039 57.41674805 166.84375 C65.14270881 190.25575232 62.50598169 215.0235911 51.97924805 237.05078125 C47.94092571 244.93111858 43.05452746 251.86985803 37.54174805 258.78125 C36.80698242 259.76544922 36.80698242 259.76544922 36.05737305 260.76953125 C23.93690924 276.27659523 2.87302243 284.64745713 -16.0637207 287.40234375 C-46.07815506 290.75263159 -72.23603422 284.66003838 -100.49975586 274.67749023 C-102.12083252 274.11396851 -102.12083252 274.11396851 -103.7746582 273.5390625 C-104.72800049 273.2002002 -105.68134277 272.86133789 -106.66357422 272.51220703 C-111.06871202 271.36002894 -114.30113561 271.25090501 -118.45825195 273.15625 C-122.58759585 276.76942591 -124.82303997 281.02675609 -127.45825195 285.78125 C-128.11825195 286.77125 -128.77825195 287.76125 -129.45825195 288.78125 C-134.73825195 288.78125 -140.01825195 288.78125 -145.45825195 288.78125 C-145.45825195 255.12125 -145.45825195 221.46125 -145.45825195 186.78125 C-139.18825195 186.78125 -132.91825195 186.78125 -126.45825195 186.78125 C-125.75700195 189.606875 -125.05575195 192.4325 -124.33325195 195.34375 C-118.24541303 218.85833102 -107.76453746 239.75320281 -86.45825195 252.78125 C-72.74545135 260.75095574 -59.64139735 265.07549622 -43.70825195 265.21875 C-42.76199951 265.2290625 -41.81574707 265.239375 -40.84082031 265.25 C-29.66931067 265.10995496 -18.23237918 262.34331303 -9.77075195 254.71875 C-2.20527953 246.70315794 -0.11672844 236.56206872 -0.24731445 225.90625 C-0.95845506 215.37083357 -5.742771 206.97112465 -13.45043945 199.8984375 C-18.52553046 195.48295468 -23.95735006 192.51218918 -29.95825195 189.53125 C-31.09319092 188.95334717 -32.22812988 188.37544434 -33.39746094 187.7800293 C-40.78905599 184.03012067 -48.24890088 180.42095079 -55.7121582 176.81640625 C-56.60240692 176.3855069 -57.49265564 175.95460754 -58.40988159 175.51065063 C-62.82173357 173.37597962 -67.23792737 171.25175064 -71.6652832 169.14941406 C-86.83321381 161.89048764 -101.74292754 153.90995221 -114.45825195 142.78125 C-115.28454102 142.09804688 -116.11083008 141.41484375 -116.9621582 140.7109375 C-132.66469256 127.33381663 -142.04866909 109.22043097 -144.45825195 88.78125 C-145.43917553 71.90860694 -144.00167254 56.14668342 -136.45825195 40.78125 C-136.00450195 39.84667969 -135.55075195 38.91210938 -135.08325195 37.94921875 C-127.02321122 22.28908526 -114.86579509 10.17000978 -99.45825195 1.78125 C-98.57524414 1.29785156 -97.69223633 0.81445312 -96.7824707 0.31640625 C-66.59446915 -14.75469012 -30.96954945 -8.72583375 0 0 Z " fill="black" transform="translate(189.458251953125,171.21875)"/>
+<path d="M0 0 C0.59941406 0.5259375 1.19882813 1.051875 1.81640625 1.59375 C19.50251246 17.67948929 28.38305908 43.48043938 29.89794922 66.68115234 C31.05201125 92.90431308 22.78111066 117.82806697 6 138 C5.34386719 138.80308594 4.68773437 139.60617187 4.01171875 140.43359375 C-9.8371727 156.66236783 -28.49258471 166.80769698 -49 172 C-49.94359375 172.24492187 -50.8871875 172.48984375 -51.859375 172.7421875 C-77.20259586 178.08916762 -105.21485966 172.83388734 -127 159 C-151.43141587 142.71238942 -166.88102174 119.6539251 -173 91 C-177.79518983 64.40268042 -171.81563935 36.51182904 -156.75683594 14.15429688 C-139.75685583 -9.80196748 -115.76649709 -23.78039095 -87 -29 C-54.8771662 -34.16548081 -23.02316306 -22.31539855 0 0 Z " fill="black" transform="translate(1726,286)"/>
+</g>
+</g>
+</svg>
diff --git a/workspaces/bi/bi-extension/package.json b/workspaces/bi/bi-extension/package.json
index 0aeb1056bd1..468bb6dcf3e 100644
--- a/workspaces/bi/bi-extension/package.json
+++ b/workspaces/bi/bi-extension/package.json
@@ -2,7 +2,7 @@
     "name": "ballerina-integrator",
     "displayName": "WSO2 Integrator: BI",
     "description": "An extension which gives a development environment for designing, developing, debugging, and testing integration solutions.",
-    "version": "1.3.2",
+    "version": "1.4.0",
     "publisher": "wso2",
     "icon": "resources/images/wso2-ballerina-integrator-logo.png",
     "repository": {
@@ -169,8 +169,8 @@
         "copyVSIX": "copyfiles *.vsix ./vsix",
         "copyVSIXToRoot": "copyfiles -f ./vsix/* ../../..",
         "compile-tests": "tsc -p .",
-        "copy-balerina-ext": "copyfiles -f ../../ballerina/ballerina-extension/vsix/* ./vsix",
-        "e2e-test": "pnpm run copy-balerina-ext && pnpm run compile-tests && pnpm exec playwright test"
+        "copy-ballerina-ext": "copyfiles -f ../../ballerina/ballerina-extension/vsix/* ./vsix",
+        "e2e-test": "pnpm run copy-ballerina-ext && pnpm run compile-tests && pnpm exec playwright test"
     },
     "dependencies": {
         "@wso2/ballerina-core": "workspace:*",
diff --git a/workspaces/bi/bi-extension/src/test/code-server/setup-bi-code-server.bat b/workspaces/bi/bi-extension/src/test/code-server/setup-bi-code-server.bat
new file mode 100644
index 00000000000..4bd2b4df8bc
--- /dev/null
+++ b/workspaces/bi/bi-extension/src/test/code-server/setup-bi-code-server.bat
@@ -0,0 +1,90 @@
+@echo off
+REM =============================================================================
+REM WSO2 BI Extension Code-Server Setup Script (Windows Launcher)
+REM =============================================================================
+REM This batch file launches the bash setup script on Windows systems
+REM 
+REM Requirements:
+REM - Git for Windows (includes Git Bash) OR
+REM - WSL (Windows Subsystem for Linux) OR
+REM - MSYS2 / Cygwin
+REM =============================================================================
+
+echo ============================================
+echo WSO2 BI Extension Code-Server Setup
+echo ============================================
+echo.
+
+REM Get the directory where this batch file is located
+set "SCRIPT_DIR=%~dp0"
+set "BASH_SCRIPT=%SCRIPT_DIR%setup-bi-code-server.sh"
+
+REM Check if the bash script exists
+if not exist "%BASH_SCRIPT%" (
+    echo [ERROR] setup-bi-code-server.sh not found in %SCRIPT_DIR%
+    echo Please ensure the script file exists.
+    pause
+    exit /b 1
+)
+
+echo [INFO] Detecting bash environment...
+echo.
+
+REM Try Git Bash first (most common on Windows)
+where git.exe >nul 2>&1
+if %ERRORLEVEL% EQU 0 (
+    for /f "delims=" %%i in ('where git.exe') do set "GIT_PATH=%%i"
+    for %%i in ("!GIT_PATH!") do set "GIT_DIR=%%~dpi"
+    set "BASH_PATH=!GIT_DIR!bin\bash.exe"
+    
+    if exist "!BASH_PATH!" (
+        echo [SUCCESS] Found Git Bash: !BASH_PATH!
+        echo [INFO] Launching setup script...
+        echo.
+        "!BASH_PATH!" "%BASH_SCRIPT%"
+        goto :end
+    )
+)
+
+REM Try bash in PATH (WSL, MSYS2, etc.)
+where bash.exe >nul 2>&1
+if %ERRORLEVEL% EQU 0 (
+    echo [SUCCESS] Found bash in PATH
+    echo [INFO] Launching setup script...
+    echo.
+    bash.exe "%BASH_SCRIPT%"
+    goto :end
+)
+
+REM Try wsl
+where wsl.exe >nul 2>&1
+if %ERRORLEVEL% EQU 0 (
+    echo [SUCCESS] Found WSL
+    echo [INFO] Converting path and launching setup script...
+    echo.
+    wsl.exe bash "%BASH_SCRIPT%"
+    goto :end
+)
+
+REM No bash found
+echo [ERROR] Could not find a bash environment!
+echo.
+echo Please install one of the following:
+echo 1. Git for Windows (includes Git Bash)
+echo    Download: https://git-scm.com/download/win
+echo.
+echo 2. Windows Subsystem for Linux (WSL)
+echo    Run: wsl --install
+echo.
+echo 3. MSYS2
+echo    Download: https://www.msys2.org/
+echo.
+pause
+exit /b 1
+
+:end
+if %ERRORLEVEL% NEQ 0 (
+    echo.
+    echo [ERROR] Setup script failed with exit code %ERRORLEVEL%
+    pause
+)
diff --git a/workspaces/bi/bi-extension/src/test/code-server/setup-bi-code-server.sh b/workspaces/bi/bi-extension/src/test/code-server/setup-bi-code-server.sh
new file mode 100755
index 00000000000..1f80c3092ea
--- /dev/null
+++ b/workspaces/bi/bi-extension/src/test/code-server/setup-bi-code-server.sh
@@ -0,0 +1,540 @@
+#!/bin/bash
+
+# =============================================================================
+# WSO2 BI Extension Code-Server Setup Script
+# =============================================================================
+# This script automates the setup of code-server with WSO2 BI extensions
+# 
+# Supported Platforms:
+# - macOS (via Homebrew)
+# - Linux (via install script)
+# - Windows (via WSL, Chocolatey, Scoop, or winget)
+# - Git Bash / MSYS2 / Cygwin
+#
+# Features:
+# 1. Installs code-server if not present
+# 2. Automatically copies Ballerina VSIX dependency
+# 3. Prompts for VSIX file paths (with smart defaults)
+# 4. Installs extensions to code-server
+# 5. Configures code-server settings
+# 6. Starts code-server with proper configuration
+#
+# Usage:
+#   bash setup-bi-code-server.sh
+# =============================================================================
+
+# Ensure script is run with bash
+if [ -z "$BASH_VERSION" ]; then
+    echo "Error: This script requires bash. Please run with: bash $0"
+    exit 1
+fi
+
+set -e  # Exit on any error
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Default configuration
+DEFAULT_PORT=8080
+DEFAULT_HOST="127.0.0.1"
+WORKSPACE_PATH=""
+
+# =============================================================================
+# Utility Functions
+# =============================================================================
+
+print_header() {
+    echo ""
+    printf "${BLUE}============================================${NC}\n"
+    printf "${BLUE}  WSO2 BI Extension Code-Server Setup${NC}\n"
+    printf "${BLUE}============================================${NC}\n"
+    echo ""
+}
+
+print_step() {
+    printf "${YELLOW}[STEP]${NC} %s\n" "$1"
+}
+
+print_success() {
+    printf "${GREEN}[SUCCESS]${NC} %s\n" "$1"
+}
+
+print_error() {
+    printf "${RED}[ERROR]${NC} %s\n" "$1"
+}
+
+print_info() {
+    printf "${BLUE}[INFO]${NC} %s\n" "$1"
+}
+
+# =============================================================================
+# Step 1: Check and Install Code-Server
+# =============================================================================
+
+check_and_install_code_server() {
+    print_step "Checking if code-server is installed..."
+    
+    if command -v code-server &> /dev/null; then
+        print_success "Code-server is already installed!"
+        code-server --version
+        return 0
+    fi
+    
+    print_info "Code-server not found. Installing..."
+    
+    # Detect OS and install accordingly
+    if [[ "$OSTYPE" == "darwin"* ]]; then
+        # macOS
+        if command -v brew &> /dev/null; then
+            print_info "Installing code-server using Homebrew..."
+            brew install code-server
+        else
+            print_error "Homebrew not found. Please install Homebrew first or install code-server manually."
+            echo "Visit: https://github.com/coder/code-server#install"
+            exit 1
+        fi
+    elif [[ "$OSTYPE" == "linux-gnu"* ]] || [[ "$OSTYPE" == "linux" ]]; then
+        # Linux (including WSL)
+        print_info "Installing code-server using curl..."
+        curl -fsSL https://code-server.dev/install.sh | sh
+    elif [[ "$OSTYPE" == "msys" ]] || [[ "$OSTYPE" == "cygwin" ]] || [[ "$OSTYPE" == "win32" ]] || [[ -n "$WINDIR" ]]; then
+        # Windows (Git Bash, MSYS2, Cygwin, or native Windows)
+        print_info "Windows detected. Installing code-server..."
+        
+        # Check if running in WSL
+        if grep -qi microsoft /proc/version 2>/dev/null; then
+            print_info "WSL detected. Using Linux installation method..."
+            curl -fsSL https://code-server.dev/install.sh | sh
+        # Check for Chocolatey
+        elif command -v choco &> /dev/null; then
+            print_info "Installing code-server using Chocolatey..."
+            choco install code-server -y
+        # Check for Scoop
+        elif command -v scoop &> /dev/null; then
+            print_info "Installing code-server using Scoop..."
+            scoop install code-server
+        # Check for winget (Windows Package Manager)
+        elif command -v winget.exe &> /dev/null || command -v winget &> /dev/null; then
+            print_info "Installing code-server using winget..."
+            winget install -e --id coder.code-server
+        else
+            print_error "No supported package manager found (Chocolatey, Scoop, or winget)."
+            echo ""
+            echo "Please install code-server manually using one of these methods:"
+            echo ""
+            echo "1. Using npm (if Node.js is installed):"
+            echo "   npm install --global code-server"
+            echo ""
+            echo "2. Using Chocolatey:"
+            echo "   choco install code-server"
+            echo ""
+            echo "3. Using Scoop:"
+            echo "   scoop install code-server"
+            echo ""
+            echo "4. Download standalone binary:"
+            echo "   Visit: https://github.com/coder/code-server/releases"
+            echo ""
+            exit 1
+        fi
+    else
+        print_error "Unsupported operating system: $OSTYPE"
+        echo "Please install code-server manually: https://github.com/coder/code-server#install"
+        exit 1
+    fi
+    
+    # Verify installation
+    if command -v code-server &> /dev/null; then
+        print_success "Code-server installed successfully!"
+        code-server --version
+    else
+        print_error "Failed to install code-server!"
+        exit 1
+    fi
+}
+
+# =============================================================================
+# Step 2: Get VSIX File Paths
+# =============================================================================
+
+get_vsix_paths() {
+    print_step "Getting VSIX file paths..."
+    
+    # Get the directory where this script is located
+    SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+    # Navigate to the bi-extension root (3 levels up: code-server -> test -> src -> bi-extension)
+    BI_EXTENSION_ROOT="$(cd "$SCRIPT_DIR/../../.." && pwd)"
+    # Default path to VSIX directory (in bi-extension's vsix folder)
+    DEFAULT_VSIX_DIR="$BI_EXTENSION_ROOT/vsix"
+    
+    # Automatically copy Ballerina VSIX if not present
+    echo ""
+    print_info "Checking for Ballerina VSIX in $DEFAULT_VSIX_DIR..."
+    BALLERINA_VSIX_CHECK=$(find "$DEFAULT_VSIX_DIR" -maxdepth 1 -name "ballerina-*.vsix" -type f 2>/dev/null | grep -v "ballerina-integrator" | head -n 1)
+    
+    if [[ -z "$BALLERINA_VSIX_CHECK" ]]; then
+        print_info "Ballerina VSIX not found. Running 'pnpm run copy-ballerina-ext'..."
+        if command -v pnpm &> /dev/null; then
+            (cd "$BI_EXTENSION_ROOT" && pnpm run copy-ballerina-ext) || {
+                print_error "Failed to copy Ballerina VSIX. Please ensure the Ballerina extension is built."
+            }
+        else
+            print_error "pnpm not found. Please install pnpm or copy the Ballerina VSIX manually."
+        fi
+    else
+        print_success "Ballerina VSIX already present: $BALLERINA_VSIX_CHECK"
+    fi
+    
+    # Get Ballerina VSIX path
+    while true; do
+        echo ""
+        print_info "Default: Look for Ballerina VSIX in $DEFAULT_VSIX_DIR"
+        read -p "Enter the path to the Ballerina VSIX file (or press Enter to use default): " BALLERINA_VSIX_PATH
+        
+        if [[ -z "$BALLERINA_VSIX_PATH" ]]; then
+            # Use default path - find the first ballerina-*.vsix file (excluding ballerina-integrator)
+            if [[ -d "$DEFAULT_VSIX_DIR" ]]; then
+                BALLERINA_VSIX_PATH=$(find "$DEFAULT_VSIX_DIR" -maxdepth 1 -name "ballerina-*.vsix" -type f | grep -v "ballerina-integrator" | head -n 1)
+                if [[ -f "$BALLERINA_VSIX_PATH" ]]; then
+                    print_info "Using default Ballerina VSIX: $BALLERINA_VSIX_PATH"
+                else
+                    print_error "No Ballerina VSIX file found in default location: $DEFAULT_VSIX_DIR"
+                    print_info "Please ensure the Ballerina extension is built in the workspace."
+                    continue
+                fi
+            else
+                print_error "Default VSIX directory not found: $DEFAULT_VSIX_DIR"
+                print_info "Please enter the path manually."
+                continue
+            fi
+        else
+            # Expand tilde to home directory
+            BALLERINA_VSIX_PATH="${BALLERINA_VSIX_PATH/#\~/$HOME}"
+        fi
+        
+        if [[ -f "$BALLERINA_VSIX_PATH" ]] && [[ "$BALLERINA_VSIX_PATH" == *.vsix ]]; then
+            print_success "Ballerina VSIX file found: $BALLERINA_VSIX_PATH"
+            break
+        else
+            print_error "File not found or not a .vsix file: $BALLERINA_VSIX_PATH"
+        fi
+    done
+    
+    # Get Ballerina Integrator VSIX path
+    while true; do
+        echo ""
+        print_info "Default: Look for Ballerina Integrator VSIX in $DEFAULT_VSIX_DIR"
+        read -p "Enter the path to the Ballerina Integrator VSIX file (or press Enter to use default): " BI_VSIX_PATH
+        
+        if [[ -z "$BI_VSIX_PATH" ]]; then
+            # Use default path - find the first ballerina-integrator-*.vsix file
+            if [[ -d "$DEFAULT_VSIX_DIR" ]]; then
+                BI_VSIX_PATH=$(find "$DEFAULT_VSIX_DIR" -maxdepth 1 -name "ballerina-integrator-*.vsix" | head -n 1)
+                if [[ -f "$BI_VSIX_PATH" ]]; then
+                    print_info "Using default Ballerina Integrator VSIX: $BI_VSIX_PATH"
+                else
+                    print_error "No Ballerina Integrator VSIX file found in default location: $DEFAULT_VSIX_DIR"
+                    print_info "Please ensure the BI extension is built first (run 'pnpm run rebuild')."
+                    continue
+                fi
+            else
+                print_error "Default VSIX directory not found: $DEFAULT_VSIX_DIR"
+                print_info "Please enter the path manually."
+                continue
+            fi
+        else
+            # Expand tilde to home directory
+            BI_VSIX_PATH="${BI_VSIX_PATH/#\~/$HOME}"
+        fi
+        
+        if [[ -f "$BI_VSIX_PATH" ]] && [[ "$BI_VSIX_PATH" == *.vsix ]]; then
+            print_success "Ballerina Integrator VSIX file found: $BI_VSIX_PATH"
+            break
+        else
+            print_error "File not found or not a .vsix file: $BI_VSIX_PATH"
+        fi
+    done
+}
+
+# =============================================================================
+# Step 3: Uninstall Existing Extensions
+# =============================================================================
+
+uninstall_existing_extensions() {
+    print_step "Uninstalling existing Ballerina and Ballerina Integrator extensions (if any)..."
+    code-server --uninstall-extension "ballerina.ballerina" || true
+    code-server --uninstall-extension "wso2.ballerina-integrator" || true
+    print_success "Uninstallation step completed."
+}
+
+# =============================================================================
+# Step 4: Install Extensions
+# =============================================================================
+
+install_extensions() {
+    print_step "Installing extensions to code-server..."
+    
+    # Install Ballerina extension first (dependency)
+    print_info "Installing Ballerina extension..."
+    if code-server --install-extension "$BALLERINA_VSIX_PATH"; then
+        print_success "Ballerina extension installed successfully!"
+    else
+        print_error "Failed to install Ballerina extension!"
+        exit 1
+    fi
+    
+    # Install Ballerina Integrator extension
+    print_info "Installing Ballerina Integrator extension..."
+    if code-server --install-extension "$BI_VSIX_PATH"; then
+        print_success "Ballerina Integrator extension installed successfully!"
+    else
+        print_error "Failed to install Ballerina Integrator extension!"
+        exit 1
+    fi
+    
+    # List installed extensions for verification
+    echo ""
+    print_info "Installed extensions:"
+    code-server --list-extensions | grep -E "(ballerina|wso2)" || true
+}
+
+# =============================================================================
+# Step 5: Configure Code-Server Settings
+# =============================================================================
+
+configure_code_server_settings() {
+    print_step "Configuring code-server settings..."
+    
+    # Get code-server config directory
+    CONFIG_DIR="$HOME/.local/share/code-server/User"
+    mkdir -p "$CONFIG_DIR"
+    
+    SETTINGS_FILE="$CONFIG_DIR/settings.json"
+    
+    # Create or update settings.json
+    print_info "Configuring settings.json..."
+    
+    # Check if settings file exists
+    if [[ -f "$SETTINGS_FILE" ]]; then
+        print_info "Existing settings.json found. Backing up..."
+        cp "$SETTINGS_FILE" "$SETTINGS_FILE.backup.$(date +%Y%m%d_%H%M%S)"
+    fi
+    
+    # Create settings with trusted extensions and default password requirement disabled
+    cat > "$SETTINGS_FILE" << 'EOF'
+{
+    "extensions.autoCheckUpdates": false,
+    "extensions.autoUpdate": false,
+    "workbench.enableExperiments": false,
+    "extensions.ignoreRecommendations": true,
+    "security.workspace.trust.enabled": false,
+    "extensions.confirmedUriHandlerExtensionIds": [
+        "wso2.ballerina",
+        "wso2.ballerina-integrator",
+        "ballerina.ballerina"
+    ],
+    "security.allowedUNCHosts": [],
+    "security.restrictUNCAccess": false
+}
+EOF
+    
+    print_success "Settings configured successfully!"
+    print_info "Settings file: $SETTINGS_FILE"
+}
+
+# =============================================================================
+# Step 6: Configure Default Password
+# =============================================================================
+
+configure_default_password() {
+    print_step "Configuring code-server authentication..."
+    
+    # Get code-server config directory
+    CONFIG_DIR="$HOME/.config/code-server"
+    mkdir -p "$CONFIG_DIR"
+    
+    CONFIG_FILE="$CONFIG_DIR/config.yaml"
+    
+    # Check if config exists
+    if [[ -f "$CONFIG_FILE" ]]; then
+        print_info "Existing config.yaml found. Backing up..."
+        cp "$CONFIG_FILE" "$CONFIG_FILE.backup.$(date +%Y%m%d_%H%M%S)"
+    fi
+    
+    # Create new config without authentication
+    cat > "$CONFIG_FILE" << EOF
+bind-addr: 127.0.0.1:8080
+auth: none
+cert: false
+EOF
+    print_success "Authentication disabled - no password required!"
+    print_info "Config file: $CONFIG_FILE"
+}
+
+# =============================================================================
+# Step 7: Get Workspace and Server Configuration
+# =============================================================================
+
+get_server_config() {
+    print_step "Configuring server settings..."
+    
+    # Get workspace path
+    echo ""
+    print_info "Current directory: $(pwd)"
+    read -p "Enter workspace path (leave empty for current directory): " WORKSPACE_INPUT
+    
+    if [[ -z "$WORKSPACE_INPUT" ]]; then
+        WORKSPACE_PATH="$(pwd)"
+        print_info "Using current directory as workspace"
+    else
+        # Expand tilde to home directory
+        WORKSPACE_PATH="${WORKSPACE_INPUT/#\~/$HOME}"
+        
+        # Convert to absolute path if it's relative
+        if [[ ! "$WORKSPACE_PATH" = /* ]]; then
+            WORKSPACE_PATH="$(cd "$WORKSPACE_PATH" 2>/dev/null && pwd)" || {
+                print_error "Cannot resolve relative path: $WORKSPACE_INPUT"
+                print_info "Please use an absolute path or ensure the directory exists"
+                exit 1
+            }
+        fi
+        
+        print_info "Processed workspace path: $WORKSPACE_PATH"
+    fi
+    
+    # Verify workspace exists
+    if [[ ! -d "$WORKSPACE_PATH" ]]; then
+        print_error "Workspace directory does not exist: $WORKSPACE_PATH"
+        print_info "Please check the path and try again"
+        exit 1
+    fi
+    
+    # Get the absolute path to avoid any issues
+    WORKSPACE_PATH="$(cd "$WORKSPACE_PATH" && pwd)"
+    print_success "Workspace set to: $WORKSPACE_PATH"
+    
+    # Get port (optional)
+    echo ""
+    read -p "Enter port number (default: $DEFAULT_PORT): " PORT_INPUT
+    if [[ -z "$PORT_INPUT" ]]; then
+        SERVER_PORT=$DEFAULT_PORT
+    else
+        SERVER_PORT=$PORT_INPUT
+    fi
+    
+    # Get host (optional)
+    echo ""
+    read -p "Enter host address (default: $DEFAULT_HOST): " HOST_INPUT
+    if [[ -z "$HOST_INPUT" ]]; then
+        SERVER_HOST=$DEFAULT_HOST
+    else
+        SERVER_HOST=$HOST_INPUT
+    fi
+    
+    print_info "Server will run on: http://$SERVER_HOST:$SERVER_PORT/?folder=$WORKSPACE_PATH"
+}
+
+# =============================================================================
+# Step 8: Start Code-Server
+# =============================================================================
+
+start_code_server() {
+    print_step "Starting code-server..."
+    
+    echo ""
+    print_info "Code-server is starting with the following configuration:"
+    echo "  - Host: $SERVER_HOST"
+    echo "  - Port: $SERVER_PORT"
+    echo "  - Workspace: $WORKSPACE_PATH"
+    echo ""
+    
+    # Double-check workspace exists
+    if [[ ! -d "$WORKSPACE_PATH" ]]; then
+        print_error "CRITICAL: Workspace directory disappeared: $WORKSPACE_PATH"
+        exit 1
+    fi
+    
+    print_info "Final workspace verification successful: $(ls -la "$WORKSPACE_PATH" | head -3)"
+    
+    # Check authentication status from config
+    CONFIG_FILE="$HOME/.config/code-server/config.yaml"
+    AUTH_TYPE="none"
+    PASSWORD=""
+    
+    if [[ -f "$CONFIG_FILE" ]]; then
+        AUTH_TYPE=$(grep "^auth:" "$CONFIG_FILE" | cut -d' ' -f2)
+        if [[ "$AUTH_TYPE" == "password" ]]; then
+            PASSWORD=$(grep "^password:" "$CONFIG_FILE" | cut -d' ' -f2)
+        fi
+    fi
+    
+    echo ""
+    printf "${GREEN}🚀 CODE-SERVER READY!${NC}\n"
+    printf "${GREEN}===========================================${NC}\n"
+    printf "${GREEN}1. Open your web browser${NC}\n"
+    printf "${GREEN}2. Navigate to: ${BLUE}http://%s:%s/?folder=%s${NC}\n" "$SERVER_HOST" "$SERVER_PORT" "$WORKSPACE_PATH"
+    
+    if [[ "$AUTH_TYPE" == "none" ]]; then
+        printf "${GREEN}3. No password required! 🎉${NC}\n"
+    elif [[ -n "$PASSWORD" ]]; then
+        printf "${GREEN}3. Enter password: ${YELLOW}%s${NC}\n" "$PASSWORD"
+    fi
+    
+    printf "${GREEN}4. Your WSO2 BI extensions are ready to use!${NC}\n"
+    echo ""
+    print_success "Code-server running... Press Ctrl+C to stop."
+    echo ""
+    
+    # Debug: Show the exact command that will be executed
+    print_info "Executing command: code-server --bind-addr \"$SERVER_HOST:$SERVER_PORT\" \"$WORKSPACE_PATH\""
+    
+    # Start code-server
+    exec code-server --bind-addr "$SERVER_HOST:$SERVER_PORT" "$WORKSPACE_PATH"
+}
+
+# =============================================================================
+# Main Execution
+# =============================================================================
+
+main() {
+    print_header
+    
+    # Step 1: Check and install code-server
+    check_and_install_code_server
+    
+    # Step 2: Get VSIX file paths
+    get_vsix_paths
+
+    # Step 3: Uninstall existing extensions to avoid conflicts
+    uninstall_existing_extensions
+
+    # Step 4: Install extensions
+    install_extensions
+
+    # Step 5: Configure code-server settings (trust extensions)
+    configure_code_server_settings
+
+    # Step 6: Disable authentication (no password required)
+    configure_default_password
+
+    # Step 7: Get server configuration
+    get_server_config
+
+    # Step 8: Start code-server
+    start_code_server
+}
+
+# =============================================================================
+# Script Entry Point
+# =============================================================================
+
+# Handle Ctrl+C gracefully
+trap 'printf "\n${YELLOW}Script interrupted by user${NC}\n"; exit 0' INT
+
+# Check if running as source
+if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
+    main "$@"
+fi
\ No newline at end of file
diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/service-class-designer/service-class.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/service-class-designer/service-class.spec.ts
new file mode 100644
index 00000000000..2326d863479
--- /dev/null
+++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/service-class-designer/service-class.spec.ts
@@ -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 { test } from '@playwright/test';
+import { addArtifact, getWebview, initTest, page } from '../utils';
+import { ServiceClassEditorUtils } from './serviceEditorUtils';
+
+export default function createTests() {
+    test.describe('Service Class Tests', {
+        tag: '@group1',
+    }, async () => {
+        initTest();
+        test('Create Service Class', async ({ }, testInfo) => {
+            const testAttempt = testInfo.retry + 1;
+
+            console.log('Creating a new Service Class in test attempt: ', testAttempt);
+            
+            // Creating a Service Class
+            await addArtifact('Type', 'type');
+            
+            // Wait for page to be stable before accessing iframe
+            await page.page.waitForLoadState('networkidle');
+
+            // Get webview directly from utils
+            const artifactWebView = await getWebview('WSO2 Integrator: BI', page);
+            const serviceClassUtils = new ServiceClassEditorUtils(page.page, artifactWebView);
+
+            // Wait for type editor to be ready
+            await serviceClassUtils.waitForTypeEditor();
+
+            const sampleName = `MyService${testAttempt}`;
+            // Create service class
+            const serviceForm = await serviceClassUtils.createServiceClass(sampleName, [
+                { name: 'name', returnType: 'string', type: 'Resource' },
+                { name: 'age', returnType: 'int', type: 'Remote' }
+            ], [
+                { name: 'firstName', type: 'string' },
+                { name: 'id', type: 'int' }
+            ]);
+            
+            await serviceClassUtils.renameServiceClass(`Service${testAttempt}`);
+            await serviceClassUtils.editMethod('name', 'fullName');
+            await serviceClassUtils.deleteVariable('id');
+        });
+    });
+}
diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/service-class-designer/serviceEditorUtils.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/service-class-designer/serviceEditorUtils.ts
new file mode 100644
index 00000000000..7ab386807d9
--- /dev/null
+++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/service-class-designer/serviceEditorUtils.ts
@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { Frame, Page } from '@playwright/test';
+import { Form } from '@wso2/playwright-vscode-tester';
+
+export interface ServiceMethod {
+    name: string;
+    returnType: string;
+    type: 'Resource' | 'Remote';
+}
+
+export interface ServiceVariable {
+    name: string;
+    type: string;
+}
+
+// Centralized wait configuration
+const WAIT_CONFIG = {
+    SHORT: 1000,
+    MEDIUM: 3000,
+    LONG: 10000,
+    DEFAULT_VISIBLE_TIMEOUT: 10000
+} as const;
+
+
+export class ServiceClassEditorUtils {
+    constructor(private page: Page, private artifactWebView: Frame) { }
+
+    // Centralized wait utilities
+    private async waitForElement(selector: string, timeout = WAIT_CONFIG.DEFAULT_VISIBLE_TIMEOUT) {
+        const element = this.artifactWebView.locator(selector);
+        await element.waitFor({ state: 'visible', timeout});
+        return element;
+    }
+
+    private async waitForElementByTestId(testId: string, timeout = WAIT_CONFIG.DEFAULT_VISIBLE_TIMEOUT) {
+        const element = this.artifactWebView.getByTestId(testId);
+        await element.waitFor({ state: 'visible', timeout });
+        return element;
+    }
+
+    private async waitForButton(name: string, timeout = WAIT_CONFIG.DEFAULT_VISIBLE_TIMEOUT) {
+        const button = this.artifactWebView.getByRole('button', { name });
+        await button.waitFor({ state: 'visible', timeout });
+        return button;
+    }
+
+    private async waitForTextbox(name: string, timeout = WAIT_CONFIG.DEFAULT_VISIBLE_TIMEOUT) {
+        const textbox = this.artifactWebView.getByRole('textbox', { name });
+        await textbox.waitFor({ state: 'visible', timeout });
+        return textbox;
+    }
+
+    // Handle type completion consistently
+    private async handleTypeCompletion(inputElement: any) {
+        await this.page.waitForTimeout(WAIT_CONFIG.MEDIUM);
+        const completion = this.artifactWebView.getByTestId('add-type-completion');
+
+        if (await completion.isVisible()) {
+            await inputElement.press('Escape');
+        }
+    }
+
+    async waitForTypeEditor(): Promise<void> {
+        await this.page.waitForTimeout(WAIT_CONFIG.MEDIUM);
+        await this.page.waitForLoadState('domcontentloaded');
+        await this.waitForElementByTestId('type-editor-container', WAIT_CONFIG.LONG);
+    }
+
+    async createServiceClass(name: string, methods: ServiceMethod[] = [], variables: ServiceVariable[] = []) {
+        const form = new Form(this.page, 'WSO2 Integrator: BI', this.artifactWebView);
+        await form.switchToFormView(false, this.artifactWebView);
+
+        await form.fill({
+            values: {
+                'Name': {
+                    type: 'input',
+                    value: name,
+                },
+                'Kind': {
+                    type: 'dropdown',
+                    value: 'Service Class',
+                }
+            }
+        });
+
+        await form.submit('Save');
+
+        // Wait for the service class node to appear
+        await this.waitForElementByTestId(`type-node-${name}-menu`, WAIT_CONFIG.LONG);
+
+        // Edit the service class
+        const serviceNode = this.artifactWebView.getByTestId(`type-node-${name}-menu`);
+        await serviceNode.getByRole('img').click();
+        await this.artifactWebView.getByText('Edit', { exact: true }).click();
+
+        // Add methods and variables
+        for (const method of methods) {
+            await this.addMethod(method.name, method.returnType, method.type);
+        }
+
+        for (const variable of variables) {
+            await this.addVariable(variable.name, variable.type);
+        }
+
+        return form;
+    }
+
+    async deleteVariable(variableName: string): Promise<void> {
+        const deleteButton = this.artifactWebView.getByTestId(`delete-variable-button-${variableName}`).locator('i');
+        await deleteButton.click({ force: true });
+
+        const okayButton = await this.waitForButton('Okay');
+        await okayButton.click({ force: true });
+    }
+
+    async editMethod(methodName: string, newName: string): Promise<void> {
+        const editButton = this.artifactWebView.getByTestId(`edit-method-button-${methodName}`).locator('i');
+        await editButton.click();
+
+        const resourcePathField = await this.waitForTextbox('Resource Path*The resource');
+        await resourcePathField.fill(newName);
+
+        const saveButton = await this.waitForButton('Save');
+        await saveButton.click();
+        await this.artifactWebView.waitForTimeout(WAIT_CONFIG.MEDIUM);
+    }
+
+    async renameServiceClass(newName: string): Promise<void> {
+        const editButton = await this.waitForButton(' Edit');
+        await editButton.click();
+        await this.page.waitForTimeout(WAIT_CONFIG.SHORT);
+
+        const renameButton = this.artifactWebView.getByTitle('Rename').locator('i');
+        await renameButton.click();
+        await this.page.waitForTimeout(WAIT_CONFIG.SHORT);
+
+        const classNameField = await this.waitForTextbox('Class Name*The name of the');
+        await classNameField.click();
+        await classNameField.fill(newName);
+
+        // Save changes with proper waits
+        const firstSaveButton = this.artifactWebView.getByRole('button', { name: 'Save' }).first();
+        await firstSaveButton.click();
+        await this.page.waitForTimeout(WAIT_CONFIG.SHORT);
+
+        const secondSaveButton = this.artifactWebView.getByRole('button', { name: 'Save' });
+        await secondSaveButton.click();
+        await this.page.waitForTimeout(WAIT_CONFIG.SHORT);
+    }
+
+    async addMethod(name: string, returnType: string, type: 'Resource' | 'Remote'): Promise<void> {
+        const methodButton = await this.waitForButton(' Method');
+        await methodButton.click();
+
+        await this.artifactWebView.getByText(type).click();
+
+        // Handle different input fields based on method type
+        const inputFieldName = type === 'Remote'
+            ? 'Function Name*The name of the'
+            : 'Resource Path*The resource';
+
+        const nameField = await this.waitForTextbox(inputFieldName);
+        await nameField.fill(name);
+
+        // Handle return type
+        const returnBox = await this.waitForTextbox('Return Type');
+        await returnBox.click();
+        await this.artifactWebView.getByText(returnType, { exact: true }).click();
+
+        await this.handleTypeCompletion(returnBox);
+
+        const saveButton = await this.waitForButton('Save');
+        await saveButton.click();
+    }
+
+    async addVariable(name: string, type: string): Promise<void> {
+        const variableButton = await this.waitForButton(' Variable');
+        await variableButton.click();
+
+        const nameField = await this.waitForTextbox('Variable Name*The name of the');
+        await nameField.fill(name);
+
+        const typeField = await this.waitForTextbox('Variable Type');
+        await typeField.fill(type);
+        await typeField.click();
+        await this.page.waitForTimeout(WAIT_CONFIG.SHORT);
+        await this.artifactWebView.getByText(type, { exact: true }).click();
+
+        await this.handleTypeCompletion(typeField);
+
+        const saveButton = await this.waitForButton('Save');
+        await saveButton.click();
+    }
+}
diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/template/template.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/template/template.spec.ts
new file mode 100644
index 00000000000..34594150411
--- /dev/null
+++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/template/template.spec.ts
@@ -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 { test } from '@playwright/test';
+import { initTest, page } from '../utils';
+import { switchToIFrame } from '@wso2/playwright-vscode-tester';
+
+export default function createTests() {
+    test.describe('Sample Tests', {
+        tag: '@group1',
+    }, async () => {
+        initTest();
+        test('Sample Test', async ({ }, testInfo) => {
+            const testAttempt = testInfo.retry + 1;
+            console.log('Sample test attempt: ', testAttempt);
+            const artifactWebView = await switchToIFrame('WSO2 Integrator: BI', page.page, 30000);
+            if (!artifactWebView) {
+                throw new Error('WSO2 Integrator: BI webview not found');
+            }
+            // Add test implementation here
+        });
+    });
+}
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 180a1f1a10f..b9fe8411782 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
@@ -47,6 +47,7 @@ import connectionArtifact from './other-artifacts/connection.spec';
 
 import configuration from './configuration/configuration.spec';
 import typeTest from './type/type.spec';
+import serviceTest from './service-class-designer/service-class.spec';
 
 import importIntegration from './import-integration/import-integration.spec';
 
@@ -93,7 +94,7 @@ test.describe(typeDiagramArtifact);
 test.describe(connectionArtifact);
 test.describe(configuration); // TODO: This tests is failing due to https://github.com/wso2/product-ballerina-integrator/issues/1231. Enable after fixing the issue.
 test.describe(typeTest); // TODO: This tests is failing due to https://github.com/wso2/product-ballerina-integrator/issues/1222. Enable after fixing the issue.
-
+test.describe(serviceTest);
 // <----Import Integration Test---->
 test.describe(importIntegration);
 
diff --git a/workspaces/bi/bi-extension/src/utils.ts b/workspaces/bi/bi-extension/src/utils.ts
index 01bb21b115c..3a5d920514a 100644
--- a/workspaces/bi/bi-extension/src/utils.ts
+++ b/workspaces/bi/bi-extension/src/utils.ts
@@ -35,7 +35,20 @@ export function getUri(webview: Webview, extensionUri: Uri, pathList: string[])
 }
 
 export function fetchProjectInfo(): ProjectInfo {
-    const workspaceUris = workspace.workspaceFolders ? workspace.workspaceFolders.map(folder => folder.uri) : [];
+    const workspaceFolders = workspace.workspaceFolders;
+    const isWorkspaceFile = workspace.workspaceFile?.scheme === "file";
+
+    if (workspaceFolders?.length > 1 && !isWorkspaceFile) {
+        return {
+            isBI: false,
+            isBallerina: false,
+            isMultiRoot: false
+        };
+    }
+
+    const workspaceUris = workspaceFolders
+        ? workspaceFolders.map(folder => folder.uri)
+        : [];
     let isBICount = 0; // Counter for workspaces with isBI set to true
     let isBalCount = 0; // Counter for workspaces with Ballerina project
 
diff --git a/workspaces/bi/bi-extension/tsconfig.json b/workspaces/bi/bi-extension/tsconfig.json
index ff20aa36dcc..367fcb13f5b 100644
--- a/workspaces/bi/bi-extension/tsconfig.json
+++ b/workspaces/bi/bi-extension/tsconfig.json
@@ -34,7 +34,8 @@
         "node_modules",
         ".vscode-test",
         "target",
-        "extractedDistribution"
+        "extractedDistribution",
+        "src/test/test-resources"
     ],
     "include": [
         "src",
diff --git a/workspaces/choreo/choreo-extension/package.json b/workspaces/choreo/choreo-extension/package.json
index 1c9071dd0d8..93809206609 100644
--- a/workspaces/choreo/choreo-extension/package.json
+++ b/workspaces/choreo/choreo-extension/package.json
@@ -158,7 +158,7 @@
         "description": "choreo-2",
         "default": {
           "fontPath": "./resources/font-wso2-vscode/dist/wso2-vscode.woff",
-          "fontCharacter": "\\f166"
+          "fontCharacter": "\\f180"
         }
       }
     }
diff --git a/workspaces/common-libs/font-wso2-vscode/package-lock.json b/workspaces/common-libs/font-wso2-vscode/package-lock.json
new file mode 100644
index 00000000000..26a3705ccc4
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/package-lock.json
@@ -0,0 +1,125 @@
+{
+  "name": "@wso2/font-wso2-vscode",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@wso2/font-wso2-vscode",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@vscode/codicons": "0.0.36",
+        "fantasticon": "^1.2.3",
+        "icon-font-generator": "^2.1.11",
+        "jsonc-parser": "^3.3.1"
+      }
+    },
+    "../../../common/temp/node_modules/.pnpm/@vscode+codicons@0.0.36/node_modules/@vscode/codicons": {
+      "version": "0.0.36",
+      "dev": true,
+      "license": "CC-BY-4.0",
+      "devDependencies": {
+        "ansi-regex": ">=5.0.1",
+        "fantasticon": "^1.2.3",
+        "opentype.js": "^1.3.3",
+        "release-it": "15.10.1",
+        "svg-sprite": "^1.5.2",
+        "svgo": "2.7.0"
+      }
+    },
+    "../../../common/temp/node_modules/.pnpm/fantasticon@1.2.3/node_modules/fantasticon": {
+      "version": "1.2.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "change-case": "^4.1.2",
+        "cli-color": "^2.0.0",
+        "commander": "^7.2.0",
+        "glob": "^7.2.0",
+        "handlebars": "^4.7.7",
+        "slugify": "^1.6.0",
+        "svg2ttf": "^6.0.3",
+        "svgicons2svgfont": "^10.0.3",
+        "ttf2eot": "^2.0.0",
+        "ttf2woff": "^3.0.0",
+        "ttf2woff2": "^4.0.4"
+      },
+      "bin": {
+        "fantasticon": "bin/fantasticon"
+      },
+      "devDependencies": {
+        "@types/cli-color": "^2.0.0",
+        "@types/glob": "^7.1.3",
+        "@types/jest": "^27.0.2",
+        "@types/node": "^16.10.2",
+        "@types/svg2ttf": "^5.0.1",
+        "@types/svgicons2svgfont": "^10.0.1",
+        "@types/ttf2eot": "^2.0.0",
+        "@types/ttf2woff": "^2.0.2",
+        "@types/ttf2woff2": "^2.0.0",
+        "jest": "^26.6.3",
+        "prettier": "^2.4.1",
+        "rimraf": "^3.0.2",
+        "semantic-release": "^18.0.0",
+        "ts-jest": "^26.5.6",
+        "typescript": "^4.4.3"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "../../../common/temp/node_modules/.pnpm/icon-font-generator@2.1.11/node_modules/icon-font-generator": {
+      "version": "2.1.11",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "colors": "^1.2.1",
+        "glob": "^7.1.2",
+        "minimist": "^1.2.0",
+        "webfonts-generator": "^0.4.0"
+      },
+      "bin": {
+        "icon-font-generator": "bin/icon-font-generator"
+      },
+      "devDependencies": {
+        "eslint": "^4.19.1",
+        "eslint-config-recommended": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=v8.1.0"
+      }
+    },
+    "../../../common/temp/node_modules/.pnpm/jsonc-parser@3.3.1/node_modules/jsonc-parser": {
+      "version": "3.3.1",
+      "dev": true,
+      "license": "MIT",
+      "devDependencies": {
+        "@types/mocha": "^10.0.7",
+        "@types/node": "^18.x",
+        "@typescript-eslint/eslint-plugin": "^7.13.1",
+        "@typescript-eslint/parser": "^7.13.1",
+        "eslint": "^8.57.0",
+        "mocha": "^10.4.0",
+        "rimraf": "^5.0.7",
+        "typescript": "^5.4.2"
+      }
+    },
+    "node_modules/@vscode/codicons": {
+      "resolved": "../../../common/temp/node_modules/.pnpm/@vscode+codicons@0.0.36/node_modules/@vscode/codicons",
+      "link": true
+    },
+    "node_modules/fantasticon": {
+      "resolved": "../../../common/temp/node_modules/.pnpm/fantasticon@1.2.3/node_modules/fantasticon",
+      "link": true
+    },
+    "node_modules/icon-font-generator": {
+      "resolved": "../../../common/temp/node_modules/.pnpm/icon-font-generator@2.1.11/node_modules/icon-font-generator",
+      "link": true
+    },
+    "node_modules/jsonc-parser": {
+      "resolved": "../../../common/temp/node_modules/.pnpm/jsonc-parser@3.3.1/node_modules/jsonc-parser",
+      "link": true
+    }
+  }
+}
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-arrow-outward.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-arrow-outward.svg
new file mode 100644
index 00000000000..e56ec52ec5d
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-arrow-outward.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="currentColor"
+        d="m16 8.4l-8.9 8.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7L14.6 7H7q-.425 0-.712-.288T6 6t.288-.712T7 5h10q.425 0 .713.288T18 6v10q0 .425-.288.713T17 17t-.712-.288T16 16z" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-bold.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-bold.svg
new file mode 100644
index 00000000000..8cc146e89c8
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-bold.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M8.8 19q-.825 0-1.412-.587T6.8 17V7q0-.825.588-1.412T8.8 5h3.525q1.625 0 3 1T16.7 8.775q0 1.275-.575 1.963t-1.075.987q.625.275 1.388 1.025T17.2 15q0 2.225-1.625 3.113t-3.05.887zm1.025-2.8h2.6q1.2 0 1.463-.612t.262-.888t-.262-.887t-1.538-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425t.375-.95q0-.6-.425-.975t-1.1-.375H9.825z" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-bulleted.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-bulleted.svg
new file mode 100644
index 00000000000..8cddba8798b
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-bulleted.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M10 19q-.425 0-.712-.288T9 18t.288-.712T10 17h10q.425 0 .713.288T21 18t-.288.713T20 19zm0-6q-.425 0-.712-.288T9 12t.288-.712T10 11h10q.425 0 .713.288T21 12t-.288.713T20 13zm0-6q-.425 0-.712-.288T9 6t.288-.712T10 5h10q.425 0 .713.288T21 6t-.288.713T20 7zM5 20q-.825 0-1.412-.587T3 18t.588-1.412T5 16t1.413.588T7 18t-.587 1.413T5 20m0-6q-.825 0-1.412-.587T3 12t.588-1.412T5 10t1.413.588T7 12t-.587 1.413T5 14m0-6q-.825 0-1.412-.587T3 6t.588-1.412T5 4t1.413.588T7 6t-.587 1.413T5 8" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-checklist.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-checklist.svg
new file mode 100644
index 00000000000..2703940e233
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-checklist.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+	<path fill="currentColor" d="m5.525 16.175l3.55-3.55q.3-.3.7-.288t.7.313q.275.3.275.7t-.275.7L6.25 18.3q-.3.3-.7.3t-.7-.3L2.7 16.15q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275zm0-8l3.55-3.55q.3-.3.7-.288t.7.313q.275.3.275.7t-.275.7L6.25 10.3q-.3.3-.7.3t-.7-.3L2.7 8.15q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275zM14 17q-.425 0-.712-.288T13 16t.288-.712T14 15h7q.425 0 .713.288T22 16t-.288.713T21 17zm0-8q-.425 0-.712-.288T13 8t.288-.712T14 7h7q.425 0 .713.288T22 8t-.288.713T21 9z" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-dm-query.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-dm-query.svg
new file mode 100644
index 00000000000..770716add7f
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-dm-query.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT 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="currentColor" d="M11 1.2h12l-4.8 5.76v5.4l-2.4-1.8v-3.6z" />
+    <rect x="1" y="20" width="20" height="1.8" rx=".9" fill="currentColor" />
+    <rect x="1" y="15" width="16" height="1.8" rx=".9" fill="currentColor" />
+    <rect x="1" y="10" width="12" height="1.8" rx=".9" fill="currentColor" />
+    <rect x="1" y="5" width="8" height="1.8" rx=".9" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-dm-submapping.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-dm-submapping.svg
new file mode 100644
index 00000000000..0de92431b9e
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-dm-submapping.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT 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 width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M11.6 6.5c-.599 0-1 .44-1 .9s.401.9 1 .9c.479 0 .9-.42.9-.9s-.421-.9-.9-.9m-1.8.9c0-.94.799-1.7 1.8-1.7.92 0 1.7.78 1.7 1.7s-.78 1.7-1.7 1.7c-1.001 0-1.8-.76-1.8-1.7m1.8 4.3c-.599 0-1 .44-1 .9s.401.9 1 .9c.479 0 .9-.42.9-.9s-.421-.9-.9-.9m-1.8.9c0-.94.799-1.7 1.8-1.7.92 0 1.7.78 1.7 1.7s-.78 1.7-1.7 1.7c-1.001 0-1.8-.76-1.8-1.7M2.5 1.3c-.599 0-1 .44-1 .9s.401.9 1 .9c.479 0 .9-.42.9-.9s-.421-.9-.9-.9m-1.8.9c0-.94.799-1.7 1.8-1.7.92 0 1.7.78 1.7 1.7s-.78 1.7-1.7 1.7C1.499 3.9.7 3.14.7 2.2m1.8 4.3c-.599 0-1 .44-1 .9s.401.9 1 .9c.479 0 .9-.42.9-.9s-.421-.9-.9-.9m-1.8.9c0-.94.799-1.7 1.8-1.7.92 0 1.7.78 1.7 1.7s-.78 1.7-1.7 1.7C1.499 9.1.7 8.34.7 7.4"
+        fill="#000" />
+    <path d="M3.4 7.4a.4.4 0 0 1 .4-.4h6.4a.4.4 0 0 1 0 .8H3.8a.4.4 0 0 1-.4-.4" fill="#000" />
+    <path
+        d="M3.4 2.2a.4.4 0 0 1 .4-.4v.4-.4h.02a1 1 0 0 1 .164.013c.104.012.249.036.42.082.344.093.797.278 1.248.645C6.57 3.285 7.4 4.714 7.4 7.4c0 2.407.766 3.585 1.458 4.17.353.297.704.456.965.54a2.3 2.3 0 0 0 .386.09h.017a.4.4 0 0 1-.051.8l.025-.4-.025.4h-.001l-.002-.001h-.004l-.012-.001-.038-.004-.124-.018a3 3 0 0 1-.417-.105 3.7 3.7 0 0 1-1.235-.69C7.434 11.415 6.6 9.993 6.6 7.4c0-2.514-.77-3.685-1.452-4.24a2.6 2.6 0 0 0-.953-.493 2 2 0 0 0-.38-.066L3.798 2.6h-.002.002a.4.4 0 0 1-.399-.4m6.826 10"
+        fill="#000" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-expand.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-expand.svg
new file mode 100644
index 00000000000..699460d23eb
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-expand.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="currentColor"
+        d="m12 15.15l-1.875-1.875q-.3-.3-.7-.3t-.7.3t-.3.713t.3.712l2.575 2.6q.3.3.7.3t.7-.3l2.6-2.6q.3-.3.3-.712t-.3-.713t-.712-.3t-.713.3zm0-6.3l1.875 1.875q.3.3.7.3t.7-.3t.3-.712t-.3-.713L12.7 6.7q-.3-.3-.7-.3t-.7.3L8.7 9.3q-.3.3-.287.7t.312.7t.713.3t.712-.3zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-heading.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-heading.svg
new file mode 100644
index 00000000000..e56b3eaa5ff
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-heading.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M9 13v3q0 .425-.288.713T8 17t-.712-.288T7 16V8q0-.425.288-.712T8 7t.713.288T9 8v3h6V8q0-.425.288-.712T16 7t.713.288T17 8v8q0 .425-.288.713T16 17t-.712-.288T15 16v-3z" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-input.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-input.svg
new file mode 100644
index 00000000000..91c10f217d6
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-input.svg
@@ -0,0 +1,23 @@
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT 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="16" height="16" viewBox="0 0 24 24">
+    <g transform="scale(1, -1) translate(0, -24)">
+        <path fill="currentColor"
+            d="M11 11.825V21q0 .425.288.713T12 22t.713-.288T13 21v-9.175l1.9 1.875q.275.275.688.288t.712-.288q.275-.275.275-.7t-.275-.7l-3.6-3.6q-.3-.3-.7-.3t-.7.3l-3.6 3.6q-.275.275-.288.688t.288.712q.275.275.7.275t.7-.275zM12 4Q8.65 4 6.325 6.325T4 12q0 .825.162 1.625t.488 1.55q.175.425.112.85t-.387.75q-.3.3-.737.138t-.663-.638Q2.5 15.25 2.25 14.188T2 12q0-2.075.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12q0 1.125-.238 2.213t-.737 2.112q-.225.45-.662.6t-.738-.15t-.387-.725t.087-.825q.35-.775.513-1.587T20 12q0-3.35-2.325-5.675T12 4" />
+    </g>
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-italic.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-italic.svg
new file mode 100644
index 00000000000..297c81b8571
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-italic.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M6.25 19q-.525 0-.888-.363T5 17.75t.363-.888t.887-.362H9l3-9H9.25q-.525 0-.888-.363T8 6.25t.363-.888T9.25 5h7.5q.525 0 .888.363T18 6.25t-.363.888t-.887.362H14.5l-3 9h2.25q.525 0 .888.363t.362.887t-.363.888t-.887.362z" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-key.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-key.svg
new file mode 100644
index 00000000000..0f11fabff6d
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-key.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="16" height="16" viewBox="0 0 24 24">
+    <path fill="currentColor"
+        d="M7 14q-.825 0-1.412-.587T5 12t.588-1.412T7 10t1.413.588T9 12t-.587 1.413T7 14m0 4q-2.5 0-4.25-1.75T1 12t1.75-4.25T7 6q1.675 0 3.038.825T12.2 9h8.375q.2 0 .388.075t.337.225l2 2q.15.15.212.325t.063.375t-.063.375t-.212.325l-3.175 3.175q-.125.125-.3.2t-.35.1t-.35-.025t-.325-.175L17.5 15l-1.425 1.075q-.125.1-.275.15t-.3.05t-.313-.05t-.287-.15L13.375 15H12.2q-.8 1.35-2.163 2.175T7 18m0-2q1.4 0 2.463-.85T10.875 13H14l1.45 1.025v.013v-.013L17.5 12.5l1.775 1.375L21.15 12h-.012h.012l-1-1v-.012V11h-9.275q-.35-1.3-1.412-2.15T7 8Q5.35 8 4.175 9.175T3 12t1.175 2.825T7 16" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-link.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-link.svg
new file mode 100644
index 00000000000..ed034e680d5
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-link.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-memory.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-memory.svg
new file mode 100644
index 00000000000..3ec0b91393b
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-memory.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <title>memory-chip</title>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="invisible_box" data-name="invisible box">
+      <rect width="48" height="48" fill="none"/>
+    </g>
+    <g id="icons_Q2" data-name="icons Q2">
+      <g>
+        <path d="M32,16H16V32H32ZM28,28H20V20h8Z"/>
+        <path d="M44,28H40V20h4a2,2,0,0,0,0-4H40V10a2,2,0,0,0-2-2H32V4a2,2,0,0,0-4,0V8H20V4a2,2,0,0,0-4,0V8H10a2,2,0,0,0-2,2v6H4a2,2,0,0,0,0,4H8v8H4a2,2,0,0,0,0,4H8v6a2,2,0,0,0,2,2h6v4a2,2,0,0,0,4,0V40h8v4a2,2,0,0,0,4,0V40h6a2,2,0,0,0,2-2V32h4a2,2,0,0,0,0-4Zm-8,8H12V12H36Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-milvus.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-milvus.svg
new file mode 100644
index 00000000000..24449702dca
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-milvus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.11px" height="24px" viewBox="0 0 256 175">
+	<path fill="#4fc4f9" d="M57.943 25.552c33.946-34.07 88.991-34.07 122.937 0c34 34.069 34 89.305 0 123.318c-33.946 34.013-88.991 34.013-122.937-.056L2.46 93.131a8.42 8.42 0 0 1 0-11.896zm109.763 16.364c-24.926-25.021-65.377-25.021-90.303 0L36.624 82.799c-2.405 2.457-2.405 6.367 0 8.768l40.833 40.939c24.927 25.021 65.378 25.021 90.304 0s24.927-65.569-.055-90.59m-44.825 1.62c23.638 0 42.801 19.579 42.801 43.731s-19.163 43.731-42.801 43.731s-42.801-19.58-42.801-43.731s19.162-43.731 42.8-43.731m130.7 37.754l-24.434-24.965c-1.476-1.508-3.936-.112-3.444 1.955a134.7 134.7 0 0 1 0 57.973c-.437 2.066 2.022 3.406 3.444 1.954l24.434-24.965c3.036-3.154 3.214-8.04.536-11.35z" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-numbered.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-numbered.svg
new file mode 100644
index 00000000000..efa7810e1f2
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-numbered.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M3.75 22q-.325 0-.537-.213T3 21.25t.213-.537t.537-.213H5.5v-.75h-.75q-.325 0-.537-.213T4 19t.213-.537t.537-.213h.75v-.75H3.75q-.325 0-.537-.213T3 16.75t.213-.537T3.75 16H6q.425 0 .713.288T7 17v1q0 .425-.288.713T6 19q.425 0 .713.288T7 20v1q0 .425-.288.713T6 22zm0-7q-.325 0-.537-.213T3 14.25v-2q0-.425.288-.712T4 11.25h1.5v-.75H3.75q-.325 0-.537-.213T3 9.75t.213-.537T3.75 9H6q.425 0 .713.288T7 10v1.75q0 .425-.288.713T6 12.75H4.5v.75h1.75q.325 0 .538.213T7 14.25t-.213.538T6.25 15zm1.5-7q-.325 0-.537-.213T4.5 7.25V3.5h-.75q-.325 0-.537-.213T3 2.75t.213-.537T3.75 2h1.5q.325 0 .538.213T6 2.75v4.5q0 .325-.213.538T5.25 8M10 19q-.425 0-.712-.288T9 18t.288-.712T10 17h10q.425 0 .713.288T21 18t-.288.713T20 19zm0-6q-.425 0-.712-.288T9 12t.288-.712T10 11h10q.425 0 .713.288T21 12t-.288.713T20 13zm0-6q-.425 0-.712-.288T9 6t.288-.712T10 5h10q.425 0 .713.288T21 6t-.288.713T20 7z" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-open-in.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-open-in.svg
new file mode 100644
index 00000000000..6f2d1e9f38b
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-open-in.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="currentColor"
+        d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21h-3q-.425 0-.712-.288T15 20t.288-.712T16 19h3V7H5v12h3q.425 0 .713.288T9 20t-.288.713T8 21zm6-1v-5.15l-.875.875q-.3.3-.712.288T8.7 15.7q-.275-.3-.287-.7t.287-.7l2.6-2.6q.15-.15.325-.212t.375-.063t.375.063t.325.212l2.6 2.6q.3.3.287.7t-.287.7q-.3.3-.712.313t-.713-.288L13 14.85V20q0 .425-.288.713T12 21t-.712-.288T11 20" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-panel-close.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-panel-close.svg
new file mode 100644
index 00000000000..74f801b460e
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-panel-close.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="currentColor"
+        d="M8 11.5h8l-4-4zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-7h14V5H5z" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-panel-open.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-panel-open.svg
new file mode 100644
index 00000000000..31670ea6cfb
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-panel-open.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="currentColor"
+        d="m12 11.5l4-4H8zM19 3q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3zM5 16v3h14v-3zm14-2V5H5v9zM5 16v3z" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-pinecone.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-pinecone.svg
new file mode 100644
index 00000000000..4c501640ec4
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-pinecone.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.34px" height="24px" viewBox="0 0 256 288">
+	<path fill="#201d1e" d="M108.634 254.436c9.08 0 16.44 7.361 16.44 16.442s-7.36 16.44-16.44 16.44s-16.442-7.36-16.442-16.44s7.361-16.442 16.442-16.442m91.216-29.998l16.247 4.814L203.2 272.78a8.47 8.47 0 0 1-8.7 6.046l-3.983-.273l-.098.08l-41.39-2.904l1.152-16.906l27.808 1.887l-18.205-26.262l13.926-9.656l18.229 26.295zm-176.837-30.09l16.903 1.197l-1.98 27.804L64.15 205.12l9.677 13.91l-26.248 18.248l26.792 7.895l-4.79 16.255l-43.732-12.885a8.47 8.47 0 0 1-6.058-8.726zM132.15 170.67l30.508 36.832l-13.75 11.389l-18.156-21.92l-5.886 33.702l-17.587-3.074l5.892-33.755l-24.442 14.412l-9.063-15.383l41.079-24.2a8.93 8.93 0 0 1 11.405 1.997m85.354-24.71l15.239-8.292l22.2 40.805a8.675 8.675 0 0 1-1.926 10.69l-3.141 2.714l-32.05 27.893l-11.386-13.09l21.548-18.747l-32.095-5.781l3.078-17.074l32.073 5.779zM37.782 103.298l11.48 13.008l-21.251 18.743l32.156 5.614l-2.98 17.091l-32.192-5.618l13.827 24.998l-15.18 8.398l-22.558-40.776a8.675 8.675 0 0 1 1.85-10.703zm108.694-13.42l30.404 36.734l-13.753 11.384l-18.152-21.93l-5.886 33.712l-17.587-3.074l5.872-33.624l-24.349 14.274l-9.027-15.403l37.4-21.929l.038-.142l.165.021l3.485-2.032a8.93 8.93 0 0 1 11.39 2.01m39.18-18.065l6.65-16.024l43.012 17.85a8.675 8.675 0 0 1 5.218 9.517l-.716 3.982l-7.345 41.78l-17.086-3.01l4.924-27.968l-28.537 15.772l-8.386-15.188l28.591-15.784zm-81.939-31.577l.74 17.334l-28.414 1.214l21.43 24.49l-13.056 11.424L62.95 70.173l-5.001 28l-17.078-3.054l8.184-45.759a8.674 8.674 0 0 1 8.17-7.139l4.02-.18l.09-.065zm58.121-36.965l30.267 36.965l-13.814 11.31l-17.964-21.943l-6.059 33.668l-17.57-3.162l6.068-33.743l-24.526 14.34l-9.007-15.415L150.428 1.22a8.93 8.93 0 0 1 11.41 2.052" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-postgresql.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-postgresql.svg
new file mode 100644
index 00000000000..e07ac8683e1
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-postgresql.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M23.56 14.723a.5.5 0 0 0-.057-.12q-.21-.395-1.007-.231c-1.654.34-2.294.13-2.526-.02c1.342-2.048 2.445-4.522 3.041-6.83c.272-1.05.798-3.523.122-4.73a1.6 1.6 0 0 0-.15-.236C21.693.91 19.8.025 17.51.001c-1.495-.016-2.77.346-3.116.479a10 10 0 0 0-.516-.082a8 8 0 0 0-1.312-.127c-1.182-.019-2.203.264-3.05.84C8.66.79 4.729-.534 2.296 1.19C.935 2.153.309 3.873.43 6.304c.041.818.507 3.334 1.243 5.744q.69 2.26 1.433 3.582q.83 1.493 1.714 1.79c.448.148 1.133.143 1.858-.729a56 56 0 0 1 1.945-2.206c.435.235.906.362 1.39.377v.004a11 11 0 0 0-.247.305c-.339.43-.41.52-1.5.745c-.31.064-1.134.233-1.146.811a.6.6 0 0 0 .091.327c.227.423.922.61 1.015.633c1.335.333 2.505.092 3.372-.679c-.017 2.231.077 4.418.345 5.088c.221.553.762 1.904 2.47 1.904q.375.001.829-.094c1.782-.382 2.556-1.17 2.855-2.906c.15-.87.402-2.875.539-4.101c.017-.07.036-.12.057-.136c0 0 .07-.048.427.03l.044.007l.254.022l.015.001c.847.039 1.911-.142 2.531-.43c.644-.3 1.806-1.033 1.595-1.67M2.37 11.876c-.744-2.435-1.178-4.885-1.212-5.571c-.109-2.172.417-3.683 1.562-4.493c1.837-1.299 4.84-.54 6.108-.13l-.01.01C6.795 3.734 6.843 7.226 6.85 7.44c0 .082.006.199.016.36c.034.586.1 1.68-.074 2.918c-.16 1.15.194 2.276.973 3.089q.12.126.252.237c-.347.371-1.1 1.193-1.903 2.158c-.568.682-.96.551-1.088.508c-.392-.13-.813-.587-1.239-1.322c-.48-.839-.963-2.032-1.415-3.512m6.007 5.088a1.6 1.6 0 0 1-.432-.178c.089-.039.237-.09.483-.14c1.284-.265 1.482-.451 1.915-1a8 8 0 0 1 .367-.443a.4.4 0 0 0 .074-.13c.17-.151.272-.11.436-.042c.156.065.308.26.37.475c.03.102.062.295-.045.445c-.904 1.266-2.222 1.25-3.168 1.013m2.094-3.988l-.052.14c-.133.357-.257.689-.334 1.004c-.667-.002-1.317-.288-1.81-.803c-.628-.655-.913-1.566-.783-2.5c.183-1.308.116-2.447.08-3.059l-.013-.22c.296-.262 1.666-.996 2.643-.772c.446.102.718.406.83.928c.585 2.704.078 3.83-.33 4.736a9 9 0 0 0-.23.546m7.364 4.572q-.024.266-.062.596l-.146.438a.4.4 0 0 0-.018.108c-.006.475-.054.649-.115.87a4.8 4.8 0 0 0-.18 1.057c-.11 1.414-.878 2.227-2.417 2.556c-1.515.325-1.784-.496-2.02-1.221a7 7 0 0 0-.078-.227c-.215-.586-.19-1.412-.157-2.555c.016-.561-.025-1.901-.33-2.646q.006-.44.019-.892a.4.4 0 0 0-.016-.113a2 2 0 0 0-.044-.208c-.122-.428-.42-.786-.78-.935c-.142-.059-.403-.167-.717-.087c.067-.276.183-.587.309-.925l.053-.142c.06-.16.134-.325.213-.5c.426-.948 1.01-2.246.376-5.178c-.237-1.098-1.03-1.634-2.232-1.51c-.72.075-1.38.366-1.709.532a6 6 0 0 0-.196.104c.092-1.106.439-3.174 1.736-4.482a4 4 0 0 1 .303-.276a.35.35 0 0 0 .145-.064c.752-.57 1.695-.85 2.802-.833q.616.01 1.174.081c1.94.355 3.244 1.447 4.036 2.383c.814.962 1.255 1.931 1.431 2.454c-1.323-.134-2.223.127-2.68.78c-.992 1.418.544 4.172 1.282 5.496c.135.242.252.452.289.54c.24.583.551.972.778 1.256c.07.087.138.171.189.245c-.4.116-1.12.383-1.055 1.717a35 35 0 0 1-.084.815c-.046.208-.07.46-.1.766m.89-1.621c-.04-.832.27-.919.597-1.01l.135-.041a1 1 0 0 0 .134.103c.57.376 1.583.421 3.007.134c-.202.177-.519.4-.953.601c-.41.19-1.096.333-1.747.364c-.72.034-1.086-.08-1.173-.151m.57-9.271a7 7 0 0 1-.105 1.001c-.055.358-.112.728-.127 1.177c-.014.436.04.89.093 1.33c.107.887.216 1.8-.207 2.701a4 4 0 0 1-.188-.385a8 8 0 0 0-.325-.617c-.616-1.104-2.057-3.69-1.32-4.744c.38-.543 1.342-.566 2.179-.463m.228 7.013l-.085-.107l-.035-.044c.726-1.2.584-2.387.457-3.439c-.052-.432-.1-.84-.088-1.222c.013-.407.066-.755.118-1.092c.064-.415.13-.844.111-1.35a.6.6 0 0 0 .012-.19c-.046-.486-.6-1.938-1.73-3.253a7.8 7.8 0 0 0-2.688-2.04A9.3 9.3 0 0 1 17.62.746c2.052.046 3.675.814 4.824 2.283a1 1 0 0 1 .067.1c.723 1.356-.276 6.275-2.987 10.54m-8.816-6.116c-.025.18-.31.423-.621.423l-.081-.006a.8.8 0 0 1-.506-.315c-.046-.06-.12-.178-.106-.285a.22.22 0 0 1 .093-.149c.118-.089.352-.122.61-.086c.316.044.642.193.61.418m7.93-.411c.011.08-.049.2-.153.31a.72.72 0 0 1-.408.223l-.075.005c-.293 0-.541-.234-.56-.371c-.024-.177.264-.31.56-.352c.298-.042.612.009.636.185" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-quote.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-quote.svg
new file mode 100644
index 00000000000..8df171ddf3b
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-quote.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M6.55 16.5L8 14q-1.65 0-2.825-1.175T4 10t1.175-2.825T8 6t2.825 1.175T12 10q0 .575-.137 1.063T11.45 12l-3.175 5.5q-.125.225-.35.363t-.5.137q-.575 0-.862-.5t-.013-1m9 0L17 14q-1.65 0-2.825-1.175T13 10t1.175-2.825T17 6t2.825 1.175T21 10q0 .575-.137 1.063T20.45 12l-3.175 5.5q-.125.225-.35.363t-.5.137q-.575 0-.862-.5t-.013-1" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-settings.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-settings.svg
new file mode 100644
index 00000000000..2bdff972f14
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-settings.svg
@@ -0,0 +1,22 @@
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT 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="currentColor"
+        d="M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zM11 20h1.975l.35-2.65q.775-.2 1.438-.587t1.212-.938l2.475 1.025l.975-1.7l-2.15-1.625q.125-.35.175-.737T17.5 12t-.05-.787t-.175-.738l2.15-1.625l-.975-1.7l-2.475 1.05q-.55-.575-1.212-.962t-1.438-.588L13 4h-1.975l-.35 2.65q-.775.2-1.437.588t-1.213.937L5.55 7.15l-.975 1.7l2.15 1.6q-.125.375-.175.75t-.05.8q0 .4.05.775t.175.75l-2.15 1.625l.975 1.7l2.475-1.05q.55.575 1.213.963t1.437.587zm1.05-4.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.487 1.025T8.55 12t1.013 2.475T12.05 15.5M12 12" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-solace.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-solace.svg
new file mode 100644
index 00000000000..0c504febd3e
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-solace.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1800" height="1800" viewBox="0 0 1800 1800">
+<g transform="translate(900, 900)">
+<g transform="translate(-900, -250)">
+<path d="M0 0 C0.79912811 -0.00067474 1.59825623 -0.00134949 2.42160034 -0.00204468 C36.6019933 0.04367103 76.40389152 6.10617789 101.8359375 31.18359375 C120.44122593 51.3731753 122.01476826 79.08044023 122.03271484 105.13452148 C122.03739616 106.68333578 122.04254183 108.23214873 122.04811096 109.78096008 C122.05929219 113.08799036 122.06777311 116.39501216 122.07423019 119.70205498 C122.08500342 124.93454626 122.10526663 130.16697507 122.12734985 135.39942932 C122.18898096 150.26845471 122.24338135 165.137473 122.27636719 180.0065918 C122.29471129 188.24011593 122.32362939 196.47353187 122.3643719 204.70697647 C122.38541555 209.0553492 122.40089574 213.40358592 122.40317917 217.75201225 C122.40532609 221.83404534 122.42119956 225.91579351 122.44756889 229.99773979 C122.45475696 231.49328032 122.45686523 232.98885539 122.45346642 234.48440933 C122.44956257 236.52884637 122.46580693 238.57329206 122.48300171 240.61766052 C122.48796693 242.33175692 122.48796693 242.33175692 122.49303246 244.08048153 C123.02721665 248.51307455 124.63811829 251.82987656 127.5625 255.1875 C131.18636119 256.8525173 134.22113099 256.54447715 137.875 255.25 C141.09742078 253.15667549 144.00193684 250.79718331 146.875 248.25 C149.73698697 250.96266591 151.98432246 253.69168017 154.125 257 C154.64578125 257.79921875 155.1665625 258.5984375 155.703125 259.421875 C156.28320312 260.32679688 156.28320312 260.32679688 156.875 261.25 C150.75157663 275.51627358 130.57300251 286.71188285 116.875 292.25 C99.16940457 298.29104611 77.93815442 299.99027615 60.58984375 291.8515625 C47.26504214 283.99088817 41.7327283 272.72782737 37.875 258.25 C34.95275678 257.91849995 34.95275678 257.91849995 33.54296875 259.4296875 C33.05441406 259.98914063 32.56585937 260.54859375 32.0625 261.125 C9.64708226 284.38451297 -25.54360609 296.46013764 -57.19140625 297.30517578 C-76.87420066 297.41949504 -96.87729112 289.32792525 -111.01171875 275.62109375 C-125.70277978 259.13777759 -126.26338802 239.23704164 -125.125 218.25 C-122.97688347 199.2048431 -110.83761373 183.22680908 -96.27734375 171.5859375 C-91.10651695 167.75427154 -85.72368037 164.41313109 -80.125 161.25 C-79.526875 160.90646484 -78.92875 160.56292969 -78.3125 160.20898438 C-49.24617667 143.64723556 -16.75253602 133.18850966 15 123.0625 C15.91274689 122.77006409 16.82549377 122.47762817 17.76589966 122.17633057 C20.3651927 121.34614146 22.96710505 120.52485271 25.5703125 119.70703125 C26.35124771 119.45761276 27.13218292 119.20819427 27.93678284 118.95121765 C31.43997814 117.86283755 34.17149014 117.25 37.875 117.25 C37.80718474 110.15535924 37.71707876 103.06123484 37.61254883 95.96704102 C37.57960062 93.56117927 37.55147853 91.15524581 37.52856445 88.74926758 C37.76968511 59.31491302 37.76968511 59.31491302 25.5 33.3125 C11.53322243 22.33860334 -5.23941181 20.13634309 -22.609375 21.70703125 C-32.10559089 23.17366904 -40.08563314 26.21063314 -46.9375 33.0625 C-49.46225593 36.74143007 -50.125 38.80078963 -50.125 43.25 C-48.43774639 49.51694198 -44.42162514 53.57506671 -40.28515625 58.46484375 C-33.46146517 67.26283966 -32.47399661 76.4040378 -33.125 87.25 C-34.45741101 96.57687708 -38.26305995 103.36950748 -45.640625 109.2578125 C-56.79941228 116.8776701 -68.85141717 119.06298521 -82.1796875 116.7109375 C-93.30983054 113.90527818 -103.74213574 108.56478031 -109.8359375 98.39453125 C-116.18205331 84.80357225 -115.80897253 68.86921139 -111.4453125 54.6796875 C-103.74093363 34.66653767 -87.43087279 21.93036529 -68.5234375 13.1328125 C-54.90936972 7.13265356 -40.86088756 3.18893257 -26.125 1.25 C-24.18753906 0.97542969 -24.18753906 0.97542969 -22.2109375 0.6953125 C-14.84179896 -0.09154564 -7.40314366 0.0056137 0 0 Z M-18.375 168 C-31.54430914 181.83893503 -36.62113284 198.06378728 -36.33984375 216.91015625 C-35.96435853 227.58466451 -32.78597026 236.12293272 -25.625 244 C-18.40009776 250.50241202 -13.20248623 252.75681114 -3.4140625 252.5625 C12.74896406 251.02682052 23.42833453 241.65477237 34.48698425 230.65097046 C37.64524191 226.80023789 37.55082009 223.31340893 37.44262695 218.49072266 C37.44335709 217.63153229 37.44408722 216.77234192 37.44483948 215.88711548 C37.44137066 213.06211043 37.40254386 210.2387776 37.36328125 207.4140625 C37.35395059 205.44966533 37.34683567 203.48525649 37.34184265 201.52084351 C37.3227928 196.36175155 37.27370909 191.20336842 37.21832275 186.04455566 C37.16708698 180.77589506 37.14431935 175.50711942 37.11914062 170.23828125 C37.06558861 159.9085435 36.98029998 149.5793308 36.875 139.25 C17.31074033 139.25 -4.62647457 155.30905345 -18.375 168 Z " fill="#00C895" transform="translate(852.125,162.75)"/>
+<path d="M0 0 C15.0988696 13.86583403 26.72235964 30.05263559 35.0625 48.75 C35.60519531 49.93722656 36.14789062 51.12445313 36.70703125 52.34765625 C53.4032044 91.19267683 52.60210605 139.39758721 37.24609375 178.5078125 C23.80286807 210.98468685 -1.42758817 240.4390806 -33.9375 254.75 C-70.01525884 269.27996891 -110.1993786 268.40109769 -146.0625 254 C-157.4607898 248.93697833 -167.42945753 241.77027323 -176.9375 233.75 C-177.57171875 233.23824219 -178.2059375 232.72648437 -178.859375 232.19921875 C-183.41299931 228.46162004 -187.19755822 224.29187862 -190.9375 219.75 C-192.19240234 218.25146484 -192.19240234 218.25146484 -193.47265625 216.72265625 C-217.13867594 187.94524904 -227.435416 153.04413864 -227.25 116.0625 C-227.24850952 115.32220551 -227.24701904 114.58191101 -227.2454834 113.81918335 C-227.20259882 101.92879308 -226.52744807 90.38403566 -223.9375 78.75 C-223.7206958 77.75395752 -223.7206958 77.75395752 -223.49951172 76.73779297 C-217.16154796 48.55736716 -203.2198039 24.14281645 -182.9375 3.75 C-182.20660156 3.01305908 -182.20660156 3.01305908 -181.4609375 2.26123047 C-174.02344938 -5.13399919 -166.03569697 -11.04554326 -156.9375 -16.25 C-156.32422852 -16.60191406 -155.71095703 -16.95382813 -155.07910156 -17.31640625 C-140.90267732 -25.28283646 -125.11000581 -30.40239919 -108.9375 -32.25 C-108.08929688 -32.35957031 -107.24109375 -32.46914062 -106.3671875 -32.58203125 C-66.93026463 -36.99661217 -29.87247619 -26.15004925 0 0 Z M-117.5 0.25 C-151.52451606 41.18817344 -139.12197517 132.10479146 -134.62890625 181.11621094 C-132.56887503 201.46855646 -128.49215449 222.19131209 -112.9375 236.75 C-105.05269797 242.91612625 -95.73216057 245.21036596 -85.82421875 244.5390625 C-76.08211246 243.32559215 -67.36813774 240.40140985 -60.59375 233.00390625 C-28.00369169 188.65375614 -38.47313666 96.18579876 -45.62695312 44.59399414 C-48.5264849 25.65423861 -52.05272079 7.11592419 -66.9375 -6.25 C-69.50750027 -8.00140759 -72.01658297 -9.20333806 -74.9375 -10.25 C-75.96875 -10.6625 -77 -11.075 -78.0625 -11.5 C-93.92036787 -14.56926475 -106.38943664 -11.28029575 -117.5 0.25 Z " fill="#00C895" transform="translate(496.9375,195.25)"/>
+<path d="M0 0 C0.82886719 0.75796875 1.65773438 1.5159375 2.51171875 2.296875 C3.35089844 3.05484375 4.19007813 3.8128125 5.0546875 4.59375 C29.11304881 27.4212184 37.09458788 58.4744058 41.51171875 90.296875 C41.61919434 91.02583984 41.72666992 91.75480469 41.83740234 92.50585938 C42.7677427 99.55241634 42.51171875 105.99945865 42.51171875 113.296875 C-8.63828125 113.296875 -59.78828125 113.296875 -112.48828125 113.296875 C-105.80212582 168.39852544 -105.80212582 168.39852544 -75.21875 213.22265625 C-60.46860251 224.42770391 -42.94881623 225.99615446 -25.09765625 223.8984375 C-12.22945656 221.1911933 -0.16038561 213.99682577 9.51171875 205.296875 C10.34058594 204.575 11.16945313 203.853125 12.0234375 203.109375 C21.91386373 195.13692955 21.91386373 195.13692955 29.51171875 185.296875 C33.86035527 185.86132325 36.6899953 187.45115464 40.32421875 189.859375 C41.30003906 190.50003906 42.27585937 191.14070312 43.28125 191.80078125 C44.01730469 192.29449219 44.75335937 192.78820312 45.51171875 193.296875 C34.48162692 222.90396359 3.80368337 248.63441826 -24.08959961 261.61645508 C-31.03668155 264.70186235 -38.04639471 266.70938453 -45.48828125 268.296875 C-46.92300781 268.61591797 -46.92300781 268.61591797 -48.38671875 268.94140625 C-80.55926328 275.20468873 -113.28868506 269.30976955 -140.74707031 251.40112305 C-170.95299857 230.85768459 -188.70863371 203.74810295 -195.97705078 167.88525391 C-198.77795893 153.149516 -199.72633275 138.53171026 -199.73828125 123.546875 C-199.73895599 122.78019501 -199.73963074 122.01351501 -199.74032593 121.22360229 C-199.68816449 83.67175295 -191.91615072 46.17629377 -166.48828125 17.296875 C-165.77929688 16.45511719 -165.0703125 15.61335938 -164.33984375 14.74609375 C-147.23673826 -5.10462255 -123.93257581 -18.11436714 -98.48828125 -23.703125 C-97.04582031 -24.04150391 -97.04582031 -24.04150391 -95.57421875 -24.38671875 C-62.17137798 -30.91422806 -25.82171456 -22.38653878 0 0 Z M-95.6484375 3.01953125 C-107.88133632 18.16131472 -110.32927891 39.65278006 -112.48828125 58.296875 C-112.62105469 59.39515625 -112.75382812 60.4934375 -112.890625 61.625 C-113.83372364 70.87511818 -113.48828125 79.92876603 -113.48828125 89.296875 C-87.08828125 89.296875 -60.68828125 89.296875 -33.48828125 89.296875 C-33.28618515 68.11591308 -33.28618515 68.11591308 -34.73828125 47.171875 C-34.87250488 45.96813232 -35.00672852 44.76438965 -35.14501953 43.52416992 C-37.87006727 20.02838266 -37.87006727 20.02838266 -50.58984375 0.765625 C-63.63920841 -9.33017976 -83.70359146 -8.53448138 -95.6484375 3.01953125 Z " fill="#00C895" transform="translate(1479.48828125,188.703125)"/>
+<path d="M0 0 C38.28 0 76.56 0 116 0 C116.01458252 11.0442041 116.02916504 22.0884082 116.04418945 33.46728516 C116.09297367 68.82687661 116.15639022 104.18642832 116.22898628 139.54597858 C116.2402541 145.04074331 116.25139261 150.53550829 116.26245117 156.03027344 C116.26465486 157.12415671 116.26685854 158.21803999 116.269129 159.34507124 C116.30447659 177.04418864 116.32935505 194.743306 116.35034702 212.44244559 C116.37212929 230.61088077 116.40520276 248.77927024 116.44870156 266.94766653 C116.47517645 278.15351884 116.49290248 289.35931423 116.49934604 300.56519626 C116.50461266 308.25526551 116.52087235 315.94526322 116.54566566 323.63529409 C116.55963702 328.06834664 116.56886784 332.50127123 116.56500816 336.93434715 C116.5615749 341.00118508 116.57209403 345.06775064 116.59323552 349.13453285 C116.59846411 350.5977508 116.59878017 352.06099732 116.59339563 353.5242147 C116.55714882 364.5010123 116.61908771 376.6185095 123 386 C129.10603622 391.66539443 138.29671194 393.59272248 146 396 C146 401.28 146 406.56 146 412 C97.82 412 49.64 412 0 412 C0 406.72 0 401.44 0 396 C2.31 395.29875 4.62 394.5975 7 393.875 C14.88643605 391.31125058 21.40379671 388.53051434 25.4375 380.875 C27.4834549 376.30600654 28.12525209 372.31140874 28.13142776 367.30392265 C28.13526891 366.13518793 28.13911005 364.96645321 28.1430676 363.76230228 C28.14220112 362.47730716 28.14133463 361.19231205 28.14044189 359.86837769 C28.14302577 358.49024342 28.14603899 357.11210991 28.1494453 355.73397744 C28.1575161 351.94278998 28.15930491 348.15162146 28.16004276 344.36042643 C28.16189321 340.27300922 28.16944057 336.18560184 28.17617798 332.09819031 C28.18976302 323.15795956 28.19578646 314.2177333 28.20018864 305.27749395 C28.20295112 299.69462966 28.20718852 294.11176709 28.21169281 288.52890396 C28.22388635 273.07055965 28.23418507 257.61221673 28.2375679 242.15386772 C28.23778747 241.16437406 28.23800703 240.17488039 28.23823325 239.15540207 C28.23845153 238.16354149 28.23866981 237.17168091 28.2388947 236.14976394 C28.23933817 234.13988169 28.23978473 232.12999944 28.24023438 230.12011719 C28.2404558 229.12314635 28.24067723 228.12617551 28.24090537 227.09899344 C28.24485224 210.94936617 28.26230248 194.79978407 28.2855939 178.65017425 C28.30931573 162.06819556 28.32177015 145.48623952 28.32293582 128.90424359 C28.32385218 119.59469528 28.32959461 110.28520578 28.34775543 100.97567368 C28.36316773 93.04712114 28.36827026 85.11864559 28.36001733 77.19008093 C28.35611465 73.14632417 28.35702165 69.10272238 28.37107468 65.05898476 C28.38383671 61.35275035 28.38259605 57.646787 28.37048396 53.94055285 C28.3676099 51.97374375 28.37944536 50.00692987 28.39190602 48.04015815 C28.34631333 39.84586273 28.13717421 31.6198164 22.5625 25.1875 C15.93500281 20.51511448 7.68271278 18.1950608 0 16 C0 10.72 0 5.44 0 0 Z " fill="#00C895" transform="translate(561,39)"/>
+<path d="M0 0 C10.77089077 10.38735757 17.87424454 23.44231494 18.29248047 38.63256836 C18.41411086 51.11748333 15.11574666 61.56166588 6.33984375 70.8125 C-2.87402814 79.20782746 -13.32229259 81.53017185 -25.53515625 81.30859375 C-35.76530437 80.58198797 -44.27971876 76.28593169 -51.3125 68.8125 C-57.51407934 61.04329921 -59.17218377 51.75050687 -59.02734375 42.046875 C-59.01468997 40.69922139 -59.00232957 39.35156499 -58.99023438 38.00390625 C-58.96555972 35.91315688 -58.93766171 33.82255908 -58.90405273 31.73193359 C-58.19867216 15.35109116 -58.19867216 15.35109116 -65 1.0625 C-74.20098434 -4.93137305 -82.307363 -5.4989248 -93 -3.9375 C-102.99102152 -1.56893886 -110.77189951 5.12796799 -116.25 13.6875 C-138.73814805 54.98967614 -138.58144081 112.38509351 -125.734375 156.64501953 C-117.99583123 182.11944119 -105.68290641 208.12615659 -81.58203125 221.75 C-64.31235712 230.52853329 -43.69677355 231.05431317 -25.3125 225.25 C-23.52716153 224.5571066 -21.75463851 223.82981898 -20 223.0625 C-18.73542969 222.54042969 -18.73542969 222.54042969 -17.4453125 222.0078125 C-4.88082858 216.3322668 4.5426804 205.79045831 14 196.0625 C17.34820898 197.52875856 19.69266359 199.39908447 22.3125 201.9375 C23.03050781 202.61554688 23.74851562 203.29359375 24.48828125 203.9921875 C26 206.0625 26 206.0625 25.97265625 208.0078125 C13.61036411 234.12253404 -19.6539239 256.1680996 -45.82666016 265.73876953 C-69.70457447 273.86841976 -96.47527586 274.99656043 -121 269.0625 C-121.70624512 268.89621094 -122.41249023 268.72992188 -123.14013672 268.55859375 C-156.49401495 260.4473151 -182.94988783 237.66146166 -201 209.0625 C-204.03161747 203.89792744 -206.6111979 198.55032552 -209 193.0625 C-209.41306396 192.11455566 -209.41306396 192.11455566 -209.83447266 191.14746094 C-226.09778876 152.89582777 -226.69273073 105.62918507 -211.8125 66.8125 C-203.53679525 46.36191624 -192.25157938 28.90241924 -177 13.0625 C-175.94425781 11.89460938 -175.94425781 11.89460938 -174.8671875 10.703125 C-133.11685967 -34.06338621 -46.39135658 -40.37062041 0 0 Z " fill="#00C895" transform="translate(1240,187.9375)"/>
+<path d="M0 0 C13.32404864 4.14525643 13.32404864 4.14525643 26.54174805 1.78125 C27.41925764 0.26429335 28.24820411 -1.28123005 29.04174805 -2.84375 C30.77424805 -5.009375 30.77424805 -5.009375 32.54174805 -7.21875 C37.49174805 -7.21875 42.44174805 -7.21875 47.54174805 -7.21875 C47.54174805 22.15125 47.54174805 51.52125 47.54174805 81.78125 C41.93174805 81.78125 36.32174805 81.78125 30.54174805 81.78125 C29.92299805 79.98494141 29.92299805 79.98494141 29.29174805 78.15234375 C24.07054842 63.30403051 18.25582387 49.58054529 7.54174805 37.78125 C6.38352539 36.50121094 6.38352539 36.50121094 5.2019043 35.1953125 C-6.4398382 22.94665452 -21.41422304 14.9559896 -38.45825195 13.78125 C-49.83554479 13.58686409 -60.35503374 15.10437031 -69.83325195 21.96875 C-76.78195743 29.41379158 -80.61616377 38.16484283 -81.89575195 48.21875 C-80.43951927 60.07664467 -74.13005611 69.43922892 -64.97924805 76.89331055 C-50.6268358 87.64163554 -33.62610985 94.68638994 -17.56079102 102.4128418 C13.73980069 117.49344069 44.30706715 132.44517039 57.41674805 166.84375 C65.14270881 190.25575232 62.50598169 215.0235911 51.97924805 237.05078125 C47.94092571 244.93111858 43.05452746 251.86985803 37.54174805 258.78125 C36.80698242 259.76544922 36.80698242 259.76544922 36.05737305 260.76953125 C23.93690924 276.27659523 2.87302243 284.64745713 -16.0637207 287.40234375 C-46.07815506 290.75263159 -72.23603422 284.66003838 -100.49975586 274.67749023 C-102.12083252 274.11396851 -102.12083252 274.11396851 -103.7746582 273.5390625 C-104.72800049 273.2002002 -105.68134277 272.86133789 -106.66357422 272.51220703 C-111.06871202 271.36002894 -114.30113561 271.25090501 -118.45825195 273.15625 C-122.58759585 276.76942591 -124.82303997 281.02675609 -127.45825195 285.78125 C-128.11825195 286.77125 -128.77825195 287.76125 -129.45825195 288.78125 C-134.73825195 288.78125 -140.01825195 288.78125 -145.45825195 288.78125 C-145.45825195 255.12125 -145.45825195 221.46125 -145.45825195 186.78125 C-139.18825195 186.78125 -132.91825195 186.78125 -126.45825195 186.78125 C-125.75700195 189.606875 -125.05575195 192.4325 -124.33325195 195.34375 C-118.24541303 218.85833102 -107.76453746 239.75320281 -86.45825195 252.78125 C-72.74545135 260.75095574 -59.64139735 265.07549622 -43.70825195 265.21875 C-42.76199951 265.2290625 -41.81574707 265.239375 -40.84082031 265.25 C-29.66931067 265.10995496 -18.23237918 262.34331303 -9.77075195 254.71875 C-2.20527953 246.70315794 -0.11672844 236.56206872 -0.24731445 225.90625 C-0.95845506 215.37083357 -5.742771 206.97112465 -13.45043945 199.8984375 C-18.52553046 195.48295468 -23.95735006 192.51218918 -29.95825195 189.53125 C-31.09319092 188.95334717 -32.22812988 188.37544434 -33.39746094 187.7800293 C-40.78905599 184.03012067 -48.24890088 180.42095079 -55.7121582 176.81640625 C-56.60240692 176.3855069 -57.49265564 175.95460754 -58.40988159 175.51065063 C-62.82173357 173.37597962 -67.23792737 171.25175064 -71.6652832 169.14941406 C-86.83321381 161.89048764 -101.74292754 153.90995221 -114.45825195 142.78125 C-115.28454102 142.09804688 -116.11083008 141.41484375 -116.9621582 140.7109375 C-132.66469256 127.33381663 -142.04866909 109.22043097 -144.45825195 88.78125 C-145.43917553 71.90860694 -144.00167254 56.14668342 -136.45825195 40.78125 C-136.00450195 39.84667969 -135.55075195 38.91210938 -135.08325195 37.94921875 C-127.02321122 22.28908526 -114.86579509 10.17000978 -99.45825195 1.78125 C-98.57524414 1.29785156 -97.69223633 0.81445312 -96.7824707 0.31640625 C-66.59446915 -14.75469012 -30.96954945 -8.72583375 0 0 Z " fill="#00C895" transform="translate(189.458251953125,171.21875)"/>
+<path d="M0 0 C0.59941406 0.5259375 1.19882813 1.051875 1.81640625 1.59375 C19.50251246 17.67948929 28.38305908 43.48043938 29.89794922 66.68115234 C31.05201125 92.90431308 22.78111066 117.82806697 6 138 C5.34386719 138.80308594 4.68773437 139.60617187 4.01171875 140.43359375 C-9.8371727 156.66236783 -28.49258471 166.80769698 -49 172 C-49.94359375 172.24492187 -50.8871875 172.48984375 -51.859375 172.7421875 C-77.20259586 178.08916762 -105.21485966 172.83388734 -127 159 C-151.43141587 142.71238942 -166.88102174 119.6539251 -173 91 C-177.79518983 64.40268042 -171.81563935 36.51182904 -156.75683594 14.15429688 C-139.75685583 -9.80196748 -115.76649709 -23.78039095 -87 -29 C-54.8771662 -34.16548081 -23.02316306 -22.31539855 0 0 Z " fill="#00C895" transform="translate(1726,286)"/>
+</g>
+</g>
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-underlined.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-underlined.svg
new file mode 100644
index 00000000000..9b4abfdc583
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-underlined.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M6 21q-.425 0-.712-.288T5 20t.288-.712T6 19h12q.425 0 .713.288T19 20t-.288.713T18 21zm6-4q-2.525 0-3.925-1.575t-1.4-4.175V4.275q0-.525.388-.9T7.975 3t.9.375t.375.9V11.4q0 1.4.7 2.275t2.05.875t2.05-.875t.7-2.275V4.275q0-.525.388-.9T16.05 3t.9.375t.375.9v6.975q0 2.6-1.4 4.175T12 17" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/expand.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/expand.svg
new file mode 100644
index 00000000000..e89b21800ed
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/expand.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M20 5a1 1 0 0 0-1-1h-5a1 1 0 0 0 0 2h2.57l-3.28 3.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0L18 7.42V10a1 1 0 0 0 1 1a1 1 0 0 0 1-1Zm-9.29 8.29a1 1 0 0 0-1.42 0L6 16.57V14a1 1 0 0 0-1-1a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 0-2H7.42l3.29-3.29a1 1 0 0 0 0-1.42" />
+</svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/wide-chevron.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/wide-chevron.svg
new file mode 100644
index 00000000000..fdba2357b8c
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/wide-chevron.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT 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 fill="#000000" height="800px" width="800px" version="1.1" id="XMLID_287_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
+<g id="next">
+	<g>
+		<polygon points="12,23.7 10.6,22.3 15.7,12 10.6,1.7 12,0.3 18.5,12"/>
+	</g>
+</g>
+</svg>
diff --git a/workspaces/common-libs/ui-toolkit/src/components/Accordion/Accordion.tsx b/workspaces/common-libs/ui-toolkit/src/components/Accordion/Accordion.tsx
index 18837865c6c..4ff32d2ef07 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/Accordion/Accordion.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/Accordion/Accordion.tsx
@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { Button } from '../Button/Button';
 import { Codicon } from '../Codicon/Codicon';
@@ -70,6 +70,10 @@ export const Accordion = (params: AccordionProps) => {
     const expandable = true;
     const [isOpen, setIsOpen] = useState(params.isExpanded || false);
 
+    useEffect(() => {
+        setIsOpen(params.isExpanded);
+    }, [params.isExpanded]);
+
     const toggleAccordion = () => {
         setIsOpen(!isOpen);
     };
diff --git a/workspaces/common-libs/ui-toolkit/src/components/AutoComplete/AutoComplete.tsx b/workspaces/common-libs/ui-toolkit/src/components/AutoComplete/AutoComplete.tsx
index ce763839a8d..1077fca7306 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/AutoComplete/AutoComplete.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/AutoComplete/AutoComplete.tsx
@@ -139,6 +139,34 @@ export const OptionContainer = cx(css`
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 100%;
+    position: relative;
+    
+    &::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        background-color: var(--vscode-editorHoverWidget-background);
+        color: var(--vscode-editorHoverWidget-foreground);
+        border: 1px solid var(--vscode-editorHoverWidget-border);
+        padding: 5px 8px;
+        border-radius: 3px;
+        white-space: normal;
+        word-wrap: break-word;
+        max-width: 300px;
+        z-index: 10000;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.2s, visibility 0.2s;
+        pointer-events: none;
+        margin-bottom: 5px;
+        box-shadow: 0 2px 8px var(--vscode-widget-shadow);
+    }
+    
+    &:hover::after {
+        opacity: 1;
+        visibility: visible;
+    }
 `);
 
 export const ActiveOptionContainer = cx(css`
@@ -150,6 +178,34 @@ export const ActiveOptionContainer = cx(css`
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 100%;
+    position: relative;
+    
+    &::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        background-color: var(--vscode-editorHoverWidget-background);
+        color: var(--vscode-editorHoverWidget-foreground);
+        border: 1px solid var(--vscode-editorHoverWidget-border);
+        padding: 5px 8px;
+        border-radius: 3px;
+        white-space: normal;
+        word-wrap: break-word;
+        max-width: 300px;
+        z-index: 10000;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.2s, visibility 0.2s;
+        pointer-events: none;
+        margin-bottom: 5px;
+        box-shadow: 0 2px 8px var(--vscode-widget-shadow);
+    }
+    
+    &:hover::after {
+        opacity: 1;
+        visibility: visible;
+    }
 `);
 
 export const NothingFound = styled.div`
@@ -216,6 +272,8 @@ interface BaseProps {
     labelAdornment?: ReactNode,
     requireValidation?: boolean,
     disabled?: boolean;
+    description?: string | ReactNode;
+    descriptionSx?: React.CSSProperties;
 }
 
 // Define the conditional properties
@@ -258,11 +316,19 @@ export const getItem = (item: string | ItemComponent) => {
     return item?.item;
 }
 
+const Description = styled.div<ContainerProps>`
+    color: var(--vscode-list-deemphasizedForeground);
+    margin-bottom: 4px;
+    text-align: left;
+    ${(props: ContainerProps) => props.sx};
+`;
 
 export const AutoComplete = React.forwardRef<HTMLInputElement, AutoCompleteProps>((props, ref) => {
     const {
         id,
         name,
+        description,
+        descriptionSx,
         value,
         items,
         actionBtns,
@@ -367,6 +433,11 @@ export const AutoComplete = React.forwardRef<HTMLInputElement, AutoCompleteProps
                         <Codicon name="plus" />Add new
                     </LinkButton>}
                 </div>
+                {description && (
+                    <Description sx={descriptionSx}>
+                        {description}
+                    </Description>
+                )}
                 <ComboboxContent>
                     <ComboboxInputWrapper ref={inputWrapperRef} hideDropdown={hideDropdown}>
                         <Combobox.Input
@@ -424,6 +495,7 @@ export const AutoComplete = React.forwardRef<HTMLInputElement, AutoCompleteProps
                     >
                         <DropdownContainer
                             // condition to display the dropdown
+                            id={"dropdown-container"}
                             display={!(filteredResults.length === 0 && query !== "" && allowItemCreate && !onCreateButtonClick)}
                             widthOffset={widthOffset}
                             dropdownWidth={dropdownWidth}
@@ -455,6 +527,7 @@ export const AutoComplete = React.forwardRef<HTMLInputElement, AutoCompleteProps
                                         )}
                                         {filteredResults.map((filteredItem: string | ItemComponent, i: number) => {
                                             const item = getItem(filteredItem);
+                                            const itemKey = getItemKey(filteredItem);
                                             return (
                                                 <ComboboxOption key={i + indexOffset}>
                                                     <Combobox.Option
@@ -462,7 +535,15 @@ export const AutoComplete = React.forwardRef<HTMLInputElement, AutoCompleteProps
                                                         value={filteredItem}
                                                         key={i}
                                                     >
-                                                        {item}
+                                                        {({ active }) => (
+                                                            <div
+                                                                className={active ? OptionContainer : ActiveOptionContainer}
+                                                                data-tooltip={itemKey}
+                                                                title={itemKey}
+                                                            >
+                                                                {item}
+                                                            </div>
+                                                        )}
                                                     </Combobox.Option>
                                                 </ComboboxOption>
                                             );
diff --git a/workspaces/common-libs/ui-toolkit/src/components/BrowserComponents/index.tsx b/workspaces/common-libs/ui-toolkit/src/components/BrowserComponents/index.tsx
new file mode 100644
index 00000000000..328cac070a9
--- /dev/null
+++ b/workspaces/common-libs/ui-toolkit/src/components/BrowserComponents/index.tsx
@@ -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.
+ */
+
+import styled from '@emotion/styled';
+import { ThemeColors } from '../../styles/Theme';
+
+export const BrowserContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: ${ThemeColors.SURFACE_DIM};
+`;
+
+export const BrowserSearchContainer = styled.div`
+    position: sticky;
+    top: 0;
+    background-color: var(--vscode-dropdown-background);
+    z-index: 1;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--vscode-panel-border);
+`;
+
+export const BrowserContentArea = styled.div`
+    padding: 16px;
+    overflow-y: auto;
+    flex: 1 1 0;
+`;
+
+export const BrowserSectionContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 20px;
+`;
+
+export const BrowserSectionBody = styled.div<{ columns?: number }>`
+    display: grid;
+    gap: 8px;
+    grid-template-columns: ${({ columns }: { columns?: number }) =>
+        columns && columns > 1 ? `repeat(${columns}, minmax(0, 1fr))` : '1fr'};
+`;
+
+export const BrowserItemContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    cursor: pointer;
+    border-radius: 4px;
+    min-width: 0;
+    overflow: hidden;
+    width: 100%;
+    box-sizing: border-box;
+    
+    &:hover {
+        background-color: var(--vscode-list-hoverBackground);
+    }
+`;
+
+export const BrowserItemLabel = styled.span`
+    font-size: 13px;
+    color: var(--vscode-editor-foreground);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+`;
+
+export const BrowserLoaderContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+`;
+
+export const BrowserEmptyMessage = styled.div`
+    color: var(--vscode-descriptionForeground);
+    font-style: italic;
+    padding: 8px;
+`;
diff --git a/workspaces/common-libs/ui-toolkit/src/components/CheckBoxGroup/CheckBoxGroup.tsx b/workspaces/common-libs/ui-toolkit/src/components/CheckBoxGroup/CheckBoxGroup.tsx
index d5537734834..cacaf694ca9 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/CheckBoxGroup/CheckBoxGroup.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/CheckBoxGroup/CheckBoxGroup.tsx
@@ -64,7 +64,7 @@ export const StyledCheckBox = styled(VSCodeCheckbox)<CheckBoxProps>`
 const LabelContainer = styled.div`
     display: flex;
     flex-direction: row;
-    margin-bottom: 4px;
+    margin-bottom: 2px;
 `;
 export const CheckBox = ({ label, labelAdornment, value, sx, checked, onChange, disabled }: CheckBoxProps) => {
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -77,14 +77,40 @@ export const CheckBox = ({ label, labelAdornment, value, sx, checked, onChange,
     };
 
     return (
-        <StyledCheckBox key={`checkbox-${value}`} sx={sx} value={value} checked={checked} onClick={handleChange} disabled={disabled}>
-            <LabelContainer>
-                <div style={{ color: "var(--vscode-editor-foreground)", cursor: "pointer" }} onClick={handleLabelClick}>
-                    {label}
+        <div style={{ display: "flex", flexDirection: "column", width: "fit-content" }}>
+            <StyledCheckBox
+                key={`checkbox-${value}`}
+                sx={sx}
+                value={value}
+                checked={checked}
+                onClick={handleChange}
+                disabled={disabled}
+            >
+                <LabelContainer>
+                    <div style={{ color: "var(--vscode-editor-foreground)", cursor: "pointer" }} onClick={handleLabelClick}>
+                        {label}
+                    </div>
+                    {labelAdornment && labelAdornment}
+                </LabelContainer>
+            </StyledCheckBox>
+            {/* Show description if given, right under the entire checkbox, also highlight the whole thing */}
+            {typeof sx === "object" && sx && sx.description && (
+                <div
+                    style={{
+                        background: "var(--vscode-editor-background)",
+                        color: "var(--vscode-list-deemphasizedForeground)",
+                        marginTop: 2,
+                        marginBottom: 5,
+                        padding: "2px 8px",
+                        borderRadius: 4,
+                        fontSize: 13,
+                        userSelect: "text"
+                    }}
+                >
+                    {sx.description}
                 </div>
-                {labelAdornment && labelAdornment}
-            </LabelContainer>
-        </StyledCheckBox>
+            )}
+        </div>
     );
 };
 
diff --git a/workspaces/common-libs/ui-toolkit/src/components/Codicon/Codicon.tsx b/workspaces/common-libs/ui-toolkit/src/components/Codicon/Codicon.tsx
index 61545b1cb30..81a89ad84b5 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/Codicon/Codicon.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/Codicon/Codicon.tsx
@@ -37,18 +37,19 @@ export interface CodiconProps {
 	name: string; // Identifier for the icon
     sx?: any;
     iconSx?: any;
+    tooltip?: string;
     onClick?: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 
 export const Codicon: React.FC<CodiconProps> = (props: CodiconProps) => {
-    const { id, className, name, sx, iconSx, onClick } = props;
+    const { id, className, name, sx, iconSx, tooltip, onClick } = props;
     const handleComponentClick = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {
         onClick && onClick(event);
     }
     const icon = (<i style= {iconSx} className={`codicon codicon-${name}`} />);
     
     return (
-        <CodiconContainer id={id} className={className} sx={sx} onClick={handleComponentClick}>
+        <CodiconContainer id={id} className={className} sx={sx} onClick={handleComponentClick} title={tooltip}>
             {icon}
         </CodiconContainer>
     );
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/HelperPane/index.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/HelperPane/index.tsx
index 1d4da9db239..5793c83093d 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/HelperPane/index.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/HelperPane/index.tsx
@@ -46,6 +46,7 @@ import { HelperPanePanelProvider, useHelperPanePanelContext } from './context';
 import { ARROW_HEIGHT, HELPER_PANE_HEIGHT, HELPER_PANE_WIDTH } from '../../../constants';
 import { HelperPaneHeight } from '../../../types';
 import { convertHelperPaneHeightToCSS } from '../../../utils';
+import { ThemeColors } from '../../../../../styles';
 
 export const Arrow = styled.div<ArrowProps>`
     position: absolute;
@@ -108,7 +109,12 @@ const PanelContainer = styled.div`
 `;
 
 const LibraryBrowserSearchBoxContainer = styled.div`
-    margin-bottom: 16px;
+    position: sticky;
+    top: 0;
+    background-color: var(--vscode-dropdown-background);
+    z-index: 1;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--vscode-panel-border);
 `;
 
 const LibraryBrowserBody = styled.div`
@@ -118,7 +124,6 @@ const LibraryBrowserBody = styled.div`
     padding: 16px;
     overflow-y: auto;
     scrollbar-color: auto;
-    border: 1px solid var(--vscode-dropdown-border);
 `;
 
 const LibraryBrowserHeader = styled.header`
@@ -143,7 +148,7 @@ const LibraryBrowserContainer = styled.div`
     flex-direction: column;
     padding: 16px;
     border-radius: 8px;
-    background-color: var(--vscode-dropdown-background);
+    background-color: ${ThemeColors.SURFACE_DIM};
     box-shadow: 0 3px 8px rgb(0 0 0 / 0.2);
     z-index: 100001;
 `;
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
index 3942542f433..f2e0c501e46 100644
--- 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
@@ -298,6 +298,7 @@ const SectionContainer = styled.div`
     display: flex;
     flex-direction: column;
     gap: 4px;
+    margin-inline : 12px;
     margin-bottom: 16px;
 `;
 
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
index a893458dc24..7a965e065ce 100644
--- 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
@@ -22,6 +22,7 @@ import styled from '@emotion/styled';
 import { Codicon } from "../../../../Codicon/Codicon";
 import { BI_HELPER_PANE_WIDTH, VERTICAL_HELPERPANE_HEIGHT } from "../../../constants";
 import { ThemeColors } from "../../../../../styles";
+import { Icon } from "../../../../Icon/Icon";
 
 const DEFAULT_SLIDING_WINDOW_HEIGHT = `${VERTICAL_HELPERPANE_HEIGHT}px`;
 
@@ -153,22 +154,28 @@ export const SlidingPane = ({ children, name, paneHeight, paneWidth }: SlidingPa
     );
 }
 
-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;
+const StickyHeader = styled.div`
+    position: relative;
+    top: 0;
+    z-index: 2;
+    display: flex;
+    justify-content: left;
     align-items: center;
-     &:hover {
-        color: ${ThemeColors.ON_PRIMARY} ;
+    gap: 8px;
+
+    padding: 4px 6px;
+    margin: 4px 8px;
+    transition: background-color 0.2s ease;
+    border-radius: 6px;
+    height: 36px;
+    cursor: pointer;
+
+    font-weight: 600;
+    font-size: 13px;
+    color: var(--input-foreground);
+    
+    &:hover {
+        background-color: ${ThemeColors.SURFACE_DIM_2};
     }
 `;
 
@@ -179,15 +186,18 @@ export const ScrollableContainer = styled.div`
 `;
 
 const SlidingPaneNavContainerElm = styled.div`
-    width: 100%;
-    max-height: 30px;
-    padding: 8px;
     display: flex;
     align-items: center;
+    flex: 1;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: 6px;
+    height: 32px;
+    margin-inline: 4px;
     &:hover {
-        background-color: var(--vscode-list-activeSelectionBackground) !important;
-        color:  ${ThemeColors.ON_PRIMARY};
-        cursor: pointer;
+        background-color: ${ThemeColors.SURFACE_DIM_2};
+        outline: 1px solid var(--dropdown-border);
+        outline-offset: -1px;
     }
 `
 export const SlidingPaneCallbackCOntainer = styled.div`
@@ -260,33 +270,20 @@ export const SlidingPaneBackButton = ({ children }: { children: ReactNode }) =>
     return (
         <>
             {visitedPages.length > 1 && (
-                <InvisibleButton onClick={handleBackNavigation}>
+                <StickyHeader onClick={handleBackNavigation}>
                     <>{children}</>
-                </InvisibleButton>
+                </StickyHeader>
             )}
         </>
     )
 }
 
-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>
+        <SlidingPaneBackButton>
+            <Icon name="bi-arrow-back" sx={{ color: ThemeColors.ON_SURFACE_VARIANT, fontSize: "16px" }} />
+            {children}
+        </SlidingPaneBackButton>
     )
 }
 
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 4b0ddf46452..f9322b289e2 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
@@ -43,6 +43,7 @@ import { Codicon } from '../../../Codicon/Codicon';
 import { ProgressIndicator } from '../../../ProgressIndicator/ProgressIndicator';
 import { AutoResizeTextArea } from '../../../TextArea/TextArea';
 
+
 /* Styled components */
 const Container = styled.div`
     width: 100%;
@@ -392,7 +393,7 @@ export const ExpressionEditor = forwardRef<FormExpressionEditorRef, FormExpressi
 
 
     const isReservedKeyCombinationPressed = (e: React.KeyboardEvent) => {
-        return ( (e.ctrlKey || e.metaKey) ||
+        return ((e.ctrlKey || e.metaKey) ||
             ifCTRLandDown(e) ||
             ifCTRLandUP(e) ||
             ifCTRLandENTER(e)
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Token/index.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Token/index.tsx
index da43687b222..0170437561c 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Token/index.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Token/index.tsx
@@ -218,6 +218,7 @@ export const TokenEditor = ({
     getExpressionEditorIcon,
     editorSx,
     height,
+    helperPaneSx,
     enableFullscreen = false,
     skipSanitization = false
 }: TokenEditorProps) => {
@@ -596,7 +597,7 @@ export const TokenEditor = ({
 
     const getHelperPaneWithEditorComponent = (): JSX.Element => {
         return createPortal(
-            <S.HelperPane ref={helperPaneContainerRef} sx={{ ...helperPanePosition, ...fullScreenStyle.sx }}>
+            <S.HelperPane ref={helperPaneContainerRef} sx={{ ...helperPanePosition, ...fullScreenStyle.sx, ...helperPaneSx }}>
                 {/* Title and close button */}
                 <S.HelperPaneHeader>
                     <Icon
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 96e951628a3..1ba610ef206 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,7 +60,7 @@ type FormExpressionEditorElBaseProps = ExpressionEditorProps & HelperPaneConditi
     resize?: 'vertical' | 'disabled';
     growRange?: { start: number, offset: number };
     actionButtons?: ActionButtonType[];
-    helperPaneZIndex?: number
+    helperPaneZIndex?: number;
 }
 
 export type FormExpressionEditorElProps = FormExpressionEditorElBaseProps & {
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/token.ts b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/token.ts
index 77d3156caa4..b2b5bfbd235 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/token.ts
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/token.ts
@@ -44,12 +44,14 @@ type HelperPaneConditionalProps =
           helperPaneOrigin?: HelperPaneOrigin;
           changeHelperPaneState: (state: boolean) => void;
           isHelperPaneOpen: boolean;
+          helperPaneSx?: CSSProperties;
       }
     | {
           getHelperPane?: never;
           helperPaneOrigin?: never;
           changeHelperPaneState?: never;
           isHelperPaneOpen?: never;
+          helperPaneSx?: never;
       };
 
 export type TokenEditorProps = TokenEditorBaseProps & HelperPaneConditionalProps;
diff --git a/workspaces/common-libs/ui-toolkit/src/components/Swich/Swich.tsx b/workspaces/common-libs/ui-toolkit/src/components/Swich/Swich.tsx
index 938b9576129..9ffb04fc5b0 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/Swich/Swich.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/Swich/Swich.tsx
@@ -22,6 +22,7 @@ interface SwichContainerProps {
     sx?: any;
     active?: boolean;
     color?: string;
+    border?: string;
     enableTransition?: boolean;
     disabled?: boolean;
 }
@@ -71,6 +72,7 @@ const InnerContainer = styled.div<SwichContainerProps>`
     font-weight: bold;
     color: ${(props: SwichContainerProps) => props.active ? (props.color ? props.color : "var(--vscode-editorOverviewRuler-warningForeground)") : "var(--vscode-editor-foreground)"};
     background-color: ${(props: SwichContainerProps) => props.active ? "var(--vscode-editor-background)" : "var(--vscode-tab-unfocusedInactiveBackground)"};
+    border: ${(props: SwichContainerProps) => props.active && props.border ? props.border : "none"};
     margin: 4px;
     border-radius: ${(props: SwichContainerProps) => props.active ? "4px" : 0};
     transition: ${(props: SwichContainerProps) => props.enableTransition ? "all 0.3s ease-in-out" : "none"};
@@ -100,15 +102,16 @@ export interface SwitchProps {
     checkedIcon?: ReactNode;
     uncheckedIcon?: ReactNode;
     checkedColor?: string;
+    checkedBorder?: string;
     enableTransition?: boolean;
     disabled?: boolean;
     readonly?: boolean;
     onChange: () => void;
 }
 
-const getCheckedComponent = (text: string|ReactNode, icon: ReactNode, color: string, transitionEnabled: boolean) => {
+const getCheckedComponent = (text: string|ReactNode, icon: ReactNode, color: string, transitionEnabled: boolean, border?: string) => {
     return (
-        <InnerContainer active={true} color={color} enableTransition={transitionEnabled} >
+        <InnerContainer active={true} color={color} border={border} enableTransition={transitionEnabled} >
             <Content>
                 {icon && (
                     <IconContainer>
@@ -142,7 +145,7 @@ const getUncheckedComponent = (text: string|ReactNode, icon: ReactNode) => {
 
 export const Switch: React.FC<SwitchProps> = (props: SwitchProps) => {
     const { id, className, sx, checked, leftLabel, rightLabel, checkedIcon,
-        uncheckedIcon, checkedColor, enableTransition, disabled, readonly, onChange 
+        uncheckedIcon, checkedColor, checkedBorder, enableTransition, disabled, readonly, onChange
     } = props;
     const handleLeftComponentClick = () => {
         if (checked && !readonly && !disabled) {
@@ -159,12 +162,12 @@ export const Switch: React.FC<SwitchProps> = (props: SwitchProps) => {
             <LeftInnerContainer onClick={handleLeftComponentClick}>
                 {checked ?
                     getUncheckedComponent(leftLabel, uncheckedIcon) :
-                    getCheckedComponent(leftLabel, checkedIcon, checkedColor, enableTransition)
+                    getCheckedComponent(leftLabel, checkedIcon, checkedColor, enableTransition, checkedBorder)
                 }
             </LeftInnerContainer >
             <RightInnerContainer onClick={handleRightComponentClick}>
                 {checked ?
-                    getCheckedComponent(rightLabel, checkedIcon, checkedColor, enableTransition) : 
+                    getCheckedComponent(rightLabel, checkedIcon, checkedColor, enableTransition, checkedBorder) :
                     getUncheckedComponent(rightLabel, uncheckedIcon)
                 }
             </RightInnerContainer>
diff --git a/workspaces/common-libs/ui-toolkit/src/components/TextArea/TextArea.tsx b/workspaces/common-libs/ui-toolkit/src/components/TextArea/TextArea.tsx
index 8d97de59acf..855058b890c 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/TextArea/TextArea.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/TextArea/TextArea.tsx
@@ -76,6 +76,12 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
         const { iconComponent, onClick: iconClick } = icon || {};
 
+        useEffect(() => {
+            if (autoFocus) {
+                (ref as React.MutableRefObject<HTMLTextAreaElement>)?.current?.focus();
+            }
+        }, [autoFocus, ref]);
+
         const handleChange = (e: any) => {
             onTextChange && onTextChange(e.target.value);
             props.onChange && props.onChange(e);
@@ -94,7 +100,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
                     className={className}
                     style={{ width: "100%" }}
                     {...rest}
-                    { ...!props.name ? { value: props.value ? props.value : ""} : {} } // If name is not provided, then value should be empty (for react-hook-form)
+                    {...!props.name ? { value: props.value ? props.value : "" } : {}} // If name is not provided, then value should be empty (for react-hook-form)
                     onChange={handleChange}
                     onInput={handleChange}
                     aria-label={ariaLabel ? ariaLabel : `${label}`}
@@ -138,17 +144,17 @@ export const AutoResizeTextArea = React.forwardRef<HTMLTextAreaElement, AutoResi
             requestAnimationFrame(() => {
                 // get the raw scroll height of the text area without paddings
                 const scrollHeight = getRawScrollHeight(textAreaComponent);
-    
+
                 // calculate the number of rows
                 const contentBasedRows = Math.ceil(scrollHeight / lineHeight.current);
                 const newRows = calculateTextAreaRows(contentBasedRows, growRange);
-    
+
                 // set the rows for both HTML element and react element to avoid state mismatch
                 setTextAreaRows(textAreaComponent, newRows);
                 setRows(newRows);
             });
 
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [textAreaRef.current, lineHeight.current, growRange]);
 
         /* Handle initial render */
@@ -164,7 +170,7 @@ export const AutoResizeTextArea = React.forwardRef<HTMLTextAreaElement, AutoResi
 
             updateRows();
 
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [props.value])
 
         return <TextArea aria-label={ariaLabel} {...rest} rows={rows} ref={textAreaRef} />
diff --git a/workspaces/common-libs/ui-toolkit/src/index.ts b/workspaces/common-libs/ui-toolkit/src/index.ts
index 0bdc3079b92..a4fd2b7e037 100644
--- a/workspaces/common-libs/ui-toolkit/src/index.ts
+++ b/workspaces/common-libs/ui-toolkit/src/index.ts
@@ -98,3 +98,4 @@ export * from './components/Banner/Banner';
 export * from './components/ImageWithFallback';
 export * from './components/ExpressionEditor/components/Common/SlidingPane';
 export * from './components/ExpressionEditor/components/Form';
+export * from './components/BrowserComponents';
diff --git a/workspaces/common-libs/ui-toolkit/src/styles/Theme.ts b/workspaces/common-libs/ui-toolkit/src/styles/Theme.ts
index a4337c29b73..395bcaf36c1 100644
--- a/workspaces/common-libs/ui-toolkit/src/styles/Theme.ts
+++ b/workspaces/common-libs/ui-toolkit/src/styles/Theme.ts
@@ -65,7 +65,15 @@ export enum VSCodeColors {
 
     HIGHLIGHT = "var(--vscode-contrastActiveBorder, var(--vscode-button-background))",
 
-    FOCUS_BORDER = "var(--vscode-focusBorder)"
+    FOCUS_BORDER = "var(--vscode-focusBorder)",
+
+    PANEL_BORDER = "var(--vscode-panel-border)",
+
+    FONT_FAMILY = "var(--vscode-font-family)",
+
+    CHARTS_GREEN = "var(--vscode-charts-green)",
+    CHARTS_RED = "var(--vscode-charts-red)",
+    CHARTS_BLUE = "var(--vscode-charts-blue)"
 }
 
 export const ThemeColors = {
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/.gitignore b/workspaces/mcp-inspector/mcp-inspector-extension/.gitignore
new file mode 100644
index 00000000000..436a890f896
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/.gitignore
@@ -0,0 +1,19 @@
+# Build output
+out/
+dist/
+*.vsix
+
+# Dependencies
+node_modules/
+
+# Test artifacts
+.vscode-test/
+
+# macOS
+.DS_Store
+
+# Editor
+.vscode/.history
+
+# Cache
+.turbo
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/.vscode/launch.json b/workspaces/mcp-inspector/mcp-inspector-extension/.vscode/launch.json
new file mode 100644
index 00000000000..c42edc04b04
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/.vscode/launch.json
@@ -0,0 +1,21 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// 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": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/dist/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		}
+	]
+}
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/.vscode/settings.json b/workspaces/mcp-inspector/mcp-inspector-extension/.vscode/settings.json
new file mode 100644
index 00000000000..16a5c02292d
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/.vscode/settings.json
@@ -0,0 +1,13 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+	"files.exclude": {
+		"out": false, // set this to true to hide the "out" folder with the compiled JS files
+		"dist": false // set this to true to hide the "dist" folder with the compiled JS files
+	},
+	"search.exclude": {
+		"out": true, // set this to false to include "out" folder in search results
+		"dist": true // set this to false to include "dist" folder in search results
+	},
+	// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+	"typescript.tsc.autoDetect": "off"
+}
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/.vscode/tasks.json b/workspaces/mcp-inspector/mcp-inspector-extension/.vscode/tasks.json
new file mode 100644
index 00000000000..877f039211e
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/.vscode/tasks.json
@@ -0,0 +1,49 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "build",
+			"type": "npm",
+			"script": "build",
+			"problemMatcher": [],
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		},
+		{
+			"label": "watch",
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": {
+				"base": "$tsc-watch",
+				"background": {
+					"activeOnStart": true,
+					"beginsPattern": "^\\s*\\[webpack-cli\\] Compiler starting",
+					"endsPattern": "^\\s*webpack \\d+\\.\\d+\\.\\d+ compiled"
+				}
+			},
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never",
+				"group": "watchers"
+			},
+			"group": "build"
+		},
+		{
+			"label": "watch-tests",
+			"type": "npm",
+			"script": "watch-tests",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never",
+				"group": "watchers"
+			},
+			"group": "build"
+		}
+	]
+}
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/.vscodeignore b/workspaces/mcp-inspector/mcp-inspector-extension/.vscodeignore
new file mode 100644
index 00000000000..66e1de22093
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/.vscodeignore
@@ -0,0 +1,24 @@
+# Test files
+.vscode-test/**
+out/test/**
+
+# Source files (compiled to out/)
+src/**
+**/tsconfig.json
+**/*.ts
+
+# Build configuration
+webpack.config.js
+**/eslint.config.mjs
+.gitignore
+.eslintrc.*
+
+# Build artifacts
+**/*.map
+
+# Development dependencies (all excluded, inspector bundled by webpack)
+node_modules/**
+
+# Development files
+.npmrc
+.DS_Store
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/CHANGELOG.md b/workspaces/mcp-inspector/mcp-inspector-extension/CHANGELOG.md
new file mode 100644
index 00000000000..040675290c4
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/CHANGELOG.md
@@ -0,0 +1,26 @@
+# Changelog
+
+All notable changes to the MCP Inspector extension will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.7.2] - 2025-11-06
+
+### Fixed
+- **Intermittent 404 Errors** — Resolved loading issues by fixing static file path resolution, adding startup delay to prevent race conditions, and implementing automatic retry logic with exponential backoff
+
+## [0.7.1] - 2025-11-05
+
+### Added
+- **Initial Beta Release** — First public beta release of MCP Inspector for VSCode
+- **MCP Integration** — Integration with [@modelcontextprotocol/inspector](https://github.com/modelcontextprotocol/inspector) v0.17.2
+- **Connection Monitoring** — Real-time monitoring for MCP servers and clients with detailed request and response inspection
+- **Debugging Interface** — Integrated debugging interface for MCP servers without leaving VSCode
+- **Server Configuration** — Pre-populated server configuration support via URL command
+- **Dark Theme** — Custom dark theme optimized for long debugging sessions
+- **Commands** — Added `Open MCP Inspector` and `Open MCP Inspector with URL` commands
+- **Transport Support** — Support for multiple MCP transport types (STDIO, SSE, Streamable HTTP)
+- **Theme Sync** — Automatic theme synchronization with VSCode theme changes
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/LICENSE b/workspaces/mcp-inspector/mcp-inspector-extension/LICENSE
new file mode 100644
index 00000000000..21f14716e74
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/LICENSE
@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2025 WSO2 LLC
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/NOTICE b/workspaces/mcp-inspector/mcp-inspector-extension/NOTICE
new file mode 100644
index 00000000000..e7f3919779d
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/NOTICE
@@ -0,0 +1,39 @@
+MCP Inspector for VSCode
+Copyright 2025 WSO2 LLC
+
+This product is licensed under the Apache License 2.0.
+
+================================================================================
+
+This product includes software developed by Anthropic:
+
+  @modelcontextprotocol/inspector
+  Copyright (c) Anthropic
+  Licensed under the MIT License
+  https://github.com/modelcontextprotocol/inspector
+
+  The MIT License is compatible with Apache License 2.0 and allows
+  redistribution under Apache 2.0 license terms.
+
+  Full MIT License text:
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+
+================================================================================
+
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/README.md b/workspaces/mcp-inspector/mcp-inspector-extension/README.md
new file mode 100644
index 00000000000..a30d0d4e875
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/README.md
@@ -0,0 +1,76 @@
+# MCP Inspector for VSCode
+
+Inspect, debug, and monitor [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) connections directly within Visual Studio Code.
+
+## Features
+
+### 🔍 Real-time Connection Monitoring
+Monitor MCP server and client connections in real-time with detailed request and response inspection.
+
+### 🐛 Debug MCP Servers
+Test and debug your MCP servers with an integrated debugging interface—no need to leave VSCode.
+
+### 🔧 Pre-populate Server Configuration
+Launch the inspector with pre-configured server URLs or commands using the **"Open MCP Inspector with URL"** command.
+
+### 🎨 Custom Dark Theme
+Enjoy a carefully crafted dark theme optimized for long debugging sessions.
+
+## Getting Started
+
+### Installation
+
+1. Install the extension from the [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=wso2.mcp-inspector)
+2. Reload VSCode
+
+### Usage
+
+**Open the Inspector:**
+- Press `Cmd+Shift+P` (macOS) or `Ctrl+Shift+P` (Windows/Linux)
+- Type `Open MCP Inspector` and press Enter
+
+**Open with Pre-configured Server:**
+- Use the command `Open MCP Inspector with URL` to specify server details
+
+## Requirements
+
+- **Node.js** v18.x or later
+- **Visual Studio Code** v1.104.0 or later
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `Open MCP Inspector` | Open the MCP Inspector panel |
+| `Open MCP Inspector with URL` | Open with pre-populated server configuration |
+
+## Support
+
+- 📖 [Documentation](https://github.com/wso2/mcp-inspector-extension/blob/main/QUICKSTART.md)
+- 🐛 [Report Issues](https://github.com/wso2/mcp-inspector-extension/issues)
+- 💬 [Discussions](https://github.com/wso2/mcp-inspector-extension/discussions)
+
+## About
+
+This extension integrates the official [MCP Inspector](https://github.com/modelcontextprotocol/inspector) into VSCode, providing a seamless debugging experience for Model Context Protocol implementations.
+
+### Third-Party Software
+
+This extension includes the following third-party software:
+
+- **[@modelcontextprotocol/inspector](https://github.com/modelcontextprotocol/inspector)** - MIT License  
+  Visual testing tool for MCP servers
+
+## License
+
+**MCP Inspector for VSCode**: Apache License 2.0
+
+This extension is licensed under the Apache License 2.0. See [LICENSE](https://github.com/wso2/mcp-inspector-extension/blob/main/LICENSE.txt) for full details.
+
+The wrapped `@modelcontextprotocol/inspector` package is licensed under the MIT License, which is compatible with Apache 2.0.
+
+By using this extension, you agree to the [WSO2 Privacy Policy](https://wso2.com/privacy-policy).
+
+---
+
+**Developed by [WSO2](https://wso2.com)**
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/eslint.config.mjs b/workspaces/mcp-inspector/mcp-inspector-extension/eslint.config.mjs
new file mode 100644
index 00000000000..d5c0b53a76c
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/eslint.config.mjs
@@ -0,0 +1,28 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+
+export default [{
+    files: ["**/*.ts"],
+}, {
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+    },
+
+    languageOptions: {
+        parser: tsParser,
+        ecmaVersion: 2022,
+        sourceType: "module",
+    },
+
+    rules: {
+        "@typescript-eslint/naming-convention": ["warn", {
+            selector: "import",
+            format: ["camelCase", "PascalCase"],
+        }],
+
+        curly: "warn",
+        eqeqeq: "warn",
+        "no-throw-literal": "warn",
+        semi: "warn",
+    },
+}];
\ No newline at end of file
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/icon.png b/workspaces/mcp-inspector/mcp-inspector-extension/icon.png
new file mode 100644
index 00000000000..b12bfdf91f6
Binary files /dev/null and b/workspaces/mcp-inspector/mcp-inspector-extension/icon.png differ
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/package.json b/workspaces/mcp-inspector/mcp-inspector-extension/package.json
new file mode 100644
index 00000000000..49c620edcbe
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/package.json
@@ -0,0 +1,93 @@
+{
+  "name": "mcp-server-inspector",
+  "displayName": "MCP Inspector (Beta)",
+  "description": "VSCode extension for inspecting and debugging Model Context Protocol (MCP) connections",
+  "version": "0.7.2",
+  "private": true,
+  "publisher": "wso2",
+  "author": {
+    "name": "WSO2",
+    "url": "https://wso2.com"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wso2/vscode-extensions/tree/main/workspaces/mcp-inspector/mcp-inspector-extension"
+  },
+  "bugs": {
+    "url": "https://github.com/wso2/vscode-extensions/issues"
+  },
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "inspector",
+    "debugging",
+    "developer-tools"
+  ],
+  "engines": {
+    "vscode": "^1.104.0",
+    "node": ">=18.0.0"
+  },
+  "categories": [
+    "Debuggers",
+    "Other"
+  ],
+  "icon": "icon.png",
+  "activationEvents": [],
+  "main": "./out/extension",
+  "contributes": {
+    "commands": [
+      {
+        "command": "mcpInspector.openInspector",
+        "title": "Open MCP Inspector",
+        "icon": {
+          "light": "./resources/icon-dark.svg",
+          "dark": "./resources/icon-light.svg"
+        }
+      },
+      {
+        "command": "mcpInspector.openInspectorWithUrl",
+        "title": "Open MCP Inspector with URL"
+      }
+    ]
+  },
+  "scripts": {
+    "postinstall": "node scripts/inject-theme.js",
+    "vscode:prepublish": "pnpm run compile",
+    "compile": "webpack --mode production --stats-error-details",
+    "watch": "webpack --mode none --watch",
+    "pretest": "pnpm run compile && pnpm run lint",
+    "lint": "eslint src",
+    "test": "node ./out/test/runTest.js",
+    "build": "pnpm run compile && pnpm run lint && pnpm run postbuild",
+    "package": "if [ $isPreRelease = true ]; then vsce package --no-dependencies --pre-release; else vsce package --no-dependencies; fi",
+    "rebuild": "pnpm run clean && pnpm run compile && pnpm run postbuild",
+    "postbuild": "pnpm run package && pnpm run copyVSIX",
+    "copyVSIX": "copyfiles *.vsix ./vsix",
+    "copyVSIXToRoot": "copyfiles -f ./vsix/* ../../..",
+    "clean": "rimraf dist out *.vsix"
+  },
+  "devDependencies": {
+    "@vscode/vsce": "^3.4.0",
+    "@types/vscode": "^1.84.0",
+    "@types/mocha": "^10.0.3",
+    "@types/node": "22.15.18",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^8.32.1",
+    "@vscode/test-electron": "^2.5.2",
+    "eslint": "^8.57.1",
+    "mocha": "^11.2.2",
+    "typescript": "5.8.3",
+    "copyfiles": "^2.4.1",
+    "copy-webpack-plugin": "^13.0.0",
+    "ts-loader": "^9.5.2",
+    "webpack": "^5.99.8",
+    "webpack-cli": "^5.1.4",
+    "open": "10.2.0",
+    "serve-handler": "6.1.6"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/inspector": "^0.17.2"
+  },
+  "packageManager": "pnpm@9.0.0"
+}
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/resources/icon-dark.svg b/workspaces/mcp-inspector/mcp-inspector-extension/resources/icon-dark.svg
new file mode 100644
index 00000000000..e2901e0e3f9
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/resources/icon-dark.svg
@@ -0,0 +1 @@
+<svg fill="#424242" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ModelContextProtocol</title><path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path><path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path></svg>
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/resources/icon-light.svg b/workspaces/mcp-inspector/mcp-inspector-extension/resources/icon-light.svg
new file mode 100644
index 00000000000..d5c1bb5d609
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/resources/icon-light.svg
@@ -0,0 +1 @@
+<svg fill="#C5C5C5" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ModelContextProtocol</title><path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path><path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path></svg>
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/scripts/inject-theme.js b/workspaces/mcp-inspector/mcp-inspector-extension/scripts/inject-theme.js
new file mode 100755
index 00000000000..c67e75a4cbd
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/scripts/inject-theme.js
@@ -0,0 +1,190 @@
+#!/usr/bin/env node
+
+/**
+ * Injects custom CSS theme into the MCP Inspector client's index.html
+ * This modifies the npm package directly so the theme is applied when served
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Target the actual npm package location that gets served
+const INDEX_HTML_PATH = path.join(
+  __dirname,
+  '..',
+  'node_modules',
+  '@modelcontextprotocol',
+  'inspector',
+  'client',
+  'dist',
+  'index.html'
+);
+
+// Placeholder CSS - will be replaced by dynamic theme injection at runtime
+const CUSTOM_CSS = `    <!-- Dynamic Theme Injection Placeholder -->
+    <script>
+      // Function to convert color (hex or rgb/rgba) to HSL format
+      function colorToHsl(color) {
+        let r, g, b;
+
+        // Handle HEX format (#ffffff or #fff)
+        if (color.startsWith('#')) {
+          let hex = color.replace('#', '');
+          if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+          }
+          r = parseInt(hex.substr(0, 2), 16) / 255;
+          g = parseInt(hex.substr(2, 2), 16) / 255;
+          b = parseInt(hex.substr(4, 2), 16) / 255;
+        }
+        // Handle rgb() and rgba() formats
+        else if (color.startsWith('rgb')) {
+          const match = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);
+          if (!match) {
+            return '0 0% 50%';
+          }
+          r = parseInt(match[1]) / 255;
+          g = parseInt(match[2]) / 255;
+          b = parseInt(match[3]) / 255;
+        } else {
+          return '0 0% 50%';
+        }
+
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h, s, l = (max + min) / 2;
+
+        if (max === min) {
+          h = s = 0;
+        } else {
+          const d = max - min;
+          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+          switch (max) {
+            case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+            case g: h = ((b - r) / d + 2) / 6; break;
+            case b: h = ((r - g) / d + 4) / 6; break;
+          }
+        }
+
+        return Math.round(h * 360) + ' ' + Math.round(s * 100) + '% ' + Math.round(l * 100) + '%';
+      }
+
+      // Remove existing theme styles when updating
+      let themeStyleElement = null;
+
+      // Listen for theme color messages from parent
+      window.addEventListener('message', (event) => {
+        const message = event.data;
+        if (message.type === 'vscode-theme-colors') {
+          // Remove old theme style if exists
+          if (themeStyleElement) {
+            themeStyleElement.remove();
+          }
+
+          // Create new style element
+          themeStyleElement = document.createElement('style');
+          themeStyleElement.id = 'vscode-theme-override';
+          themeStyleElement.textContent = \`
+            /* Override both :root and .dark to ensure VSCode theme is always applied */
+            :root,
+            .dark {
+              /* Main colors */
+              --background: \${colorToHsl(message.colors.background)} !important;
+              --foreground: \${colorToHsl(message.colors.foreground)} !important;
+
+              /* Card colors */
+              --card: \${colorToHsl(message.colors.card)} !important;
+              --card-foreground: \${colorToHsl(message.colors.cardForeground)} !important;
+
+              /* Popover colors */
+              --popover: \${colorToHsl(message.colors.popover)} !important;
+              --popover-foreground: \${colorToHsl(message.colors.popoverForeground)} !important;
+
+              /* Primary colors */
+              --primary: \${colorToHsl(message.colors.primary)} !important;
+              --primary-foreground: \${colorToHsl(message.colors.primaryForeground)} !important;
+
+              /* Secondary colors */
+              --secondary: \${colorToHsl(message.colors.secondary)} !important;
+              --secondary-foreground: \${colorToHsl(message.colors.secondaryForeground)} !important;
+
+              /* Muted colors */
+              --muted: \${colorToHsl(message.colors.muted)} !important;
+              --muted-foreground: \${colorToHsl(message.colors.mutedForeground)} !important;
+
+              /* Accent colors */
+              --accent: \${colorToHsl(message.colors.accent)} !important;
+              --accent-foreground: \${colorToHsl(message.colors.accentForeground)} !important;
+
+              /* Destructive colors */
+              --destructive: \${colorToHsl(message.colors.destructive)} !important;
+              --destructive-foreground: \${colorToHsl(message.colors.destructiveForeground)} !important;
+
+              /* Input/Border/Ring */
+              --border: \${colorToHsl(message.colors.border)} !important;
+              --input: \${colorToHsl(message.colors.input)} !important;
+              --ring: \${colorToHsl(message.colors.ring)} !important;
+            }
+
+            /* Override body styles */
+            body {
+              background-color: \${message.colors.bodyBg} !important;
+              color: \${message.colors.bodyColor} !important;
+            }
+
+            /* Override the hardcoded :root colors */
+            :root {
+              color: \${message.colors.bodyColor} !important;
+              background-color: \${message.colors.bodyBg} !important;
+            }
+
+            /* Override @media (prefers-color-scheme: light) */
+            @media (prefers-color-scheme: light) {
+              :root {
+                color: \${message.colors.bodyColor} !important;
+                background-color: \${message.colors.bodyBg} !important;
+              }
+            }
+          \`;
+          document.head.appendChild(themeStyleElement);
+        }
+      });
+    </script>`;
+
+function injectTheme() {
+  console.log('🎨 Injecting custom CSS theme into MCP Inspector npm package...');
+
+  // Check if index.html exists
+  if (!fs.existsSync(INDEX_HTML_PATH)) {
+    console.error(`   ❌ Error: index.html not found at ${INDEX_HTML_PATH}`);
+    console.error('   💡 Try running: pnpm install');
+    process.exit(1);
+  }
+
+  // Read index.html
+  let html = fs.readFileSync(INDEX_HTML_PATH, 'utf8');
+
+  // Check if theme is already injected (avoid duplicate injection)
+  if (html.includes('Dynamic Theme Injection Placeholder')) {
+    console.log('   ℹ️  Theme already injected, skipping...');
+    return;
+  }
+
+  // Inject custom CSS before </head> tag
+  html = html.replace('</head>', `${CUSTOM_CSS}\n  </head>`);
+
+  // Write back to file
+  fs.writeFileSync(INDEX_HTML_PATH, html, 'utf8');
+
+  console.log('   ✅ Custom CSS theme injected successfully!');
+  console.log(`   📍 Location: ${INDEX_HTML_PATH}`);
+  console.log('   💡 Theme will be applied when MCP Inspector client server starts');
+}
+
+// Run the injection
+try {
+  injectTheme();
+} catch (error) {
+  console.error('   ❌ Failed to inject theme:', error.message);
+  process.exit(1);
+}
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/src/MCPInspectorManager.ts b/workspaces/mcp-inspector/mcp-inspector-extension/src/MCPInspectorManager.ts
new file mode 100644
index 00000000000..6a3685ff8c2
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/src/MCPInspectorManager.ts
@@ -0,0 +1,260 @@
+import * as vscode from 'vscode';
+import * as childProcess from 'child_process';
+import { randomBytes } from 'crypto';
+import { Logger } from './utils/logger';
+import { Ports, ProcessConfig, ErrorMessages } from './constants';
+import type { ProcessSpawnConfig } from './types';
+
+/**
+ * Manages the MCP Inspector server and client processes
+ */
+export class MCPInspectorManager {
+  private authToken: string | null = null;
+  private isRunning = false;
+  private serverProcess: childProcess.ChildProcess | null = null;
+  private clientProcess: childProcess.ChildProcess | null = null;
+
+  constructor(private readonly extensionUri: vscode.Uri) {}
+
+  /**
+   * Get the path to the bundled MCP Inspector files
+   * Uses webpack-bundled files from out/inspector/
+   */
+  private getInspectorPath(): vscode.Uri {
+    return vscode.Uri.joinPath(this.extensionUri, 'out', 'inspector');
+  }
+
+  /**
+   * Generate a secure authentication token for the MCP proxy server
+   */
+  private generateAuthToken(): string {
+    return randomBytes(32).toString('hex');
+  }
+
+  /**
+   * Get the current auth token, generating one if it doesn't exist
+   */
+  public getAuthToken(): string {
+    if (!this.authToken) {
+      this.authToken = this.generateAuthToken();
+    }
+    return this.authToken;
+  }
+
+  /**
+   * Check if the inspector is currently running
+   */
+  public isInspectorRunning(): boolean {
+    return this.isRunning;
+  }
+
+  /**
+   * Generic method to spawn and monitor a child process
+   * Follows DRY principle by eliminating duplicated spawn logic
+   */
+  private async spawnProcess(
+    config: ProcessSpawnConfig,
+    processRef: 'serverProcess' | 'clientProcess'
+  ): Promise<void> {
+    return new Promise((resolve, reject) => {
+      // Spawn the process
+      const process = childProcess.spawn('node', [config.scriptPath], {
+        env: config.env,
+        cwd: config.cwd,
+        stdio: ['ignore', 'pipe', 'pipe'],
+      });
+
+      this[processRef] = process;
+      let resolved = false;
+
+      // Set timeout for process startup
+      const timeout = setTimeout(() => {
+        if (!resolved) {
+          resolved = true;
+          process.kill();
+          this[processRef] = null;
+          if (processRef === 'serverProcess') {
+            this.isRunning = false;
+          }
+          reject(new Error(config.timeoutError));
+        }
+      }, ProcessConfig.STARTUP_TIMEOUT_MS);
+
+      // Handle stdout - look for ready message
+      process.stdout?.on('data', (data: Buffer) => {
+        const output = data.toString().trim();
+
+        if (!resolved && output.includes(config.readyMessage)) {
+          resolved = true;
+          clearTimeout(timeout);
+          Logger.info(`${config.errorPrefix} started successfully`);
+          resolve();
+        }
+      });
+
+      // Handle stderr - detect port conflicts
+      process.stderr?.on('data', (data: Buffer) => {
+        const output = data.toString().trim();
+
+        if (!resolved && output.includes(ProcessConfig.PORT_IN_USE_MESSAGE)) {
+          resolved = true;
+          clearTimeout(timeout);
+          process.kill();
+          this[processRef] = null;
+          if (processRef === 'serverProcess') {
+            this.isRunning = false;
+          }
+          reject(new Error(config.portInUseError(
+            processRef === 'serverProcess' ? Ports.SERVER : Ports.CLIENT
+          )));
+        } else {
+          // Log errors for debugging
+          Logger.error(`[${config.errorPrefix}] ${output}`);
+        }
+      });
+
+      // Handle process exit
+      process.on('exit', (code) => {
+        this[processRef] = null;
+        if (processRef === 'serverProcess') {
+          this.isRunning = false;
+        }
+        if (!resolved) {
+          resolved = true;
+          clearTimeout(timeout);
+          reject(new Error(`${config.errorPrefix} process exited unexpectedly (code: ${code})`));
+        }
+      });
+
+      // Handle process errors
+      process.on('error', (error) => {
+        Logger.error(`${config.errorPrefix} process error`, error);
+        this[processRef] = null;
+        if (processRef === 'serverProcess') {
+          this.isRunning = false;
+        }
+        if (!resolved) {
+          resolved = true;
+          clearTimeout(timeout);
+          reject(error);
+        }
+      });
+    });
+  }
+
+  /**
+   * Spawn the MCP Inspector proxy server process
+   */
+  private async startServerProcess(): Promise<void> {
+    const inspectorPath = this.getInspectorPath();
+    const token = this.getAuthToken();
+
+    const config: ProcessSpawnConfig = {
+      scriptPath: vscode.Uri.joinPath(inspectorPath, 'server.js').fsPath,
+      env: {
+        ...process.env,
+        MCP_PROXY_AUTH_TOKEN: token,
+        SERVER_PORT: Ports.SERVER,
+        CLIENT_PORT: Ports.CLIENT,
+      },
+      cwd: inspectorPath.fsPath,
+      readyMessage: ProcessConfig.SERVER_READY_MESSAGE,
+      errorPrefix: 'Server',
+      portInUseError: ErrorMessages.SERVER_PORT_IN_USE,
+      timeoutError: ErrorMessages.SERVER_TIMEOUT,
+    };
+
+    return this.spawnProcess(config, 'serverProcess');
+  }
+
+  /**
+   * Spawn the MCP Inspector client HTTP server process
+   */
+  private async startClientProcess(): Promise<void> {
+    const inspectorPath = this.getInspectorPath();
+    const token = this.getAuthToken();
+    const inspectorUrl = `http://localhost:${Ports.CLIENT}/?MCP_PROXY_AUTH_TOKEN=${token}`;
+
+    const config: ProcessSpawnConfig = {
+      scriptPath: vscode.Uri.joinPath(inspectorPath, 'client.js').fsPath,
+      env: {
+        ...process.env,
+        CLIENT_PORT: Ports.CLIENT,
+        INSPECTOR_URL: inspectorUrl,
+        MCP_AUTO_OPEN_ENABLED: 'false',
+      },
+      cwd: inspectorPath.fsPath,
+      readyMessage: ProcessConfig.CLIENT_READY_MESSAGE,
+      errorPrefix: 'Client',
+      portInUseError: ErrorMessages.CLIENT_PORT_IN_USE,
+      timeoutError: ErrorMessages.CLIENT_TIMEOUT,
+    };
+
+    return this.spawnProcess(config, 'clientProcess');
+  }
+
+  /**
+   * Start the MCP Inspector (server and client processes)
+   */
+  public async start(): Promise<void> {
+    try {
+      Logger.info('Starting MCP Inspector...');
+
+      // Generate auth token
+      this.getAuthToken();
+
+      // Start the server process (waits for ready message)
+      await this.startServerProcess();
+
+      // Start the client process (waits for ready message)
+      await this.startClientProcess();
+
+      // Add a small delay to ensure the HTTP server is fully ready to accept connections
+      // This helps prevent race conditions where the iframe loads before the server is ready
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      this.isRunning = true;
+      Logger.info('MCP Inspector started successfully');
+    } catch (error) {
+      Logger.error('Failed to start MCP Inspector', error);
+      this.isRunning = false;
+      throw error;
+    }
+  }
+
+  /**
+   * Stop the MCP Inspector and clean up resources
+   */
+  public async stop(): Promise<void> {
+    try {
+      // Kill client process
+      if (this.clientProcess) {
+        this.clientProcess.kill('SIGTERM');
+        this.clientProcess = null;
+      }
+
+      // Kill server process
+      if (this.serverProcess) {
+        this.serverProcess.kill('SIGTERM');
+        this.serverProcess = null;
+      }
+
+      this.isRunning = false;
+      this.authToken = null;
+
+      Logger.info('MCP Inspector stopped');
+    } catch (error) {
+      Logger.error('Failed to stop MCP Inspector', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Dispose of resources
+   */
+  public dispose(): void {
+    this.stop().catch((error) => {
+      Logger.error('Error during disposal', error);
+    });
+  }
+}
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/src/MCPInspectorViewProvider.ts b/workspaces/mcp-inspector/mcp-inspector-extension/src/MCPInspectorViewProvider.ts
new file mode 100644
index 00000000000..17dfbc9418e
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/src/MCPInspectorViewProvider.ts
@@ -0,0 +1,312 @@
+import * as vscode from 'vscode';
+import { Views, WebviewConfig, Ports } from './constants';
+import { Logger } from './utils/logger';
+import type { MCPInspectorManager } from './MCPInspectorManager';
+import type { ServerParams } from './types';
+
+/**
+ * Provides the webview content for the MCP Inspector
+ */
+export class MCPInspectorViewProvider implements vscode.WebviewViewProvider {
+  public static readonly viewType = Views.INSPECTOR_VIEW;
+
+  constructor(private readonly _inspectorManager?: MCPInspectorManager) {}
+
+  /**
+   * Resolves the webview view when it's shown
+   */
+  public resolveWebviewView(
+    webviewView: vscode.WebviewView,
+    _context: vscode.WebviewViewResolveContext,
+    _token: vscode.CancellationToken
+  ): void {
+    try {
+      webviewView.webview.options = {
+        enableScripts: WebviewConfig.ENABLE_SCRIPTS,
+      };
+
+      webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
+    } catch (error) {
+      Logger.error('Failed to resolve webview view', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Get HTML content for the webview
+   */
+  public getHtmlForWebview(webview: vscode.Webview, serverParams?: ServerParams): string {
+    return this._getHtmlForWebview(webview, serverParams);
+  }
+
+  /**
+   * Get loading HTML while processes are starting
+   */
+  public getLoadingHtml(): string {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MCP Inspector - Loading</title>
+  <style>
+    html, body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background: var(--vscode-editor-background);
+    }
+    .loading-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font-family: var(--vscode-font-family);
+      color: var(--vscode-foreground);
+      gap: 20px;
+    }
+    .spinner {
+      width: 50px;
+      height: 50px;
+      border: 5px solid var(--vscode-button-background);
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .status {
+      font-size: 16px;
+      opacity: 0.8;
+    }
+  </style>
+</head>
+<body>
+  <div class="loading-container">
+    <div class="spinner"></div>
+    <div class="status">Starting MCP Inspector...</div>
+    <div style="font-size: 12px; opacity: 0.6;">This may take a few seconds</div>
+  </div>
+</body>
+</html>`;
+  }
+
+  /**
+   * Get error HTML when startup fails
+   */
+  public getErrorHtml(errorMessage: string): string {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MCP Inspector - Error</title>
+  <style>
+    html, body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background: var(--vscode-editor-background);
+    }
+    .error-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font-family: var(--vscode-font-family);
+      color: var(--vscode-foreground);
+      gap: 16px;
+      padding: 20px;
+      text-align: center;
+    }
+    .error-icon {
+      font-size: 48px;
+      color: var(--vscode-errorForeground);
+    }
+    .error-message {
+      font-size: 14px;
+      max-width: 500px;
+    }
+  </style>
+</head>
+<body>
+  <div class="error-container">
+    <div class="error-icon">⚠️</div>
+    <div style="font-size: 18px;">Failed to Start MCP Inspector</div>
+    <div class="error-message">${errorMessage}</div>
+    <div style="font-size: 12px; opacity: 0.6;">Try closing and reopening the panel</div>
+  </div>
+</body>
+</html>`;
+  }
+
+  /**
+   * Generate HTML for the webview
+   */
+  private _getHtmlForWebview(_webview: vscode.Webview, serverParams?: ServerParams): string {
+    // Get auth token from inspector manager
+    const authToken = this._inspectorManager?.getAuthToken() || '';
+
+    // Build URL with auth token and optional server parameters
+    const urlParams = new URLSearchParams({ MCP_PROXY_AUTH_TOKEN: authToken });
+    if (serverParams?.serverUrl) {
+      urlParams.set('serverUrl', serverParams.serverUrl);
+    }
+    if (serverParams?.serverCommand) {
+      urlParams.set('serverCommand', serverParams.serverCommand);
+    }
+    if (serverParams?.serverArgs) {
+      urlParams.set('serverArgs', serverParams.serverArgs);
+    }
+    if (serverParams?.transport) {
+      urlParams.set('transport', serverParams.transport);
+    }
+
+    const inspectorUrl = `http://localhost:${Ports.CLIENT}/?${urlParams.toString()}`;
+
+    // CSP policy that allows iframe to localhost
+    const csp = [
+      `default-src 'none'`,
+      `frame-src http://localhost:${Ports.CLIENT}`,
+      `style-src 'unsafe-inline'`,
+      `script-src 'unsafe-inline'`,
+    ].join('; ');
+
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Security-Policy" content="${csp}">
+  <title>MCP Inspector</title>
+  <style>
+    html, body, iframe {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      border: none;
+      overflow: hidden;
+      background: var(--vscode-editor-background);
+    }
+  </style>
+</head>
+<body>
+  <iframe id="inspector-iframe" src="${inspectorUrl}" sandbox="allow-scripts allow-forms allow-same-origin"></iframe>
+  <script>
+    (function() {
+      const iframe = document.getElementById('inspector-iframe');
+      let retryCount = 0;
+      const maxRetries = 3;
+
+      // Function to send theme colors to iframe
+      function sendThemeColors() {
+
+        // Get VSCode theme colors
+        const computedStyle = getComputedStyle(document.documentElement);
+        const editorBg = computedStyle.getPropertyValue('--vscode-editor-background').trim();
+        const editorFg = computedStyle.getPropertyValue('--vscode-editor-foreground').trim();
+        const buttonBg = computedStyle.getPropertyValue('--vscode-button-secondaryBackground').trim();
+        const border = computedStyle.getPropertyValue('--vscode-activityBar-border').trim();
+        const errorBg = computedStyle.getPropertyValue('--vscode-inputValidation-errorBackground').trim();
+        const activityBarBg = computedStyle.getPropertyValue('--vscode-activityBar-background').trim();
+        const inactiveTabBg = computedStyle.getPropertyValue('--vscode-tab-inactiveBackground').trim();
+
+        // Send all theme colors (in same order as inject-theme.js uses them)
+        const themeColors = {
+          // Main colors
+          background: editorBg,
+          foreground: editorFg,
+
+          // Card colors
+          card: editorBg,
+          cardForeground: editorFg,
+
+          // Popover colors
+          popover: editorBg,
+          popoverForeground: editorFg,
+
+          // Primary colors
+          primary: activityBarBg,
+          primaryForeground: inactiveTabBg,
+
+          // Secondary colors
+          secondary: inactiveTabBg,
+          secondaryForeground: activityBarBg,
+
+          // Muted colors
+          muted: inactiveTabBg,
+          mutedForeground: activityBarBg,
+
+          // Accent colors
+          accent: inactiveTabBg,
+          accentForeground: activityBarBg,
+
+          // Destructive colors
+          destructive: errorBg,
+          destructiveForeground: inactiveTabBg,
+
+          // Input/Border/Ring
+          border: border,
+          input: border,
+          ring: editorFg,
+
+          // Body styles
+          bodyBg: editorBg,
+          bodyColor: editorFg
+        };
+
+
+        if (iframe.contentWindow) {
+          iframe.contentWindow.postMessage({
+            type: 'vscode-theme-colors',
+            colors: themeColors
+          }, '*');
+        }
+      }
+
+      // Handle iframe errors and implement retry logic
+      iframe.onerror = function(error) {
+        console.error('MCP Inspector iframe error:', error);
+        if (retryCount < maxRetries) {
+          retryCount++;
+          console.log('Retrying to load iframe... Attempt ' + retryCount + '/' + maxRetries);
+          setTimeout(function() {
+            iframe.src = iframe.src; // Reload the iframe
+          }, 1000 * retryCount); // Exponential backoff
+        }
+      };
+
+      // Wait for iframe to load then send theme colors immediately
+      iframe.onload = function() {
+        retryCount = 0; // Reset retry count on successful load
+        // Send immediately and retry after a short delay to ensure it's applied
+        sendThemeColors();
+        setTimeout(sendThemeColors, 50);
+        setTimeout(sendThemeColors, 200);
+      };
+
+      // Listen for VSCode theme changes
+      const observer = new MutationObserver((mutations) => {
+        sendThemeColors();
+      });
+
+      // Observe changes to the document element's style attribute
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['style', 'class']
+      });
+
+    })();
+  </script>
+</body>
+</html>`;
+  }
+}
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/src/client-wrapper.js b/workspaces/mcp-inspector/mcp-inspector-extension/src/client-wrapper.js
new file mode 100644
index 00000000000..4f78dc4187e
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/src/client-wrapper.js
@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+
+/**
+ * Custom wrapper for the MCP Inspector client server
+ * This fixes the path resolution issue when the client is bundled by webpack
+ */
+
+const open = require("open");
+const { join } = require("path");
+const handler = require("serve-handler");
+const http = require("http");
+
+// Fix: Point to the correct location of static files after webpack bundling
+// The static files are copied to ./client-dist by webpack's CopyWebpackPlugin
+// __dirname will be preserved by webpack config (node: { __dirname: false })
+const distPath = join(__dirname, "client-dist");
+
+const server = http.createServer((request, response) => {
+  // Set CORS headers before serve-handler processes the request
+  response.setHeader("Access-Control-Allow-Origin", "*");
+  response.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+  response.setHeader("Access-Control-Allow-Headers", "*");
+
+  const handlerOptions = {
+    public: distPath,
+    rewrites: [{ source: "/**", destination: "/index.html" }],
+    headers: [
+      {
+        // Ensure index.html is never cached
+        source: "index.html",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "no-cache, no-store, max-age=0",
+          },
+        ],
+      },
+      {
+        // Allow long-term caching for hashed assets
+        source: "assets/**",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=31536000, immutable",
+          },
+        ],
+      },
+    ],
+  };
+
+  return handler(request, response, handlerOptions);
+});
+
+const port = parseInt(process.env.CLIENT_PORT || "6274", 10);
+const host = process.env.HOST || "localhost";
+server.on("listening", () => {
+  const url = process.env.INSPECTOR_URL || `http://${host}:${port}`;
+  console.log(`\n🚀 MCP Inspector is up and running at:\n   ${url}\n`);
+  if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
+    console.log(`🌐 Opening browser...`);
+    open(url);
+  }
+});
+server.on("error", (err) => {
+  if (err.message.includes(`EADDRINUSE`)) {
+    console.error(
+      `❌  MCP Inspector PORT IS IN USE at http://${host}:${port} ❌ `,
+    );
+  } else {
+    throw err;
+  }
+});
+server.listen(port, host);
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/src/constants.ts b/workspaces/mcp-inspector/mcp-inspector-extension/src/constants.ts
new file mode 100644
index 00000000000..eb30d98708b
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/src/constants.ts
@@ -0,0 +1,74 @@
+/**
+ * Extension constants
+ */
+
+export const EXTENSION_ID = 'mcpInspector';
+export const EXTENSION_NAME = 'MCP Inspector';
+
+/**
+ * Command IDs
+ */
+export const Commands = {
+  OPEN_INSPECTOR: `${EXTENSION_ID}.openInspector`,
+  OPEN_INSPECTOR_WITH_URL: `${EXTENSION_ID}.openInspectorWithUrl`,
+} as const;
+
+/**
+ * View IDs
+ */
+export const Views = {
+  INSPECTOR_VIEW: `${EXTENSION_ID}.inspectorView`,
+} as const;
+
+/**
+ * Configuration keys
+ */
+export const Configuration = {
+  SECTION: EXTENSION_ID,
+} as const;
+
+/**
+ * Webview configuration
+ */
+export const WebviewConfig = {
+  RETAIN_CONTEXT: true,
+  ENABLE_SCRIPTS: true,
+} as const;
+
+/**
+ * MCP Inspector port configuration
+ */
+export const Ports = {
+  SERVER: '6277',
+  CLIENT: '6274',
+} as const;
+
+/**
+ * Process configuration
+ */
+export const ProcessConfig = {
+  STARTUP_TIMEOUT_MS: 30000, // 30 seconds
+  SERVER_READY_MESSAGE: 'Proxy server listening',
+  CLIENT_READY_MESSAGE: 'MCP Inspector is up and running',
+  PORT_IN_USE_MESSAGE: 'PORT IS IN USE',
+} as const;
+
+/**
+ * Error messages
+ */
+export const ErrorMessages = {
+  SERVER_TIMEOUT: 'Server process failed to start within 30 seconds. Please check the logs and try again.',
+  CLIENT_TIMEOUT: 'Client process failed to start within 30 seconds. Please check the logs and try again.',
+  SERVER_PORT_IN_USE: (port: string) => `Port ${port} is already in use. Please close any other MCP Inspector instances or processes using this port.`,
+  CLIENT_PORT_IN_USE: (port: string) => `Port ${port} is already in use. Please close any other MCP Inspector instances or processes using this port.`,
+  ACTIVATION_FAILED: (error: string) => `Failed to activate ${EXTENSION_NAME}: ${error}`,
+  STARTUP_FAILED: (error: string) => `Failed to start MCP Inspector: ${error}`,
+  PANEL_OPEN_FAILED: (error: string) => `Failed to open ${EXTENSION_NAME}: ${error}`,
+} as const;
+
+/**
+ * User-facing messages
+ */
+export const UserMessages = {
+  PORT_CONFLICT_DETAILS: `MCP Inspector uses ports ${Ports.CLIENT} (client) and ${Ports.SERVER} (server). Please ensure no other processes are using these ports.`,
+} as const;
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/src/extension.ts b/workspaces/mcp-inspector/mcp-inspector-extension/src/extension.ts
new file mode 100644
index 00000000000..3d2b01f1b3e
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/src/extension.ts
@@ -0,0 +1,190 @@
+import * as vscode from 'vscode';
+import { MCPInspectorViewProvider } from './MCPInspectorViewProvider';
+import { MCPInspectorManager } from './MCPInspectorManager';
+import { Commands, WebviewConfig, EXTENSION_NAME, ErrorMessages, UserMessages } from './constants';
+import { Logger } from './utils/logger';
+import type { ServerParams } from './types';
+
+/**
+ * Singleton reference to the current webview panel
+ */
+let currentPanel: vscode.WebviewPanel | undefined;
+
+/**
+ * Singleton reference to the MCP Inspector manager
+ */
+let inspectorManager: MCPInspectorManager | undefined;
+
+/**
+ * Extension activation function
+ * Called when the extension is first activated
+ */
+export function activate(context: vscode.ExtensionContext): void {
+  try {
+    Logger.info(`${EXTENSION_NAME} activating...`);
+
+    // Create MCP Inspector manager (starts on-demand when panel opens)
+    inspectorManager = new MCPInspectorManager(context.extensionUri);
+    context.subscriptions.push({
+      dispose: () => inspectorManager?.dispose(),
+    });
+
+    // Register the webview provider for view container support
+    const provider = new MCPInspectorViewProvider(inspectorManager);
+    context.subscriptions.push(
+      vscode.window.registerWebviewViewProvider(
+        MCPInspectorViewProvider.viewType,
+        provider,
+        {
+          webviewOptions: {
+            retainContextWhenHidden: WebviewConfig.RETAIN_CONTEXT,
+          },
+        }
+      )
+    );
+
+    // Register command to open the inspector as a webview panel
+    context.subscriptions.push(
+      vscode.commands.registerCommand(Commands.OPEN_INSPECTOR, () => {
+        openInspectorPanel(context, provider);
+      })
+    );
+
+    // Register command to open inspector with pre-populated server URL/command
+    context.subscriptions.push(
+      vscode.commands.registerCommand(
+        Commands.OPEN_INSPECTOR_WITH_URL,
+        (params: ServerParams) => {
+          openInspectorPanel(context, provider, params);
+        }
+      )
+    );
+
+    Logger.info(`${EXTENSION_NAME} activated successfully`);
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    Logger.error('Failed to activate extension', error);
+    vscode.window.showErrorMessage(ErrorMessages.ACTIVATION_FAILED(errorMessage));
+  }
+}
+
+/**
+ * Extension deactivation function
+ * Called when the extension is deactivated
+ */
+export function deactivate(): void {
+  try {
+    if (currentPanel) {
+      currentPanel.dispose();
+      currentPanel = undefined;
+    }
+
+    Logger.info(`${EXTENSION_NAME} deactivated`);
+  } catch (error) {
+    console.error('Error during deactivation:', error);
+  }
+}
+
+/**
+ * Open or reveal the inspector webview panel
+ */
+function openInspectorPanel(
+  context: vscode.ExtensionContext,
+  provider: MCPInspectorViewProvider,
+  serverParams?: ServerParams
+): void {
+  try {
+    const column = vscode.ViewColumn.One;
+
+    if (currentPanel) {
+      // Panel already exists, just reveal it
+      currentPanel.reveal(column);
+      return;
+    }
+
+    // Create new webview panel first with loading state
+    currentPanel = vscode.window.createWebviewPanel(
+      'mcpInspector',
+      EXTENSION_NAME,
+      column,
+      {
+        enableScripts: WebviewConfig.ENABLE_SCRIPTS,
+        retainContextWhenHidden: WebviewConfig.RETAIN_CONTEXT,
+      }
+    );
+
+    // Set the panel icon
+    currentPanel.iconPath = {
+      light: vscode.Uri.joinPath(context.extensionUri, 'resources', 'icon-dark.svg'),
+      dark: vscode.Uri.joinPath(context.extensionUri, 'resources', 'icon-light.svg'),
+    };
+
+    // Set initial loading content
+    currentPanel.webview.html = provider.getLoadingHtml();
+
+    // Start the MCP Inspector processes if not already running
+    if (inspectorManager && !inspectorManager.isInspectorRunning()) {
+      inspectorManager.start().then(
+        () => {
+          // Update webview with inspector iframe once processes are ready
+          if (currentPanel) {
+            currentPanel.webview.html = provider.getHtmlForWebview(currentPanel.webview, serverParams);
+          }
+        },
+        (error) => {
+          Logger.error('Failed to start MCP Inspector processes', error);
+          const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+
+          // Check if it's a port conflict error
+          if (errorMessage.includes('already in use')) {
+            vscode.window.showErrorMessage(
+              errorMessage,
+              'Show Details',
+              'Retry'
+            ).then((selection) => {
+              if (selection === 'Show Details') {
+                vscode.window.showInformationMessage(UserMessages.PORT_CONFLICT_DETAILS, 'OK');
+              } else if (selection === 'Retry') {
+                // Close the current panel and reopen to retry
+                if (currentPanel) {
+                  currentPanel.dispose();
+                }
+                vscode.commands.executeCommand(Commands.OPEN_INSPECTOR);
+              }
+            });
+          } else {
+            vscode.window.showErrorMessage(ErrorMessages.STARTUP_FAILED(errorMessage));
+          }
+
+          // Show error in webview
+          if (currentPanel) {
+            currentPanel.webview.html = provider.getErrorHtml(errorMessage);
+          }
+        }
+      );
+    } else {
+      // Processes already running, show inspector immediately
+      currentPanel.webview.html = provider.getHtmlForWebview(currentPanel.webview, serverParams);
+    }
+
+    // Handle panel disposal
+    currentPanel.onDidDispose(
+      () => {
+        currentPanel = undefined;
+
+        // Stop the MCP Inspector processes when panel is closed
+        if (inspectorManager && inspectorManager.isInspectorRunning()) {
+          inspectorManager.stop().catch((error) => {
+            Logger.error('Failed to stop MCP Inspector', error);
+          });
+        }
+      },
+      null,
+      context.subscriptions
+    );
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    Logger.error('Failed to open inspector panel', error);
+    vscode.window.showErrorMessage(ErrorMessages.PANEL_OPEN_FAILED(errorMessage));
+  }
+}
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/src/test/extension.test.ts b/workspaces/mcp-inspector/mcp-inspector-extension/src/test/extension.test.ts
new file mode 100644
index 00000000000..4ca0ab41982
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/src/test/extension.test.ts
@@ -0,0 +1,15 @@
+import * as assert from 'assert';
+
+// You can import and use all API from the 'vscode' module
+// as well as import your extension to test it
+import * as vscode from 'vscode';
+// import * as myExtension from '../../extension';
+
+suite('Extension Test Suite', () => {
+	vscode.window.showInformationMessage('Start all tests.');
+
+	test('Sample test', () => {
+		assert.strictEqual(-1, [1, 2, 3].indexOf(5));
+		assert.strictEqual(-1, [1, 2, 3].indexOf(0));
+	});
+});
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/src/types.ts b/workspaces/mcp-inspector/mcp-inspector-extension/src/types.ts
new file mode 100644
index 00000000000..edacf6c61ad
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/src/types.ts
@@ -0,0 +1,35 @@
+/**
+ * Shared type definitions for the extension
+ */
+
+/**
+ * MCP transport types supported by the inspector
+ */
+export type MCPTransport = 'stdio' | 'sse' | 'streamable-http';
+
+/**
+ * Parameters for opening the inspector with pre-populated server configuration
+ */
+export interface ServerParams {
+  /** Server URL for SSE/HTTP transport */
+  serverUrl?: string;
+  /** Command to execute for stdio transport */
+  serverCommand?: string;
+  /** Arguments for the server command */
+  serverArgs?: string;
+  /** Transport protocol to use */
+  transport?: MCPTransport;
+}
+
+/**
+ * Process spawn configuration
+ */
+export interface ProcessSpawnConfig {
+  scriptPath: string;
+  env: NodeJS.ProcessEnv;
+  cwd: string;
+  readyMessage: string;
+  errorPrefix: string;
+  portInUseError: (port: string) => string;
+  timeoutError: string;
+}
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/src/utils/logger.ts b/workspaces/mcp-inspector/mcp-inspector-extension/src/utils/logger.ts
new file mode 100644
index 00000000000..8f8726d4bf8
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/src/utils/logger.ts
@@ -0,0 +1,27 @@
+import { EXTENSION_NAME } from '../constants';
+
+/**
+ * Logger utility for consistent logging throughout the extension
+ */
+export class Logger {
+  /**
+   * Log an info message
+   */
+  public static info(message: string, ...args: unknown[]): void {
+    console.log(`[${EXTENSION_NAME}] [INFO]`, message, ...args);
+  }
+
+  /**
+   * Log a warning message
+   */
+  public static warn(message: string, ...args: unknown[]): void {
+    console.warn(`[${EXTENSION_NAME}] [WARN]`, message, ...args);
+  }
+
+  /**
+   * Log an error message
+   */
+  public static error(message: string, error?: Error | unknown, ...args: unknown[]): void {
+    console.error(`[${EXTENSION_NAME}] [ERROR]`, message, error, ...args);
+  }
+}
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/tsconfig.json b/workspaces/mcp-inspector/mcp-inspector-extension/tsconfig.json
new file mode 100644
index 00000000000..63b9fc053ff
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/tsconfig.json
@@ -0,0 +1,42 @@
+{
+	"compilerOptions": {
+		"module": "Node16",
+		"target": "ES2022",
+		"lib": ["ES2022"],
+		"sourceMap": true,
+		"rootDir": "src",
+		"outDir": "out",
+
+		/* Strict Type-Checking Options */
+		"strict": true,
+		"noImplicitAny": true,
+		"strictNullChecks": true,
+		"strictFunctionTypes": true,
+		"strictBindCallApply": true,
+		"strictPropertyInitialization": true,
+		"noImplicitThis": true,
+		"alwaysStrict": true,
+
+		/* Additional Checks */
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedIndexedAccess": true,
+		"noImplicitOverride": true,
+		"noPropertyAccessFromIndexSignature": true,
+
+		/* Module Resolution Options */
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"resolveJsonModule": true,
+		"forceConsistentCasingInFileNames": true,
+
+		/* Advanced Options */
+		"skipLibCheck": true,
+		"declaration": true,
+		"declarationMap": true
+	},
+	"include": ["src/**/*"],
+	"exclude": ["node_modules", "out", "dist"]
+}
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/vsc-extension-quickstart.md b/workspaces/mcp-inspector/mcp-inspector-extension/vsc-extension-quickstart.md
new file mode 100644
index 00000000000..26c66f47483
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/vsc-extension-quickstart.md
@@ -0,0 +1,125 @@
+# MCP Inspector
+
+A Visual Studio Code extension for inspecting and debugging Model Context Protocol (MCP) connections.
+
+## Overview
+
+The MCP Inspector provides developers with tools to inspect, debug, and monitor Model Context Protocol connections directly within Visual Studio Code. This extension integrates the [MCP Inspector](https://github.com/modelcontextprotocol/inspector) into VSCode for a seamless development experience.
+
+## Prerequisites
+
+Before using this extension, ensure you have the following installed:
+
+- **Node.js** – version **18.x** or later
+  [Download Node.js](https://nodejs.org)
+
+- **pnpm** – version **9.0** or later
+  Install with:
+  ```bash
+  npm install -g pnpm
+  ```
+
+- **Visual Studio Code** – version **1.104.0** or later
+  [Download VSCode](https://code.visualstudio.com)
+
+## Installation
+
+### From VSIX
+
+1. Download the latest `.vsix` file from the [releases page](https://github.com/wso2/mcp-inspector-extension/releases)
+2. In VSCode, go to **Extensions** → **Views and More Actions (...)** → **Install from VSIX**
+3. Select the downloaded `.vsix` file
+
+### From Source
+
+1. **Clone the repository**:
+   ```bash
+   git clone https://github.com/wso2/mcp-inspector-extension.git
+   cd mcp-inspector-extension
+   ```
+
+2. **Install dependencies**:
+   ```bash
+   pnpm install
+   ```
+
+3. **Build the extension**:
+   ```bash
+   pnpm build
+   ```
+
+4. **Package the extension**:
+   ```bash
+   pnpm package
+   ```
+
+5. **Install locally**:
+   ```bash
+   pnpm run install:local
+   ```
+
+## Usage
+
+### Opening the Inspector
+
+- Use the command palette (`Cmd+Shift+P` / `Ctrl+Shift+P`) and search for **"Open MCP Inspector"**
+- Or use the command **"Open MCP Inspector with URL"** to pre-populate server configuration
+
+### Features
+
+- **Real-time MCP connection monitoring**
+- **Request/response inspection**
+- **Debug MCP servers and clients**
+- **Integrated within VSCode** for a seamless workflow
+
+## Development
+
+### Available Commands
+
+- `pnpm build` – Build the extension for production
+- `pnpm dev` – Watch mode for development
+- `pnpm lint` – Lint TypeScript files
+- `pnpm lint:fix` – Auto-fix linting issues
+- `pnpm test` – Run tests
+- `pnpm clean` – Remove build artifacts
+- `pnpm package` – Create VSIX package
+- `pnpm install:local` – Install VSIX locally
+
+### Development Workflow
+
+1. **Start watch mode**:
+   ```bash
+   pnpm dev
+   ```
+
+2. **Launch the extension**:
+   - Press `F5` in VSCode
+   - Or use **Run → Start Debugging**
+   - The Extension Development Host window will open
+
+3. **Test your changes** in the new VSCode window
+
+## Contribution Guidelines
+
+If you are planning on contributing to the development of the MCP Inspector extension:
+
+1. Fork the repository before making changes
+2. Create a feature branch (`git checkout -b feature/your-feature`)
+3. Follow the existing code style and conventions
+4. Write tests for new functionality
+5. Ensure all tests pass (`pnpm test`)
+6. Submit a pull request with a clear description
+
+Please follow the detailed instructions available at: [https://wso2.github.io](https://wso2.github.io)
+
+## License
+
+This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details.
+
+By downloading and using this Visual Studio Code extension, you agree to the license terms and [privacy statement](https://wso2.com/privacy-policy).
+
+This extension uses the MCP Inspector, which is part of the [Model Context Protocol](https://modelcontextprotocol.io/) project.
+
+---
+
+**Developed by WSO2**
diff --git a/workspaces/mcp-inspector/mcp-inspector-extension/webpack.config.js b/workspaces/mcp-inspector/mcp-inspector-extension/webpack.config.js
new file mode 100644
index 00000000000..f78ab595844
--- /dev/null
+++ b/workspaces/mcp-inspector/mcp-inspector-extension/webpack.config.js
@@ -0,0 +1,110 @@
+//@ts-check
+
+'use strict';
+
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+//@ts-check
+/** @typedef {import('webpack').Configuration} WebpackConfig **/
+
+/** @type WebpackConfig */
+const extensionConfig = {
+  target: 'node', // VS Code extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
+	mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')
+
+  entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
+  output: {
+    // the bundle is stored in the 'out' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
+    path: path.resolve(__dirname, 'out'),
+    filename: 'extension.js',
+    libraryTarget: 'commonjs2'
+  },
+  externals: {
+    vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
+    // modules added here also need to be added in the .vscodeignore file
+  },
+  resolve: {
+    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
+    extensions: ['.ts', '.js']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader'
+          }
+        ]
+      }
+    ]
+  },
+  devtool: 'nosources-source-map',
+  infrastructureLogging: {
+    level: "log", // enables logging required for problem matchers
+  },
+};
+
+/** @type WebpackConfig */
+const inspectorServerConfig = {
+  target: 'node',
+  mode: 'none',
+  entry: './node_modules/@modelcontextprotocol/inspector/server/build/index.js',
+  output: {
+    path: path.resolve(__dirname, 'out', 'inspector'),
+    filename: 'server.js',
+    libraryTarget: 'commonjs2'
+  },
+  externals: {
+    // Native modules that can't be bundled
+    'bufferutil': 'commonjs bufferutil',
+    'utf-8-validate': 'commonjs utf-8-validate',
+  },
+  resolve: {
+    extensions: ['.js', '.json']
+  },
+  devtool: 'nosources-source-map',
+};
+
+/** @type WebpackConfig */
+const inspectorClientConfig = {
+  target: 'node',
+  mode: 'none',
+  // Use our custom wrapper that has the correct path to client-dist
+  entry: './src/client-wrapper.js',
+  output: {
+    path: path.resolve(__dirname, 'out', 'inspector'),
+    filename: 'client.js',
+    libraryTarget: 'commonjs2'
+  },
+  externals: {
+    // Native modules that can't be bundled
+    'bufferutil': 'commonjs bufferutil',
+    'utf-8-validate': 'commonjs utf-8-validate',
+  },
+  resolve: {
+    extensions: ['.js', '.json']
+  },
+  plugins: [
+    // Copy the client's static files (HTML, CSS, JS, assets)
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'node_modules/@modelcontextprotocol/inspector/client/dist',
+          to: path.resolve(__dirname, 'out', 'inspector', 'client-dist'),
+        },
+      ],
+    }),
+  ],
+  devtool: 'nosources-source-map',
+  node: {
+    // Preserve __dirname and __filename as-is (don't let webpack modify them)
+    // This is critical for the client server to find the dist folder
+    __dirname: false,
+    __filename: false,
+  },
+};
+
+module.exports = [ extensionConfig, inspectorServerConfig, inspectorClientConfig ];
diff --git a/workspaces/mi/mi-core/src/index.ts b/workspaces/mi/mi-core/src/index.ts
index 6bb38eca969..4bcbb3b7200 100644
--- a/workspaces/mi/mi-core/src/index.ts
+++ b/workspaces/mi/mi-core/src/index.ts
@@ -43,3 +43,7 @@ export * from "./rpc-types/mi-debugger/types";
 export * from "./rpc-types/mi-data-mapper/index";
 export * from "./rpc-types/mi-data-mapper/rpc-type";
 export * from "./rpc-types/mi-data-mapper/types";
+
+export * from "./rpc-types/ai-panel/index";
+export * from "./rpc-types/ai-panel/rpc-type";
+export * from "./rpc-types/ai-panel/types";
diff --git a/workspaces/mi/mi-core/src/interfaces/mi-copilot.ts b/workspaces/mi/mi-core/src/interfaces/mi-copilot.ts
index a4f44782384..290b6b5b9d0 100644
--- a/workspaces/mi/mi-core/src/interfaces/mi-copilot.ts
+++ b/workspaces/mi/mi-core/src/interfaces/mi-copilot.ts
@@ -32,3 +32,39 @@ export interface PromptObject {
     files: FileObject[];
     images: ImageObject[];
 }
+
+export enum Role {
+    // UI roles
+    MIUser = "You",
+    MICopilot = "Copilot",
+    default = "",
+
+    // Copilot roles
+    CopilotAssistant = "assistant",
+    CopilotUser = "user"
+}
+
+export enum MessageType {
+    UserMessage = "user_message",
+    AssistantMessage = "assistant_message",
+    Question = "question",
+    Label = "label",
+    InitialPrompt = "initial_prompt",
+    Error = "Error"
+}
+
+export type CopilotChatEntry = {
+    id: number;
+    role: Role.CopilotUser | Role.CopilotAssistant;
+    content: string;
+    type?: MessageType;
+};
+
+export type ChatMessage = {
+    id?: number;
+    role: Role.MICopilot | Role.MIUser | Role.default;
+    content: string;
+    type: MessageType;
+    files?: FileObject[];
+    images?: ImageObject[];
+};
diff --git a/workspaces/mi/mi-core/src/rpc-types/ai-panel/index.ts b/workspaces/mi/mi-core/src/rpc-types/ai-panel/index.ts
new file mode 100644
index 00000000000..d22519e7897
--- /dev/null
+++ b/workspaces/mi/mi-core/src/rpc-types/ai-panel/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 {
+    GenerateSuggestionsRequest, GenerateSuggestionsResponse,
+    GetBackendRootUrlResponse,
+    GenerateCodeRequest, GenerateCodeResponse,
+    AbortCodeGenerationResponse
+} from "./types";
+
+// Export types for external use
+export type {
+    GenerateSuggestionsRequest,
+    GenerateSuggestionsResponse,
+    GenerateCodeRequest,
+    GenerateCodeResponse,
+    AbortCodeGenerationResponse,
+    CodeGenerationEvent,
+    XmlCodeEntry,
+    CorrectedCodeItem
+} from './types';
+
+export interface MIAIPanelAPI {
+    // ==================================
+    // General Functions
+    // ==================================
+    getBackendRootUrl: () => Promise<GetBackendRootUrlResponse>
+    generateSuggestions: (request: GenerateSuggestionsRequest) => Promise<GenerateSuggestionsResponse>
+    generateCode: (request: GenerateCodeRequest) => Promise<GenerateCodeResponse>
+    abortCodeGeneration: () => Promise<AbortCodeGenerationResponse>
+    
+    // ==================================
+    // API Key Management
+    // ==================================
+    setAnthropicApiKey: () => Promise<void>
+    hasAnthropicApiKey: () => Promise<boolean | undefined>
+}
+
+// Export RPC type definitions
+export {
+    getBackendRootUrl,
+    generateSuggestions,
+    generateCode,
+    abortCodeGeneration,
+    codeGenerationEvent,
+    setAnthropicApiKey,
+    hasAnthropicApiKey
+} from './rpc-type';
diff --git a/workspaces/mi/mi-core/src/rpc-types/ai-panel/rpc-type.ts b/workspaces/mi/mi-core/src/rpc-types/ai-panel/rpc-type.ts
new file mode 100644
index 00000000000..75219ee2c59
--- /dev/null
+++ b/workspaces/mi/mi-core/src/rpc-types/ai-panel/rpc-type.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { RequestType, NotificationType } from "vscode-messenger-common";
+import {
+    GenerateSuggestionsRequest, GenerateSuggestionsResponse,
+    GetBackendRootUrlResponse,
+    GenerateCodeRequest, GenerateCodeResponse,
+    AbortCodeGenerationResponse,
+    CodeGenerationEvent
+} from "./types";
+
+const _prefix = "mi-ai-panel";
+
+export const getBackendRootUrl: RequestType<void, GetBackendRootUrlResponse> = { method: `${_prefix}/getBackendRootUrl` };
+export const generateSuggestions: RequestType<GenerateSuggestionsRequest, GenerateSuggestionsResponse> = { method: `${_prefix}/generateSuggestions` };
+export const generateCode: RequestType<GenerateCodeRequest, GenerateCodeResponse> = { method: `${_prefix}/generateCode` };
+export const abortCodeGeneration: RequestType<void, AbortCodeGenerationResponse> = { method: `${_prefix}/abortCodeGeneration` };
+export const setAnthropicApiKey: RequestType<void, void> = { method: `${_prefix}/setAnthropicApiKey` };
+export const hasAnthropicApiKey: RequestType<void, boolean | undefined> = { method: `${_prefix}/hasAnthropicApiKey` };
+
+// Notification for streaming events
+export const codeGenerationEvent: NotificationType<CodeGenerationEvent> = { method: `${_prefix}/codeGenerationEvent` };
diff --git a/workspaces/mi/mi-core/src/rpc-types/ai-panel/types.ts b/workspaces/mi/mi-core/src/rpc-types/ai-panel/types.ts
new file mode 100644
index 00000000000..9d5cf677f37
--- /dev/null
+++ b/workspaces/mi/mi-core/src/rpc-types/ai-panel/types.ts
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { AI_MACHINE_VIEW } from "../../state-machine-types";
+import { FileObject, ImageObject } from "../../interfaces/mi-copilot";
+import { CopilotChatEntry } from "../../interfaces/mi-copilot";
+
+export interface AIMachineSnapshot {
+    state: AI_MACHINE_VIEW;
+    context: unknown;
+}
+
+export interface GetBackendRootUrlResponse {
+    url: string;
+}
+
+export interface GenerateSuggestionsRequest {
+    chatHistory: CopilotChatEntry[];
+}
+
+export interface GenerateSuggestionsResponse {
+    response: string;
+    files: FileObject[];
+    images: ImageObject[];
+}
+
+// Code generation streaming types
+export interface GenerateCodeRequest {
+    chatHistory: CopilotChatEntry[];
+    files: FileObject[];
+    images: ImageObject[];
+    view?: string;
+    thinking?: boolean;
+}
+
+export interface GenerateCodeResponse {
+    success: boolean;
+}
+
+export interface AbortCodeGenerationResponse {
+    success: boolean;
+}
+
+// Event types for streaming
+export type CodeGenerationEventType = 
+    | "code_generation_start"
+    | "content_block"
+    | "code_generation_end"
+    | "code_diagnostic_start"
+    | "code_diagnostic_end"
+    | "messages"
+    | "error"
+    | "stop";
+
+export interface CodeGenerationEvent {
+    type: CodeGenerationEventType;
+    content?: string;
+    diagnostics?: DiagnosticEntry[];
+    messages?: unknown[];
+    error?: string;
+    command?: string;
+    xmlCodes?: XmlCodeEntry[];
+    correctedCodes?: CorrectedCodeItem[];
+}
+
+// Diagnostics types
+export interface DiagnosticEntry {
+    message: string;
+    severity: string;
+    range?: unknown;
+    source?: string;
+}
+
+// XML code entry for diagnostics
+export interface XmlCodeEntry {
+    fileName: string;
+    code: string;
+}
+
+// Corrected code item from LLM response
+export interface CorrectedCodeItem {
+    name: string;
+    configuration?: string;
+    code?: string;
+}
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 27f7cbc7c49..77a214e84e1 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
@@ -149,7 +149,6 @@ import {
     GetSelectiveWorkspaceContextResponse,
     GetSelectiveArtifactsRequest,
     GetSelectiveArtifactsResponse,
-    GetBackendRootUrlResponse,
     RegistryArtifactNamesResponse,
     ListRegistryArtifactsRequest,
     RangeFormatRequest,
@@ -254,8 +253,6 @@ import {
     DeployProjectRequest,
     DeployProjectResponse,
     DevantMetadata,
-    GetCodeDiagnosticsReqeust,
-    GetCodeDiagnosticsResponse,
     GetConnectorIconRequest,
     GetConnectorIconResponse,
     SubmitFeedbackRequest,
@@ -359,7 +356,6 @@ export interface MiDiagramAPI {
     buildBallerinaModule: (projectPath: string) => Promise<void>;
     getSelectiveWorkspaceContext: () => Promise<GetSelectiveWorkspaceContextResponse>;
     getSelectiveArtifacts: (params: GetSelectiveArtifactsRequest) => Promise<GetSelectiveArtifactsResponse>;
-    getBackendRootUrl: () => Promise<GetBackendRootUrlResponse>;
     getAvailableRegistryResources: (params: ListRegistryArtifactsRequest) => Promise<RegistryArtifactNamesResponse>;
     updateRegistryMetadata: (params: UpdateRegistryMetadataRequest) => Promise<UpdateRegistryMetadataResponse>;
     getMetadataOfRegistryResource: (params: GetRegistryMetadataRequest) => Promise<GetRegistryMetadataResponse>;
@@ -438,7 +434,6 @@ export interface MiDiagramAPI {
     testConnectorConnection: (params: TestConnectorConnectionRequest) => Promise<TestConnectorConnectionResponse>;
     saveConfig: (params: SaveConfigRequest) => Promise<SaveConfigResponse>;
     getEULALicense: () => Promise<string>;
-    getCodeDiagnostics: (params: GetCodeDiagnosticsReqeust) => Promise<GetCodeDiagnosticsResponse>;
     shouldDisplayPayloadAlert: () => Promise<boolean>;
     displayPayloadAlert: () => Promise<void>;
     closePayloadAlert: () => Promise<void>;
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 50eba4b37c0..acb1076cb21 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
@@ -146,7 +146,6 @@ import {
     GetSelectiveWorkspaceContextResponse,
     GetSelectiveArtifactsRequest,
     GetSelectiveArtifactsResponse,
-    GetBackendRootUrlResponse,
     GetProxyRootUrlResponse,
     RegistryArtifactNamesResponse,
     ListRegistryArtifactsRequest, RangeFormatRequest,
@@ -256,8 +255,6 @@ import {
     HandleFileRequest,
     HandleFileResponse,
     DevantMetadata,
-    GetCodeDiagnosticsReqeust,
-    GetCodeDiagnosticsResponse,
     UpdateMediatorResponse,
     GetConnectorIconRequest,
     GetConnectorIconResponse,
@@ -364,7 +361,6 @@ export const createBallerinaModule: RequestType<CreateBallerinaModuleRequest, Cr
 export const buildBallerinaModule: RequestType<string, void> = { method: `${_preFix}/buildBallerinaModule` };
 export const getSelectiveWorkspaceContext: RequestType<void, GetSelectiveWorkspaceContextResponse> = { method: `${_preFix}/getSelectiveWorkspaceContext` };
 export const getSelectiveArtifacts: RequestType<GetSelectiveArtifactsRequest, GetSelectiveArtifactsResponse> = { method: `${_preFix}/getSelectiveArtifacts` };
-export const getBackendRootUrl: RequestType<void, GetBackendRootUrlResponse> = { method: `${_preFix}/getBackendRootUrl` };
 export const getProxyRootUrl: RequestType<void, GetProxyRootUrlResponse> = { method: `${_preFix}/getProxyRootUrl` };
 export const getAvailableRegistryResources: RequestType<ListRegistryArtifactsRequest, RegistryArtifactNamesResponse> = { method: `${_preFix}/getAvailableRegistryResources` };
 export const updateRegistryMetadata: RequestType<UpdateRegistryMetadataRequest, UpdateRegistryMetadataResponse> = { method: `${_preFix}/updateRegistryMetadata` };
@@ -446,7 +442,6 @@ export const getHelperPaneInfo: RequestType<GetHelperPaneInfoRequest, GetHelperP
 export const testConnectorConnection: RequestType<TestConnectorConnectionRequest, TestConnectorConnectionResponse> = { method: `${_preFix}/testConnectorConnection` };
 export const saveConfig: RequestType<SaveConfigRequest, SaveConfigResponse> = { method: `${_preFix}/saveConfig` };
 export const getEULALicense: RequestType<void, string> = { method: `${_preFix}/getEULALicense` };
-export const getCodeDiagnostics: RequestType<GetCodeDiagnosticsReqeust, GetCodeDiagnosticsResponse> = { method: `${_preFix}/getCodeDiagnostics` };
 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` };
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 a17745fee74..4a835958597 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
@@ -1476,10 +1476,6 @@ export interface ConfigureKubernetesResponse {
     path: string;
 }
 
-export interface GetBackendRootUrlResponse {
-    url: string;
-}
-
 export interface GetProxyRootUrlResponse {
     openaiUrl: string;
     anthropicUrl: string;
@@ -1781,6 +1777,7 @@ export interface SwaggerFromAPIRequest {
     isJsonIn?: boolean;
     isJsonOut?: boolean;
     port?: number;
+    projectPath?: string;
 }
 
 export interface CompareSwaggerAndAPIResponse {
@@ -2201,14 +2198,6 @@ export interface GetArtifactTypeResponse {
     artifactFolder: string;
 }
 
-export interface GetCodeDiagnosticsReqeust {
-    xmlCodes: XmlCode[];
-}
-
-export interface GetCodeDiagnosticsResponse {
-    diagnostics: {fileName: string, diagnostics: Diagnostic[]}[];
-}
-
 export interface XmlCode{
     fileName: string;
     code: string;
diff --git a/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/index.ts b/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/index.ts
index 8a9a36bd035..c94c081963d 100644
--- a/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/index.ts
+++ b/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/index.ts
@@ -52,7 +52,9 @@ import {
     DownloadMIRequest,
     UpdateAiDependenciesRequest,
     ProjectConfig,
-    MavenDeployPluginDetails
+    MavenDeployPluginDetails,
+    ReloadDependenciesRequest,
+    DependencyStatusResponse
 } from "./types";
 import { GettingStartedData, SampleDownloadRequest } from "./types";
 
@@ -90,11 +92,12 @@ export interface MIVisualizerAPI {
     getSupportedMIVersionsHigherThan: (param:string) => Promise<string[]>;
     getProjectDetails: () => Promise<ProjectDetailsResponse>;
     updateProperties: (params: UpdatePropertiesRequest) => Promise<boolean>;
-    reloadDependencies: () => Promise<boolean>;
+    reloadDependencies: (params?: ReloadDependenciesRequest) => Promise<boolean>;
     updateDependencies: (params: UpdateDependenciesRequest) => Promise<boolean>;
     updatePomValues: (params: UpdatePomValuesRequest) => Promise<boolean>;
     updateConfigFileValues: (params: UpdateConfigValuesRequest) => Promise<boolean>;
     updateConnectorDependencies: () => Promise<string>;
+    getDependencyStatusList: () => Promise<DependencyStatusResponse>;
     updateDependenciesFromOverview: (params: UpdateDependenciesRequest) => Promise<boolean>;
     importOpenAPISpec: (params: ImportOpenAPISpecRequest) => Promise<void>;
     getProjectSetupDetails: () => Promise<SetupDetails>;
diff --git a/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/rpc-type.ts b/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/rpc-type.ts
index 18e3423af68..a6b0b1825f4 100644
--- a/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/rpc-type.ts
+++ b/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/rpc-type.ts
@@ -53,7 +53,9 @@ import {
     DownloadMIRequest,
     UpdateAiDependenciesRequest,
     ProjectConfig,
-    MavenDeployPluginDetails
+    MavenDeployPluginDetails,
+    ReloadDependenciesRequest,
+    DependencyStatusResponse
 } from "./types";
 import { GettingStartedData, SampleDownloadRequest } from "./types";
 import { RequestType, NotificationType } from "vscode-messenger-common";
@@ -94,11 +96,12 @@ export const downloadMI: RequestType<DownloadMIRequest, string> = { method: `${_
 export const getSupportedMIVersionsHigherThan: RequestType<string, string[]> = { method: `${_preFix}/getSupportedMIVersionsHigherThan` };
 export const getProjectDetails: RequestType<void, ProjectDetailsResponse> = { method: `${_preFix}/getProjectDetails` };
 export const updateProperties: RequestType<UpdatePropertiesRequest, boolean> = { method: `${_preFix}/updateProperties` };
-export const reloadDependencies: RequestType<void, boolean> = { method: `${_preFix}/reloadDependencies` };
+export const reloadDependencies: RequestType<ReloadDependenciesRequest, boolean> = { method: `${_preFix}/reloadDependencies` };
 export const updateDependencies: RequestType<UpdateDependenciesRequest, boolean> = { method: `${_preFix}/updateDependencies` };
 export const updatePomValues: RequestType<UpdatePomValuesRequest, boolean> = { method: `${_preFix}/updatePomValues` };
 export const updateConfigFileValues: RequestType<UpdateConfigValuesRequest, boolean> = { method: `${_preFix}/updateConfigFileValues` };
 export const updateConnectorDependencies: RequestType<void, string> = { method: `${_preFix}/updateConnectorDependencies` };
+export const getDependencyStatusList: RequestType<void, DependencyStatusResponse> = { method: `${_preFix}/getDependencyStatusList` };
 export const updateDependenciesFromOverview: RequestType<UpdateDependenciesRequest, boolean> = { method: `${_preFix}/updateDependenciesFromOverview` };
 export const getProjectSetupDetails: RequestType<void, SetupDetails> = { method: `${_preFix}/getProjectSetupDetails` };
 export const updateRuntimeVersionsInPom: RequestType<string, boolean> = { method: `${_preFix}/updateRuntimeVersionsInPom` };
diff --git a/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/types.ts b/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/types.ts
index ae9a7236e26..1d22de0d7b2 100644
--- a/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/types.ts
+++ b/workspaces/mi/mi-core/src/rpc-types/mi-visualizer/types.ts
@@ -123,7 +123,7 @@ export interface PrimaryDetails {
 export interface BuildDetails {
     dockerDetails: DockerDetails;
     enableFatCar: PomNodeDetails;
-    deploymentType: PomNodeDetails;
+    versionedDeployment: PomNodeDetails;
     advanceDetails: AdvanceDetails;
 }
 
@@ -155,6 +155,11 @@ export interface DependenciesDetails {
     otherDependencies: DependencyDetails[];
 }
 
+export interface DependencyStatusResponse {
+    downloadedDependencies: DependencyDetails[];
+    pendingDependencies: DependencyDetails[];
+}
+
 export interface PropertyDetails {
     name: string;
     value: string;
@@ -486,3 +491,7 @@ export interface UpdateAiDependenciesRequest {
 export interface UpdateAiDependenciesResponse {
     textEdits: TextEdit[];
 }
+
+export interface ReloadDependenciesRequest {
+    newDependencies: DependencyDetails[];
+}
diff --git a/workspaces/mi/mi-core/src/state-machine-types.ts b/workspaces/mi/mi-core/src/state-machine-types.ts
index c78cf04f35b..b08086bc72c 100644
--- a/workspaces/mi/mi-core/src/state-machine-types.ts
+++ b/workspaces/mi/mi-core/src/state-machine-types.ts
@@ -106,7 +106,7 @@ export enum AI_MACHINE_VIEW {
 
 export type MachineStateValue =
     | 'initialize' | 'projectDetected' | 'oldProjectDetected' | 'oldWorkspaceDetected' | 'LSInit' | 'ready' | 'disabled'
-    | { ready: 'viewReady' } | { ready: 'viewEditing' }
+    | { ready: 'viewReady' } | { ready: 'viewEditing' } | { ready: 'resolveMissingDependencies' }
     | { newProject: 'viewReady' }| { environmentSetup: 'viewReady' };
 
 export type AIMachineStateValue = 'Initialize' | 'loggedOut' | 'Ready' | 'WaitingForLogin' | 'Executing' | 'updateExtension' | 'disabled' | 'notSupported';
diff --git a/workspaces/mi/mi-data-mapper-utils/src/dm-utils.ts b/workspaces/mi/mi-data-mapper-utils/src/dm-utils.ts
index ee78f2ce33e..8945e661a89 100644
--- a/workspaces/mi/mi-data-mapper-utils/src/dm-utils.ts
+++ b/workspaces/mi/mi-data-mapper-utils/src/dm-utils.ts
@@ -16,6 +16,8 @@
  * under the License.
  */
 
+declare var DM_PROPERTIES: any;
+
 // ########################### Arithmetic Operators ###########################
 
 /**
@@ -229,3 +231,14 @@ export function replaceFirst(str: string, target: string, replacement: string):
 export function match(str: string, regex: RegExp): boolean {
     return regex.test(str);
 }
+
+/**
+ * Return expression to access property.
+ * @param propertyScope - The scope of the property.
+ * @param propertyName - The name of the property.
+ * @returns The expression to access the property.
+ */
+export function getPropertyValue(propertyScope: string, propertyName: string): any {
+    return DM_PROPERTIES?.[propertyScope.toUpperCase()]?.[propertyName];
+}
+
diff --git a/workspaces/mi/mi-diagram/src/components/Form/EditableDiv/EditableDiv.tsx b/workspaces/mi/mi-diagram/src/components/Form/EditableDiv/EditableDiv.tsx
index 306b425d40a..966ca698dad 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/EditableDiv/EditableDiv.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/EditableDiv/EditableDiv.tsx
@@ -42,7 +42,7 @@ const EditableDiv: React.FC<EditableDivProps> = ({
         const el = divRef.current;
         if (el && document.activeElement !== el) {
             el.innerText = isPlaceholderVisible ? placeholder : value;
-            el.style.color = isPlaceholderVisible ? VSCodeColors.ON_SURFACE : VSCodeColors.ON_SECONDARY;
+            el.style.color = isPlaceholderVisible ? VSCodeColors.ON_SURFACE : VSCodeColors.ON_SURFACE_VARIANT;
         }
     }, [value, placeholder]);
 
@@ -55,7 +55,7 @@ const EditableDiv: React.FC<EditableDivProps> = ({
         const el = divRef.current;
         if (el && isPlaceholderVisible) {
             el.innerText = "";
-            el.style.color = VSCodeColors.ON_SECONDARY;
+            el.style.color = VSCodeColors.ON_SURFACE_VARIANT;
         }
     };
 
diff --git a/workspaces/mi/mi-diagram/src/components/Form/FormGenerator.tsx b/workspaces/mi/mi-diagram/src/components/Form/FormGenerator.tsx
index 67979feb0fe..ff6290981a5 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/FormGenerator.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/FormGenerator.tsx
@@ -57,6 +57,8 @@ import ReactMarkdown from 'react-markdown';
 import GenerateDiv from './GenerateComponents/GenerateDiv';
 import { HelperPaneCompletionItem, HelperPaneData } from '@wso2/mi-core';
 import AIAutoFillBox from './AIAutoFillBox/AIAutoFillBox';
+import { compareVersions } from '../../utils/commons';
+import { RUNTIME_VERSION_440 } from '../../resources/constants';
 
 // Constants
 const XML_VALUE = 'xml';
@@ -188,6 +190,7 @@ export function FormGenerator(props: FormGeneratorProps) {
     const [isGeneratedValuesIdentical, setIsGeneratedValuesIdentical] = useState<boolean>(false);
     const [numberOfDifferent, setNumberOfDifferent] = useState<number>(0);
     const [idpSchemaNames, setidpSchemaNames] = useState< {fileName: string; documentUriWithFileName?: string}[]>([]);
+    const [showFillWithAI, setShowFillWithAI] = useState<boolean>(false);
 
     useEffect(() => {
         if (generatedFormDetails) {
@@ -244,6 +247,13 @@ export function FormGenerator(props: FormGeneratorProps) {
                 // Fallback to false if the project details cannot be fetched
                 setIsLegacyExpressionEnabled(false);
             });
+            
+        rpcClient.getMiVisualizerRpcClient().getProjectDetails().then((response) => {
+            const runtimeVersion = response.primaryDetails.runtimeVersion.value;
+            setShowFillWithAI(compareVersions(runtimeVersion, RUNTIME_VERSION_440) >= 0);
+        }).catch(() => {
+            setShowFillWithAI(false);
+        });
     }, []);
 
     function processElement(element: any): any {
@@ -382,7 +392,7 @@ export function FormGenerator(props: FormGeneratorProps) {
     const handleAcceptAll = async () => {
         setIsClickedDropDown(false);
         setIsGenerating(false);
-        reset(generatedFormDetails);
+        reset(generatedFormDetails, { keepDefaultValues: true });
         setVisibleDetails({});
         setGeneratedFormDetails(null);
         setIsAutoFillBtnClicked(false);
@@ -1112,6 +1122,24 @@ export function FormGenerator(props: FormGeneratorProps) {
                     </>
                 );
             case 'expressionTextArea':
+                const isValLegacyExpression = isLegacyExpression(element.expressionType, isLegacyExpressionEnabled, field);
+                if (isValLegacyExpression) {
+                    return (
+                        <CodeTextArea
+                            {...field}
+                            label={element.displayName}
+                            labelAdornment={helpTipElement}
+                            placeholder={placeholder}
+                            required={isRequired}
+                            resize="vertical"
+                            growRange={{ start: 5, offset: 10 }}
+                            errorMsg={errorMsg}
+                            onChange={(e: any) => {
+                                field.onChange(e.target.value);
+                            }}
+                        />
+                    );
+                }
                 return (
                     <div>
                         <FormTokenEditor
@@ -1129,24 +1157,24 @@ export function FormGenerator(props: FormGeneratorProps) {
                             skipSanitization={element.skipSanitization ? element.skipSanitization : false}
                         />
                         {generatedFormDetails && visibleDetails[element.name] && generatedFormDetails[element.name] !== getValues(element.name) && (
-                                <GenerateDiv
-                                    element={element}
-                                    generatedFormDetails={generatedFormDetails}
-                                    handleOnClickChecked={() => {
-                                        if (generatedFormDetails) {
-                                            field.onChange(generatedFormDetails[element.name]);
-                                            setVisibleDetails((prev) => ({ ...prev, [element.name]: false }));
-                                            setNumberOfDifferent(numberOfDifferent - 1);
-                                        }
-                                    }}
-                                    handleOnClickClose={() => {
-                                        setIsClickedDropDown(false);
-                                        setIsGenerating(false);
+                            <GenerateDiv
+                                element={element}
+                                generatedFormDetails={generatedFormDetails}
+                                handleOnClickChecked={() => {
+                                    if (generatedFormDetails) {
+                                        field.onChange(generatedFormDetails[element.name]);
                                         setVisibleDetails((prev) => ({ ...prev, [element.name]: false }));
                                         setNumberOfDifferent(numberOfDifferent - 1);
-                                    }}
-                                />
-                            )}
+                                    }
+                                }}
+                                handleOnClickClose={() => {
+                                    setIsClickedDropDown(false);
+                                    setIsGenerating(false);
+                                    setVisibleDetails((prev) => ({ ...prev, [element.name]: false }));
+                                    setNumberOfDifferent(numberOfDifferent - 1);
+                                }}
+                            />
+                        )}
                     </div>
                 );
             case 'popUp':
@@ -1428,7 +1456,7 @@ export function FormGenerator(props: FormGeneratorProps) {
                         <ReactMarkdown>{formData.banner}</ReactMarkdown>
                     </WarningBanner>
                 }
-                {documentUri && range &&
+                {showFillWithAI && documentUri && range &&
                         <AIAutoFillBox
                             isGenerating={isGenerating}
                             inputGenerate={inputGenerate}
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 6d333e9c285..a3bbf509592 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/FormTokenEditor/index.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/FormTokenEditor/index.tsx
@@ -164,6 +164,7 @@ export const FormTokenEditor = ({
                     </S.AdornmentContainer>
                 }
                 editorSx={editorSx}
+                helperPaneSx={{ position: 'fixed' }}
             />
             {errorMsg && <ErrorBanner errorMsg={errorMsg} />}
         </S.Container>
diff --git a/workspaces/mi/mi-diagram/src/components/Form/GenerateComponents/GenerateDiv.tsx b/workspaces/mi/mi-diagram/src/components/Form/GenerateComponents/GenerateDiv.tsx
index 9e580aef1ed..496bd84d6a9 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/GenerateComponents/GenerateDiv.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/GenerateComponents/GenerateDiv.tsx
@@ -62,6 +62,19 @@ const GenerateDiv = (props: GenerateDivProps) => {
         isConnection,
     } = props;
 
+    /**
+     * Extracts the display value from form details, handling both object and primitive values
+     */
+    const getDisplayValue = (fieldName: string): any => {
+        const value = generatedFormDetails[fieldName];
+        // Handle object with isExpression/value structure
+        if (value && typeof value === 'object' && 'value' in value) {
+            return value.value;
+        }
+        // Handle primitive values
+        return value;
+    };
+
     return (
         <div>
             <div
@@ -89,7 +102,7 @@ const GenerateDiv = (props: GenerateDivProps) => {
                         }}>
                         {!isChecked && !isExpression && isConnection && generatedFormDetails["configKey"]}
                         {!isChecked && isExpression && generatedFormDetails[element.name].value}
-                        {!isChecked && !isExpression && generatedFormDetails[element.name]}
+                        {!isChecked && !isExpression && getDisplayValue(element.name)}
                         {isChecked && !isExpression && (
                             <div
                                 style={{
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 a4c19aa7907..861678bbcdc 100644
--- a/workspaces/mi/mi-diagram/src/components/nodes/ReferenceNode/ReferenceNodeModel.ts
+++ b/workspaces/mi/mi-diagram/src/components/nodes/ReferenceNode/ReferenceNodeModel.ts
@@ -17,12 +17,13 @@
  */
 
 import { STNode } from "@wso2/mi-syntax-tree/src";
-import { NODE_DIMENSIONS, NodeTypes } from "../../../resources/constants";
+import { NODE_DIMENSIONS, NodeTypes, RUNTIME_VERSION_440 } from "../../../resources/constants";
 import { BaseNodeModel } from "../BaseNodeModel";
 import { RpcClient } from "@wso2/mi-rpc-client";
 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";
+import { compareVersions } from "../../../utils/commons";
 
 export class ReferenceNodeModel extends BaseNodeModel {
     readonly referenceName: string;
@@ -93,7 +94,15 @@ export class ReferenceNodeModel extends BaseNodeModel {
         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 projectDetailsResponse = await rpcClient.getMiVisualizerRpcClient().getProjectDetails();
+        let tsFilePath;
+        const runtimeVersion = projectDetailsResponse.primaryDetails.runtimeVersion.value;
+        if(compareVersions(runtimeVersion, RUNTIME_VERSION_440) >= 0) {
+            tsFilePath = path.join(projectRoot, 'src', 'main', 'wso2mi', 'resources', 'datamapper', `${dmName}`, `${dmName}.ts`);
+        } else {
+            tsFilePath = path.join(projectRoot, 'src', 'main', 'wso2mi', 'resources', 'registry', 'gov', 'datamapper', `${dmName}`, `${dmName}.ts`);
+        }
 
         const pathResponse = await rpcClient.getMiDataMapperRpcClient().convertRegPathToAbsPath(request);
         if (pathResponse && pathResponse.absPath) {
diff --git a/workspaces/mi/mi-extension/CHANGELOG.md b/workspaces/mi/mi-extension/CHANGELOG.md
index a7f57c6dfd4..1eb65f922ed 100644
--- a/workspaces/mi/mi-extension/CHANGELOG.md
+++ b/workspaces/mi/mi-extension/CHANGELOG.md
@@ -2,6 +2,23 @@
 
 All notable changes to the "micro-integrator" extension will be documented in this file.
 
+## [3.0.0] - 2025-11-03
+
+### Improvements
+
+- Multi-project Support
+- Versioned Artifact Support
+- Dependency Management for Integration Projects
+- Newly introduced Intelligent Document Processing connector
+- Improved Unit Testing UI
+- Kubernetes Configuration Support
+- Improvements to Connectors and Listeners
+- Enhancements to the MI Copilot
+  - Syntax validation of generated code
+  - “Thinking mode” that suggests improvements
+  - Migration support for old data mapper content
+  - Feedback and rating support for generated AI outputs
+
 ## [2.4.1] - 2025-07-09
 
 ### Fixed
diff --git a/workspaces/mi/mi-extension/README.md b/workspaces/mi/mi-extension/README.md
index b473eea3bab..9157b198a46 100644
--- a/workspaces/mi/mi-extension/README.md
+++ b/workspaces/mi/mi-extension/README.md
@@ -62,33 +62,6 @@ The Design View lists a set of sample projects and integration artifacts that re
 
 To learn more about the WSO2 Integrator: MI for Visual Studio Code extension, go to the [WSO2 Integrator: MI for VS Code](https://mi.docs.wso2.com/en/latest/develop/mi-for-vscode/mi-for-vscode-overview/) documentation.
 
-## Writing End to End tests
-
-### Test Directory Structure
-```
-mi-extension/
-  src/
-   test/
-    e2e-playwright-tests/
-     componentA/
-      componentA.spec.ts
-     componentB/
-      componentB.spec.ts
-
-     test.list.ts
-     utils.ts
-```
-### Getting started
-- Navigate to bi-extension root directory.
-- Run `npx playwright install` to install the playwright package.
-- Run `npm run e2e-test` to execute the tests.
-
-### Writing tests
-- Navigate to the `e2e-playwright-tests` folder and create a folder with the artifact name.
-- Create a `spec.ts` file as mentioned in the folder structure and start writing tests.
-- Import and add that spec to the `test.list.ts` file.
-- Run `npm run e2e-test` to verify the test.
-
 ## Reach Out
 
 For further assistance, create a [GitHub issue](https://github.com/wso2/mi-vscode/issues). Our team will review and respond promptly to address your concerns.
diff --git a/workspaces/mi/mi-extension/package.json b/workspaces/mi/mi-extension/package.json
index 0f97d339e23..c211615f305 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": "3.0.0",
   "publisher": "wso2",
   "engines": {
     "vscode": "^1.100.0"
@@ -143,7 +143,8 @@
         "MI.useLocalMaven": {
           "type": "boolean",
           "default": false,
-          "description": "Use local Maven within the extension"
+          "description": "Use local Maven within the extension",
+          "scope": "resource"
         },
         "MI.Scope": {
           "type": "string",
@@ -931,14 +932,14 @@
         "description": "design-view",
         "default": {
           "fontPath": "./resources/font-wso2-vscode/dist/wso2-vscode.woff",
-          "fontCharacter": "\\f180"
+          "fontCharacter": "\\f19a"
         }
       },
       "distro-build-package": {
         "description": "build-package",
         "default": {
           "fontPath": "./resources/font-wso2-vscode/dist/wso2-vscode.woff",
-          "fontCharacter": "\\f15b"
+          "fontCharacter": "\\f175"
         }
       }
     }
diff --git a/workspaces/mi/mi-extension/resources/maven-wrapper/mvnw.cmd b/workspaces/mi/mi-extension/resources/maven-wrapper/mvnw.cmd
index 1204076a90a..c518fe9faa8 100644
--- a/workspaces/mi/mi-extension/resources/maven-wrapper/mvnw.cmd
+++ b/workspaces/mi/mi-extension/resources/maven-wrapper/mvnw.cmd
@@ -140,13 +140,36 @@ if exist %WRAPPER_JAR% (
         echo Downloading from: %WRAPPER_URL%
     )
 
-    powershell -Command "&{"^
-		"$webclient = new-object System.Net.WebClient;"^
-		"if (-not ([string]::IsNullOrEmpty('%MVNW_USERNAME%') -and [string]::IsNullOrEmpty('%MVNW_PASSWORD%'))) {"^
-		"$webclient.Credentials = new-object System.Net.NetworkCredential('%MVNW_USERNAME%', '%MVNW_PASSWORD%');"^
-		"}"^
-		"[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12; $webclient.DownloadFile('%WRAPPER_URL%', '%WRAPPER_JAR%')"^
-		"}"
+    @setlocal EnableDelayedExpansion
+
+    @REM Check whether Constraint Language Mode is enabled
+    for /f "usebackq delims=" %%A in (`powershell -Command 
+        "if ($ExecutionContext.SessionState.LanguageMode -eq 'ConstrainedLanguage') { Write-Output 'true' } else { Write-Output 'false' }"`) do (
+        set "IS_CONSTRAINED=%%A"
+    )
+    if /i "!IS_CONSTRAINED!"=="true" (
+        echo [WARN] PowerShell download failed, trying curl...
+        IF NOT "%MVNW_USERNAME%"=="" (
+            curl -L -u "%MVNW_USERNAME%:%MVNW_PASSWORD%" -o "%WRAPPER_JAR%" "%WRAPPER_URL%"
+        ) ELSE (
+            curl -L -o "%WRAPPER_JAR%" "%WRAPPER_URL%"
+        )
+        IF %ERRORLEVEL% NEQ 0 (
+            echo [ERROR] Failed to download %WRAPPER_JAR% using curl.
+            exit /b 1
+        )
+    ) else (     
+        powershell -Command "&{"^
+            "$webclient = new-object System.Net.WebClient;"^
+            "if (-not ([string]::IsNullOrEmpty('%MVNW_USERNAME%') -and [string]::IsNullOrEmpty('%MVNW_PASSWORD%'))) {"^
+            "$webclient.Credentials = new-object System.Net.NetworkCredential('%MVNW_USERNAME%', '%MVNW_PASSWORD%');"^
+            "}"^
+            "[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12; $webclient.DownloadFile('%WRAPPER_URL%', '%WRAPPER_JAR%')"^
+            "}"
+    )
+
+    @endlocal
+
     if "%MVNW_VERBOSE%" == "true" (
         echo Finished downloading %WRAPPER_JAR%
     )
@@ -204,3 +227,4 @@ if "%MAVEN_BATCH_PAUSE%"=="on" pause
 if "%MAVEN_TERMINATE_CMD%"=="on" exit %ERROR_CODE%
 
 cmd /C exit /B %ERROR_CODE%
+
diff --git a/workspaces/mi/mi-extension/src/RPCLayer.ts b/workspaces/mi/mi-extension/src/RPCLayer.ts
index 23a2b358364..e154bf23d31 100644
--- a/workspaces/mi/mi-extension/src/RPCLayer.ts
+++ b/workspaces/mi/mi-extension/src/RPCLayer.ts
@@ -27,6 +27,7 @@ import { StateMachineAI } from './ai-panel/aiMachine';
 import { registerMiDataMapperRpcHandlers } from './rpc-managers/mi-data-mapper/rpc-handler';
 import { extension } from './MIExtensionContext';
 import { registerMiDebuggerRpcHandlers } from './rpc-managers/mi-debugger/rpc-handler';
+import { registerMIAiPanelRpcHandlers } from './rpc-managers/ai-panel/rpc-handler';
 import path = require('path');
 import { getStateMachine } from './stateMachine';
 import { getPopupStateMachine } from './stateMachinePopup';
@@ -51,6 +52,7 @@ export class RPCLayer {
         registerMiDiagramRpcHandlers(messenger, projectUri);
         registerMiDataMapperRpcHandlers(messenger, projectUri);
         registerMiDebuggerRpcHandlers(messenger, projectUri);
+        registerMIAiPanelRpcHandlers(messenger, projectUri);
         // ----- AI Webview RPC Methods
         messenger.onRequest(getAIVisualizerState, () => getAIContext());
         messenger.onRequest(sendAIStateEvent, (event: AI_EVENT_TYPE) => StateMachineAI.sendEvent(event));
@@ -75,6 +77,10 @@ export class RPCLayer {
             messenger.sendNotification(aiStateChanged, { type: 'webview', webviewType: AiPanelWebview.viewType }, state.value);
         });
     }
+
+    static getMessenger(projectUri: string): Messenger | undefined {
+        return this._messengers.get(projectUri);
+    }
 }
 
 async function getContext(projectUri: string): Promise<VisualizerLocation> {
diff --git a/workspaces/mi/mi-extension/src/constants/index.ts b/workspaces/mi/mi-extension/src/constants/index.ts
index 53aadb80664..50d301bed94 100644
--- a/workspaces/mi/mi-extension/src/constants/index.ts
+++ b/workspaces/mi/mi-extension/src/constants/index.ts
@@ -199,6 +199,7 @@ export const DM_OPERATORS_FILE_NAME = "dm-utils";
 export const DM_OPERATORS_IMPORT_NAME = "dmUtils";
 export const LAST_EXPORTED_CAR_PATH = "last-exported-car-path";
 export const RUNTIME_VERSION_440 = "4.4.0";
+export const RUNTIME_VERSION_450 = "4.5.0";
 export const DEFAULT_ICON = "https://mi-connectors.wso2.com/icons/wordpress.gif";
 
 export const ERROR_MESSAGES = {
diff --git a/workspaces/mi/mi-extension/src/lang-client/ExtendedLanguageClient.ts b/workspaces/mi/mi-extension/src/lang-client/ExtendedLanguageClient.ts
index d4543aa65de..e73cc5806c2 100644
--- a/workspaces/mi/mi-extension/src/lang-client/ExtendedLanguageClient.ts
+++ b/workspaces/mi/mi-extension/src/lang-client/ExtendedLanguageClient.ts
@@ -75,12 +75,11 @@ import {
     CheckDBDriverResponse,
     RemoveDBDriverResponse,
     LocalInboundConnectorsResponse,
-    GetCodeDiagnosticsReqeust,
-    GetCodeDiagnosticsResponse,
     XmlCode,
     UpdateAiDependenciesResponse,
     UpdateAiDependenciesRequest,
-    MavenDeployPluginDetails
+    MavenDeployPluginDetails,
+    DependencyStatusResponse
 } from "@wso2/mi-core";
 import { readFileSync } from "fs";
 import { CancellationToken, FormattingOptions, Position, Uri, workspace } from "vscode";
@@ -469,4 +468,7 @@ export class ExtendedLanguageClient extends LanguageClient {
     async getConfigurableList(): Promise<any[]> {
         return this.sendRequest('synapse/getConfigurableList');
     }
+    async getDependencyStatusList(): Promise<DependencyStatusResponse> {
+        return this.sendRequest('synapse/getDependencyStatusList');
+    }    
 }
diff --git a/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/event-handler.ts b/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/event-handler.ts
new file mode 100644
index 00000000000..92da8c32bc3
--- /dev/null
+++ b/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/event-handler.ts
@@ -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 { CodeGenerationEvent, XmlCodeEntry, CorrectedCodeItem } from "@wso2/mi-core";
+import { RPCLayer } from "../../RPCLayer";
+import { AiPanelWebview } from '../../ai-panel/webview';
+import { codeGenerationEvent } from "@wso2/mi-core";
+
+export class CopilotEventHandler {
+
+    constructor(private projectUri: string) {
+        this.projectUri = projectUri;
+    }
+
+    handleEvent(event: CodeGenerationEvent): void {
+        this.sendEventToVisualizer(event);
+    }
+
+    handleStart(): void {
+        this.sendEventToVisualizer({ type: "code_generation_start" });
+    }
+
+    handleContentBlock(content: string): void {
+        this.sendEventToVisualizer({ type: "content_block", content });
+    }
+
+    handleEnd(content: string): void {
+        this.sendEventToVisualizer({ type: "code_generation_end", content });
+    }
+
+    handleMessages(messages: any[]): void {
+        this.sendEventToVisualizer({ type: "messages", messages });
+    }
+
+    handleError(error: string): void {
+        this.sendEventToVisualizer({ type: "error", error });
+    }
+
+    handleStop(command?: string): void {
+        this.sendEventToVisualizer({ type: "stop", command });
+    }
+
+    handleCodeDiagnosticStart(xmlCodes: XmlCodeEntry[]): void {
+        this.sendEventToVisualizer({ 
+            type: "code_diagnostic_start", 
+            xmlCodes 
+        });
+    }
+
+    handleCodeDiagnosticEnd(correctedCodes?: CorrectedCodeItem[]): void {
+        this.sendEventToVisualizer({ 
+            type: "code_diagnostic_end", 
+            correctedCodes 
+        });
+    }
+
+    private sendEventToVisualizer(event: CodeGenerationEvent): void {
+        try {
+            const messenger = (RPCLayer as any)._messengers.get(this.projectUri);
+            if (messenger) {
+                messenger.sendNotification(
+                    codeGenerationEvent, 
+                    { type: 'webview', webviewType: AiPanelWebview.viewType }, 
+                    event
+                );
+            } else {
+                console.warn("No messenger found for project:", this.projectUri);
+            }
+        } catch (error) {
+            console.error("Error sending event to visualizer:", error);
+        }
+    }
+}
diff --git a/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/rpc-handler.ts b/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/rpc-handler.ts
new file mode 100644
index 00000000000..f83c53749c7
--- /dev/null
+++ b/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/rpc-handler.ts
@@ -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 { MessengerAPI } from "vscode-messenger-common";
+import { MIAIPanelRpcManager } from "./rpc-manager";
+import {
+    getBackendRootUrl,
+    generateSuggestions,
+    generateCode,
+    abortCodeGeneration,
+    GenerateSuggestionsRequest,
+    GenerateCodeRequest,
+    setAnthropicApiKey,
+    hasAnthropicApiKey
+} from "@wso2/mi-core";
+
+export function registerMIAiPanelRpcHandlers(messenger: MessengerAPI, projectUri: string) {
+    const rpcManager = new MIAIPanelRpcManager(projectUri);
+
+    // ==================================
+    // General Functions
+    // ==================================
+    messenger.onRequest(getBackendRootUrl, () => rpcManager.getBackendRootUrl());
+    
+    // ==================================
+    // AI Functions
+    // ==================================
+    messenger.onRequest(generateSuggestions, (request: GenerateSuggestionsRequest) => rpcManager.generateSuggestions(request));
+    messenger.onRequest(generateCode, (request: GenerateCodeRequest) => rpcManager.generateCode(request));
+    messenger.onRequest(abortCodeGeneration, () => rpcManager.abortCodeGeneration());
+    messenger.onRequest(setAnthropicApiKey, () => rpcManager.setAnthropicApiKey());
+    messenger.onRequest(hasAnthropicApiKey, () => rpcManager.hasAnthropicApiKey());
+}
diff --git a/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/rpc-manager.ts b/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/rpc-manager.ts
new file mode 100644
index 00000000000..b76f23ab108
--- /dev/null
+++ b/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/rpc-manager.ts
@@ -0,0 +1,488 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 {
+    GetBackendRootUrlResponse,
+    GenerateSuggestionsRequest,
+    GenerateSuggestionsResponse,
+    GenerateCodeRequest,
+    GenerateCodeResponse,
+    AbortCodeGenerationResponse,
+    MIAIPanelAPI,
+    CopilotChatEntry
+} from '@wso2/mi-core';
+import {RUNTIME_VERSION_440} from "../../constants";
+import {compareVersions, getMIVersionFromPom} from "../../util/onboardingUtils";
+import {
+    generateSuggestions as generateSuggestionsUtil,
+    fetchBackendUrl,
+    MI_SUGGESTIVE_QUESTIONS_BACKEND_URL,
+    fetchCodeGenerationsWithRetry,
+    getDiagnosticsReponseFromLlm,
+    getBackendUrlAndView,
+    getUserAccessToken,
+    refreshUserAccessToken
+} from "./utils";
+import { CopilotEventHandler } from "./event-handler";
+import { MiDiagramRpcManager } from "../mi-diagram/rpc-manager";
+
+export class MIAIPanelRpcManager implements MIAIPanelAPI {
+    private eventHandler: CopilotEventHandler;
+    private currentController: AbortController | null = null;
+    private miDiagramRpcManager: MiDiagramRpcManager;
+
+    constructor(private projectUri: string) {
+        this.eventHandler = this.createEventHandler();
+        this.miDiagramRpcManager = new MiDiagramRpcManager(this.projectUri);
+    }
+
+    async getBackendRootUrl(): Promise<GetBackendRootUrlResponse> {
+        const MI_COPILOT_BACKEND_V2 = process.env.MI_COPILOT_BACKEND_V2 as string;
+        const MI_COPILOT_BACKEND_V3 = process.env.MI_COPILOT_BACKEND_V3 as string;
+        const RUNTIME_THRESHOLD_VERSION = RUNTIME_VERSION_440;
+        const runtimeVersion = await getMIVersionFromPom(this.projectUri);
+
+        const versionThreshold = runtimeVersion ? compareVersions(runtimeVersion, RUNTIME_THRESHOLD_VERSION) : -1;
+
+        return versionThreshold < 0 ? { url: MI_COPILOT_BACKEND_V2 } : { url: MI_COPILOT_BACKEND_V3 };
+    }
+
+    async generateSuggestions(request: GenerateSuggestionsRequest): Promise<GenerateSuggestionsResponse> {
+        try {
+            const controller = new AbortController();
+            
+            // Use the utility function to generate suggestions
+            const suggestions = await generateSuggestionsUtil(
+                this.projectUri,
+                request.chatHistory,
+                controller
+            );
+
+            // Convert the suggestions to the expected format
+            return {
+                response: suggestions.length > 0 ? suggestions[0].content : "",
+                files: [], // This would need to be populated based on your specific requirements
+                images: [] // This would need to be populated based on your specific requirements
+            };
+        } catch (error) {
+            console.error('Error generating suggestions:', error);
+            throw new Error(`Failed to generate suggestions: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+    }
+
+    // Additional utility methods that can be used by the AI panel
+
+    /**
+     * Fetches code generations from the backend
+     */
+    async fetchCodeGenerations(
+        chatHistory: CopilotChatEntry[],
+        files: any[] = [],
+        images: any[] = [],
+        selective: boolean = false,
+        thinking?: boolean
+    ): Promise<Response> {
+        try {
+            const controller = new AbortController();
+            const { backendUrl } = await getBackendUrlAndView(this.projectUri);
+            const backendRootUri = await fetchBackendUrl(this.projectUri);
+            const url = backendRootUri + backendUrl;
+
+            return await fetchCodeGenerationsWithRetry(
+                url,
+                chatHistory,
+                files,
+                images,
+                this.projectUri,
+                controller,
+                selective,
+                thinking
+            );
+        } catch (error) {
+            console.error('Error fetching code generations:', error);
+            throw new Error(`Failed to fetch code generations: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+    }
+
+    /**
+     * Sends diagnostics to LLM and gets response
+     */
+    async analyzeDiagnostics(diagnostics: any, xmlCodes: any): Promise<Response> {
+        try {
+            const controller = new AbortController();
+            return await getDiagnosticsReponseFromLlm(
+                diagnostics,
+                xmlCodes,
+                this.projectUri,
+                controller
+            );
+        } catch (error) {
+            console.error('Error analyzing diagnostics:', error);
+            throw new Error(`Failed to analyze diagnostics: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+    }
+
+    /**
+     * Checks if user is authenticated
+     */
+    async isUserAuthenticated(): Promise<boolean> {
+        try {
+            await getUserAccessToken();
+            return true;
+        } catch (error) {
+            return false;
+        }
+    }
+
+    /**
+     * Refreshes user authentication token
+     */
+    async refreshAuthentication(): Promise<boolean> {
+        try {
+            await refreshUserAccessToken();
+            return true;
+        } catch (error) {
+            console.error('Error refreshing authentication:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Generates code with streaming response
+     */
+    async generateCode(request: GenerateCodeRequest): Promise<GenerateCodeResponse> {
+        try {
+            await this.generateCodeCore(request);
+            return { success: true };
+        } catch (error) {
+            console.error('Error during code generation:', error);
+            this.eventHandler.handleError(error instanceof Error ? error.message : "Unknown error occurred during code generation");
+            throw new Error(`Failed to generate code: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+    }
+
+    /**
+     * Aborts the current code generation
+     */
+    async abortCodeGeneration(): Promise<AbortCodeGenerationResponse> {
+        try {
+            if (this.currentController) {
+                console.log('Aborting code generation...');
+                this.currentController.abort();
+                this.currentController = null;
+                return { success: true };
+            }
+            console.log('No active code generation to abort');
+            return { success: false };
+        } catch (error) {
+            console.error('Error aborting code generation:', error);
+            return { success: false };
+        }
+    }
+
+    /**
+     * Core code generation logic with streaming
+     */
+    private async generateCodeCore(request: GenerateCodeRequest): Promise<void> {
+        
+        try {
+            this.eventHandler.handleStart();
+
+            // Create a new abort controller for this request
+            this.currentController = new AbortController();
+
+            // Get backend URL and construct the request URL
+            const { backendUrl } = await getBackendUrlAndView(this.projectUri, request.view);
+            const backendRootUri = await fetchBackendUrl(this.projectUri);
+            const url = backendRootUri + backendUrl;
+
+            // Make the request to backend
+            const response = await fetchCodeGenerationsWithRetry(
+                url,
+                request.chatHistory,
+                request.files,
+                request.images,
+                this.projectUri,
+                this.currentController,
+                request.view === "selective",
+                request.thinking
+            );
+
+            if (!response.ok) {
+                throw new Error(`Backend request failed with status ${response.status}`);
+            }
+
+            // Check if response has streaming data
+            if (response.body) { 
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let assistantResponse = "";
+
+                try {
+                    let buffer = "";
+                    while (true) {
+                        // Check if abort was requested
+                        if (this.currentController?.signal.aborted) {
+                            console.log('Code generation aborted by user');
+                            reader.cancel();
+                            break;
+                        }
+
+                        const { done, value } = await reader.read();
+                        if (done) break;
+
+                        buffer += decoder.decode(value, { stream: true });
+
+                        const lines = buffer.split("\n");
+                        buffer = lines.pop() ?? "";
+
+                        for (const line of lines) {
+                            if (!line.trim()) continue;
+                            try {
+                                const obj = JSON.parse(line);
+                                assistantResponse += obj.content;
+                                this.eventHandler.handleContentBlock(line);
+                            } catch (err) {
+                                // If JSON parsing fails, it might be an incomplete object
+                                // Add it back to the buffer to be processed with the next chunk
+                                buffer = line + "\n" + buffer;
+                            }
+                        }
+                    }
+                    
+                    // Process any remaining data in the buffer after the stream ends
+                    if (buffer.trim()) {
+                        try {
+                            const obj = JSON.parse(buffer);
+                            assistantResponse += obj.content;
+                            this.eventHandler.handleContentBlock(buffer);
+                        } catch (err) {
+                            console.error("JSON parse error for remaining buffer:", err, "buffer:", buffer);
+                        }
+                    }
+                } finally {
+                    reader.releaseLock();
+                }
+
+                // Send final response
+                this.eventHandler.handleEnd(assistantResponse);
+
+                // Run code diagnostics on the generated response only for runtime versions > 4.4.0
+                const runtimeVersion = await getMIVersionFromPom(this.projectUri);
+                const shouldRunDiagnostics = runtimeVersion ? compareVersions(runtimeVersion, RUNTIME_VERSION_440) > 0 : false;
+                
+                if (shouldRunDiagnostics) {
+                    await this.handleCodeDiagnostics(assistantResponse);
+                }
+
+            } else {
+                // Fallback: non-streaming response
+                const text = await response.text();
+                this.eventHandler.handleContentBlock(text);
+                this.eventHandler.handleEnd(text);
+            }
+
+            this.eventHandler.handleStop("generateCode");
+
+        } catch (error) {
+            // Check if error is due to abort
+            if (error instanceof Error && error.name === 'AbortError') {
+                console.log('Code generation aborted');
+                this.eventHandler.handleStop("generateCode");
+            } else {
+                console.error("Error during code generation:", error);
+                this.eventHandler.handleError(error instanceof Error ? error.message : "Unknown error occurred");
+                throw error;
+            }
+        } finally {
+            // Clean up the controller reference
+            this.currentController = null;
+        }
+    }
+
+    /**
+     * Creates an event handler that sends events to the visualizer
+     */
+    private createEventHandler(): CopilotEventHandler {
+        return new CopilotEventHandler(this.projectUri);
+    }
+
+    /**
+     * Handles code diagnostics for the generated content
+     */
+    private async handleCodeDiagnostics(assistantResponse: string): Promise<void> {
+        try {
+            // Extract XML code blocks from the response
+            const xmlCodes = this.extractXmlCodeBlocks(assistantResponse);
+            
+            if (xmlCodes.length === 0) {
+                return; // No XML code blocks to process
+            }
+
+            // Start diagnostics process - send xmlCodes via content block
+            this.eventHandler.handleCodeDiagnosticStart(xmlCodes);  
+
+            // Get diagnostics using existing RPC infrastructure
+            const { getStateMachine } = await import('../../stateMachine');
+            const stateMachine = getStateMachine(this.projectUri);
+            if (!stateMachine) {
+                throw new Error('State machine not found for project');
+            }
+
+            const langClient = stateMachine.context().langClient;
+            if (!langClient) {
+                throw new Error('Language client not available');
+            }
+
+            // Track connectors that were added so we can remove them later
+            let added_connectors: string[] = [];
+
+            // Get diagnostics for each XML file
+            let hasAnyDiagnostics = false;
+            const diagnosticsResults: Array<{fileName: string, diagnostics: any[]}> = [];
+            for (const xmlCode of xmlCodes) {
+                // Check if the XML code contains a connector and add it temporarily
+                const connectorMatch = xmlCode.code.match(/<(\w+\.\w+)\b/);
+                if (connectorMatch) {
+                    const tagParts = connectorMatch[1].split('.');
+                    const connectorName = tagParts[0];
+                    const add_response = await this.miDiagramRpcManager.fetchConnectors(connectorName, 'add');
+                    if (add_response?.dependenciesResponse) {
+                        added_connectors.push(connectorName);
+                    }
+                }
+
+                // Get diagnostics from language client
+                const res = await langClient.getCodeDiagnostics(xmlCode);
+                diagnosticsResults.push({
+                    fileName: xmlCode.fileName,
+                    diagnostics: res.diagnostics
+                });
+                if (res.diagnostics.length > 0) {
+                    hasAnyDiagnostics = true;
+                }
+            }
+
+            // Remove temporarily added connectors
+            if (added_connectors.length > 0) {
+                for (const connector of added_connectors) {
+                    await this.miDiagramRpcManager.fetchConnectors(connector, 'remove');
+                }
+            }
+
+            if (hasAnyDiagnostics) {
+                // Send diagnostics to LLM for corrections
+                const llmResponse = await getDiagnosticsReponseFromLlm(
+                    { diagnostics: diagnosticsResults },
+                    xmlCodes,
+                    this.projectUri,
+                    new AbortController()
+                );
+
+                const llmResponseData = await llmResponse.json();
+
+                // Process corrections
+                if (llmResponseData.fixed_config && Array.isArray(llmResponseData.fixed_config)) {
+                    const correctedCodes = llmResponseData.fixed_config
+                        .filter((item: any) => item.name && (item.configuration || item.code))
+                        .map((item: any) => ({
+                            name: item.name,
+                            configuration: item.configuration,
+                            code: item.code
+                        }));
+
+                    // End diagnostics with corrections
+                    this.eventHandler.handleCodeDiagnosticEnd(correctedCodes);
+                } else {
+                    // End diagnostics without corrections
+                    this.eventHandler.handleCodeDiagnosticEnd();
+                }
+            } else {
+                // No diagnostics found, end process
+                this.eventHandler.handleCodeDiagnosticEnd();
+            }
+        } catch (error) {
+            console.error('Error during code diagnostics:', error);
+            // End diagnostics on error
+            this.eventHandler.handleCodeDiagnosticEnd();
+        }
+    }
+
+    /**
+     * Extracts XML code blocks from assistant response
+     */
+    private extractXmlCodeBlocks(content: string): Array<{fileName: string, code: string}> {
+        const codeBlockRegex = /```([\w#+]*)\s*\n([\s\S]*?)```/g;
+        const xmlCodes: Array<{fileName: string, code: string}> = [];
+        let match;
+
+        while ((match = codeBlockRegex.exec(content)) !== null) {
+            const language = match[1].trim().toLowerCase();
+            const code = match[2];
+
+            // Check if this is XML code
+            if (language === 'xml') {
+                const nameMatch = code.match(/name=["']([^"']+)["']/);
+                const fileName = nameMatch ? `${nameMatch[1]}.xml` : `code_${xmlCodes.length}.xml`;
+                
+                xmlCodes.push({
+                    fileName,
+                    code
+                });
+            }
+        }
+
+        return xmlCodes;
+    }
+
+    /**
+     * Sets the Anthropic API key for unlimited usage
+     */
+    async setAnthropicApiKey(): Promise<void> {
+        const vscode = await import('vscode');
+        const { extension } = await import('../../MIExtensionContext');
+
+        const apiKey = await vscode.window.showInputBox({
+            prompt: "Enter your Anthropic API Key for Unlimited Usage",
+            password: true,
+            placeHolder: "sk-ant-...",
+            validateInput: (value) => {
+                if (!value || value.trim() === "") {
+                    return "API key cannot be empty";
+                }
+                if (!value.startsWith("sk-ant-")) {
+                    return "Invalid Anthropic API key format. Should start with 'sk-ant-'";
+                }
+                return null;
+            }
+        });
+
+        if (apiKey) {
+            await extension.context.secrets.store('AnthropicApiKey', apiKey);
+            vscode.window.showInformationMessage("Anthropic API key has been saved successfully");
+        }
+    }
+
+    /**
+     * Gets the stored Anthropic API key
+     */
+    async hasAnthropicApiKey(): Promise<boolean | undefined> {
+        const { extension } = await import('../../MIExtensionContext');
+        return await extension.context.secrets.get('AnthropicApiKey') !== undefined;
+    }
+}
diff --git a/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/utils.ts b/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/utils.ts
new file mode 100644
index 00000000000..25386a97e85
--- /dev/null
+++ b/workspaces/mi/mi-extension/src/rpc-managers/ai-panel/utils.ts
@@ -0,0 +1,462 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { MiDiagramRpcManager } from "../mi-diagram/rpc-manager";
+import { MiVisualizerRpcManager } from "../mi-visualizer/rpc-manager";
+import { refreshAuthCode } from "../../ai-panel/auth";
+import { openSignInView } from "../../util/ai-datamapper-utils";
+import { extension } from "../../MIExtensionContext";
+import { EVENT_TYPE, MACHINE_VIEW } from "@wso2/mi-core";
+import * as vscode from "vscode";
+import { MIAIPanelRpcManager } from "./rpc-manager";
+
+// Backend URL constants
+export const MI_ARTIFACT_GENERATION_BACKEND_URL = `/chat/artifact-generation`;
+export const MI_ARTIFACT_EDIT_BACKEND_URL = `/chat/artifact-editing`;
+export const MI_SUGGESTIVE_QUESTIONS_BACKEND_URL = `/suggestions`;
+export const MI_DIAGNOSTICS_RESPONSE_BACKEND_URL = `/synapse/bug-fix`;
+
+// Error messages
+export const COPILOT_ERROR_MESSAGES = {
+    BAD_REQUEST: "Bad request. Please check your input and try again.",
+    UNAUTHORIZED: "Unauthorized access. Please sign in and try again.",
+    FORBIDDEN: "Access forbidden. You don't have permission to perform this action.",
+    NOT_FOUND: "Resource not found. Please check the backend URL or try again later.",
+    TOKEN_COUNT_EXCEEDED: "Token limit exceeded. Please wait before making another request.",
+    ERROR_422: "Unprocessable entity. Please check your input format and try again."
+};
+
+// Backend request types
+export enum BackendRequestType {
+    InitialPrompt = "initial_prompt",
+    QuestionClick = "question_click", 
+    UserPrompt = "user_prompt",
+    Suggestions = "suggestions"
+}
+
+// API Response interface
+export interface ApiResponse {
+    event: string;
+    error: string | null;
+    questions: string[];
+}
+
+// Types for handling fixed/corrected code from LLM
+export interface FixedConfigItem {
+    name: string;
+    configuration?: string;
+    code?: string;
+}
+
+export interface CorrectedCodeItem {
+    fileName: string;
+    code: string;
+}
+
+/**
+ * Fetches the backend URL for the given project
+ */
+export async function fetchBackendUrl(projectUri: string): Promise<string> {
+    try {
+        const miDiagramRpcManager = new MiDiagramRpcManager(projectUri);
+        const { url } = await miDiagramRpcManager.getBackendRootUrl();
+        return url;
+    } catch (error) {
+        console.error('Failed to fetch backend URL:', error);
+        throw error;
+    }
+}
+
+/**
+ * Gets the user access token from extension secrets
+ */
+export async function getUserAccessToken(): Promise<string> {
+    const token = await extension.context.secrets.get('MIAIUser');
+    if (!token) {
+        throw new Error('User access token not available');
+    }
+    return token;
+}
+
+/**
+ * Checks if the Anthropic API key is available in extension secrets
+ */
+export async function hasAnthropicApiKey(): Promise<string | undefined> {
+    return await extension.context.secrets.get('AnthropicApiKey');
+}
+
+/**
+ * Refreshes the user access token
+ */
+export async function refreshUserAccessToken(): Promise<string> {
+    const newToken = await refreshAuthCode();
+    if (!newToken) {
+        throw new Error('Failed to refresh access token');
+    }
+    return newToken;
+}
+
+/**
+ * Gets status text for HTTP status codes
+ */
+export function getStatusText(status: number): string {
+    switch (status) {
+        case 400: return COPILOT_ERROR_MESSAGES.BAD_REQUEST;
+        case 401: return COPILOT_ERROR_MESSAGES.UNAUTHORIZED;
+        case 403: return COPILOT_ERROR_MESSAGES.FORBIDDEN;
+        case 404: return COPILOT_ERROR_MESSAGES.NOT_FOUND;
+        case 429: return COPILOT_ERROR_MESSAGES.TOKEN_COUNT_EXCEEDED;
+        case 422: return COPILOT_ERROR_MESSAGES.ERROR_422;
+        default: return '';
+    }
+}
+
+/**
+ * Shows notification when user is signed out
+ */
+function showSignedOutNotification(projectUri: string) {
+    vscode.window.showWarningMessage(
+        "You are signed out. Please sign in to continue.",
+        "Sign In"
+    ).then(selection => {
+        if (selection === "Sign In") {
+            openSignInView(projectUri);
+        }
+    });
+}
+
+/**
+ * Shows notification when user's free quota is exceeded
+ */
+function showQuotaExceededNotification(projectUri: string) {
+    vscode.window.showWarningMessage(
+        "Your free usage quota has been exceeded. Set your own Anthropic API key to continue using MI Copilot with unlimited access.",
+        "Set API Key",
+        "Learn More"
+    ).then(selection => {
+        if (selection === "Set API Key") {
+            // Trigger the API key input dialog
+            const miAiPanelRpcManager = new MIAIPanelRpcManager(projectUri);
+            miAiPanelRpcManager.setAnthropicApiKey();
+        } else if (selection === "Learn More") {
+            vscode.env.openExternal(vscode.Uri.parse("https://console.anthropic.com/"));
+        }
+    });
+}
+
+/**
+ * Opens update extension view
+ */
+export function openUpdateExtensionView(projectUri: string) {
+    const miVisualizerRpcManager = new MiVisualizerRpcManager(projectUri);
+    miVisualizerRpcManager.openView({ 
+        type: EVENT_TYPE.OPEN_VIEW, 
+        location: { view: MACHINE_VIEW.UpdateExtension } 
+    });
+}
+
+/**
+ * Main function to fetch data from backend with retry logic
+ */
+export async function fetchWithRetry(
+    type: BackendRequestType,
+    url: string,
+    body: any,
+    projectUri: string,
+    controller: AbortController,
+    thinking?: boolean
+): Promise<Response> {
+    let retryCount = 0;
+    const maxRetries = 2;
+    let token = await getUserAccessToken();
+    const anthropicApiKey = await hasAnthropicApiKey();
+
+    const bodyWithThinking = {
+        ...body,
+        thinking: thinking || false
+    };
+
+    const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+    };
+
+    // Add Anthropic API key header if available
+    if (anthropicApiKey) {
+        headers["X-ANTHROPIC-KEY"] = anthropicApiKey;
+    }
+
+    let response = await fetch(url, {
+        method: "POST",
+        headers: headers,
+        body: JSON.stringify(bodyWithThinking),
+        signal: controller.signal,
+    });
+
+    // Handle 401 - Unauthorized (token expired)
+    if (response.status === 401) {
+        try {
+            token = await refreshUserAccessToken();
+            
+            // Update headers with new token
+            headers.Authorization = `Bearer ${token}`;
+            
+            response = await fetch(url, {
+                method: "POST",
+                headers: headers,
+                body: JSON.stringify(bodyWithThinking),
+                signal: controller.signal,
+            });
+        } catch (error) {
+            console.error('Failed to refresh token:', error);
+            showSignedOutNotification(projectUri);
+            throw new Error("Authentication failed");
+        }
+    } 
+    // Handle 429 - Quota Exceeded (must be checked before 404)
+    else if (response.status === 429) {
+        // Quota exceeded - show notification to user
+        showQuotaExceededNotification(projectUri);
+        let error = "Free usage quota exceeded. Please set your own Anthropic API key to continue.";
+        try {
+            const responseBody = await response.json();
+            if (responseBody.detail) {
+                error += ` ${responseBody.detail}`;
+            }
+        } catch (e) {
+            // Ignore JSON parsing error
+        }
+        throw new Error(error);
+    }
+    // Handle 404 - Not Found (retry with exponential backoff)
+    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 fetchWithRetry(type, url, body, projectUri, controller, thinking);
+        } else {
+            openUpdateExtensionView(projectUri);
+            throw new Error("Resource not found : Check backend URL");
+        }
+    } 
+    // Handle other error responses
+    else if (!response.ok) {
+        const statusText = getStatusText(response.status);
+        let error = `Failed to fetch response. Status: ${statusText}`;
+
+        if (response.status === 422) {
+            error = getStatusText(422);
+        }
+
+        switch (type) {
+            case BackendRequestType.Suggestions:
+                openUpdateExtensionView(projectUri);
+                throw new Error("Failed to fetch initial questions");
+            case BackendRequestType.UserPrompt:
+                throw new Error(`Failed to fetch code generations: ${error}`);
+            default:
+                throw new Error(error);
+        }
+    }
+
+    return response;
+}
+
+/**
+ * Gets workspace context for the project
+ */
+export async function getWorkspaceContext(projectUri: string, selective: boolean = false) {
+    const miDiagramRpcManager = new MiDiagramRpcManager(projectUri);
+    if (selective) {
+        return await miDiagramRpcManager.getSelectiveWorkspaceContext();
+    } else {
+        return await miDiagramRpcManager.getWorkspaceContext();
+    }
+}
+
+/**
+ * Gets backend URL and view type based on current view
+ */
+export async function getBackendUrlAndView(projectUri: string, view?: string): Promise<{ backendUrl: string; view: string }> {
+    // This would need to be adapted based on how you determine the current view in the extension
+    // For now, defaulting to artifact editing view
+    const currentView = view || "Artifact";
+    
+    switch (currentView) {
+        case "Overview":
+        case "ADD_ARTIFACT":
+            return { backendUrl: MI_ARTIFACT_GENERATION_BACKEND_URL, view: "Overview" };
+        default:
+            return { backendUrl: MI_ARTIFACT_EDIT_BACKEND_URL, view: "Artifact" };
+    }
+}
+
+/**
+ * Generates suggestions from the backend
+ */
+export async function generateSuggestions(
+    projectUri: string,
+    chatHistory: any[],
+    controller: AbortController
+): Promise<any[]> {
+    try {
+        const backendRootUri = await fetchBackendUrl(projectUri);
+        const url = backendRootUri + MI_SUGGESTIVE_QUESTIONS_BACKEND_URL;
+        const context = await getWorkspaceContext(projectUri);
+        
+        const response = await fetchWithRetry(
+            BackendRequestType.Suggestions,
+            url,
+            {
+                messages: chatHistory,
+                context: context.context,
+                num_suggestions: 1,
+                type: "artifact_gen",
+            },
+            projectUri,
+            controller
+        );
+
+        const data = (await response.json()) as ApiResponse;
+
+        if (data.event === "suggestion_generation_success") {
+            return data.questions.map((question) => ({
+                id: generateId(),
+                role: "default",
+                content: question,
+                type: "Question",
+            }));
+        } else {
+            console.error("Error generating suggestions:", data.error);
+            throw new Error("Failed to generate suggestions: " + data.error);
+        }
+    } catch (error) {
+        console.error(error);
+        return [];
+    }
+}
+
+/**
+ * Fetches code generations from backend
+ */
+export async function fetchCodeGenerationsWithRetry(
+    url: string,
+    chatHistory: any[],
+    files: any[],
+    images: any[],
+    projectUri: string,
+    controller: AbortController,
+    selective: boolean = false,
+    thinking?: boolean
+): Promise<Response> {
+    const context = await getWorkspaceContext(projectUri, selective);
+    const miDiagramRpcManager = new MiDiagramRpcManager(projectUri);
+    const defaultPayloads = await miDiagramRpcManager.getAllInputDefaultPayloads();
+    
+    return fetchWithRetry(BackendRequestType.UserPrompt, url, {
+        messages: chatHistory,
+        context: context.context,
+        files: files,
+        images: images.map((image: any) => image.imageBase64),
+        payloads: defaultPayloads,
+    }, projectUri, controller, thinking);
+}
+
+/**
+ * Sends diagnostics to LLM backend and gets response
+ */
+export async function getDiagnosticsReponseFromLlm(
+    diagnostics: any,
+    xmlCodes: any,
+    projectUri: string,
+    controller: AbortController
+): Promise<Response> {
+    try {
+        const backendRootUri = await fetchBackendUrl(projectUri);
+        const url = backendRootUri + MI_DIAGNOSTICS_RESPONSE_BACKEND_URL;
+        const context = await getWorkspaceContext(projectUri);
+        
+        const requestBody = {
+            diagnostics: diagnostics.diagnostics,
+            xmlCodes: xmlCodes,
+            context: context.context
+        };
+        
+        return fetchWithRetry(
+            BackendRequestType.UserPrompt,
+            url,
+            requestBody,
+            projectUri,
+            controller,
+            false // Not in thinking mode for diagnostics
+        );
+    } catch (error) {
+        console.error("Error sending diagnostics to LLM:", error);
+        
+        const errorMessage = error instanceof Error 
+            ? error.message 
+            : "Unknown error occurred when analyzing diagnostics";
+        
+        return Promise.reject({
+            status: "error",
+            message: `Failed to analyze diagnostics: ${errorMessage}`,
+            originalError: error
+        });
+    }
+}
+
+/**
+ * Utility function to generate unique 8-digit numeric IDs
+ */
+export function generateId(): number {
+    const min = 10000000; // Minimum 8-digit number
+    const max = 99999999; // Maximum 8-digit number
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+/**
+ * Utility function to replace code blocks in chat messages
+ */
+export function replaceCodeBlock(content: string, fileName: string, correctedCode: string): string {
+    // Normalize the file name for consistent matching
+    const normalizedFileName = fileName.endsWith('.xml') ? fileName : `${fileName}.xml`;
+    const fileNameWithoutExt = normalizedFileName.replace('.xml', '');
+    
+    // Try to find code blocks in the content
+    const codeBlockRegex = /```xml\s*([\s\S]*?)```/g;
+    let match;
+    let modifiedContent = content;
+    
+    while ((match = codeBlockRegex.exec(content)) !== null) {
+        const xmlContent = match[1];
+        
+        // Check if this XML block contains the target API/artifact name
+        const nameMatch = xmlContent.match(/name="([^"]+)"/);
+        if (nameMatch && nameMatch[1] === fileNameWithoutExt) {
+            // Found the right code block, replace it
+            const originalBlock = match[0]; // The complete ```xml ... ``` block
+            const newBlock = `\`\`\`xml\n${correctedCode}\n\`\`\``;
+            
+            return modifiedContent.replace(originalBlock, newBlock);
+        }
+    }
+    
+    // If no matching code block was found, append the corrected code
+    return modifiedContent + `\n\n**Updated ${normalizedFileName}**\n\`\`\`xml\n${correctedCode}\n\`\`\``;
+}
diff --git a/workspaces/mi/mi-extension/src/rpc-managers/mi-data-mapper/rpc-manager.ts b/workspaces/mi/mi-extension/src/rpc-managers/mi-data-mapper/rpc-manager.ts
index 488179aaa61..d6c8bd34373 100644
--- a/workspaces/mi/mi-extension/src/rpc-managers/mi-data-mapper/rpc-manager.ts
+++ b/workspaces/mi/mi-extension/src/rpc-managers/mi-data-mapper/rpc-manager.ts
@@ -390,7 +390,7 @@ export class MiDataMapperRpcManager implements MIDataMapperAPI {
     async createDMFiles(params: GenerateDMInputRequest): Promise<GenerateDMInputResponse> {
         return new Promise(async (resolve, reject) => {
             try {
-                const dmContent = `import * as ${DM_OPERATORS_IMPORT_NAME} from "./${DM_OPERATORS_FILE_NAME}";\n\n/**\n* inputType:unknown\n*/\ninterface InputRoot {\n}\n\n/**\n* outputType:unknown\n*/\ninterface OutputRoot {\n}\n\nexport function mapFunction(input: InputRoot): OutputRoot {\nreturn {}\n};`;
+                const dmContent = `import * as ${DM_OPERATORS_IMPORT_NAME} from "./${DM_OPERATORS_FILE_NAME}";\ndeclare var DM_PROPERTIES: any;\n\n/**\n* inputType:unknown\n*/\ninterface InputRoot {\n}\n\n/**\n* outputType:unknown\n*/\ninterface OutputRoot {\n}\n\nexport function mapFunction(input: InputRoot): OutputRoot {\nreturn {}\n};`;
                 const { filePath, dmName } = params;
                 const workspaceFolder = workspace.getWorkspaceFolder(Uri.file(filePath));
                 let miDiagramRpcManager: MiDiagramRpcManager = new MiDiagramRpcManager(this.projectUri);
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 995d7aecb6b..66e940e4112 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
@@ -181,7 +181,6 @@ import {
     getAvailableConnectors,
     getAvailableRegistryResources,
     getAvailableResources,
-    getBackendRootUrl,
     getProxyRootUrl,
     getConnectionForm,
     getConnector,
@@ -306,9 +305,6 @@ import {
     DeployProjectRequest,
     CreateBallerinaModuleRequest,
     getDevantMetadata,
-    GetCodeDiagnosticsReqeust,
-    GetCodeDiagnosticsResponse,
-    getCodeDiagnostics,
     GetConnectorIconRequest,
     getConnectorIcon,
     getValueOfEnvVariable,
@@ -323,7 +319,8 @@ import {
     UpdateRegistryPropertyRequest,
     updatePropertiesInArtifactXML,
     getPropertiesFromArtifactXML,
-    formatPomFile
+    formatPomFile,
+    getBackendRootUrl
 } from "@wso2/mi-core";
 import { Messenger } from "vscode-messenger";
 import { MiDiagramRpcManager } from "./rpc-manager";
@@ -419,7 +416,6 @@ export function registerMiDiagramRpcHandlers(messenger: Messenger, projectUri: s
     messenger.onRequest(buildBallerinaModule, (args: string) => rpcManger.buildBallerinaModule(args));
     messenger.onRequest(getSelectiveWorkspaceContext, () => rpcManger.getSelectiveWorkspaceContext());
     messenger.onRequest(getSelectiveArtifacts, (args: GetSelectiveArtifactsRequest) => rpcManger.getSelectiveArtifacts(args));
-    messenger.onRequest(getBackendRootUrl, () => rpcManger.getBackendRootUrl());
     messenger.onRequest(getProxyRootUrl, () => rpcManger.getProxyRootUrl());
     messenger.onRequest(getAvailableRegistryResources, (args: ListRegistryArtifactsRequest) => rpcManger.getAvailableRegistryResources(args));
     messenger.onRequest(updateRegistryMetadata, (args: UpdateRegistryMetadataRequest) => rpcManger.updateRegistryMetadata(args));
@@ -500,7 +496,6 @@ export function registerMiDiagramRpcHandlers(messenger: Messenger, projectUri: s
     messenger.onRequest(testConnectorConnection, (args: TestConnectorConnectionRequest) => rpcManger.testConnectorConnection(args));
     messenger.onRequest(saveConfig, (args: SaveConfigRequest) => rpcManger.saveConfig(args));
     messenger.onRequest(getEULALicense, () => rpcManger.getEULALicense());
-    messenger.onRequest(getCodeDiagnostics, (args: GetCodeDiagnosticsReqeust) => rpcManger.getCodeDiagnostics(args));
     messenger.onRequest(shouldDisplayPayloadAlert, () => rpcManger.shouldDisplayPayloadAlert());
     messenger.onRequest(displayPayloadAlert, () => rpcManger.displayPayloadAlert());
     messenger.onRequest(closePayloadAlert, () => rpcManger.closePayloadAlert());
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 de4c8a294dc..7f989eff4ae 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
@@ -281,9 +281,6 @@ import {
     GetConnectorIconRequest,
     GetConnectorIconResponse,
     DependencyDetails,
-    GetCodeDiagnosticsReqeust,
-    GetCodeDiagnosticsResponse,
-    getCodeDiagnostics,
     SubmitFeedbackRequest,
     SubmitFeedbackResponse,
     GetPomFileContentResponse,
@@ -1787,20 +1784,17 @@ ${endpointAttributes}
             let xmlData = getTemplateXmlWrapper(getTemplateParams);
             let sanitizedXmlData = xmlData.replace(/^\s*[\r\n]/gm, '');
 
-            if (params.templateType === 'Sequence Template') {
-                params.isEdit = false;
-            }
-
             if (params.getContentOnly) {
                 resolve({ path: "", content: sanitizedXmlData });
             } else if (params.isEdit && params.range) {
                 const filePath = await this.getFilePath(directory, templateName);
                 xmlData = getEditTemplateXmlWrapper(getTemplateParams);
-                this.applyEdit({
+                await this.applyEdit({
                     text: xmlData,
                     documentUri: filePath,
                     range: params.range
                 });
+                resolve({ path: filePath, content: "" });
             } else {
                 const filePath = await this.getFilePath(directory, templateName);
                 await replaceFullContentToFile(filePath, sanitizedXmlData);
@@ -3029,19 +3023,7 @@ ${endpointAttributes}
         return new Promise(async (resolve) => {
             const projectUuid = uuidv4();
             const { directory, name, open, groupID, artifactID, version, miVersion } = params;
-            let initialDependencies = '';
-            try {
-                const connectorStoreResponse = await this.getStoreConnectorJSON(miVersion);
-                const httpConnectorVersion = filterConnectorVersion('HTTP', connectorStoreResponse.connectors);
-                initialDependencies = generateInitialDependencies(httpConnectorVersion);
-            } catch (err) {
-                console.error("Could not fetch connectors:", err);
-                const confirmation = await window.showWarningMessage(ERROR_MESSAGES.ERROR_DOWNLOADING_MODULES,{ modal: true }, 'Yes');
-                if (confirmation === undefined) {
-                    resolve({filePath: "Error"});
-                    return;
-                }
-            }
+            const initialDependencies = compareVersions(miVersion, RUNTIME_VERSION_440) >= 0 ? generateInitialDependencies() : '';
             const tempName = name.replace(/\./g, '');
             const folderStructure: FileStructure = {
                 [tempName]: { // Project folder
@@ -3844,7 +3826,7 @@ ${endpointAttributes}
             // Determine the destination file name
             let desFileName = path.basename(params.sourceFilePath);
             // If desFileName does nto contain .xml, append .xml
-            if (desFileName && !desFileName.endsWith('.xml')) {
+            if (desFileName && !['.xml', '.dbs'].some(ext => desFileName.endsWith(ext))) {
                 desFileName += '.xml';
             }
             const destinationFilePath = path.join(destinationDirectory, desFileName);
@@ -4208,9 +4190,9 @@ ${endpointAttributes}
         const RUNTIME_THRESHOLD_VERSION = RUNTIME_VERSION_440;
         const runtimeVersion = await getMIVersionFromPom(this.projectUri);
 
-        const isVersionThresholdReached = runtimeVersion ? compareVersions(runtimeVersion, RUNTIME_THRESHOLD_VERSION) : -1;
+        const versionThreshold = runtimeVersion ? compareVersions(runtimeVersion, RUNTIME_THRESHOLD_VERSION) : -1;
 
-        return isVersionThresholdReached < 0 ? { url: MI_COPILOT_BACKEND_V2 } : { url: MI_COPILOT_BACKEND_V3 };
+        return versionThreshold < 0 ? { url: MI_COPILOT_BACKEND_V2 } : { url: MI_COPILOT_BACKEND_V3 };
     }
 
     async getProxyRootUrl(): Promise<GetProxyRootUrlResponse> {
@@ -4654,6 +4636,7 @@ ${keyValuesXML}`;
 
             await extension.context.secrets.delete('MIAIUser');
             await extension.context.secrets.delete('MIAIRefreshToken');
+            await extension.context.secrets.delete('AnthropicApiKey');
             StateMachineAI.sendEvent(AI_EVENT_TYPE.LOGOUT);
         } else {
             return;
@@ -5466,7 +5449,8 @@ ${keyValuesXML}`;
         const langClient = getStateMachine(this.projectUri).context().langClient!;
         let response;
         if (params.isRuntimeService) {
-            response = await langClient.swaggerFromAPI({ apiPath: params.apiPath, port: DebuggerConfig.getServerPort(), ...(fs.existsSync(swaggerPath) && { swaggerPath: swaggerPath }) });
+            const versionedUrl = exposeVersionedServices(this.projectUri);
+            response = await langClient.swaggerFromAPI({ apiPath: params.apiPath, port: DebuggerConfig.getServerPort(), projectPath: versionedUrl ? this.projectUri : "", ...(fs.existsSync(swaggerPath) && { swaggerPath: swaggerPath }) });
         } else {
             response = await langClient.swaggerFromAPI({ apiPath: params.apiPath, ...(fs.existsSync(swaggerPath) && { swaggerPath: swaggerPath }) });
         }
@@ -5861,39 +5845,6 @@ ${keyValuesXML}`;
         });
     }
 
-    async getCodeDiagnostics(params: GetCodeDiagnosticsReqeust): Promise<GetCodeDiagnosticsResponse> {
-        return new Promise(async (resolve) => {
-            const langClient = getStateMachine(this.projectUri).context().langClient!;
-
-            let added_connectors: string[] = [];
-            let add_response: any = null;
-            let connectorName: string = '';
-            //Empty array to store the diagnostics
-            const diagnostics: GetCodeDiagnosticsResponse = { diagnostics: [] };
-            for (const xmlCode of params.xmlCodes) {
-                const connectorMatch = xmlCode.code.match(/<(\w+\.\w+)\b/);
-                if (connectorMatch) {
-                    const tagParts = connectorMatch[1].split('.');
-                    connectorName = tagParts[0];
-                    add_response = await this.fetchConnectors(connectorName, 'add');
-                    if (add_response.dependenciesResponse) {
-                        added_connectors.push(connectorName);
-                    }
-                }
-                const res = await langClient.getCodeDiagnostics(xmlCode);
-                diagnostics.diagnostics.push({
-                    fileName: xmlCode.fileName,
-                    diagnostics: res.diagnostics
-                });
-            }
-            if (added_connectors.length > 0) {
-                for (const connector of added_connectors) {
-                    const remove_response = await this.fetchConnectors(connector, 'remove');
-                }
-            }
-            resolve(diagnostics);
-        });
-    }
 
 
     async closePayloadAlert(): Promise<void> {
@@ -6199,6 +6150,30 @@ ${keyValuesXML}`;
     }
 }
 
+function exposeVersionedServices(projectUri: string): boolean {
+    const config = vscode.workspace.getConfiguration('MI', vscode.Uri.file(projectUri));
+    const serverPath = config.get<string>('SERVER_PATH') || undefined;
+    const configPath = serverPath ? path.join(serverPath, 'conf', 'deployment.toml') : '';
+    if (!fs.existsSync(configPath)) {
+        console.error(`Failed to find deployment configuration file at: ${configPath}`);
+        return false;
+    }
+    const fileContent = fs.readFileSync(configPath, "utf8");
+    const lines = fileContent.split(/\r?\n/);
+    for (let rawLine of lines) {
+        let line = rawLine.trim();
+        if (!line || line.startsWith("#")) continue;
+        const match = line.match(/^['"]?expose\.versioned\.services['"]?\s*=\s*(.+)$/i);
+        if (match) {
+            let value = match[1].trim();
+            value = value.replace(/^["']|["']$/g, "");
+            if (value.toLowerCase() === "true") return true;
+            return false;
+        }
+    }
+    return false;
+}
+
 export function getRepoRoot(projectRoot: string): string | undefined {
     // traverse up the directory tree until .git directory is found
     const gitDir = path.join(projectRoot, ".git");
diff --git a/workspaces/mi/mi-extension/src/rpc-managers/mi-visualizer/rpc-handler.ts b/workspaces/mi/mi-extension/src/rpc-managers/mi-visualizer/rpc-handler.ts
index d36bf06a76e..93bf8a422b0 100644
--- a/workspaces/mi/mi-extension/src/rpc-managers/mi-visualizer/rpc-handler.ts
+++ b/workspaces/mi/mi-extension/src/rpc-managers/mi-visualizer/rpc-handler.ts
@@ -91,7 +91,9 @@ import {
     MavenDeployPluginDetails,
     setDeployPlugin,
     getDeployPluginDetails,
-    removeDeployPlugin
+    removeDeployPlugin,
+    ReloadDependenciesRequest,
+    getDependencyStatusList
 } from "@wso2/mi-core";
 import { Messenger } from "vscode-messenger";
 import { MiVisualizerRpcManager } from "./rpc-manager";
@@ -131,11 +133,12 @@ export function registerMiVisualizerRpcHandlers(messenger: Messenger, projectUri
     messenger.onRequest(getSupportedMIVersionsHigherThan, (args: string) => rpcManger.getSupportedMIVersionsHigherThan(args));
     messenger.onRequest(getProjectDetails, () => rpcManger.getProjectDetails());
     messenger.onRequest(updateProperties, (args: UpdatePropertiesRequest) => rpcManger.updateProperties(args));
-    messenger.onRequest(reloadDependencies, () => rpcManger.reloadDependencies());
+    messenger.onRequest(reloadDependencies, (args?: ReloadDependenciesRequest) => rpcManger.reloadDependencies(args));
     messenger.onRequest(updateDependencies, (args: UpdateDependenciesRequest) => rpcManger.updateDependencies(args));
     messenger.onRequest(updatePomValues, (args: UpdatePomValuesRequest) => rpcManger.updatePomValues(args));
     messenger.onRequest(updateConfigFileValues, (args: UpdateConfigValuesRequest) => rpcManger.updateConfigFileValues(args));
     messenger.onRequest(updateConnectorDependencies, () => rpcManger.updateConnectorDependencies());
+    messenger.onRequest(getDependencyStatusList, () => rpcManger.getDependencyStatusList());
     messenger.onRequest(updateDependenciesFromOverview, (args: UpdateDependenciesRequest) => rpcManger.updateDependenciesFromOverview(args));
     messenger.onRequest(importOpenAPISpec, (args: ImportOpenAPISpecRequest) => rpcManger.importOpenAPISpec(args));
     messenger.onRequest(getProjectSetupDetails, () => rpcManger.getProjectSetupDetails());
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 4fb21d88413..f36f8f72b44 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
@@ -65,7 +65,9 @@ import {
     UpdateAiDependenciesRequest,
     RuntimeServiceDetails,
     MavenDeployPluginDetails,
-    ProjectConfig
+    ProjectConfig,
+    ReloadDependenciesRequest,
+    DependencyStatusResponse
 } from "@wso2/mi-core";
 import * as https from "https";
 import Mustache from "mustache";
@@ -92,6 +94,22 @@ import { extractCAppDependenciesAsProjects } from "../../visualizer/activate";
 import { findMultiModuleProjectsInWorkspaceDir } from "../../util/migrationUtils";
 
 Mustache.escape = escapeXml;
+
+/**
+ * Extracts and parses dependencies from error message based on a regex pattern
+ * @param errorMessage - The complete error message
+ * @param pattern - Regex pattern to match the specific error category
+ * @returns Array of dependency strings (in format: groupId-artifactId-version)
+ */
+function extractDependenciesFromError(errorMessage: string, pattern: RegExp): string[] {
+    const match = errorMessage.match(pattern);
+    if (match && match[1]) {
+        const cleanedList = match[1].replace(/\.$/, '').trim();
+        return cleanedList.split(',').map(c => c.trim()).filter(c => c.length > 0);
+    }
+    return [];
+}
+
 export class MiVisualizerRpcManager implements MIVisualizerAPI {
     constructor(private projectUri: string) { }
 
@@ -188,27 +206,119 @@ export class MiVisualizerRpcManager implements MIVisualizerAPI {
     /**
      * Reloads the dependencies for the current integration project.
      *
+     * @param params - An object containing the parameters for reloading dependencies.
      * @returns {Promise<boolean>} A promise that resolves to `true` when all dependency reload operations are complete.
      */
-    async reloadDependencies(): Promise<boolean> {
+    async reloadDependencies(params?: ReloadDependenciesRequest): Promise<boolean> {
         return new Promise(async (resolve) => {
+            let reloadDependenciesResult = true;
             const langClient = getStateMachine(this.projectUri).context().langClient!;
             const updateDependenciesResult = await langClient?.updateConnectorDependencies();
-            if (!updateDependenciesResult.toLowerCase().startsWith("success")) {
-                await window.showWarningMessage(
+            if (!updateDependenciesResult.toLowerCase().startsWith("success")) {              
+                const connectorsNotDownloaded: string[] = [];
+                const unavailableDependencies: string[] = [];
+                const missingDescriptorDependencies: string[] = [];
+                const versioningMismatchDependencies: string[] = [];
+                
+                // Extract connectors not downloaded
+                connectorsNotDownloaded.push(...extractDependenciesFromError(
                     updateDependenciesResult,
-                    { modal: true }
-                );
+                    /Some connectors were not downloaded:\s*(.+?)(?:\.\s+(?:[A-Z]|$)|$)/
+                ));
+                
+                // Extract unavailable integration project dependencies
+                unavailableDependencies.push(...extractDependenciesFromError(
+                    updateDependenciesResult,
+                    /Following integration project dependencies were unavailable:\s*(.+?)(?:\.\s+(?:[A-Z]|$)|$)/
+                ));
+                
+                // Extract dependencies without descriptor file
+                missingDescriptorDependencies.push(...extractDependenciesFromError(
+                    updateDependenciesResult,
+                    /Following dependencies do not contain the descriptor file:\s*(.+?)(?:\.\s+(?:[A-Z]|$)|$)/
+                ));
+
+                // Extract dependencies with versioning mismatches
+                versioningMismatchDependencies.push(...extractDependenciesFromError(
+                    updateDependenciesResult,
+                    /Versioned deployment status is different from the dependent project:\s*(.+?)(?:\.\s+(?:[A-Z]|$)|$)/
+                ));
+                
+                const allFailedDependencies = [
+                    ...connectorsNotDownloaded,
+                    ...unavailableDependencies,
+                    ...missingDescriptorDependencies,
+                    ...versioningMismatchDependencies
+                ];
+                
+                if (allFailedDependencies.length > 0 && params?.newDependencies && params.newDependencies.length > 0) {
+                    const projectDetails = await langClient.getProjectDetails();
+                    const existingDependencies = projectDetails.dependencies || [];
+                    const allExistingDeps = [
+                        ...(existingDependencies.connectorDependencies || []),
+                        ...(existingDependencies.integrationProjectDependencies || []),
+                        ...(existingDependencies.otherDependencies || [])
+                    ];
+
+                    // Find and remove failed dependencies that are in newDependencies
+                    const dependenciesToRemove = params.newDependencies
+                        .filter(newDep => {
+                            const dependencyString = `${newDep.groupId}-${newDep.artifact}-${newDep.version}`;
+                            return allFailedDependencies.includes(dependencyString);
+                        })
+                        .map(newDep => {
+                            const existingDep = allExistingDeps.find(existing =>
+                                existing.groupId === newDep.groupId &&
+                                existing.artifact === newDep.artifact &&
+                                existing.version === newDep.version
+                            );
+                            return existingDep;
+                        })
+                        .filter((dep): dep is NonNullable<typeof dep> => dep !== undefined);
+
+                    if (dependenciesToRemove.length > 0) {
+                        reloadDependenciesResult = false;
+                        const newDep = params.newDependencies[0];
+                        const dependencyString = `${newDep.groupId}-${newDep.artifact}-${newDep.version}`;
+                        
+                        let warningMessage = "";
+                        if (connectorsNotDownloaded.includes(dependencyString)) {
+                            warningMessage = "Connector downloading failed.";
+                        } else if (unavailableDependencies.includes(dependencyString)) {
+                            warningMessage = "Dependency downloading failed.";
+                        } else if (missingDescriptorDependencies.includes(dependencyString)) {
+                            warningMessage = "The dependency does not contain the descriptor file.";
+                        } else if (versioningMismatchDependencies.includes(dependencyString)) {
+                            warningMessage = "Versioned deployment status is different from the parent project.";
+                        } else {
+                            warningMessage = "The dependency could not be downloaded.";
+                        }
+                        
+                        await window.showWarningMessage(
+                            warningMessage,
+                            { modal: true }
+                        );
+
+                        await this.updatePomValues({
+                            pomValues: dependenciesToRemove.map(dep => ({ range: dep.range, value: '' }))
+                        });
+                    }
+                }
             }
-            await extractCAppDependenciesAsProjects(this.projectUri);
-            const loadResult = await langClient?.loadDependentCAppResources();
-            if (loadResult.startsWith("DUPLICATE ARTIFACTS")) {
-                await window.showWarningMessage(
-                    loadResult,
-                    { modal: true }
-                );
+            
+            try {
+                await extractCAppDependenciesAsProjects(this.projectUri);
+                const loadResult = await langClient?.loadDependentCAppResources();
+                if (loadResult.startsWith("DUPLICATE ARTIFACTS")) {
+                    await window.showWarningMessage(
+                        loadResult,
+                        { modal: true }
+                    );
+                }
+            } catch (error) {
+                console.error("Error extracting CApp dependencies:", error);
             }
-            resolve(true);
+            resolve(reloadDependenciesResult);
         });
     }
 
@@ -255,6 +365,14 @@ export class MiVisualizerRpcManager implements MIVisualizerAPI {
         });
     }
 
+    async getDependencyStatusList(): Promise<DependencyStatusResponse> {
+        return new Promise(async (resolve) => {
+            const langClient = getStateMachine(this.projectUri).context().langClient!;
+            const res = await langClient.getDependencyStatusList();
+            resolve(res);
+        });
+    }
+
     async updatePomValues(params: UpdatePomValuesRequest): Promise<boolean> {
         return new Promise(async (resolve) => {
             const textEdits = params.pomValues.map((pomValue) => {
@@ -307,6 +425,7 @@ export class MiVisualizerRpcManager implements MIVisualizerAPI {
         return new Promise(async (resolve) => {
             const langClient = getStateMachine(this.projectUri).context().langClient!;
             const res = await langClient.updateConnectorDependencies();
+            await extractCAppDependenciesAsProjects(this.projectUri);
             resolve(res);
         });
     }
diff --git a/workspaces/mi/mi-extension/src/stateMachine.ts b/workspaces/mi/mi-extension/src/stateMachine.ts
index b4b46012533..765a408a093 100644
--- a/workspaces/mi/mi-extension/src/stateMachine.ts
+++ b/workspaces/mi/mi-extension/src/stateMachine.ts
@@ -35,6 +35,7 @@ const fs = require('fs');
 
 interface MachineContext extends VisualizerLocation {
     langClient: ExtendedLanguageClient | null;
+    dependenciesResolved?: boolean;
 }
 
 const stateMachine = createMachine<MachineContext>({
@@ -46,7 +47,8 @@ const stateMachine = createMachine<MachineContext>({
         projectUri: "",
         langClient: null,
         errors: [],
-        view: MACHINE_VIEW.Welcome
+        view: MACHINE_VIEW.Welcome,
+        dependenciesResolved: false
     },
     states: {
         initialize: {
@@ -205,8 +207,27 @@ const stateMachine = createMachine<MachineContext>({
                     entry: () => log("State Machine: Entering 'ready.viewLoading' state"),
                     invoke: {
                         src: 'openWebPanel',
+                        onDone: [
+                            {
+                                target: "resolveMissingDependencies",
+                                cond: (context) => !context.dependenciesResolved
+                            },
+                            {
+                                target: "viewFinding",
+                                cond: (context) => !!context.dependenciesResolved
+                            }
+                        ]
+                    }
+                },
+                resolveMissingDependencies: {
+                    entry: () => log("State Machine: Entering 'ready.resolveMissingDependencies' state"),
+                    invoke: {
+                        src: 'resolveMissingDependencies',
                         onDone: {
-                            target: 'viewFinding'
+                            target: 'viewFinding',
+                            actions: assign({
+                                dependenciesResolved: true
+                            })
                         }
                     }
                 },
@@ -428,6 +449,20 @@ const stateMachine = createMachine<MachineContext>({
                 }
             });
         },
+        resolveMissingDependencies: (context, event) => {
+            return new Promise(async (resolve, reject) => {
+                if (!context?.projectUri) {
+                    return reject(new Error("Project URI is not defined"));
+                }
+
+                const messenger = RPCLayer._messengers.get(context.projectUri);
+                if (messenger) {
+                    messenger.onNotification(webviewReady, () => {
+                        resolve(true);
+                    });
+                }
+            });
+        },
         findView: (context, event): Promise<VisualizerLocation> => {
             return new Promise(async (resolve, reject) => {
                 const langClient = context.langClient!;
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/del1.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/del1.ts
index b1dc7c447a3..a271b972704 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/del1.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/del1.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /*
 * title : "root",
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/del2.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/del2.ts
index 7a2003bcdfd..56455e9b60e 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/del2.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/del2.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /*
 * title : "root",
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/init1.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/init1.ts
index 16b4d0770ac..c1764f629b9 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/init1.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/init1.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /*
 * title : "root",
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/init2.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/init2.ts
index f0000ed30c1..51e60499b34 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/init2.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/init2.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /*
 * title : "root",
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/map1.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/map1.ts
index 96831659a3c..a6605e9e368 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/map1.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/map1.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /*
 * title : "root",
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/map2.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/map2.ts
index d3511ffa201..deee1378319 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/map2.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/array/map2.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /*
 * title : "root",
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/del.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/del.ts
index c5394a052d1..c8f18ec3b65 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/del.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/del.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /*
 * title : "root",
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/init.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/init.ts
index aec2ac64d1c..3547d10f233 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/init.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/init.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /*
 * title : "root",
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/map.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/map.ts
index 1f791731295..f2e75a77c89 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/map.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/basic/map.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /*
 * title : "root",
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/reset.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/reset.ts
index ea223d139ce..04c2e5f9e46 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/reset.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/reset.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /**
 * inputType:unknown
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/schemas/xml-csv.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/schemas/xml-csv.ts
index 93b081c3201..5e5f03d1e1f 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/schemas/xml-csv.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/schemas/xml-csv.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /*
 * title : "root",
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/schemas/xsd-csv.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/schemas/xsd-csv.ts
index 73e9388361e..bd61a49a296 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/schemas/xsd-csv.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/data/datamapper-files/schemas/xsd-csv.ts
@@ -1,4 +1,5 @@
 import * as dmUtils from "./dm-utils";
+declare var DM_PROPERTIES: any;
 
 /*
 * title : "root",
diff --git a/workspaces/mi/mi-extension/src/util/importCapp.ts b/workspaces/mi/mi-extension/src/util/importCapp.ts
index f56974908c1..5743f3dee8e 100644
--- a/workspaces/mi/mi-extension/src/util/importCapp.ts
+++ b/workspaces/mi/mi-extension/src/util/importCapp.ts
@@ -89,7 +89,26 @@ export async function importCapp(params: ImportProjectRequest): Promise<ImportPr
     const extractFolderPath = path.join(directory, ".temp");
     await extractCapp(source, extractFolderPath);
 
-    let { projectName, groupId, artifactId, version } = getProjectDetails(path.basename(source));
+    let projectName, groupId, artifactId, version;
+
+    const descriptorPath = path.join(extractFolderPath, "descriptor.xml");
+
+    if (fs.existsSync(descriptorPath)) {
+        // Read details from descriptor.xml
+        const descriptorContent = fs.readFileSync(descriptorPath, "utf-8");
+        const descriptorInfo = xmlParser.parse(descriptorContent);
+        const id = descriptorInfo["project"]["id"];
+        const idMatch = id.match(/^(.+?)__(.+?)__(\d+(?:\.\d+){0,2}(?:-[\w\d]+)?)$/);
+
+        groupId = idMatch ? idMatch[1] : undefined;
+        projectName = idMatch ? idMatch[2] : undefined;
+        artifactId = projectName;
+        version = idMatch ? idMatch[3] : undefined;
+    }
+    if (!projectName || !groupId || !artifactId || !version) {
+        console.log("Could not find project details in descriptor.xml. Falling back to the file name.");
+        ({ projectName, groupId, artifactId, version } = getProjectDetails(path.basename(source)));
+    }
 
     if (projectName && groupId && artifactId && version) {
         const folderStructure: FileStructure = {
diff --git a/workspaces/mi/mi-extension/src/util/onboardingUtils.ts b/workspaces/mi/mi-extension/src/util/onboardingUtils.ts
index 7b0972dd812..53d6908c574 100644
--- a/workspaces/mi/mi-extension/src/util/onboardingUtils.ts
+++ b/workspaces/mi/mi-extension/src/util/onboardingUtils.ts
@@ -35,6 +35,7 @@ import { XMLParser, XMLBuilder } from "fast-xml-parser";
 const AdmZip = require('adm-zip');
 // Add Latest MI version as the first element in the array
 export const supportedJavaVersionsForMI: { [key: string]: string } = {
+    '4.5.0': '21',
     '4.4.0': '21',
     '4.3.0': '17',
     '4.2.0': '17',
@@ -43,6 +44,7 @@ export const supportedJavaVersionsForMI: { [key: string]: string } = {
 export const LATEST_MI_VERSION = "4.4.0";
 const COMPATIBLE_JDK_VERSION = "11";
 const miDownloadUrls: { [key: string]: string } = {
+    '4.5.0': 'https://mi-distribution.wso2.com/4.5.0/wso2mi-4.5.0.zip',
     '4.4.0-UPDATED': 'https://mi-distribution.wso2.com/4.4.0/wso2mi-4.4.0-UPDATED.zip',
     '4.4.0': 'https://mi-distribution.wso2.com/4.4.0/wso2mi-4.4.0.zip',
     '4.3.0': 'https://mi-distribution.wso2.com/4.3.0/wso2mi-4.3.0.zip'
@@ -88,8 +90,8 @@ export async function setupEnvironment(projectUri: string, isOldProject: boolean
             await updateCarPluginVersion(projectUri);
             const config = vscode.workspace.getConfiguration('MI', vscode.Uri.parse(projectUri));
             const currentState = config.inspect<string>("useLocalMaven");
-            if (currentState?.workspaceValue === undefined) {
-                config.update("useLocalMaven", currentState?.globalValue ?? false, vscode.ConfigurationTarget.Workspace);
+            if (currentState?.workspaceFolderValue === undefined) {
+                config.update("useLocalMaven", currentState?.globalValue ?? false, vscode.ConfigurationTarget.WorkspaceFolder);
             }
             return !isUpdateRequested;
         }
@@ -176,15 +178,12 @@ export function filterConnectorVersion(connectorName: string, connectors: any[]
     return '';
 }
 
-export function generateInitialDependencies(httpConnectorVersion: string): string {
-    if (!httpConnectorVersion || httpConnectorVersion === '') {
-        return '';
-    }
+export function generateInitialDependencies(): string {
     return `<dependencies>
         <dependency>
             <groupId>org.wso2.integration.connector</groupId>
             <artifactId>mi-connector-http</artifactId>
-            <version>${httpConnectorVersion}</version>
+            <version>0.1.14</version>
             <type>zip</type>
             <exclusions>
                 <exclusion>
diff --git a/workspaces/mi/mi-extension/src/util/template-engine/mustach-templates/Template.ts b/workspaces/mi/mi-extension/src/util/template-engine/mustach-templates/Template.ts
index db1bc763bfb..a87f285039c 100644
--- a/workspaces/mi/mi-extension/src/util/template-engine/mustach-templates/Template.ts
+++ b/workspaces/mi/mi-extension/src/util/template-engine/mustach-templates/Template.ts
@@ -65,7 +65,8 @@ export function getTemplateMustacheTemplate() {
 export const getEditTemplates = () => {
     return `<?xml version="1.0" encoding="UTF-8"?>
     <template name="{{templateName}}" xmlns="http://ws.apache.org/ns/synapse">
-        {{#params}}<parameter {{#default}}defaultValue="{{default}}"{{/default}} isMandatory="{{isMandatory}}" name="{{name}}"/>{{/params}}`;
+        {{#params}}<parameter {{#default}}defaultValue="{{default}}"{{/default}} isMandatory="{{isMandatory}}" name="{{name}}"/>{{/params}}
+         <sequence {{#stats}}statistics="enable"{{/stats}} {{#trace}}trace="enable"{{/trace}}>`;
 }
 
 
diff --git a/workspaces/mi/mi-extension/src/util/templates.ts b/workspaces/mi/mi-extension/src/util/templates.ts
index 46a2d0446b2..e6230be87f7 100644
--- a/workspaces/mi/mi-extension/src/util/templates.ts
+++ b/workspaces/mi/mi-extension/src/util/templates.ts
@@ -16,6 +16,9 @@
  * under the License.
  */
 
+import { RUNTIME_VERSION_450 } from "../constants";
+import { compareVersions } from "./onboardingUtils";
+
 export function escapeXml(text: string) {
 
   return String(text)
@@ -25,40 +28,83 @@ export function escapeXml(text: string) {
     .replace(/"/g, '&quot;');
 };
 
-export const LATEST_CAR_PLUGIN_VERSION = "5.4.8";
+export const LATEST_CAR_PLUGIN_VERSION = "5.4.11";
 
-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"
-    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
-  <modelVersion>4.0.0</modelVersion>
-  <groupId>${groupID}</groupId>
-  <artifactId>${artifactID}</artifactId>
-  <version>${version}</version>
-  <packaging>pom</packaging>
-  <name>${projectName}</name>
-  <description>${projectName}</description>
-  <repositories>
-    <repository>
-        <id>wso2-nexus</id>
-        <name>WSO2 internal Repository</name>
-        <url>https://maven.wso2.org/nexus/content/groups/wso2-public/</url>
-        <releases>
-          <enabled>true</enabled>
-          <updatePolicy>daily</updatePolicy>
-          <checksumPolicy>ignore</checksumPolicy>
-        </releases>
-    </repository>
-    <repository>
-        <id>wso2.releases</id>
-        <name>WSO2 internal Repository</name>
-        <url>https://maven.wso2.org/nexus/content/repositories/releases/</url>
-        <releases>
-          <enabled>true</enabled>
-          <updatePolicy>daily</updatePolicy>
-          <checksumPolicy>ignore</checksumPolicy>
-        </releases>
-    </repository>
-    <repository>
+export const rootPomXmlContent = (projectName: string, groupID: string, artifactID: string, projectUuid: string, version: string, miVersion: string, initialDependencies: string) => {
+  const addDeploymentType = compareVersions(miVersion, RUNTIME_VERSION_450) >= 0;
+  const indent = addDeploymentType ? "      " : "  ";
+  let properties = `${indent}<projectType>integration-project</projectType>
+      <uuid>${projectUuid}</uuid>
+      <!-- <archiveLocation>configure a custom target directory for CAPP</archiveLocation> -->
+      <keystore.type>JKS</keystore.type>
+      <keystore.name>wso2carbon.jks</keystore.name>
+      <keystore.password>wso2carbon</keystore.password>
+      <keystore.alias>wso2carbon</keystore.alias>
+      <fat.car.enable>false</fat.car.enable>
+      <ciphertool.enable>true</ciphertool.enable>
+      <maven.compiler.source>1.8</maven.compiler.source>
+      <maven.compiler.target>1.8</maven.compiler.target>
+      <project.scm.id>integration-project</project.scm.id>
+      <project.runtime.version>${miVersion}</project.runtime.version>
+      <dockerfile.base.image>wso2/wso2mi:\${project.runtime.version}</dockerfile.base.image>
+      <car.plugin.version>${LATEST_CAR_PLUGIN_VERSION}</car.plugin.version>
+      <test.server.type>local</test.server.type>
+      <test.server.host>localhost</test.server.host>
+      <test.server.port>9008</test.server.port>
+      <test.server.path>/</test.server.path>
+      <test.server.version>\${project.runtime.version}</test.server.version>
+      <testServerDownloadLink></testServerDownloadLink>
+      <maven.test.skip>false</maven.test.skip>
+      <testServerDownloadLink></testServerDownloadLink>`;
+  if (addDeploymentType) {
+    properties = `  <versionedDeployment>false</versionedDeployment>\n` + properties;
+  }
+  return `<?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"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+    <modelVersion>4.0.0</modelVersion>
+    <groupId>${groupID}</groupId>
+    <artifactId>${artifactID}</artifactId>
+    <version>${version}</version>
+    <packaging>pom</packaging>
+    <name>${projectName}</name>
+    <description>${projectName}</description>
+    <repositories>
+      <repository>
+          <id>wso2-nexus</id>
+          <name>WSO2 internal Repository</name>
+          <url>https://maven.wso2.org/nexus/content/groups/wso2-public/</url>
+          <releases>
+            <enabled>true</enabled>
+            <updatePolicy>daily</updatePolicy>
+            <checksumPolicy>ignore</checksumPolicy>
+          </releases>
+      </repository>
+      <repository>
+          <id>wso2.releases</id>
+          <name>WSO2 internal Repository</name>
+          <url>https://maven.wso2.org/nexus/content/repositories/releases/</url>
+          <releases>
+            <enabled>true</enabled>
+            <updatePolicy>daily</updatePolicy>
+            <checksumPolicy>ignore</checksumPolicy>
+          </releases>
+      </repository>
+      <repository>
+          <id>wso2.snapshots</id>
+          <name>Apache Snapshot Repository</name>
+          <url>https://maven.wso2.org/nexus/content/repositories/snapshots/</url>
+          <snapshots>
+            <enabled>true</enabled>
+            <updatePolicy>daily</updatePolicy>
+          </snapshots>
+          <releases>
+            <enabled>false</enabled>
+          </releases>
+      </repository>
+    </repositories>
+    <pluginRepositories>
+      <pluginRepository>
         <id>wso2.snapshots</id>
         <name>Apache Snapshot Repository</name>
         <url>https://maven.wso2.org/nexus/content/repositories/snapshots/</url>
@@ -69,373 +115,339 @@ export const rootPomXmlContent = (projectName: string, groupID: string, artifact
         <releases>
           <enabled>false</enabled>
         </releases>
-    </repository>
-  </repositories>
-  <pluginRepositories>
-    <pluginRepository>
-      <id>wso2.snapshots</id>
-      <name>Apache Snapshot Repository</name>
-      <url>https://maven.wso2.org/nexus/content/repositories/snapshots/</url>
-      <snapshots>
-        <enabled>true</enabled>
-        <updatePolicy>daily</updatePolicy>
-      </snapshots>
-      <releases>
-        <enabled>false</enabled>
-      </releases>
-    </pluginRepository>
-    <pluginRepository>
-      <releases>
-        <enabled>true</enabled>
-        <updatePolicy>daily</updatePolicy>
-        <checksumPolicy>ignore</checksumPolicy>
-      </releases>
-      <id>wso2-nexus</id>
-      <url>https://maven.wso2.org/nexus/content/groups/wso2-public/</url>
-    </pluginRepository>
-  </pluginRepositories>
-  <profiles>
-    <profile>
-      <id>default</id>
-      <activation>
-        <activeByDefault>true</activeByDefault>
-      </activation>
-      <build>
-        <plugins>
-          <!-- Download dependency jars to the deployment/libs folder -->
-          <plugin>
-            <groupId>org.apache.maven.plugins</groupId>
-            <artifactId>maven-dependency-plugin</artifactId>
-            <version>3.5.0</version>
-            <executions>
-              <execution>
-                <phase>process-resources</phase>
-                <goals>
-                  <goal>copy-dependencies</goal>
-                </goals>
-                <configuration>
-                  <outputDirectory>\${basedir}/deployment/libs</outputDirectory>
-                  <excludeTransitive>true</excludeTransitive>
-                  <!-- exclude dependencies which already available in MI -->
-                  <excludeGroupIds>org.apache.synapse,org.apache.axis2</excludeGroupIds>
-                  <excludeTypes>zip,car</excludeTypes>
-                </configuration>
-              </execution>
-            </executions>
-          </plugin>
-          <plugin>
-            <groupId>org.apache.maven.plugins</groupId>
-            <artifactId>maven-compiler-plugin</artifactId>
-            <configuration>
-              <source>1.8</source>
-              <target>1.8</target>
-            </configuration>
-          </plugin>
-          <plugin>
-            <groupId>org.apache.maven.plugins</groupId>
-            <artifactId>maven-jar-plugin</artifactId>
-            <configuration>
-              <skipIfEmpty>true</skipIfEmpty>
-            </configuration>
-            <executions>
-              <execution>
-                <phase>compile</phase>
-                <id>default-jar</id>
-                <goals>
-                  <goal>jar</goal>
-                </goals>
-              </execution>
-            </executions>
-          </plugin>
-          <plugin>
-            <groupId>org.wso2.maven</groupId>
-            <artifactId>vscode-car-plugin</artifactId>
-            <version>\${car.plugin.version}</version>
-            <extensions>true</extensions>
-            <executions>
-              <execution>
-                <phase>compile</phase>
-                <goals>
-                  <goal>car</goal>
-                </goals>
-                <configuration/>
-              </execution>
-            </executions>
-          </plugin>
-          <plugin>
-            <groupId>org.apache.maven.plugins</groupId>
-            <artifactId>maven-install-plugin</artifactId>
-            <version>2.5.2</version>
-            <executions>
-              <execution>
-                <id>install-car</id>
-                <phase>compile</phase>
-                <goals>
-                  <goal>install-file</goal>
-                </goals>
-                <configuration>
-                  <packaging>car</packaging>
-                  <artifactId>\${project.artifactId}</artifactId>
-                  <groupId>\${project.groupId}</groupId>
-                  <version>\${project.version}</version>
-                  <file>\${project.build.directory}/\${project.artifactId}_\${project.version}.car</file>
-                  <!-- Use the following configuration when archiveLocation is configured -->
-                  <!-- <file>\${archiveLocation}/\${project.artifactId}_\${project.version}.car</file> -->
-                </configuration>
-              </execution>
-            </executions>
-          </plugin>
-        </plugins>
-      </build>
-      <properties>
-        <server.type>\${test.server.type}</server.type>
-        <server.host>\${test.server.host}</server.host>
-        <server.port>\${test.server.port}</server.port>
-        <server.path>\${test.server.path}</server.path>
-        <server.version>\${test.server.version}</server.version>
-        <server.download.link>\${test.server.download.link}</server.download.link>
-      </properties>
-    </profile>
-    <profile>
-      <id>test</id>
-      <build/>
-      <properties>
-        <server.type>\${testServerType}</server.type>
-        <server.host>\${testServerHost}</server.host>
-        <server.port>\${testServerPort}</server.port>
-        <server.path>\${testServerPath}</server.path>
-      </properties>
-    </profile>
-    <profile>
-      <id>docker</id>
-      <build>
-        <plugins>
-            <!-- Compile and build the class mediator jars -->
+      </pluginRepository>
+      <pluginRepository>
+        <releases>
+          <enabled>true</enabled>
+          <updatePolicy>daily</updatePolicy>
+          <checksumPolicy>ignore</checksumPolicy>
+        </releases>
+        <id>wso2-nexus</id>
+        <url>https://maven.wso2.org/nexus/content/groups/wso2-public/</url>
+      </pluginRepository>
+    </pluginRepositories>
+    <profiles>
+      <profile>
+        <id>default</id>
+        <activation>
+          <activeByDefault>true</activeByDefault>
+        </activation>
+        <build>
+          <plugins>
+            <!-- Download dependency jars to the deployment/libs folder -->
+            <plugin>
+              <groupId>org.apache.maven.plugins</groupId>
+              <artifactId>maven-dependency-plugin</artifactId>
+              <version>3.5.0</version>
+              <executions>
+                <execution>
+                  <phase>process-resources</phase>
+                  <goals>
+                    <goal>copy-dependencies</goal>
+                  </goals>
+                  <configuration>
+                    <outputDirectory>\${basedir}/deployment/libs</outputDirectory>
+                    <excludeTransitive>true</excludeTransitive>
+                    <!-- exclude dependencies which already available in MI -->
+                    <excludeGroupIds>org.apache.synapse,org.apache.axis2</excludeGroupIds>
+                    <excludeTypes>zip,car</excludeTypes>
+                  </configuration>
+                </execution>
+              </executions>
+            </plugin>
+            <plugin>
+              <groupId>org.apache.maven.plugins</groupId>
+              <artifactId>maven-compiler-plugin</artifactId>
+              <configuration>
+                <source>1.8</source>
+                <target>1.8</target>
+              </configuration>
+            </plugin>
+            <plugin>
+              <groupId>org.apache.maven.plugins</groupId>
+              <artifactId>maven-jar-plugin</artifactId>
+              <configuration>
+                <skipIfEmpty>true</skipIfEmpty>
+              </configuration>
+              <executions>
+                <execution>
+                  <phase>compile</phase>
+                  <id>default-jar</id>
+                  <goals>
+                    <goal>jar</goal>
+                  </goals>
+                </execution>
+              </executions>
+            </plugin>
+            <plugin>
+              <groupId>org.wso2.maven</groupId>
+              <artifactId>vscode-car-plugin</artifactId>
+              <version>\${car.plugin.version}</version>
+              <extensions>true</extensions>
+              <executions>
+                <execution>
+                  <phase>compile</phase>
+                  <goals>
+                    <goal>car</goal>
+                  </goals>
+                  <configuration/>
+                </execution>
+              </executions>
+            </plugin>
+            <plugin>
+              <groupId>org.apache.maven.plugins</groupId>
+              <artifactId>maven-install-plugin</artifactId>
+              <version>2.5.2</version>
+              <executions>
+                <execution>
+                  <id>install-car</id>
+                  <phase>compile</phase>
+                  <goals>
+                    <goal>install-file</goal>
+                  </goals>
+                  <configuration>
+                    <packaging>car</packaging>
+                    <artifactId>\${project.artifactId}</artifactId>
+                    <groupId>\${project.groupId}</groupId>
+                    <version>\${project.version}</version>
+                    <file>\${project.build.directory}/\${project.artifactId}_\${project.version}.car</file>
+                    <!-- Use the following configuration when archiveLocation is configured -->
+                    <!-- <file>\${archiveLocation}/\${project.artifactId}_\${project.version}.car</file> -->
+                  </configuration>
+                </execution>
+              </executions>
+            </plugin>
+          </plugins>
+        </build>
+        <properties>
+          <server.type>\${test.server.type}</server.type>
+          <server.host>\${test.server.host}</server.host>
+          <server.port>\${test.server.port}</server.port>
+          <server.path>\${test.server.path}</server.path>
+          <server.version>\${test.server.version}</server.version>
+          <server.download.link>\${test.server.download.link}</server.download.link>
+        </properties>
+      </profile>
+      <profile>
+        <id>test</id>
+        <build/>
+        <properties>
+          <server.type>\${testServerType}</server.type>
+          <server.host>\${testServerHost}</server.host>
+          <server.port>\${testServerPort}</server.port>
+          <server.path>\${testServerPath}</server.path>
+        </properties>
+      </profile>
+      <profile>
+        <id>docker</id>
+        <build>
+          <plugins>
+              <!-- Compile and build the class mediator jars -->
+              <plugin>
+              <groupId>org.apache.maven.plugins</groupId>
+              <artifactId>maven-compiler-plugin</artifactId>
+              <executions>
+                <execution>
+                  <id>default-compile</id>
+                  <phase>generate-sources</phase>
+                  <goals>
+                    <goal>compile</goal>
+                  </goals>
+                </execution>
+              </executions>
+              <configuration>
+                <source>1.8</source>
+                <target>1.8</target>
+              </configuration>
+            </plugin>
+            <plugin>
+              <groupId>org.apache.maven.plugins</groupId>
+              <artifactId>maven-jar-plugin</artifactId>
+              <configuration>
+                <skipIfEmpty>true</skipIfEmpty>
+              </configuration>
+              <executions>
+                <execution>
+                  <id>default-jar</id>
+                  <phase>generate-sources</phase>
+                  <goals>
+                    <goal>jar</goal>
+                  </goals>
+                </execution>
+              </executions>
+            </plugin>
+            <!-- Build the Carbon Application -->
+            <plugin>
+              <groupId>org.wso2.maven</groupId>
+              <artifactId>vscode-car-plugin</artifactId>
+              <version>\${car.plugin.version}</version>
+              <extensions>true</extensions>
+              <executions>
+                <execution>
+                  <phase>generate-sources</phase>
+                  <goals>
+                    <goal>car</goal>
+                  </goals>
+                  <configuration></configuration>
+                </execution>
+              </executions>
+            </plugin>
+            <!-- Download dependency jars to the deployment/libs folder -->
+            <plugin>
+              <groupId>org.apache.maven.plugins</groupId>
+              <artifactId>maven-dependency-plugin</artifactId>
+              <version>3.5.0</version>
+              <executions>
+                <execution>
+                  <phase>process-resources</phase>
+                  <goals>
+                    <goal>copy-dependencies</goal>
+                  </goals>
+                  <configuration>
+                    <outputDirectory>\${basedir}/deployment/libs</outputDirectory>
+                    <excludeTransitive>true</excludeTransitive>
+                    <!-- exclude dependencies which already available in MI -->
+                    <excludeGroupIds>org.apache.synapse,org.apache.axis2</excludeGroupIds>
+                    <excludeTypes>zip</excludeTypes>
+                  </configuration>
+                </execution>
+              </executions>
+            </plugin>
+            <!-- Run config mapper to transform configuration files -->
+            <plugin>
+              <groupId>org.wso2.maven</groupId>
+              <artifactId>mi-container-config-mapper</artifactId>
+              <version>5.2.82</version>
+              <extensions>true</extensions>
+              <executions>
+                <execution>
+                  <id>config-mapper-parser</id>
+                  <phase>generate-resources</phase>
+                  <goals>
+                    <goal>config-mapper-parser</goal>
+                  </goals>
+                  <configuration>
+                    <miVersion>\${project.runtime.version}</miVersion>
+                    <executeCipherTool>\${ciphertool.enable}</executeCipherTool>
+                    <keystoreName>\${keystore.name}</keystoreName>
+                    <keystoreAlias>\${keystore.alias}</keystoreAlias>
+                    <keystoreType>\${keystore.type}</keystoreType>
+                    <keystorePassword>\${keystore.password}</keystorePassword>
+                    <projectLocation>\${project.basedir}</projectLocation>
+                  </configuration>
+                </execution>
+              </executions>
+              <configuration/>
+            </plugin>
+            <plugin>
+              <artifactId>maven-antrun-plugin</artifactId>
+              <version>3.0.0</version>
+              <extensions>true</extensions>
+              <executions>
+                <execution>
+                  <id>antrun-edit</id>
+                  <phase>process-resources</phase>
+                  <goals>
+                    <goal>run</goal>
+                  </goals>
+                  <configuration>
+                    <target>
+                      <copy todir="\${basedir}/target/tmp_docker/CompositeApps">
+                        <fileset dir="\${basedir}/target">
+                          <include name="*.car"/>
+                        </fileset>
+                      </copy>
+                    </target>
+                  </configuration>
+                </execution>
+              </executions>
+              <configuration/>
+            </plugin>
+            <!-- Build docker image -->
             <plugin>
-            <groupId>org.apache.maven.plugins</groupId>
-            <artifactId>maven-compiler-plugin</artifactId>
-            <executions>
-              <execution>
-                <id>default-compile</id>
-                <phase>generate-sources</phase>
-                <goals>
-                  <goal>compile</goal>
-                </goals>
-              </execution>
-            </executions>
-            <configuration>
-              <source>1.8</source>
-              <target>1.8</target>
-            </configuration>
-          </plugin>
-          <plugin>
-            <groupId>org.apache.maven.plugins</groupId>
-            <artifactId>maven-jar-plugin</artifactId>
-            <configuration>
-              <skipIfEmpty>true</skipIfEmpty>
-            </configuration>
-            <executions>
-              <execution>
-                <id>default-jar</id>
-                <phase>generate-sources</phase>
-                <goals>
-                  <goal>jar</goal>
-                </goals>
-              </execution>
-            </executions>
-          </plugin>
-          <!-- Build the Carbon Application -->
-          <plugin>
-            <groupId>org.wso2.maven</groupId>
-            <artifactId>vscode-car-plugin</artifactId>
-            <version>\${car.plugin.version}</version>
-            <extensions>true</extensions>
-            <executions>
-              <execution>
-                <phase>generate-sources</phase>
-                <goals>
-                  <goal>car</goal>
-                </goals>
-                <configuration></configuration>
-              </execution>
-            </executions>
-          </plugin>
-          <!-- Download dependency jars to the deployment/libs folder -->
-          <plugin>
-            <groupId>org.apache.maven.plugins</groupId>
-            <artifactId>maven-dependency-plugin</artifactId>
-            <version>3.5.0</version>
-            <executions>
-              <execution>
-                <phase>process-resources</phase>
-                <goals>
-                  <goal>copy-dependencies</goal>
-                </goals>
-                <configuration>
-                  <outputDirectory>\${basedir}/deployment/libs</outputDirectory>
-                  <excludeTransitive>true</excludeTransitive>
-                  <!-- exclude dependencies which already available in MI -->
-                  <excludeGroupIds>org.apache.synapse,org.apache.axis2</excludeGroupIds>
-                  <excludeTypes>zip</excludeTypes>
-                </configuration>
-              </execution>
-            </executions>
-          </plugin>
-          <!-- Run config mapper to transform configuration files -->
-          <plugin>
-            <groupId>org.wso2.maven</groupId>
-            <artifactId>mi-container-config-mapper</artifactId>
-            <version>5.2.82</version>
-            <extensions>true</extensions>
-            <executions>
-              <execution>
-                <id>config-mapper-parser</id>
-                <phase>generate-resources</phase>
-                <goals>
-                  <goal>config-mapper-parser</goal>
-                </goals>
-                <configuration>
-                  <miVersion>\${project.runtime.version}</miVersion>
-                  <executeCipherTool>\${ciphertool.enable}</executeCipherTool>
-                  <keystoreName>\${keystore.name}</keystoreName>
-                  <keystoreAlias>\${keystore.alias}</keystoreAlias>
-                  <keystoreType>\${keystore.type}</keystoreType>
-                  <keystorePassword>\${keystore.password}</keystorePassword>
-                  <projectLocation>\${project.basedir}</projectLocation>
-                </configuration>
-              </execution>
-            </executions>
-            <configuration/>
-          </plugin>
-          <plugin>
-            <artifactId>maven-antrun-plugin</artifactId>
-            <version>3.0.0</version>
-            <extensions>true</extensions>
-            <executions>
-              <execution>
-                <id>antrun-edit</id>
-                <phase>process-resources</phase>
-                <goals>
-                  <goal>run</goal>
-                </goals>
-                <configuration>
-                  <target>
-                    <copy todir="\${basedir}/target/tmp_docker/CompositeApps">
-                      <fileset dir="\${basedir}/target">
-                        <include name="*.car"/>
-                      </fileset>
-                    </copy>
-                  </target>
-                </configuration>
-              </execution>
-            </executions>
-            <configuration/>
-          </plugin>
-          <!-- Build docker image -->
-          <plugin>
-            <groupId>io.fabric8</groupId>
-            <artifactId>docker-maven-plugin</artifactId>
-            <version>0.45.0</version>
-            <extensions>true</extensions>
-            <executions>
-              <execution>
-                <id>docker-build</id>
-                <phase>package</phase>
-                <goals>
-                  <goal>build</goal>
-                </goals>
-                <configuration>
-                  <images>
-                    <image>
-                      <name>\${project.artifactId}:\${project.version}</name>
-                      <build>
-                        <from>\${dockerfile.base.image}</from>
-                        <dockerFile>\${basedir}/target/tmp_docker/Dockerfile</dockerFile>
-                        <args>
-                          <BASE_IMAGE>\${dockerfile.base.image}</BASE_IMAGE>
-                        </args>
-                        <useDefaultExcludes>false</useDefaultExcludes>
-                      </build>
-                    </image>
-                  </images>
-                  <authConfig>
-                    <username>\${dockerfile.pull.username}</username>
-                    <password>\${dockerfile.pull.password}</password>
-                  </authConfig>
-                  <verbose>true</verbose>
-                </configuration>
-              </execution>
-            </executions>
-            <configuration/>
-          </plugin>
-        </plugins>
-      </build>
-      <properties>
-        <server.type>\${test.server.type}</server.type>
-        <server.host>\${test.server.host}</server.host>
-        <server.port>\${test.server.port}</server.port>
-        <server.path>\${test.server.path}</server.path>
-        <server.version>\${test.server.version}</server.version>
-        <server.download.link>\${test.server.download.link}</server.download.link>
-      </properties>
-    </profile>
-  </profiles>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.wso2.maven</groupId>
-        <artifactId>synapse-unit-test-maven-plugin</artifactId>
-        <version>5.2.109</version>
-        <executions>
-          <execution>
-            <id>synapse-unit-test</id>
-            <phase>test</phase>
-            <goals>
-              <goal>synapse-unit-test</goal>
-            </goals>
-          </execution>
-        </executions>
-        <configuration>
-          <server>
-            <testServerType>\${server.type}</testServerType>
-            <testServerHost>\${server.host}</testServerHost>
-            <testServerPort>\${server.port}</testServerPort>
-            <testServerPath>\${server.path}</testServerPath>
-            <testServerVersion>\${server.version}</testServerVersion>
-            <testServerDownloadLink>\${server.download.link}</testServerDownloadLink>
-          </server>
-          <testCasesFilePath>\${project.basedir}/src/test/wso2mi/\${testFile}</testCasesFilePath>
-          <mavenTestSkip>\${maven.test.skip}</mavenTestSkip>
-        </configuration>
-      </plugin>
-    </plugins>
-  </build>
-  <properties>
-    <projectType>integration-project</projectType>
-    <uuid>${projectUuid}</uuid>
-    <!-- <archiveLocation>configure a custom target directory for CAPP</archiveLocation> -->
-    <keystore.type>JKS</keystore.type>
-    <keystore.name>wso2carbon.jks</keystore.name>
-    <keystore.password>wso2carbon</keystore.password>
-    <keystore.alias>wso2carbon</keystore.alias>
-    <fat.car.enable>false</fat.car.enable>
-    <ciphertool.enable>true</ciphertool.enable>
-    <maven.compiler.source>1.8</maven.compiler.source>
-    <maven.compiler.target>1.8</maven.compiler.target>
-    <project.scm.id>integration-project</project.scm.id>
-    <project.runtime.version>${miVersion}</project.runtime.version>
-    <dockerfile.base.image>wso2/wso2mi:\${project.runtime.version}</dockerfile.base.image>
-    <car.plugin.version>${LATEST_CAR_PLUGIN_VERSION}</car.plugin.version>
-    <test.server.type>local</test.server.type>
-    <test.server.host>localhost</test.server.host>
-    <test.server.port>9008</test.server.port>
-    <test.server.path>/</test.server.path>
-    <test.server.version>\${project.runtime.version}</test.server.version>
-    <testServerDownloadLink></testServerDownloadLink>
-    <maven.test.skip>false</maven.test.skip>
-  </properties>
-  ${initialDependencies}
-</project>`;
+              <groupId>io.fabric8</groupId>
+              <artifactId>docker-maven-plugin</artifactId>
+              <version>0.45.0</version>
+              <extensions>true</extensions>
+              <executions>
+                <execution>
+                  <id>docker-build</id>
+                  <phase>package</phase>
+                  <goals>
+                    <goal>build</goal>
+                  </goals>
+                  <configuration>
+                    <images>
+                      <image>
+                        <name>\${project.artifactId}:\${project.version}</name>
+                        <build>
+                          <from>\${dockerfile.base.image}</from>
+                          <dockerFile>\${basedir}/target/tmp_docker/Dockerfile</dockerFile>
+                          <args>
+                            <BASE_IMAGE>\${dockerfile.base.image}</BASE_IMAGE>
+                          </args>
+                          <useDefaultExcludes>false</useDefaultExcludes>
+                        </build>
+                      </image>
+                    </images>
+                    <authConfig>
+                      <username>\${dockerfile.pull.username}</username>
+                      <password>\${dockerfile.pull.password}</password>
+                    </authConfig>
+                    <verbose>true</verbose>
+                  </configuration>
+                </execution>
+              </executions>
+              <configuration/>
+            </plugin>
+          </plugins>
+        </build>
+        <properties>
+          <server.type>\${test.server.type}</server.type>
+          <server.host>\${test.server.host}</server.host>
+          <server.port>\${test.server.port}</server.port>
+          <server.path>\${test.server.path}</server.path>
+          <server.version>\${test.server.version}</server.version>
+          <server.download.link>\${test.server.download.link}</server.download.link>
+        </properties>
+      </profile>
+    </profiles>
+    <build>
+      <plugins>
+        <plugin>
+          <groupId>org.wso2.maven</groupId>
+          <artifactId>synapse-unit-test-maven-plugin</artifactId>
+          <version>5.2.109</version>
+          <executions>
+            <execution>
+              <id>synapse-unit-test</id>
+              <phase>test</phase>
+              <goals>
+                <goal>synapse-unit-test</goal>
+              </goals>
+            </execution>
+          </executions>
+          <configuration>
+            <server>
+              <testServerType>\${server.type}</testServerType>
+              <testServerHost>\${server.host}</testServerHost>
+              <testServerPort>\${server.port}</testServerPort>
+              <testServerPath>\${server.path}</testServerPath>
+              <testServerVersion>\${server.version}</testServerVersion>
+              <testServerDownloadLink>\${server.download.link}</testServerDownloadLink>
+            </server>
+            <testCasesFilePath>\${project.basedir}/src/test/wso2mi/\${testFile}</testCasesFilePath>
+            <mavenTestSkip>\${maven.test.skip}</mavenTestSkip>
+          </configuration>
+        </plugin>
+      </plugins>
+    </build>
+    <properties>
+    ${properties}
+    </properties>
+    ${initialDependencies}
+  </project>`;
+}
 
 export const dockerfileContent = () => `ARG BASE_IMAGE
 FROM \${BASE_IMAGE}
diff --git a/workspaces/mi/mi-extension/src/util/tsBuilder.ts b/workspaces/mi/mi-extension/src/util/tsBuilder.ts
index eff2f565cfc..41fb1f5d07e 100644
--- a/workspaces/mi/mi-extension/src/util/tsBuilder.ts
+++ b/workspaces/mi/mi-extension/src/util/tsBuilder.ts
@@ -96,7 +96,7 @@ export async function updateTsFileIoTypes(dmName: string, sourcePath: string, sc
         return "";
       }
     }
-    tsContent += `import * as ${DM_OPERATORS_IMPORT_NAME} from "./${DM_OPERATORS_FILE_NAME}";\n\n`;
+    tsContent += `import * as ${DM_OPERATORS_IMPORT_NAME} from "./${DM_OPERATORS_FILE_NAME}";\ndeclare var DM_PROPERTIES: any;\n\n`;
     tsSources.forEach((source) => {
       tsContent += source.getFullText();
       tsContent += "\n\n";
diff --git a/workspaces/mi/mi-rpc-client/src/RpcClient.ts b/workspaces/mi/mi-rpc-client/src/RpcClient.ts
index 20453f0529e..11a3f7ead93 100644
--- a/workspaces/mi/mi-rpc-client/src/RpcClient.ts
+++ b/workspaces/mi/mi-rpc-client/src/RpcClient.ts
@@ -19,12 +19,13 @@
  */
 
 import { Messenger } from "vscode-messenger-webview";
-import { MachineStateValue, stateChanged, vscode, getVisualizerState, getAIVisualizerState, VisualizerLocation, AIVisualizerLocation, webviewReady, onFileContentUpdate, AI_EVENT_TYPE, sendAIStateEvent, AIMachineStateValue, aiStateChanged, themeChanged, ColorThemeKind, PopupMachineStateValue, popupStateChanged, PopupVisualizerLocation, getPopupVisualizerState, onParentPopupSubmitted, ParentPopupData, ConnectorStatus, onConnectorStatusUpdate, onDocumentSave, Document, SwaggerData, DownloadProgressData, onSwaggerSpecReceived, MiServerRunStatus, miServerRunStateChanged, onDownloadProgress  } from "@wso2/mi-core";
+import { MachineStateValue, stateChanged, vscode, getVisualizerState, getAIVisualizerState, VisualizerLocation, AIVisualizerLocation, webviewReady, onFileContentUpdate, AI_EVENT_TYPE, sendAIStateEvent, AIMachineStateValue, aiStateChanged, themeChanged, ColorThemeKind, PopupMachineStateValue, popupStateChanged, PopupVisualizerLocation, getPopupVisualizerState, onParentPopupSubmitted, ParentPopupData, ConnectorStatus, onConnectorStatusUpdate, onDocumentSave, Document, SwaggerData, DownloadProgressData, onSwaggerSpecReceived, MiServerRunStatus, miServerRunStateChanged, onDownloadProgress, codeGenerationEvent, CodeGenerationEvent  } from "@wso2/mi-core";
 import { MiDiagramRpcClient } from "./rpc-clients/mi-diagram/rpc-client";
 import { HOST_EXTENSION } from "vscode-messenger-common";
 import { MiVisualizerRpcClient } from "./rpc-clients/mi-visualizer/rpc-client";
 import { MiDataMapperRpcClient } from "./rpc-clients/mi-data-mapper/rpc-client";
 import { MiDebuggerRpcClient } from "./rpc-clients/mi-debugger/rpc-client";
+import { MiAiPanelRpcClient } from "./rpc-clients/ai-panel/rpc-client";
 
 export class RpcClient {
 
@@ -33,6 +34,7 @@ export class RpcClient {
     private _visualizer: MiVisualizerRpcClient;
     private _dataMapper: MiDataMapperRpcClient;
     private _debugger: MiDebuggerRpcClient;
+    private _aiPanel: MiAiPanelRpcClient;
 
     constructor() {
         this.messenger = new Messenger(vscode);
@@ -41,6 +43,7 @@ export class RpcClient {
         this._visualizer = new MiVisualizerRpcClient(this.messenger);
         this._dataMapper = new MiDataMapperRpcClient(this.messenger);
         this._debugger = new MiDebuggerRpcClient(this.messenger);
+        this._aiPanel = new MiAiPanelRpcClient(this.messenger);
     }
 
     getMiDiagramRpcClient(): MiDiagramRpcClient {
@@ -59,6 +62,10 @@ export class RpcClient {
         return this._debugger;
     }
 
+    getMiAiPanelRpcClient(): MiAiPanelRpcClient {
+        return this._aiPanel;
+    }
+
     onStateChanged(callback: (state: MachineStateValue) => void) {
         this.messenger.onNotification(stateChanged, callback);
     }
@@ -123,5 +130,9 @@ export class RpcClient {
     onDocumentSave(callback: (document: Document) => void) {
         this.messenger.onNotification(onDocumentSave, callback);
     }
+
+    onCodeGenerationEvent(callback: (event: CodeGenerationEvent) => void) {
+        this.messenger.onNotification(codeGenerationEvent, callback);
+    }
 }
 
diff --git a/workspaces/mi/mi-rpc-client/src/rpc-clients/ai-panel/index.ts b/workspaces/mi/mi-rpc-client/src/rpc-clients/ai-panel/index.ts
new file mode 100644
index 00000000000..a7f2d17b8ad
--- /dev/null
+++ b/workspaces/mi/mi-rpc-client/src/rpc-clients/ai-panel/index.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { MiAiPanelRpcClient } from "./rpc-client";
diff --git a/workspaces/mi/mi-rpc-client/src/rpc-clients/ai-panel/rpc-client.ts b/workspaces/mi/mi-rpc-client/src/rpc-clients/ai-panel/rpc-client.ts
new file mode 100644
index 00000000000..420f2a55ee5
--- /dev/null
+++ b/workspaces/mi/mi-rpc-client/src/rpc-clients/ai-panel/rpc-client.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 {
+    MIAIPanelAPI,
+    GetBackendRootUrlResponse,
+    getBackendRootUrl,
+    GenerateSuggestionsRequest,
+    GenerateSuggestionsResponse,
+    generateSuggestions,
+    GenerateCodeRequest,
+    GenerateCodeResponse,
+    generateCode,
+    AbortCodeGenerationResponse,
+    abortCodeGeneration,
+    setAnthropicApiKey,
+    hasAnthropicApiKey
+} from "@wso2/mi-core";
+import { HOST_EXTENSION } from "vscode-messenger-common";
+import { Messenger } from "vscode-messenger-webview";
+
+export class MiAiPanelRpcClient implements MIAIPanelAPI {
+    private _messenger: Messenger;
+
+    constructor(messenger: Messenger) {
+        this._messenger = messenger;
+    }
+
+    // ==================================
+    // General Functions
+    // ==================================
+    getBackendRootUrl(): Promise<GetBackendRootUrlResponse> {
+        return this._messenger.sendRequest(getBackendRootUrl, HOST_EXTENSION);
+    }
+
+    // ==================================
+    // AI Functions
+    // ==================================
+    generateSuggestions(request: GenerateSuggestionsRequest): Promise<GenerateSuggestionsResponse> {
+        return this._messenger.sendRequest(generateSuggestions, HOST_EXTENSION, request);
+    }
+
+    generateCode(request: GenerateCodeRequest): Promise<GenerateCodeResponse> {
+        return this._messenger.sendRequest(generateCode, HOST_EXTENSION, request);
+    }
+
+    abortCodeGeneration(): Promise<AbortCodeGenerationResponse> {
+        return this._messenger.sendRequest(abortCodeGeneration, HOST_EXTENSION);
+    }
+
+    // ==================================
+    // API Key Management
+    // ==================================
+    setAnthropicApiKey(): Promise<void> {
+        return this._messenger.sendRequest(setAnthropicApiKey, HOST_EXTENSION);
+    }
+
+    hasAnthropicApiKey(): Promise<boolean | undefined> {
+        return this._messenger.sendRequest(hasAnthropicApiKey, HOST_EXTENSION);
+    }
+}
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 3285df16a25..aff1b256526 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
@@ -433,9 +433,6 @@ import {
     buildBallerinaModule,
     DevantMetadata,
     getDevantMetadata,
-    GetCodeDiagnosticsReqeust,
-    GetCodeDiagnosticsResponse,
-    getCodeDiagnostics,
     UpdateMediatorResponse,
     GetConnectorIconRequest,
     GetConnectorIconResponse,
@@ -1152,10 +1149,6 @@ export class MiDiagramRpcClient implements MiDiagramAPI {
         return this._messenger.sendRequest(getEULALicense, HOST_EXTENSION);
     }
 
-    getCodeDiagnostics(params: GetCodeDiagnosticsReqeust): Promise<GetCodeDiagnosticsResponse> {
-        return this._messenger.sendRequest(getCodeDiagnostics, HOST_EXTENSION, params);
-    }
-
     shouldDisplayPayloadAlert(): Promise<boolean> {
         return this._messenger.sendRequest(shouldDisplayPayloadAlert, HOST_EXTENSION);
     }
diff --git a/workspaces/mi/mi-rpc-client/src/rpc-clients/mi-visualizer/rpc-client.ts b/workspaces/mi/mi-rpc-client/src/rpc-clients/mi-visualizer/rpc-client.ts
index 8cd06c4e3eb..1e3d8b09401 100644
--- a/workspaces/mi/mi-rpc-client/src/rpc-clients/mi-visualizer/rpc-client.ts
+++ b/workspaces/mi/mi-rpc-client/src/rpc-clients/mi-visualizer/rpc-client.ts
@@ -90,6 +90,7 @@ import {
     ProjectDetailsResponse,
     importOpenAPISpec,
     UpdatePropertiesRequest,
+    ReloadDependenciesRequest,
     UpdateDependenciesRequest,
     UpdatePomValuesRequest,
     UpdateConfigValuesRequest,
@@ -106,7 +107,9 @@ import {
     setDeployPlugin,
     getDeployPluginDetails,
     removeDeployPlugin,
-    MavenDeployPluginDetails
+    MavenDeployPluginDetails,
+    getDependencyStatusList,
+    DependencyStatusResponse
 } from "@wso2/mi-core";
 import { HOST_EXTENSION } from "vscode-messenger-common";
 import { Messenger } from "vscode-messenger-webview";
@@ -261,8 +264,8 @@ export class MiVisualizerRpcClient implements MIVisualizerAPI {
     updateProperties(params: UpdatePropertiesRequest): Promise<boolean> {
         return this._messenger.sendRequest(updateProperties, HOST_EXTENSION, params);
     }
-    reloadDependencies(): Promise<boolean> {
-        return this._messenger.sendRequest(reloadDependencies, HOST_EXTENSION);
+    reloadDependencies(params?: ReloadDependenciesRequest): Promise<boolean> {
+        return this._messenger.sendRequest(reloadDependencies, HOST_EXTENSION, params);
     }
     updateDependencies(params: UpdateDependenciesRequest): Promise<boolean> {
         return this._messenger.sendRequest(updateDependencies, HOST_EXTENSION, params);
@@ -276,6 +279,9 @@ export class MiVisualizerRpcClient implements MIVisualizerAPI {
     updateConnectorDependencies(): Promise<string> {
         return this._messenger.sendRequest(updateConnectorDependencies, HOST_EXTENSION);
     }
+    getDependencyStatusList(): Promise<DependencyStatusResponse> {
+        return this._messenger.sendRequest(getDependencyStatusList, HOST_EXTENSION);
+    }
     updateDependenciesFromOverview(params: UpdateDependenciesRequest): Promise<boolean> {
         return this._messenger.sendRequest(updateDependenciesFromOverview, HOST_EXTENSION, params);
     }
diff --git a/workspaces/mi/mi-visualizer/src/RuntimeServicesPanel.tsx b/workspaces/mi/mi-visualizer/src/RuntimeServicesPanel.tsx
index a4dbfbc0f1f..fd417dc3f30 100644
--- a/workspaces/mi/mi-visualizer/src/RuntimeServicesPanel.tsx
+++ b/workspaces/mi/mi-visualizer/src/RuntimeServicesPanel.tsx
@@ -190,7 +190,7 @@ export function RuntimeServicePanel() {
             resourceType: "api"
         });
 
-        const resource = api_resource.resources.find((resource: any) => resource.name === name);
+        const resource = api_resource.resources.find((resource: any) => resource.name === name.split("__").pop());
         const aboslutePath = resource?.absolutePath;
 
         if (aboslutePath) {
diff --git a/workspaces/mi/mi-visualizer/src/Visualizer.tsx b/workspaces/mi/mi-visualizer/src/Visualizer.tsx
index 85eb14540cb..f3c824f46c8 100644
--- a/workspaces/mi/mi-visualizer/src/Visualizer.tsx
+++ b/workspaces/mi/mi-visualizer/src/Visualizer.tsx
@@ -31,6 +31,7 @@ import { SwaggerPanel } from "./SwaggerPanel";
 import { gitIssueUrl } from "./constants";
 import { EnvironmentSetup } from "./views/EnvironmentSetup";
 import { UnsupportedProject } from "./views/UnsupportedProject";
+import { PullingDependenciesView } from "./views/PullingDependenciesView";
 
 const LoaderWrapper = styled.div`
     display: flex;
@@ -82,6 +83,8 @@ export function Visualizer({ mode, swaggerData }: { mode: string, swaggerData?:
                     setCurrentView('environmentSetup');
                 } else if ('oldWorkspaceDetected' in newState && newState.oldWorkspaceDetected === "viewReady") {
                     setCurrentView('oldWorkspaceDetected');
+                } else if ('ready' in newState && newState.ready === "resolveMissingDependencies") {
+                    setCurrentView('resolvingDependencies');
                 }
             } else if (newState === 'disabled') {
                 setCurrentView('disabled');
@@ -125,6 +128,9 @@ export function Visualizer({ mode, swaggerData }: { mode: string, swaggerData?:
                 case 'disabled':
                     setView(<DisabledView />);
                     break;
+                case 'resolvingDependencies':
+                    setView(<PullingDependenciesView />);
+                    break;
                 case 'loading':
                     setView(
                         <LoaderWrapper>
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatFooter.tsx b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatFooter.tsx
index dd294c93a29..bd875cf2233 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatFooter.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatFooter.tsx
@@ -23,8 +23,9 @@ import SuggestionsList from "./SuggestionsList";
 import { useMICopilotContext } from "./MICopilotContext";
 import { handleFileAttach } from "../utils";
 import { USER_INPUT_PLACEHOLDER_MESSAGE, VALID_FILE_TYPES } from "../constants";
-import { generateSuggestions, generateId, getBackendUrlAndView, fetchCodeGenerationsWithRetry, getDiagnosticsReponseFromLlm, replaceCodeBlock } from "../utils";
-import { Role, MessageType, CopilotChatEntry, BackendRequestType, FixedConfigItem, CorrectedCodeItem, ChatMessage } from "../types";
+import { generateSuggestions, generateId, getBackendUrlAndView, fetchCodeGenerationsWithRetry, getDiagnosticsReponseFromLlm, replaceCodeBlock, setupCodeGenerationEventListener } from "../utils";
+import { BackendRequestType, FixedConfigItem, CorrectedCodeItem, } from "../types";
+import { Role, MessageType, CopilotChatEntry, ChatMessage } from "@wso2/mi-core";
 import Attachments from "./Attachments";
 
 /**
@@ -32,20 +33,18 @@ import Attachments from "./Attachments";
  */
 const AIChatFooter: React.FC = () => {
     const {
-        backendUri,
         rpcClient,
+        messages,
         setMessages,
+        setQuestions,
         copilotChat,
         setCopilotChat,
-        codeBlocks,
-        setCodeBlocks,
         currentUserPrompt,
         setCurrentUserprompt,
         backendRequestTriggered,
         setBackendRequestTriggered,
         isInitialPromptLoaded,
         setIsInitialPromptLoaded,
-        isRuntimeVersionThresholdReached,
         questions,
         files,
         setFiles,
@@ -73,30 +72,146 @@ const AIChatFooter: React.FC = () => {
     const [isValidating, setIsValidating] = useState(false);
     // Reference to store code blocks for the current chat
     const currentChatCodeBlocksRef = useRef<string[]>([]);
+    
+    // State for streaming code generation
+    const [currentChatId, setCurrentChatId] = useState<number | null>(null);
+    const [assistantResponse, setAssistantResponse] = useState<string>("");
 
-    // List of programming languages to filter for actual code files (Kept it as a list for extensibility)
-    const codeLanguages = [
-        'xml'
-    ];
+    const toggleThinkingSelection = () => {
+        setChecked(!thinkingChecked);
+    };
 
-    // Function to extract code content from a code block
-    const extractCodeContent = (codeBlock: string): { language: string, code: string } | null => {
-        // Match the language identifier and code content
-        const match = codeBlock.match(/```([\w#+]*)\s*\n([\s\S]*?)```/);
-        if (!match) return null;
+    // Handle code generation streaming events from extension
+    const handleCodeGenerationEvent = (event: any) => {
+        switch (event.type) {
+            case "code_generation_start":
+                // Start of code generation - could show loading indicator
+                console.log("Code generation started");
+                setAssistantResponse("");
+                break;
+            
+            case "content_block":
+                // Handle streaming content blocks
+                if (event.content) {
+                    const response = JSON.parse(event.content);
+                    if (response.content !== null && response.content !== undefined) {
+                        const content = response.content;
+                        const usage = response.usage;
+
+                        if (usage.max_usage == -1) {
+                            setRemainingTokenPercentage(-1);
+                        } else {
+                            const remainingTokens = Number(usage.remaining_tokens);
+                            const maxTokens = Number(usage.max_usage);
+                            let percentage = Math.round((remainingTokens / maxTokens) * 100);
+                            if (percentage < 0) percentage = 0;
+                            setRemainingTokenPercentage(percentage);
+                        }
+                    
+                        // Update assistant response state
+                        setAssistantResponse(prev => prev + content);
+                        
+                        // Update the last copilot message in real-time
+                        setMessages((prevMessages) => {
+                            const newMessages = [...prevMessages];
+                            if (newMessages.length > 0) {
+                                newMessages[newMessages.length - 1].content += content;
+                            }
+                            return newMessages;
+                        });
+                    } 
+                    else if (response.questions && response.questions.length > 0) {
+                        setQuestions((prevQuestions) => [...prevQuestions, ...response.questions]);
+                    }
+                } 
+                break;
+            
+            case "code_generation_end":
+                // Final content replacement
+                console.log("Code generation completed");
+                if (event.content) {
+                    setAssistantResponse(event.content);
+                    handleCodeGenerationComplete(event.content);
+                }
+                break;
 
-        const language = match[1].trim().toLowerCase();
-        const code = match[2];
+            case "code_diagnostic_start":
+                console.log("Code diagnostics started");
+                setIsValidating(true);
+                break;
 
-        // Check if this is an actual code file (not JSON examples or other non-code content)
-        if (codeLanguages.includes(language)) {
-            return { language, code };
+            case "code_diagnostic_end":
+                console.log("Code diagnostics completed");
+                setIsValidating(false);
+                
+                // Handle corrected codes if available
+                if (event.correctedCodes && event.correctedCodes.length > 0) {
+                    const fileCorrections = new Map<string, string>();
+                    
+                    event.correctedCodes.forEach((item: any) => {
+                        if (item.name && (item.configuration || item.code)) {
+                            const correctedCode = item.configuration || item.code;
+                            const fileName = item.name;
+                            fileCorrections.set(fileName, correctedCode);
+                        }
+                    });
+
+                    // Update messages with corrected code
+                    if (fileCorrections.size > 0) {
+                        setMessages((prevMessages) => {
+                            const newMessages = [...prevMessages];
+                            const lastMessage = newMessages[newMessages.length - 1];
+                            
+                            if (lastMessage && lastMessage.role === Role.MICopilot) {
+                                let updatedContent = lastMessage.content;
+                                
+                                fileCorrections.forEach((correctedCode, fileName) => {
+                                    updatedContent = replaceCodeBlock(updatedContent, fileName, correctedCode);
+                                });
+                                
+                                newMessages[newMessages.length - 1] = {
+                                    ...lastMessage,
+                                    content: updatedContent
+                                };
+                            }
+                            
+                            return newMessages;
+                        });
+                    }
+                }
+                break;
+            
+            case "error":
+                console.error("Code generation error:", event.error);
+                setMessages((prevMessages) => [...prevMessages, {
+                    id: generateId(),
+                    role: Role.MICopilot,
+                    content: `Error: ${event.error}`,
+                    type: MessageType.Error
+                }]);
+                setBackendRequestTriggered(false);
+                setIsValidating(false);
+                break;
+            
+            case "stop":
+                // Code generation completed
+                console.log("Code generation completed");
+                break;
+            
+            default:
+                console.log("Unknown event type:", event.type);
         }
-        return null;
     };
 
-    const toggleThinkingSelection = () => {
-        setChecked(!thinkingChecked);
+    // Handle completion of code generation
+    const handleCodeGenerationComplete = async (finalContent: string) => {
+        // Add backend response to copilot chat
+        setCopilotChat((prevCopilotChat) => [
+            ...prevCopilotChat,
+            { id: currentChatId || generateId(), role: Role.CopilotAssistant, content: finalContent },
+        ]);
+
+        setBackendRequestTriggered(false);
     };
 
     // Handle text input keydown events
@@ -113,41 +228,49 @@ const AIChatFooter: React.FC = () => {
     const handleStop = async () => {
         isStopButtonClicked.current = true;
 
-        // Abort the fetch
-        controller.abort();
-
-        // Create a new AbortController for future fetches
-        resetController();
+        try {
+            // Request the extension to abort code generation
+            await rpcClient.getMiAiPanelRpcClient().abortCodeGeneration();
 
-        // If we're in the validation phase, reset the validation state
-        if (isValidating) {
-            setIsValidating(false);
-        }
+            // Abort the local controller (for any local operations)
+            controller.abort();
 
-        // Remove the last user and copilot messages
-        setMessages((prevMessages) => {
-            const newMessages = [...prevMessages];
-            newMessages.pop(); // Remove the last user message
-            newMessages.pop(); // Remove the last copilot message
-            return newMessages;
-        });
+            // Create a new AbortController for future fetches
+            resetController();
 
-        // Generate suggestions based on chat history
-        await generateSuggestions(backendUri, copilotChat, rpcClient, new AbortController()).then((response) => {
-            setMessages((prevMessages) => [...prevMessages, ...response]);
-        });
+            // If we're in the validation phase, reset the validation state
+            if (isValidating) {
+                setIsValidating(false);
+            }
 
-        // Explicitly adjust the textarea height after suggestion generation
-        if (textAreaRef.current) {
-            setTimeout(() => {
-                textAreaRef.current.style.height = "auto";
-                textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
-            }, 0);
+            // Remove the last user and copilot messages
+            setMessages((prevMessages) => {
+                const newMessages = [...prevMessages];
+                newMessages.pop(); // Remove the last copilot message
+                newMessages.pop(); // Remove the last user message
+                return newMessages;
+            });
+
+            // Generate suggestions based on chat history
+            await generateSuggestions(copilotChat, rpcClient, new AbortController()).then((response) => {
+                setQuestions((prevMessages) => [...prevMessages, ...response]);
+            });
+
+            // Explicitly adjust the textarea height after suggestion generation
+            if (textAreaRef.current) {
+                setTimeout(() => {
+                    textAreaRef.current.style.height = "auto";
+                    textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+                }, 0);
+            }
+        } catch (error) {
+            console.error("Error stopping code generation:", error);
+        } finally {
+            isStopButtonClicked.current = false;
+            
+            // Reset backend request triggered state
+            setBackendRequestTriggered(false);
         }
-        isStopButtonClicked.current = false;
-        
-        // Reset backend request triggered state
-        setBackendRequestTriggered(false);
     };
 
     // File handling
@@ -176,15 +299,14 @@ const AIChatFooter: React.FC = () => {
             isResponseReceived.current = false;
         }
 
-        // Variable to hold Assistant response
-        let assistant_response = "";
-
         // Reset the current chat code blocks array for this new chat
         currentChatCodeBlocksRef.current = [];
 
         // Add the current user prompt to the chats based on the request type
         let currentCopilotChat: CopilotChatEntry[] = [...copilotChat];
         const chatId = generateId();
+        setCurrentChatId(chatId);
+        
         const updateChats = (userPrompt: string, userMessageType?: MessageType) => {
             // Append labels to the user prompt
             setMessages((prevMessages) => [
@@ -193,7 +315,7 @@ const AIChatFooter: React.FC = () => {
                 {
                     id: chatId,
                     role: Role.MICopilot,
-                    content: assistant_response,
+                    content: "", // Will be updated via streaming events
                     type: MessageType.AssistantMessage,
                 },
             ]);
@@ -222,12 +344,11 @@ const AIChatFooter: React.FC = () => {
         }
 
         const { backendUrl, view } = await getBackendUrlAndView(rpcClient);
-        const url = backendUri + backendUrl;
 
         try {
-            const response = await fetchCodeGenerationsWithRetry(
-                url,
-                isRuntimeVersionThresholdReached,
+            // Call the RPC method for streaming code generation
+            // The streaming will be handled via events in handleCodeGenerationEvent
+            await fetchCodeGenerationsWithRetry(
                 currentCopilotChat,
                 files,
                 images,
@@ -240,271 +361,12 @@ const AIChatFooter: React.FC = () => {
             // Remove the user uploaded files and images after sending them to the backend
             removeAllFiles();
             removeAllImages();
+            
+            // The streaming response will be handled by events
+            // No need to process response.body here anymore
 
-            const reader = response.body?.getReader();
-            const decoder = new TextDecoder();
-            let result = "";
-
-            // process the response stream from backend
-            while (true) {
-                const { done, value } = await reader.read();
-
-                if (done) {
-                    break;
-                }
-
-                const chunk = decoder.decode(value, { stream: true });
-                result += chunk;
-
-                const lines = result.split("\n");
-                for (let i = 0; i < lines.length - 1; i++) {
-                    try {
-                        const json = JSON.parse(lines[i]);
-
-                        // Update token usage information
-                        const tokenUsage = json.usage;
-                        const maxTokens = tokenUsage.max_usage;
-
-                        if (maxTokens == -1) {
-                            setRemainingTokenPercentage(-1);
-                        } else {
-                            const remainingTokens = tokenUsage.remaining_tokens;
-                            let percentage = Math.round((remainingTokens / maxTokens) * 100);
-
-                            if (percentage < 0) percentage = 0;
-
-                            setRemainingTokenPercentage(percentage);
-                        }
-
-                        if (json.content == null) {
-                            // End of the MI copilot response reached
-                            // Add backend response to copilot chat
-                            setCopilotChat((prevCopilotChat) => [
-                                ...prevCopilotChat,
-                                { id: chatId, role: Role.CopilotAssistant, content: assistant_response },
-                            ]);
-
-                            // Filter XML code blocks and pass them to getCodeDiagnostics
-                            const xmlCodes = currentChatCodeBlocksRef.current
-                                .filter(codeBlock => {
-                                    // Extract language from the comment line
-                                    const languageMatch = codeBlock.match(/\/\/ Language: (\w+)/);
-                                    return languageMatch && languageMatch[1].toLowerCase() === 'xml';
-                                })
-                                .map((xmlCodeBlock, index) => {
-                                    // Remove the language comment line and get the actual code
-                                    const code = xmlCodeBlock.replace(/\/\/ Language: \w+\n/, '');
-                                    
-                                    // Extract the name attribute from the XML content
-                                    const nameMatch = code.match(/name=["']([^"']+)["']/);
-                                    const fileName = nameMatch ? `${nameMatch[1]}.xml` : `code_${index}.xml`;
-                                    
-                                    return {
-                                        fileName,
-                                        code
-                                    };
-                                });
-                            
-                            
-                            // Only call getCodeDiagnostics if there are XML code blocks
-                            if (xmlCodes.length > 0) {
-                                try {
-                                    // Set validating state to true when we start getting diagnostics
-                                    setIsValidating(true);
-                                    
-                                    // Get diagnostics from the RPC client
-                                    const diagnosticResponse = await rpcClient.getMiDiagramRpcClient().getCodeDiagnostics({
-                                        xmlCodes
-                                    });
-                                    
-                                    const hasAnyDiagnostics = diagnosticResponse.diagnostics.some(file => file.diagnostics.length > 0);
-
-                                    // If there are diagnostics, send them to the LLM for analysis
-                                    if (hasAnyDiagnostics) {
-                                        // Import the getDiagnosticsReponseFromLlm function
-                                        const llmResponse = await getDiagnosticsReponseFromLlm(
-                                            diagnosticResponse,
-                                            xmlCodes,
-                                            rpcClient,
-                                            new AbortController() // Create a new controller for this request
-                                        );
-                                        
-                                        // Process the LLM response
-                                        const llmResponseData = await llmResponse.json();
-                                        
-                                        // Process the fixed_config from the LLM response - this is the only format we need to handle
-                                        if (llmResponseData.fixed_config && Array.isArray(llmResponseData.fixed_config)) {
-                                            // Create a map to store the latest corrected code for each file
-                                            const fileCorrections = new Map<string, string>();
-                                            
-                                            // Process all items in the fixed_config array and store the latest correction for each file
-                                            llmResponseData.fixed_config.forEach((item: FixedConfigItem) => {
-                                                if (item.name && (item.configuration || item.code)) {
-                                                    const correctedCode = item.configuration || item.code;
-                                                    const fileName = item.name;
-                                                    
-                                                    // Store the corrected code for this file
-                                                    fileCorrections.set(fileName, correctedCode);
-                                                    
-                                                    // Find the corresponding XML code block in the current chat
-                                                    const xmlCodeIndex = xmlCodes.findIndex(xml => 
-                                                        xml.fileName === fileName || 
-                                                        (!fileName.endsWith('.xml') && xml.fileName === fileName + '.xml') ||
-                                                        (fileName.endsWith('.xml') && xml.fileName === fileName.slice(0, -4))
-                                                    );
-                                                    
-                                                    if (xmlCodeIndex !== -1) {
-                                                        // Replace the code in the XML codes array
-                                                        xmlCodes[xmlCodeIndex].code = correctedCode;
-                                                    }
-                                                }
-                                            });
-                                            
-                                            // Helper function to update message content with corrections
-                                            const updateMessageContent = <T extends { role: Role; id?: number; content: string; type?: MessageType }>(
-                                                prevState: T[],
-                                                assistantRole: Role,
-                                                messageId: number,
-                                                corrections: Map<string, string>
-                                            ): T[] => {
-                                                const newState = [...prevState];
-                                                
-                                                // Try to find the message with this chat ID
-                                                const lastAssistantMessageIndex = newState.findIndex(
-                                                    msg => msg.role === assistantRole && msg.id === messageId
-                                                );
-                                                
-                                                if (lastAssistantMessageIndex !== -1) {
-                                                    let content = newState[lastAssistantMessageIndex].content;
-                                                    
-                                                    // Apply all corrections to this message
-                                                    corrections.forEach((correctedCode, fileName) => {
-                                                        content = replaceCodeBlock(content, fileName, correctedCode);
-                                                    });
-                                                    
-                                                    // Update the message with all corrections
-                                                    newState[lastAssistantMessageIndex] = {
-                                                        ...newState[lastAssistantMessageIndex],
-                                                        content: content
-                                                    };
-                                                } else {
-                                                    // If we can't find the message with the specific chatId,
-                                                    // try to update the most recent assistant message
-                                                    const lastIndex = newState.length - 1;
-                                                    for (let i = lastIndex; i >= 0; i--) {
-                                                        if (newState[i].role === assistantRole) {
-                                                            let content = newState[i].content;
-                                                            let appendContent = "";
-                                                            
-                                                            // Try to replace existing code blocks first
-                                                            corrections.forEach((correctedCode, fileName) => {
-                                                                const newContent = replaceCodeBlock(content, fileName, correctedCode);
-                                                                if (newContent === content) {
-                                                                    // If no replacement was made, prepare to append
-                                                                    appendContent += `\n\n**Updated ${fileName}**\n\`\`\`xml\n${correctedCode}\n\`\`\``;
-                                                                } else {
-                                                                    content = newContent;
-                                                                }
-                                                            });
-                                                            
-                                                            // Update the message with all corrections
-                                                            newState[i] = {
-                                                                ...newState[i],
-                                                                content: content + appendContent
-                                                            };
-                                                            break;
-                                                        }
-                                                    }
-                                                }
-                                                
-                                                return newState;
-                                            };
-
-                                            // Now apply all corrections to the messages
-                                            if (fileCorrections.size > 0) {
-                                                // Update the messages state
-                                                setMessages(prevMessages => 
-                                                    updateMessageContent<ChatMessage>(prevMessages, Role.MICopilot, chatId, fileCorrections)
-                                                );
-                                                
-                                                // Also update the copilotChat state
-                                                setCopilotChat(prevCopilotChat => 
-                                                    updateMessageContent<CopilotChatEntry>(prevCopilotChat, Role.CopilotAssistant, chatId, fileCorrections)
-                                                );
-                                            }
-                                        }
-                                    }
-                                    // Reset validating state when LLM correction is complete
-                                    setIsValidating(false);
-                                } catch (error) {
-                                    console.error("Error processing diagnostics:", error);
-                                    // Reset validating state on error
-                                    setIsValidating(false);
-                                }
-                            }
-
-                            const questions = json.questions.map((question: string) => {
-                                return {
-                                    id: chatId,
-                                    role: Role.default,
-                                    content: question,
-                                    type: MessageType.Question,
-                                };
-                            });
-                            setMessages((prevMessages) => [...prevMessages, ...questions]);
-                        } else {
-                            assistant_response += json.content;
-
-                            // Update the last assistance message with the new content
-                            setMessages((prevMessages) => {
-                                const newMessages = [...prevMessages];
-                                newMessages[newMessages.length - 1].content += json.content;
-                                return newMessages;
-                            });
-
-                            // Extract code blocks
-                            const regex = /```[\s\S]*?```/g;
-                            let match;
-                            const newCodeBlocks = [...codeBlocks];
-
-                            while ((match = regex.exec(assistant_response)) !== null) {
-                                if (!newCodeBlocks.includes(match[0])) {
-                                    newCodeBlocks.push(match[0]);
-                                    
-                                    // Process the code block to extract actual code files
-                                    const codeContent = extractCodeContent(match[0]);
-                                    if (codeContent) {
-                                        // Only add actual code files to the current chat's code blocks array
-                                        const codeFileEntry = `// Language: ${codeContent.language}\n${codeContent.code}`;
-                                        if (!currentChatCodeBlocksRef.current.includes(codeFileEntry)) {
-                                            currentChatCodeBlocksRef.current.push(codeFileEntry);
-                                        }
-                                    }
-                                }
-                            }
-
-                            setCodeBlocks(newCodeBlocks);
-                        }
-                    } catch (error) {
-                        console.error("Error parsing JSON:", error);
-                    }
-                }
-
-                result = lines[lines.length - 1];
-                isResponseReceived.current = true;
-            }
-
-            if (result) {
-                try {
-                    const json = JSON.parse(result);
-                    // Handle final result if needed
-                    return json;
-                } catch (error) {
-                    console.error("Error parsing JSON:", error);
-                }
-            }
         } catch (error) {
-            if (!isStopButtonClicked) {
+            if (!isStopButtonClicked.current) {
                 setMessages((prevMessages) => {
                     const newMessages = [...prevMessages];
                     newMessages[newMessages.length - 1].content += "Network error. Please check your connectivity.";
@@ -576,6 +438,15 @@ const AIChatFooter: React.FC = () => {
         }
     }, [fileUploadStatus]);
 
+    // Set up code generation event listener
+    useEffect(() => {
+        if (rpcClient) {
+            setupCodeGenerationEventListener(rpcClient, (event: any) => {
+                handleCodeGenerationEvent(event);
+            });
+        }
+    }, [rpcClient]);
+
     return (
         <Footer>
             <FlexColumn
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatHeader.tsx b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatHeader.tsx
index 93539e39751..ee5393e484c 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatHeader.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatHeader.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Button, Codicon } from "@wso2/ui-toolkit";
 import { Badge, Header, HeaderButtons, ResetsInBadge } from '../styles';
 import { useMICopilotContext } from "./MICopilotContext";
@@ -27,29 +27,58 @@ import { useMICopilotContext } from "./MICopilotContext";
  */
 const AIChatHeader: React.FC = () => {
   const { rpcClient, setChatClearEventTriggered, tokenInfo, chatClearEventTriggered, backendRequestTriggered} = useMICopilotContext();
+  const [hasApiKey, setHasApiKey] = useState(false);
 
   const handleLogout = async () => {
     await rpcClient?.getMiDiagramRpcClient().logoutFromMIAccount();
   };
 
+  const handleSetApiKey = async () => {
+    await rpcClient?.getMiAiPanelRpcClient().setAnthropicApiKey();
+    // Check again after setting the API key
+    checkApiKey();
+  };
+
+  const checkApiKey = async () => {
+    const hasApiKey = await rpcClient?.getMiAiPanelRpcClient().hasAnthropicApiKey();
+    setHasApiKey(hasApiKey);
+  };
+
+  // Check for API key on component mount
+  useEffect(() => {
+    checkApiKey();
+  }, [rpcClient]);
+
   const isLoading = chatClearEventTriggered || backendRequestTriggered;
 
   return (
       <Header>
           <Badge>
-              Remaining Free Usage:{" "}
-              {tokenInfo.remainingPercentage === -1
-                  ? "Unlimited"
-                  : tokenInfo.isLessThanOne
-                  ? "<1%"
-                  : `${tokenInfo.remainingPercentage}%`}
-              <br />
-              <ResetsInBadge>
-                  {tokenInfo.remainingPercentage !== -1 &&
-                      `Resets in: ${
-                          tokenInfo.timeToReset < 1 ? "< 1 day" : `${Math.round(tokenInfo.timeToReset)} days`
-                      }`}
-              </ResetsInBadge>
+              {hasApiKey ? (
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                          <Codicon name="key" />
+                          Copilot is using your API Key
+                      </div>
+                      <ResetsInBadge>Logout to clear the API key</ResetsInBadge>
+                  </div>
+              ) : (
+                  <>
+                      Remaining Free Usage:{" "}
+                      {tokenInfo.remainingPercentage === -1
+                          ? "Unlimited"
+                          : tokenInfo.isLessThanOne
+                          ? "<1%"
+                          : `${tokenInfo.remainingPercentage}%`}
+                      <br />
+                      <ResetsInBadge>
+                          {tokenInfo.remainingPercentage !== -1 &&
+                              `Resets in: ${
+                                  tokenInfo.timeToReset < 1 ? "< 1 day" : `${Math.round(tokenInfo.timeToReset)} days`
+                              }`}
+                      </ResetsInBadge>
+                  </>
+              )}
           </Badge>
           <HeaderButtons>
               <Button
@@ -61,6 +90,15 @@ const AIChatHeader: React.FC = () => {
                   <Codicon name="clear-all" />
                   &nbsp;&nbsp;Clear
               </Button>
+              <Button 
+                  appearance="icon" 
+                  onClick={handleSetApiKey} 
+                  tooltip="Set Anthropic API Key for Unlimited Usage" 
+                  disabled={isLoading}
+              >
+                  <Codicon name="key" />
+                  &nbsp;&nbsp;API Key
+              </Button>
               <Button appearance="icon" onClick={handleLogout} tooltip="Logout" disabled={isLoading}>
                   <Codicon name="sign-out" />
                   &nbsp;&nbsp;Logout
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatMessage.tsx b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatMessage.tsx
index 550d4dd73cd..190d3a66aad 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatMessage.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AIChatMessage.tsx
@@ -29,8 +29,8 @@ import {
 import { CodeSegment } from "./CodeSegment";
 import { splitContent } from "../utils";
 import { useMICopilotContext } from "./MICopilotContext";
-import { MarkdownRendererProps, ChatMessage, CopilotChatEntry } from "../types";
-import { Role, MessageType } from "../types";
+import { MarkdownRendererProps } from "../types";
+import { Role, MessageType, ChatMessage, CopilotChatEntry } from "@wso2/mi-core";
 import Attachments from "./Attachments";
 import FeedbackBar from "./FeedbackBar";
 
@@ -182,7 +182,7 @@ const AIChatMessage: React.FC<ChatMessageProps> = ({ message, index }) => {
             {message.role === Role.MICopilot && 
              message.type === MessageType.AssistantMessage && 
              !backendRequestTriggered &&
-             index === messages.length - 2 && (
+             index === messages.length - 1 && (
                 <FeedbackBar
                     messageIndex={index}
                     onFeedback={handleFeedback}
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AICodeGenerator.tsx b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AICodeGenerator.tsx
index 25b1194fc8d..5656eec94ac 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AICodeGenerator.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/AICodeGenerator.tsx
@@ -29,7 +29,7 @@ import { AIChatView } from '../styles';
  * Main chat component with integrated MICopilot Context provider
  */
 export function AICodeGenerator() {
-  const { conversations } = useMICopilotContext();
+  const { messages } = useMICopilotContext();
   const [isAtBottom, setIsAtBottom] = useState(true);
   const mainContainerRef = useRef<HTMLDivElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -59,16 +59,16 @@ export function AICodeGenerator() {
       if (isAtBottom && messagesEndRef.current) {
           messagesEndRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
       }
-  }, [conversations, isAtBottom]);
+  }, [messages, isAtBottom]);
 
   return (
           <AIChatView>
               <AIChatHeader />
 
               <main style={{ flex: 1, overflowY: "auto" }} ref={mainContainerRef}>
-                  {Array.isArray(conversations) && conversations.length === 0 && <WelcomeMessage />}
+                  {Array.isArray(messages) && messages.length === 0 && <WelcomeMessage />}
 
-                  {Array.isArray(conversations) && conversations.map((message, index) => (
+                  {Array.isArray(messages) && messages.map((message, index) => (
                       <AIChatMessage key={index} message={message} index={index} />
                   ))}
 
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/MICopilotContext.tsx b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/MICopilotContext.tsx
index baa19e9ad4e..a32358bd8d9 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/MICopilotContext.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/MICopilotContext.tsx
@@ -26,6 +26,8 @@ import {
     CopilotChatEntry,
     MessageType,
     Role,
+} from "@wso2/mi-core";
+import {
     RpcClientType,
     FileHistoryEntry,
 } from "../types";
@@ -43,22 +45,19 @@ import { useFeedback } from "./useFeedback";
 // MI Copilot context type
 interface MICopilotContextType {
     rpcClient: RpcClientType;
-    backendUri: string;
     projectRuntimeVersion: string;
     isRuntimeVersionThresholdReached: boolean;
     projectUUID: string;
 
     // State for showing communication in UI
     messages: ChatMessage[];
+    questions: string[];
     setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
-    questions: ChatMessage[];
-    conversations: ChatMessage[];
+    setQuestions: React.Dispatch<React.SetStateAction<string[]>>;
 
     // State for communication with backend
     copilotChat: CopilotChatEntry[];
     setCopilotChat: React.Dispatch<React.SetStateAction<CopilotChatEntry[]>>;
-    codeBlocks: string[];
-    setCodeBlocks: React.Dispatch<React.SetStateAction<string[]>>;
 
     // State for file and image uploads to define context
     files: FileObject[];
@@ -110,14 +109,12 @@ interface MICopilotProviderProps {
 const localStorageKeys = {
     chatFile: "",
     questionFile: "",
-    codeBlocks: "",
     fileHistory: "",
 };
 
 export function MICopilotContextProvider({ children }: MICopilotProviderProps) {
     const { rpcClient } = useVisualizerContext();
 
-    const [backendUri, setBackendUri] = useState("");
     const [projectRuntimeVersion, setProjectRuntimeVersion] = useState("");
     const [isRuntimeVersionThresholdReached, setIsRuntimeVersionThresholdReached] = useState(false);
     const [projectUUID, setProjectUUID] = useState("");
@@ -125,11 +122,9 @@ export function MICopilotContextProvider({ children }: MICopilotProviderProps) {
 
     // UI related Data
     const [messages, setMessages] = useState<ChatMessage[]>([]);
-    const [questions, setQuestions] = useState<ChatMessage[]>([]);
-    const [conversations, setConversations] = useState<ChatMessage[]>([]);
+    const [questions, setQuestions] = useState<string[]>([]);
     // Backend related Data
     const [copilotChat, setCopilotChat] = useState<CopilotChatEntry[]>([]);
-    const [codeBlocks, setCodeBlocks] = useState<string[]>([]);
     const [files, setFiles] = useState<FileObject[]>([]);
     const [images, setImages] = useState<ImageObject[]>([]);
     const [currentUserPrompt, setCurrentUserprompt] = useState("");
@@ -160,8 +155,6 @@ export function MICopilotContextProvider({ children }: MICopilotProviderProps) {
     useEffect(() => {
         const initializeContext = async () => {
             if (rpcClient) {
-                const url = await fetchBackendUrl(rpcClient);
-                setBackendUri(url);
 
                 const runtimeVersion = await getProjectRuntimeVersion(rpcClient);
                 setProjectRuntimeVersion(runtimeVersion);
@@ -175,7 +168,6 @@ export function MICopilotContextProvider({ children }: MICopilotProviderProps) {
                 // Update localStorageKeys with the UUID
                 localStorageKeys.chatFile = `chatArray-AIGenerationChat-${uuid}`;
                 localStorageKeys.questionFile = `Question-AIGenerationChat-${uuid}`;
-                localStorageKeys.codeBlocks = `codeBlocks-AIGenerationChat-${uuid}`;
                 localStorageKeys.fileHistory = `fileHistory-AIGenerationChat-${uuid}`;
 
                 const machineView = await rpcClient.getAIVisualizerState();
@@ -199,20 +191,16 @@ export function MICopilotContextProvider({ children }: MICopilotProviderProps) {
                     // Load the stored data from local storage in session reload
                     const storedChatArray = localStorage.getItem(localStorageKeys.chatFile);
                     const storedQuestion = localStorage.getItem(localStorageKeys.questionFile);
-                    const storedCodeBlocks = localStorage.getItem(localStorageKeys.codeBlocks);
                     const storedFileHistory = localStorage.getItem(localStorageKeys.fileHistory);
 
                     const getQuestions = async () => {
                         if (storedQuestion) {
-                            setMessages((prevMessages) => [
-                                ...prevMessages,
-                                { role: Role.default, content: storedQuestion, type: MessageType.Question },
-                            ]);
+                            setQuestions((prevMessages) => [...prevMessages, storedQuestion]);
                         } else {
-                            generateSuggestions(url, copilotChat, rpcClient, controller).then((response) => {
+                            generateSuggestions(copilotChat, rpcClient, controller).then((response) => {
                                 response.length > 0
-                                    ? setMessages((prevMessages) => [...prevMessages, ...response])
-                                    : null;
+                                    ? setQuestions((prevMessages) => [...prevMessages, ...response])
+                                    : "";
                                 setBackendRequestTriggered(false);
                             });
                         }
@@ -222,12 +210,6 @@ export function MICopilotContextProvider({ children }: MICopilotProviderProps) {
                         // 1. Load questions
                         getQuestions();
 
-                        // 2, Load codeblock
-                        if (storedCodeBlocks) {
-                            const codeBlocksFromStorage = JSON.parse(storedCodeBlocks);
-                            codeBlocks.push(...codeBlocksFromStorage);
-                        }
-
                         // 3. Load Chats
                         const chatArray = JSON.parse(storedChatArray);
 
@@ -265,17 +247,16 @@ export function MICopilotContextProvider({ children }: MICopilotProviderProps) {
         if (chatClearEventTriggered) {
             setMessages([]);
             setCopilotChat([]);
+            setQuestions([]);
             setFiles([]);
             setImages([]);
-            setCodeBlocks([]);
             setCurrentUserprompt("");
             // Clear the local storage
             localStorage.removeItem(localStorageKeys.chatFile);
             localStorage.removeItem(localStorageKeys.questionFile);
-            localStorage.removeItem(localStorageKeys.codeBlocks);
             localStorage.removeItem(localStorageKeys.fileHistory);
-            generateSuggestions(backendUri, copilotChat, rpcClient, controller).then((response) => {
-                response.length > 0 ? setMessages((prevMessages) => [...prevMessages, ...response]) : null;
+            generateSuggestions(copilotChat, rpcClient, controller).then((response) => {
+                response.length > 0 ? setQuestions((prevMessages) => [...prevMessages, ...response]) : null;
                 setChatClearEventTriggered(false);
             });
         }
@@ -285,8 +266,7 @@ export function MICopilotContextProvider({ children }: MICopilotProviderProps) {
     useMemo(() => {
         if (!isLoading && !backendRequestTriggered) {
             localStorage.setItem(localStorageKeys.chatFile, JSON.stringify(copilotChat));
-            localStorage.setItem(localStorageKeys.questionFile, questions[questions.length - 1]?.content || "");
-            localStorage.setItem(localStorageKeys.codeBlocks, JSON.stringify(codeBlocks));
+            localStorage.setItem(localStorageKeys.questionFile, questions[questions.length - 1] || "");
         }
     }, [isLoading, backendRequestTriggered]);
 
@@ -296,22 +276,15 @@ export function MICopilotContextProvider({ children }: MICopilotProviderProps) {
         }
     }, [FileHistory]);
 
-    // Update questions and conversations whenever messages change
-    useMemo(() => {
-        setQuestions(messages.filter((message) => message.type === MessageType.Question));
-        setConversations(messages.filter((message) => message.type !== MessageType.Question));
-    }, [messages]);
-
     const currentContext: MICopilotContextType = {
         rpcClient,
-        backendUri,
         projectRuntimeVersion,
         isRuntimeVersionThresholdReached,
         projectUUID,
         messages,
-        setMessages,
         questions,
-        conversations,
+        setMessages,
+        setQuestions,
         copilotChat,
         setCopilotChat,
         files,
@@ -328,8 +301,6 @@ export function MICopilotContextProvider({ children }: MICopilotProviderProps) {
         setBackendRequestTriggered,
         controller,
         resetController,
-        codeBlocks,
-        setCodeBlocks,
         setRemainingTokenPercentage,
         tokenInfo: {
             remainingPercentage: remainingTokenPercentage,
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/SuggestionsList.tsx b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/SuggestionsList.tsx
index 10e88afd24e..2a9e5881837 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/SuggestionsList.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/SuggestionsList.tsx
@@ -21,7 +21,7 @@ import { FlexRow, Question } from "../styles";
 import { Icon } from "@wso2/ui-toolkit";
 
 interface SuggestionsListProps {
-    questionMessages: Array<{ role: string; content: string; type: string }>;
+    questionMessages: string[];
     handleQuestionClick: (content: string) => void;
 }
 
@@ -52,7 +52,7 @@ const SuggestionsList: React.FC<SuggestionsListProps> = ({ questionMessages, han
                     <div>Loading suggestions ...</div>
                 </Question>
             ) : (
-                questionMessages.map((message, index) => (
+                [questionMessages[questionMessages.length - 1]].map((message, index) => (
                     <Question
                         key={index}
                         style={{
@@ -63,14 +63,14 @@ const SuggestionsList: React.FC<SuggestionsListProps> = ({ questionMessages, han
                             href="#"
                             onClick={(e) => {
                                 e.preventDefault();
-                                handleQuestionClick(message.content);
+                                handleQuestionClick(message);
                             }}
                             style={{ textDecoration: "none" }}
                         >
                             <FlexRow>
                                 <Icon name="wand-magic-sparkles-solid" sx="marginRight:5px" />
                                 &nbsp;
-                                <div>{message.content.replace(/^\d+\.\s/, "")}</div>
+                                <div>{message.replace(/^\d+\.\s/, "")}</div>
                             </FlexRow>
                         </a>
                     </Question>
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/WelcomeMessage.tsx b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/WelcomeMessage.tsx
index b5b66658f6b..4d1694aac11 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/WelcomeMessage.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/WelcomeMessage.tsx
@@ -43,9 +43,10 @@ export const WelcomeMessage: React.FC = () => {
                     <br />
                     Please review generated code before adding to your integration.
                 </Typography>
-                <Typography variant="body1" sx={WelcomeStyles.attachContext}>
-                    <Icon isCodicon={true} name="new-file" iconSx={{ cursor: "default" }} /> to attach context
-                </Typography>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', ...WelcomeStyles.attachContext }}>
+                    <Icon isCodicon={true} name="new-file" iconSx={{ cursor: "default" }} />
+                    <span>to attach context</span>
+                </div>
             </div>
         </Welcome>
     );};
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/feedbackUtils.ts b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/feedbackUtils.ts
index d31db6d8761..36ba6c49a8e 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/feedbackUtils.ts
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/feedbackUtils.ts
@@ -16,7 +16,8 @@
  * under the License.
  */
 
-import { ChatMessage, CopilotChatEntry, Role, FeedbackMessage } from '../types';
+import { ChatMessage, CopilotChatEntry, Role } from '@wso2/mi-core';
+import { FeedbackMessage } from '../types';
 
 /**
  * Helper function to convert conversation history for feedback submission
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/useFeedback.ts b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/useFeedback.ts
index bf5225b9985..e713576a91f 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/component/useFeedback.ts
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/component/useFeedback.ts
@@ -17,7 +17,7 @@
  */
 
 import { useCallback, useState } from 'react';
-import { ChatMessage, CopilotChatEntry } from '../types';
+import { ChatMessage, CopilotChatEntry } from '@wso2/mi-core';
 import { RpcClientType } from '../types';
 import { getConversationHistoryForFeedback, getCopilotChatForFeedback } from './feedbackUtils';
 
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/index.tsx b/workspaces/mi/mi-visualizer/src/views/AIPanel/index.tsx
index 7bc66357c95..899f445893f 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/index.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/index.tsx
@@ -33,7 +33,6 @@ export const AIPanel = () => {
     const [viewComponent, setViewComponent] = useState<React.ReactNode>();
     const [state, setState] = React.useState<AIMachineStateValue>();
 
-
     rpcClient?.onAIStateChanged((newState: AIMachineStateValue) => {
         setState(newState);
     });
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/types.ts b/workspaces/mi/mi-visualizer/src/views/AIPanel/types.ts
index 393075a9c36..9f02496c3c2 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/types.ts
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/types.ts
@@ -16,7 +16,6 @@
  * under the License.
  */
 import { useVisualizerContext } from "@wso2/mi-rpc-client";
-import { FileObject, ImageObject } from "@wso2/mi-core";
 
 export type RpcClientType = ReturnType<typeof useVisualizerContext>["rpcClient"];
 export interface MarkdownRendererProps {
@@ -41,52 +40,6 @@ export interface FileHistoryEntry {
     maxAddedFromChatIndex: number;
 }
 
-// Define enums for role and type
-export enum Role {
-    // UI roles
-    MIUser = "You",
-    MICopilot = "Copilot",
-    default = "",
-    
-    // Copilot roles
-    CopilotAssistant = "assistant",
-    CopilotUser = "user"
-}
-
-export enum MessageType {
-    UserMessage = "user_message",
-    AssistantMessage = "assistant_message",
-    Question = "question",
-    Label = "label",
-    InitialPrompt = "initial_prompt",
-    Error = "Error"
-}
-
-// Type of entries shown in UI 
-export type ChatMessage = {
-    id?: number;
-    role: Role.MICopilot | Role.MIUser | Role.default; 
-    content: string;
-    type: MessageType; 
-    files?: FileObject[];
-    images?: ImageObject[];
-};
-
-// Type of messeges send to MI Copilot backend 
-export type CopilotChatEntry = {
-    id: number;
-    role: Role.CopilotUser | Role.CopilotAssistant;
-    content: string;
-    type?: MessageType;
-};
-
-// Type of messeges send to MI Copilot backend 
-export type ChatEntry = {
-    id: string;
-    role: string; 
-    content: string;
-};
-
 export enum BackendRequestType {
     InitialPrompt = "initial_prompt",
     QuestionClick = "question_click",
diff --git a/workspaces/mi/mi-visualizer/src/views/AIPanel/utils.ts b/workspaces/mi/mi-visualizer/src/views/AIPanel/utils.ts
index 2db8bd85e42..e852f442678 100644
--- a/workspaces/mi/mi-visualizer/src/views/AIPanel/utils.ts
+++ b/workspaces/mi/mi-visualizer/src/views/AIPanel/utils.ts
@@ -16,7 +16,8 @@
  * under the License.
  */
 
-import { CopilotChatEntry, RpcClientType, Role, MessageType, ChatMessage, ApiResponse, BackendRequestType } from "./types";
+import { RpcClientType, ApiResponse, BackendRequestType } from "./types";
+import { CopilotChatEntry, Role, MessageType, ChatMessage } from "@wso2/mi-core";
 
 import { GetWorkspaceContextResponse, MACHINE_VIEW, EVENT_TYPE, FileObject, ImageObject} from "@wso2/mi-core";
 import {
@@ -41,7 +42,7 @@ export async function getProjectRuntimeVersion(rpcClient: RpcClientType): Promis
 
 export async function fetchBackendUrl(rpcClient:RpcClientType): Promise<string | undefined> {
         try {
-            return (await rpcClient.getMiDiagramRpcClient().getBackendRootUrl()).url;
+            return (await rpcClient.getMiAiPanelRpcClient().getBackendRootUrl()).url;
         } catch (error) {
             console.error('Failed to fetch backend URL:', error);
             return undefined;
@@ -55,14 +56,7 @@ export async function getProjectUUID(rpcClient: RpcClientType): Promise<string |
             console.error('Failed to fetch project UUID:', error);
             return undefined;
         }
-    }
-
-// Add set of code blocks to the workspace
-export async function handleAddtoWorkspace(rpcClient: RpcClientType, codeBlocks: string[]) {
-    await rpcClient.getMiDiagramRpcClient().writeContentToFile({ content: codeBlocks })
-
-    rpcClient.getMiDiagramRpcClient().executeCommand({ commands: ["MI.project-explorer.refresh"] });
-};    
+    }   
 
 // Add a selected code to the workspace
 export async function handleAddSelectiveCodetoWorkspace(rpcClient: RpcClientType, codeSegment: string) {
@@ -260,45 +254,44 @@ export function compareVersions(v1: string, v2: string): number {
         return 0;
     }
 
+/**
+ * Sets up event listener for code generation streaming events
+ */
+export function setupCodeGenerationEventListener(
+    rpcClient: RpcClientType,
+    onEvent: (event: any) => void
+): void {
+    try {
+        // Use the proper RpcClient method for code generation events
+        rpcClient.onCodeGenerationEvent(onEvent);
+    } catch (error) {
+        console.error("Error setting up code generation event listener:", error);
+    }
+}
+
 export async function generateSuggestions(
-    backendRootUri: string,
     chatHistory: CopilotChatEntry[],
     rpcClient: RpcClientType,
     controller: AbortController
-): Promise<ChatMessage[]> {
+): Promise<string[]> {
     try {
-        const url = backendRootUri + MI_SUGGESTIVE_QUESTIONS_BACKEND_URL;
-        const context = await getContext(rpcClient);
-        const response = await fetchWithRetry(
-            BackendRequestType.Suggestions,
-            url,
-            {
-                messages: chatHistory,
-                context: context[0].context,
-                num_suggestions: 1,
-                type: "artifact_gen",
-            },
-            rpcClient,
-            controller,
-            chatHistory
-        );
-
-        const data = (await response.json()) as ApiResponse;
+        // Use RPC call to extension - extension handles all backend communication
+        const response = await rpcClient.getMiAiPanelRpcClient().generateSuggestions({
+            chatHistory: chatHistory
+        });
 
-        if (data.event === "suggestion_generation_success") {
-            return data.questions.map((question) => ({
-                id: generateId(),
-                role: Role.default,
-                content: question,
-                type: MessageType.Question,
-            }));
+        // Check if we got a valid response
+        if (response.response) {
+            // If the response contains a single suggestion, convert it to the expected format
+            return [response.response];
         } else {
-            console.error("Error generating suggestions:", data.error);
-            throw new Error("Failed to generate suggestions: " + data.error);
+            console.error("Error generating suggestions: Empty response from extension");
+            return [];
         }
     } catch (error) {
-        console.error(error);
-        return [];
+        console.error("Error generating suggestions via RPC:", error);
+        // No fallback - all backend communication should go through extension
+        throw new Error(`Failed to generate suggestions: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 }
 
@@ -382,8 +375,6 @@ export function convertChat(entry: CopilotChatEntry): ChatMessage {
 }
 
 export async function fetchCodeGenerationsWithRetry(
-    url: string,
-    isRutimeVersionThresholdReached: boolean,
     chatHistory: CopilotChatEntry[],
     files: FileObject[],
     images: ImageObject[],
@@ -392,19 +383,33 @@ export async function fetchCodeGenerationsWithRetry(
     view?: string,
     thinking?: boolean
 ): Promise<Response> {
+    // Use RPC call to extension for streaming code generation
+    console.log("Generating code with streaming: visualizer -> extension");
+    try {
+        const response = await rpcClient.getMiAiPanelRpcClient().generateCode({
+            chatHistory: chatHistory,
+            files: files,
+            images: images,
+            view: view,
+            thinking: thinking
+        });
 
-    const context = await getContext(rpcClient, view);
-    const imageList = images.map((image) => image.imageBase64);
-    const defaultPayloads = await rpcClient.getMiDiagramRpcClient().getAllInputDefaultPayloads();
-    const fileList = isRutimeVersionThresholdReached ? files : files.map((file) => JSON.stringify(file));
-
-    return fetchWithRetry(BackendRequestType.UserPrompt, url, {
-        messages: chatHistory,
-        context: context[0].context,
-        files: fileList,
-        images: imageList,
-        payloads: defaultPayloads,
-    }, rpcClient, controller, chatHistory, thinking);
+        // Return a mock Response object since we're now using streaming via events
+        // The actual streaming data will come through RPC notifications
+        return new Response(JSON.stringify(response), {
+            status: 200,
+            statusText: 'OK',
+            headers: { 'Content-Type': 'application/json' }
+        });
+    } catch (error) {
+        console.error('Error in code generation RPC call:', error);
+        // Return error response
+        return new Response(JSON.stringify({ error: error instanceof Error ? error.message : 'Unknown error' }), {
+            status: 500,
+            statusText: 'Internal Server Error',
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
 }
 
 export async function fetchWithRetry(
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/DataServiceForm/MainPanelForms/DataSourceForm/DatasourceRDBMSForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/DataServiceForm/MainPanelForms/DataSourceForm/DatasourceRDBMSForm.tsx
index 16c0782f3fc..6890279eff9 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/DataServiceForm/MainPanelForms/DataSourceForm/DatasourceRDBMSForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/DataServiceForm/MainPanelForms/DataSourceForm/DatasourceRDBMSForm.tsx
@@ -39,6 +39,7 @@ export function DataSourceRDBMSForm(props: DataSourceRDBMSFormProps) {
     const [isInitialLoading, setIsInitialLoading] = React.useState(true);
     const [isEnableURLEdit, setIsEnableURLEdit] = React.useState(false);
     const [prevDbType, setPrevDbType] = React.useState(props.watch('rdbms.databaseEngine'));
+    const [hasExtractedUrl, setHasExtractedUrl] = React.useState(false);
 
     const databaseEngines: OptionProps[] = [
         { value: "MySQL" },
@@ -55,23 +56,36 @@ export function DataSourceRDBMSForm(props: DataSourceRDBMSFormProps) {
     ];
 
     useEffect(() => {
-        if (isInitialLoading) {
+        if (props.isEditDatasource && !hasExtractedUrl && props.watch('rdbms.url')) {
+            extractValuesFromUrl(props.watch('rdbms.url'), props.watch('rdbms.databaseEngine'));
+            setHasExtractedUrl(true);
             setIsInitialLoading(false);
+            return;
+        }
+        
+        if (isInitialLoading) {
             if (props.watch('rdbms.driverClassName') === "" && props.watch('rdbms.url') === "") {
                 props.setValue('rdbms.driverClassName', driverMap.get("MySQL").driverClass);
                 props.setValue('rdbms.url', driverMap.get("MySQL").jdbcUrl);
             }
+            setIsInitialLoading(false);
+            return;
         }
 
-        props.isEditDatasource && extractValuesFromUrl(props.watch('rdbms.url'), props.watch('rdbms.databaseEngine'));
-
         const driverUrl = driverMap.get(props.watch("rdbms.databaseEngine"));
         if (prevDbType !== props.watch('rdbms.databaseEngine')) {
             setPrevDbType(props.watch('rdbms.databaseEngine'));
-            props.setValue('rdbms.hostname', "localhost");
-            props.setValue('rdbms.port', driverUrl.port);
+            // Reset hostname and port to defaults when:
+            // 1. Creating a new datasource (not editing), OR
+            // 2. User is changing the database engine (prevDbType is already set)
+            const shouldResetHostnameAndPort = !props.isEditDatasource || prevDbType !== '';
+            if (shouldResetHostnameAndPort) {
+                props.setValue('rdbms.hostname', "localhost");
+                props.setValue('rdbms.port', driverUrl.port);
+            }
             props.setValue('rdbms.driverClassName', driverUrl.driverClass);
         }
+
         props.setValue('rdbms.url', replacePlaceholders(driverUrl.jdbcUrl));
 
     }, [props.watch('rdbms.databaseEngine'), props.watch('rdbms.hostname'), props.watch('rdbms.port'), props.watch('rdbms.databaseName'), props.isEditDatasource]);
@@ -110,10 +124,9 @@ export function DataSourceRDBMSForm(props: DataSourceRDBMSFormProps) {
             const match = url.match(regex);
             if (match && match.groups) {
                 const { host, port, database } = match.groups;
-
-                !props.watch('rdbms.hostname') && props.setValue('rdbms.hostname', host);
-                !props.watch('rdbms.port') &&props.setValue('rdbms.port', port);
-                !props.watch('rdbms.databaseName') && props.setValue('rdbms.databaseName', database);
+                props.setValue('rdbms.hostname', host);
+                props.setValue('rdbms.port', port);
+                props.setValue('rdbms.databaseName', database);
             }
         }
     };
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/DataServiceForm/MainPanelForms/index.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/DataServiceForm/MainPanelForms/index.tsx
index b8247cacd3e..df1110cdf23 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/DataServiceForm/MainPanelForms/index.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/DataServiceForm/MainPanelForms/index.tsx
@@ -89,10 +89,10 @@ export function DataServiceWizard(props: DataServiceWizardProps) {
             .matches(/^[a-zA-Z0-9_-]*$/, "Invalid characters in Data Service name")
             .test('validateTaskName',
                 'An artifact with same name already exists', value => {
-                    return !workspaceFileNames.includes(value.toLowerCase())
+                    return !(workspaceFileNames.includes(value.toLowerCase()) && savedDSName !== value)
                 }).test('validateArtifactName',
                 'A registry resource with this artifact name already exists', value => {
-                    return !artifactNames.includes(value.toLowerCase())
+                    return !(artifactNames.includes(value.toLowerCase()) && savedDSName !== value)
                 }),
         dataServiceNamespace: yup.string().notRequired(),
         serviceGroup: yup.string().notRequired(),
@@ -136,6 +136,7 @@ export function DataServiceWizard(props: DataServiceWizardProps) {
     const [isNewDataService, setIsNewDataService] = useState(!props.path.endsWith(".xml"));
     const [artifactNames, setArtifactNames] = useState([]);
     const [workspaceFileNames, setWorkspaceFileNames] = useState([]);
+    const [savedDSName, setSavedDSName] = useState("");
 
     useEffect(() => {
         (async () => {
@@ -162,6 +163,7 @@ export function DataServiceWizard(props: DataServiceWizardProps) {
                     existingDatasources.push(currentDatasource);
                 });
                 setDatasources(existingDatasources);
+                setSavedDSName(existingDataService.dataServiceName);
             } else {
                 setIsNewDataService(true);
                 setShowDatasourceComponent(false);
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/DataSourceForm/index.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/DataSourceForm/index.tsx
index 6bc9d960ebe..c4761c510f5 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/DataSourceForm/index.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/DataSourceForm/index.tsx
@@ -94,16 +94,17 @@ export function DataSourceWizard(props: DataSourceFormProps) {
     const [prevDbType, setPrevDbType] = React.useState("MySQL");
     const [artifactNames, setArtifactNames] = useState([]);
     const [workspaceFileNames, setWorkspaceFileNames] = useState([]);
+    const [savedDSName, setSavedDSName] = useState("");
 
     const schema = yup.object({
         name: yup.string().required("Datasource name is required")
             .matches(/^[a-zA-Z0-9_-]*$/, "Invalid characters in Datasource name")
             .test('validateTaskName',
                 'An artifact with same name already exists', value => {
-                    return !workspaceFileNames.includes(value.toLowerCase())
+                    return !(workspaceFileNames.includes(value.toLowerCase()) && savedDSName !== value)
                 }).test('validateArtifactName',
                 'A registry resource with this artifact name already exists', value => {
-                    return !artifactNames.includes(value.toLowerCase())
+                    return !(artifactNames.includes(value.toLowerCase()) && savedDSName !== value)
                 }),
         description: yup.string().notRequired(),
         type: yup.string().required("Datasource type is required"),
@@ -316,6 +317,7 @@ export function DataSourceWizard(props: DataSourceFormProps) {
 
                     extractValuesFromUrl(response.url, watch("dbEngine"));
                 }
+                setSavedDSName(response.name);
             } else {
                 setIsUpdate(false);
                 reset(newDataSource);
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/InboundEPform/index.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/InboundEPform/index.tsx
index c10f496fda8..9300f99722b 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/InboundEPform/index.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/InboundEPform/index.tsx
@@ -162,7 +162,7 @@ export function InboundEPWizard(props: InboundEPWizardProps) {
         const projectDir = props.path ? (await rpcClient.getMiDiagramRpcClient().getProjectRoot({ path: props.path })).path : (await rpcClient.getVisualizerState()).projectUri;
         const artifactDir = path.join(projectDir, 'src', 'main', 'wso2mi', 'artifacts', 'inbound-endpoints').toString();
         const createInboundEPParams = {
-            directory: artifactDir,
+            directory: props.model ? props.path : artifactDir,
             ...values,
             type: values.type?.toLowerCase(),
             parameters: {
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/KubernetesConfigurationForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/KubernetesConfigurationForm.tsx
index 6b8db01a52d..31602a96e80 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/KubernetesConfigurationForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/KubernetesConfigurationForm.tsx
@@ -38,7 +38,7 @@ const initialConfiguration: InputsFields = {
 
 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"),
+    replicas: yup.number().typeError("Number of replicas is required and must be a valid number").required("Number of replicas is required"),
     targetImage: yup.string().required("Target Image is required"),
 });
 
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/MessageProcessorForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/MessageProcessorForm.tsx
index 14422ad7f2b..b91ba85877b 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/MessageProcessorForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/MessageProcessorForm.tsx
@@ -192,6 +192,7 @@ export function MessageProcessorWizard(props: MessageProcessorWizardProps) {
             }]
     }
     const [params, setParams] = useState(paramConfigs);
+    const [areParamsDirty, setAreParamsDirty] = useState(false);
 
     useEffect(() => {
         (async () => {
@@ -234,11 +235,13 @@ export function MessageProcessorWizard(props: MessageProcessorWizardProps) {
                 setValue('processorState', existingMessageProcessor.processorState ? "Activate" : "Deactivate");
                 setHasCustomProperties(existingMessageProcessor.properties.length > 0 ? true : false);
                 setType(existingMessageProcessor.messageProcessorType);
+                setAreParamsDirty(false);
             } else {
                 paramConfigs.paramValues = [];
                 setParams(paramConfigs);
                 reset(newMessageProcessor);
                 setIsNewMessageProcessor(true);
+                setAreParamsDirty(false);
             }
         })();
     }, [props.path]);
@@ -252,6 +255,7 @@ export function MessageProcessorWizard(props: MessageProcessorWizardProps) {
         if (!event.target.value) {
             paramConfigs.paramValues = [];
             setParams(paramConfigs);
+            setAreParamsDirty(false);
         }
         setHasCustomProperties(event.target.value === "Yes" ? true : false);
     };
@@ -267,12 +271,13 @@ export function MessageProcessorWizard(props: MessageProcessorWizardProps) {
             })
         };
         setParams(modifiedParams);
+        setAreParamsDirty(true);
     };
 
     const handleCreateMessageProcessor = async (values: any) => {
 
         let customProperties: any = [];
-        if (hasCustomProperties) {
+        if (hasCustomProperties || type === "Custom Message Processor") {
             params.paramValues.map((param: any) => {
                 customProperties.push({ key: param.paramValues[0].value, value: param.paramValues[1].value });
             });
@@ -540,7 +545,7 @@ export function MessageProcessorWizard(props: MessageProcessorWizardProps) {
                         <Button
                             appearance="primary"
                             onClick={handleSubmit(handleCreateMessageProcessor)}
-                            disabled={!isDirty}
+                            disabled={!isDirty && !areParamsDirty}
                         >
                             {isNewMessageProcessor ? "Create" : "Save Changes"}
                         </Button>
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/TaskForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/TaskForm.tsx
index 823dece10e6..3be7eea091e 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/TaskForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/TaskForm.tsx
@@ -149,13 +149,13 @@ export function TaskForm(props: TaskFormProps) {
         triggerType: yup.mixed().oneOf(["simple", "cron"]),
         triggerCount: yup.mixed().when('isCountUndefined', {
             is: false,
-            then: () => yup.number().typeError('Trigger count must be a number').min(0, "Trigger count must be greater than 0")
+            then: () => yup.number().typeError('Trigger count is required and must be a valid number').min(0, "Trigger count must be greater than 0")
                 .required("Trigger count is required"),
             otherwise: () => yup.string().notRequired()
         }),
         triggerInterval: yup.number().when('triggerType', {
             is: 'simple',
-            then: () => yup.number().required('Trigger Interval is required').typeError('Trigger count must be a number').min(1, "Trigger count must be greater than 1"),
+            then: () => yup.number().required('Trigger interval is required').typeError('Trigger interval is required and must be a valid number').min(1, "Trigger interval must be greater than 1"),
             otherwise: () => yup.string().notRequired().default("1")
         }),
         triggerCron: yup.string().when('triggerType', {
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/TemplateForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/TemplateForm.tsx
index efaec1eed18..adcd79f123d 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/TemplateForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/TemplateForm.tsx
@@ -271,7 +271,7 @@ export function TemplateWizard(props: TemplateWizardProps) {
             ...values,
             parameters,
             isEdit: !isNewTemplate,
-            range: props.model ? { start: { line: 0, character: 0 }, end: props.model.sequence.range.startTagRange.start } : undefined
+            range: props.model ? { start: { line: 0, character: 0 }, end: props.model.sequence.range.startTagRange.end } : undefined
         }
 
         const result = await rpcClient.getMiDiagramRpcClient().createTemplate(createTemplateParams);
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 29b01d24cc8..9ca0121bccc 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
@@ -95,9 +95,9 @@ export function MockServiceForm(props: MockServiceFormProps) {
 
     // Schema
     const schema = yup.object({
-        name: yup.string().required("Test case name is required").notOneOf(availableMockServices, "Mock service name already exists"),
+        name: yup.string().required("Mock Service name is required").notOneOf(availableMockServices, "Mock service name already exists"),
         endpointName: yup.string().required("Endpoint name is required"),
-        servicePort: yup.number().required("Service port is required"),
+        servicePort: yup.number().required("Service port is required").typeError("Service port is required and must be a valid number"),
         serviceContext: yup.string().required("Service context is required").matches(/^\//, "Service context should start with '/'")
     });
 
diff --git a/workspaces/mi/mi-visualizer/src/views/LoggedOutWindow/index.tsx b/workspaces/mi/mi-visualizer/src/views/LoggedOutWindow/index.tsx
index 05f4790a65b..4fa8f2abc59 100644
--- a/workspaces/mi/mi-visualizer/src/views/LoggedOutWindow/index.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/LoggedOutWindow/index.tsx
@@ -15,29 +15,91 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React from "react";
 import styled from "@emotion/styled";
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
-import { AIMachineStateValue, AI_EVENT_TYPE, AI_MACHINE_VIEW } from '@wso2/mi-core';
+import { AI_EVENT_TYPE } from '@wso2/mi-core';
 import { useVisualizerContext } from '@wso2/mi-rpc-client';
+import { Icon, Typography } from "@wso2/ui-toolkit";
 
-import { AlertBox } from "../AlertBox/AlertBox";
+const PanelWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow-y: auto;
+    padding: 24px 16px;
+`;
 
-const Container = styled.div`
+const TopSpacer = styled.div`
+    flex-grow: 1;
+    min-height: 24px;
+`;
+
+const BottomSpacer = styled.div`
+    flex-grow: 1;
+    min-height: 48px;
+`;
+
+const HeaderContent = styled.div`
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    padding: 10px;
-    gap: 8px;
+    align-items: center;
+    text-align: center;
 `;
 
-const WideVSCodeButton = styled(VSCodeButton)`
+const FooterContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 18px;
     width: 100%;
-    max-width: 300px;
-    margin: 15px 0 15px 0;
+    max-width: 360px;
     align-self: center;
+    margin-bottom: 60px;
+`;
+
+const Title = styled.h2`
+    display: inline-flex;
+    margin-top: 40px;
 `;
 
+const StyledButton = styled(VSCodeButton)`
+    width: 100%;
+    height: 32px;
+    margin-top: 12px;
+`;
+
+const PostLoginSection = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 16px;
+`;
+
+const LegalNotice: React.FC = () => {
+    return (
+        <PostLoginSection>
+            <div>
+                MI Copilot uses AI to assist with integration. Please review all suggested content before adding it to
+                your integration.
+            </div>
+            <div>
+                By signing in, you agree to our{" "}
+                <a
+                    href="https://wso2.com/licenses/wso2-ai-services-terms-of-use/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Terms of Use
+                </a>
+                .
+            </div>
+        </PostLoginSection>
+    );
+};
+
 export const SignInToCopilotMessage = (props: { showProjectHeader?: boolean }) => {
     const { rpcClient } = useVisualizerContext();
     const { showProjectHeader } = props;
@@ -46,17 +108,33 @@ export const SignInToCopilotMessage = (props: { showProjectHeader?: boolean }) =
         rpcClient.sendAIStateEvent(AI_EVENT_TYPE.LOGIN);
     };
 
-
     return (
-        <Container>
-                <AlertBox
-                    buttonTitle="Sign In"
-                    onClick={signInToMIAI} // Define or import the signInToMIAI function
-                    subTitle={
-                                "Please sign in to enable MI Copilot Artifical Intelligence features"
-                    }
-                    title={"MI Copilot Account Not Found"}
+        <PanelWrapper>
+            <TopSpacer />
+            <HeaderContent>
+                <Icon
+                    name="bi-ai-chat"
+                    sx={{ width: 54, height: 54 }}
+                    iconSx={{ fontSize: "54px", color: "var(--vscode-foreground)", cursor: "default" }}
                 />
-        </Container>
+                <Title>Welcome to MI Copilot</Title>
+                <Typography
+                    variant="body1"
+                    sx={{
+                        color: "var(--vscode-descriptionForeground)",
+                        textAlign: "center",
+                        maxWidth: 350,
+                        fontSize: 14,
+                    }}
+                >
+                    Integrate better with your AI pair.
+                </Typography>
+            </HeaderContent>
+            <BottomSpacer />
+            <FooterContent>
+                <LegalNotice />
+                <StyledButton onClick={signInToMIAI}>Login to MI Copilot</StyledButton>
+            </FooterContent>
+        </PanelWrapper>
     );
 };
diff --git a/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/DependencyForm.tsx b/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/DependencyForm.tsx
index 0431125fa52..fe678ec4993 100644
--- a/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/DependencyForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/DependencyForm.tsx
@@ -60,6 +60,19 @@ const FormActions = styled.div`
     border-top: 1px solid var(--vscode-editorWidget-border);
 `;
 
+const ErrorMessage = styled.div`
+    padding: 12px;
+    margin-bottom: 16px;
+    background-color: var(--vscode-inputValidation-errorBackground);
+    border: 1px solid var(--vscode-inputValidation-errorBorder);
+    border-radius: 4px;
+    color: var(--vscode-inputValidation-errorForeground);
+    font-size: 13px;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+`;
+
 const LoaderContainer = styled.div`
     position: absolute;
     display: flex;
@@ -85,11 +98,12 @@ interface DependencyFormProps {
     title: string;
     onClose: () => void;
     showLoader?: boolean;
+    duplicateError?: string;
     onUpdate?: (updatedDependency: { groupId: string; artifact: string; version: string }) => void;
 }
 
 export function DependencyForm(props: DependencyFormProps) {
-    const { groupId, artifact, version, title, onClose, onUpdate, showLoader } = props;
+    const { groupId, artifact, version, title, onClose, onUpdate, showLoader, duplicateError } = props;
 
     const { register, handleSubmit, formState: { errors } } = useForm<DependencyFormData>({
         defaultValues: {
@@ -120,6 +134,13 @@ export function DependencyForm(props: DependencyFormProps) {
                         </Button>
                     </FormHeader>
 
+                    {duplicateError && (
+                        <ErrorMessage>
+                            <Codicon name="error" />
+                            <span>{duplicateError}</span>
+                        </ErrorMessage>
+                    )}
+
                     <FormFieldsContainer>
                         <TextField
                             label="Group ID"
diff --git a/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/DependencyManager.tsx b/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/DependencyManager.tsx
index 6bb7077649c..eb7eaee1aa1 100644
--- a/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/DependencyManager.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/DependencyManager.tsx
@@ -19,7 +19,7 @@
 import React, { useEffect, useState } from "react";
 import { DependencyDetails } from "@wso2/mi-core";
 import { useVisualizerContext } from "@wso2/mi-rpc-client";
-import { Button, FormActions, FormView, Typography, Codicon, LinkButton, ProgressRing, Overlay } from "@wso2/ui-toolkit";
+import { Button, FormActions, FormView, Typography, Codicon, LinkButton, ProgressRing, Overlay, Dialog } from "@wso2/ui-toolkit";
 import { DependencyItem } from "./DependencyItem";
 import { DependencyForm } from "./DependencyForm";
 import { Range } from "../../../../../syntax-tree/lib/src";
@@ -45,6 +45,19 @@ const LoaderContainer = styled.div`
     margin-top: 200px;
 `;
 
+const DialogMessage = styled.div`
+    margin-bottom: 24px;
+    text-align: center;
+    line-height: 1.5;
+    color: var(--vscode-foreground);
+`;
+
+const DialogActions = styled.div`
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+`;
+
 interface ManageDependenciesProps {
     title: string;
     type: string;
@@ -60,6 +73,11 @@ export function DependencyManager(props: ManageDependenciesProps) {
     const [inboundConnectors, setInboundConnectors] = React.useState([] as any[]);
     const [isUpdating, setIsUpdating] = useState(false);
     const [isAddingDependency, setIsAddingDependency] = useState(false);
+    const [duplicateError, setDuplicateError] = useState<string>('');
+    const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+    const [confirmDialogMessage, setConfirmDialogMessage] = useState('');
+    const [pendingDependency, setPendingDependency] = useState<{ groupId: string; artifact: string; version: string } | null>(null);
+    const [existingDependencyToReplace, setExistingDependencyToReplace] = useState<DependencyDetails | null>(null);
 
     useEffect(() => {
         fetchDependencies();
@@ -137,8 +155,45 @@ export function DependencyManager(props: ManageDependenciesProps) {
     const handleAddDependency = async (
         newDependency: { groupId: string; artifact: string; version: string }
     ) => {
+        setDuplicateError('');
+        
+        // Check for dependency duplicates (same groupId, artifactId, and version)
+        const exactDuplicate = dependencies.some(
+            dep => dep.groupId === newDependency.groupId && 
+                   dep.artifact === newDependency.artifact && 
+                   dep.version === newDependency.version
+        );
+
+        if (exactDuplicate) {
+            setDuplicateError(`A dependency with Group ID "${newDependency.groupId}", Artifact ID "${newDependency.artifact}", and Version "${newDependency.version}" already exists.`);
+            return;
+        }
+
+        // Check for same groupId and artifactId but different version
+        const existingDependency = dependencies.find(
+            dep => dep.groupId === newDependency.groupId && 
+                   dep.artifact === newDependency.artifact && 
+                   dep.version !== newDependency.version
+        );
+
+        if (existingDependency) {
+            const message = `A dependency with Group ID "${existingDependency.groupId}" and Artifact ID "${existingDependency.artifact}" already exists with version "${existingDependency.version}".\n\nDo you want to overwrite it with version "${newDependency.version}"?`;
+            
+            setConfirmDialogMessage(message);
+            setPendingDependency(newDependency);
+            setExistingDependencyToReplace(existingDependency);
+            setShowConfirmDialog(true);
+            return;
+        }
+
+        await addDependencyToProject(newDependency);
+    };
 
+    const addDependencyToProject = async (
+        newDependency: { groupId: string; artifact: string; version: string }
+    ) => {
         setIsAddingDependency(true);
+        setDuplicateError('');
 
         const addedDependency = {
             groupId: newDependency.groupId,
@@ -151,13 +206,41 @@ export function DependencyManager(props: ManageDependenciesProps) {
             dependencies: [addedDependency]
         });
 
-        await rpcClient.getMiVisualizerRpcClient().reloadDependencies();
+        const reloadDependenciesResult = await rpcClient.getMiVisualizerRpcClient().reloadDependencies({ newDependencies: [addedDependency] });
         await rpcClient.getMiDiagramRpcClient().formatPomFile();
 
         await fetchDependencies();
 
         setIsAddingDependency(false);
-        setIsAddFormOpen(false);
+        if (reloadDependenciesResult) {
+            setIsAddFormOpen(false);
+        }
+    };
+
+    const handleConfirmOverwrite = async (confirmed: boolean) => {
+        setShowConfirmDialog(false);
+        
+        if (confirmed && pendingDependency && existingDependencyToReplace) {
+            // Deleting the existing dependency
+            setIsUpdating(true);
+            
+            await rpcClient.getMiVisualizerRpcClient().updatePomValues({
+                pomValues: [{ range: existingDependencyToReplace.range, value: '' }]
+            });
+
+            await rpcClient.getMiVisualizerRpcClient().reloadDependencies();
+            await rpcClient.getMiDiagramRpcClient().formatPomFile();
+            await fetchDependencies();
+
+            setIsUpdating(false);
+
+            // Adding the new dependency
+            await addDependencyToProject(pendingDependency);
+        }
+
+        // Reset state
+        setPendingDependency(null);
+        setExistingDependencyToReplace(null);
     };
 
     return (
@@ -169,7 +252,11 @@ export function DependencyManager(props: ManageDependenciesProps) {
                     version=""
                     title="Add Dependency"
                     showLoader={isAddingDependency}
-                    onClose={() => setIsAddFormOpen(false)}
+                    duplicateError={duplicateError}
+                    onClose={() => {
+                        setIsAddFormOpen(false);
+                        setDuplicateError('');
+                    }}
                     onUpdate={(updatedDependency) => {
                         handleAddDependency(updatedDependency);
                     }}
@@ -215,6 +302,28 @@ export function DependencyManager(props: ManageDependenciesProps) {
                     )}
                 </>
             )}
+
+            <Dialog
+                isOpen={showConfirmDialog}
+                onClose={() => handleConfirmOverwrite(false)}
+                sx={{ width: '400px', padding: '24px' }}
+            >
+                <DialogMessage>{confirmDialogMessage}</DialogMessage>
+                <DialogActions>
+                    <Button
+                        appearance="secondary"
+                        onClick={() => handleConfirmOverwrite(false)}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        appearance="primary"
+                        onClick={() => handleConfirmOverwrite(true)}
+                    >
+                        Overwrite
+                    </Button>
+                </DialogActions>
+            </Dialog>
         </FormView >
     );
 }
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 e9609178d75..24e5c616e6a 100644
--- a/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/ProjectInformationForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/ProjectInformationForm.tsx
@@ -52,7 +52,7 @@ const sectionTitleStyle = { margin: 0, paddingLeft: 20 };
 
 // Field name to pom property name mapping
 export const fieldToPomPropertyMap: Record<string, string> = {
-    "buildDetails-deploymentType": "deploymentType",
+    "buildDetails-versionedDeployment": "versionedDeployment",
     "buildDetails-enableFatCar": "fat.car.enable",
     "buildDetails-dockerDetails-cipherToolEnable": "ciphertool.enable"
 };
@@ -72,7 +72,7 @@ export function ProjectInformationForm(props: ProjectInformationFormProps) {
         "buildDetails-dockerDetails-dockerFileBaseImage": yup.string().required("Base image is required"),
         "buildDetails-dockerDetails-dockerName": yup.string().required("Docker name is required"),
         "buildDetails-enableFatCar": yup.boolean(),
-        "buildDetails-deploymentType": yup.boolean(),
+        "buildDetails-versionedDeployment": yup.boolean(),
         "buildDetails-dockerDetails-cipherToolEnable": yup.boolean(),
         "buildDetails-dockerDetails-keyStoreName": yup.string(),
         "buildDetails-dockerDetails-keyStoreAlias": yup.string(),
@@ -181,7 +181,7 @@ export function ProjectInformationForm(props: ProjectInformationFormProps) {
                     "buildDetails-dockerDetails-dockerFileBaseImage": response.buildDetails?.dockerDetails?.dockerFileBaseImage?.value,
                     "buildDetails-dockerDetails-dockerName": response.buildDetails?.dockerDetails?.dockerName.value,
                     "buildDetails-enableFatCar": response.buildDetails?.enableFatCar?.value === 'true',
-                    "buildDetails-deploymentType": response.buildDetails?.deploymentType?.value === 'true',
+                    "buildDetails-versionedDeployment": response.buildDetails?.versionedDeployment?.value === 'true',
                     "buildDetails-dockerDetails-cipherToolEnable": response.buildDetails?.dockerDetails?.cipherToolEnable?.value === 'true',
                     "buildDetails-dockerDetails-keyStoreName": response.buildDetails?.dockerDetails?.keyStoreName?.value,
                     "buildDetails-dockerDetails-keyStoreAlias": response.buildDetails?.dockerDetails?.keyStoreAlias?.value,
@@ -264,11 +264,8 @@ export function ProjectInformationForm(props: ProjectInformationFormProps) {
                     await rpcClient.getMiVisualizerRpcClient().updateProjectSettingsConfig({ configName: "useLocalMaven", value: useLocalMaven });
                 }
 
-                let fieldValue = getValues(field as any);
+                const fieldValue = getValues(field as any);
                 const range = field.split('-').reduce((acc, key) => acc?.[key], projectDetails as any)?.range;
-                if (field === "buildDetails-deploymentType" && fieldValue === false) {
-                    fieldValue = "";
-                }
                 if (range) {
                     if (Array.isArray(range)) {
                         range.forEach((r: any) => {
@@ -523,7 +520,7 @@ export function ProjectInformationForm(props: ProjectInformationFormProps) {
                                 descriptionSx={{ margin: "10px 0" }}
                                 control={control as any}
                                 sx={fieldStyle}
-                                {...register("buildDetails-deploymentType")}
+                                {...register("buildDetails-versionedDeployment")}
                             />
                             <FormCheckBox
                                 label="Enable Cipher Tool"
diff --git a/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/index.tsx b/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/index.tsx
index 000a18d225f..2c65456f9f1 100644
--- a/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/index.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/index.tsx
@@ -148,7 +148,9 @@ export function ProjectInformation(props: ProjectInformationProps) {
                 <div style={{
                     display: 'flex',
                     padding: '10px 0 0'
-                }}>Manage Dependencies <Icon name="link-external" id={"link-external-manage-dependencies-" + title} isCodicon sx={{ marginLeft: '5px' }} />
+                }}>Manage {title.includes('Connector') ? 
+                          'Connector' : title.includes('Project') ? 'Project' 
+                          : 'Other'} Dependencies <Icon name="link-external" id={"link-external-manage-dependencies-" + title} isCodicon sx={{ marginLeft: '5px' }} />
                 </div>
             </VSCodeLink>
         </div>;
diff --git a/workspaces/mi/mi-visualizer/src/views/PullingDependenciesView/index.tsx b/workspaces/mi/mi-visualizer/src/views/PullingDependenciesView/index.tsx
new file mode 100644
index 00000000000..82094277728
--- /dev/null
+++ b/workspaces/mi/mi-visualizer/src/views/PullingDependenciesView/index.tsx
@@ -0,0 +1,263 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT 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 { useVisualizerContext } from "@wso2/mi-rpc-client";
+import { useEffect } from "react";
+import React from "react";
+import { DependencyDetails } from "@wso2/mi-core";
+import { Button, Codicon, VSCodeColors } from "@wso2/ui-toolkit";
+
+const LoadingContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100%;
+    padding-top: 20vh;
+    text-align: center;
+    max-width: 500px;
+    margin: 0 auto;
+    animation: fadeIn 1s ease-in-out;
+`;
+
+const LoadingTitle = styled.h1`
+    font-size: 1.7em;
+    font-weight: 400;
+    margin: 0;
+    letter-spacing: -0.02em;
+    line-height: normal;
+`;
+
+const LoadingSubtitle = styled.p`
+    color: VSCodeColors.ON_SURFACE_VARIANT;
+    font-size: 13px;
+    margin: 0.5rem 0 2rem 0;
+    opacity: 0.8;
+`;
+
+const DependencyList = styled.div`
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 5px 10px;
+    border: 1px solid VSCodeColors.PANEL_BORDER;
+    border-radius: 4px;
+    width: 400px;
+    overflow-x: hidden;
+`;
+
+const DependencyItem = styled.div`
+    font-size: 14px;
+    font-weight: 500;
+    padding-top: 0.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: left;
+`;
+
+const DependencyTitle = styled.div`
+    font-size: 14px;
+    font-weight: 500;
+    height: 20px;
+    display: flex; 
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 5px;
+`;
+
+const DependencyListTitle = styled.h1`
+    font-size: 16px;
+    font-weight: 500;
+    margin: 1rem 0 ;
+    text-align: left;
+    align-self: flex-start;
+`;
+
+const ButtonGroup = styled.div`
+    display: flex;
+    gap: 12px;
+    padding: 20px 0;
+`;
+
+export function PullingDependenciesView() {
+    const { rpcClient } = useVisualizerContext();
+    const [initialMissingDependencies, setInitialMissingDependencies] = React.useState<DependencyDetails[]>(undefined);
+    const [currentMissingDependencies, setCurrentMissingDependencies] = React.useState<DependencyDetails[]>(undefined);
+    const [isFailedDownloading, setIsFailedDownloading] = React.useState(false);
+
+    useEffect(() => {
+        const fetchMissingDependencies = async () => {
+            const missingModules = (await rpcClient.getMiVisualizerRpcClient().getDependencyStatusList()).pendingDependencies;
+            setInitialMissingDependencies(missingModules);
+            setCurrentMissingDependencies(missingModules);
+            if (!(missingModules.length > 0)) {
+                handleOnComplete();
+            } else {
+                await pullDependencies();
+            }
+        };
+        fetchMissingDependencies();
+    }, []);
+
+    const pullDependencies = async () => {
+        const response = await rpcClient.getMiVisualizerRpcClient().updateConnectorDependencies();
+
+        if (response === 'Success') {
+            console.log('All dependencies are resolved!');
+            handleOnComplete();
+        } else {
+            setIsFailedDownloading(true);
+            const missingModules = (await rpcClient.getMiVisualizerRpcClient().getDependencyStatusList()).pendingDependencies;
+            setCurrentMissingDependencies(missingModules);
+            console.error('Failed to resolve dependencies:', response);
+        }
+    }
+
+    const checkIfDependencyResolved = (dependency: DependencyDetails): boolean => {
+        return !currentMissingDependencies.some(dep =>
+            dep.artifact === dependency.artifact &&
+            dep.version === dependency.version &&
+            dep.groupId === dependency.groupId);
+    }
+
+    const handleOnComplete = () => {
+        rpcClient.webviewReady();
+    }
+
+    const handleRetry = async () => {
+        setIsFailedDownloading(false);
+        await pullDependencies();
+    }
+
+    const handleContinueAnyway = () => {
+        handleOnComplete();
+    }
+
+    return (
+        <div style={{
+            backgroundColor: VSCodeColors.SURFACE_BRIGHT,
+            height: '100vh',
+            display: 'flex',
+            fontFamily: 'VSCodeColors.FONT_FAMILY'
+        }}>
+            <LoadingContent>
+                <LoadingTitle>
+                    Pulling Project Dependencies
+                </LoadingTitle>
+                <LoadingSubtitle>
+                    Fetching required modules for your project.<br />
+                    This may take a few moments.
+                </LoadingSubtitle>
+                {initialMissingDependencies && initialMissingDependencies.length > 0 && (
+                    <>
+                        <DependencyListTitle>Dependencies</DependencyListTitle>
+                        <DependencyList>
+                            {initialMissingDependencies.map((dependency, index) => (
+                                <div style={{ marginBottom: '10px' }}>
+                                    <DependencyItem key={index}>
+                                        <Codicon
+                                            sx={{ marginRight: '10px', height: '22px', width: '20px' }}
+                                            iconSx={{ fontSize: '20px' }}
+                                            name="symbol-method"
+                                        />
+                                        <DependencyTitle>
+                                            <>
+                                                <div style={{ display: 'flex', gap: '10px' }}>
+                                                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                                                        <span className="dependency-artifact">{dependency.artifact}@{dependency.version}</span>
+                                                    </div>
+                                                </div>
+                                            </>
+                                        </DependencyTitle>
+                                    </DependencyItem>
+                                    {checkIfDependencyResolved(dependency) ? (
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: '5px', marginLeft: '28px' }}>
+                                            <Codicon
+                                                sx={{ height: '15px', width: '20px' }}
+                                                iconSx={{ fontSize: '16px', color: VSCodeColors.CHARTS_GREEN, fontWeight: 'bold' }}
+                                                name="pass-filled"
+                                            />
+                                            <span
+                                                style={{
+                                                    fontSize: '14px',
+                                                    color: 'VSCodeColors.ON_SURFACE_VARIANT'
+                                                }}>
+                                                Completed
+                                            </span>
+                                        </div>
+                                    ) : (
+                                        isFailedDownloading ? (
+                                            < div style={{ display: 'flex', alignItems: 'center', gap: '5px', marginLeft: '28px' }}>
+                                                <Codicon
+                                                    sx={{ height: '15px', width: '20px' }}
+                                                    iconSx={{ fontSize: '16px', color: VSCodeColors.CHARTS_RED, fontWeight: 'bold' }}
+                                                    name="error"
+                                                />
+                                                <span
+                                                    style={{
+                                                        fontSize: '14px',
+                                                        color: 'VSCodeColors.ON_SURFACE_VARIANT'
+                                                    }}>
+                                                    Failed
+                                                </span>
+                                            </div>
+                                        ) : (
+                                            <div style={{ display: 'flex', alignItems: 'center', gap: '5px', marginLeft: '28px' }}>
+                                                <Codicon
+                                                    sx={{ height: '15px', width: '20px' }}
+                                                    iconSx={{ fontSize: '16px', color: VSCodeColors.CHARTS_BLUE, fontWeight: 'bold' }}
+                                                    name="circle-large-outline"
+                                                />
+                                                <span
+                                                    style={{
+                                                        fontSize: '14px',
+                                                        color: 'VSCodeColors.ON_SURFACE_VARIANT'
+                                                    }}>
+                                                    Downloading
+                                                </span>
+                                            </div>
+                                        ))}
+
+                                </div>
+                            ))}
+                        </DependencyList>
+                    </>
+                )}
+                {
+                    isFailedDownloading && (
+                        <ButtonGroup>
+                            <Button buttonSx={{ width: '120px', borderRadius: '4px', height: '30px' }}
+                                appearance="secondary"
+                                onClick={handleRetry}
+                            >
+                                Retry
+                            </Button>
+                            <Button buttonSx={{ width: '132px', borderRadius: '4px', height: '30px' }}
+                                appearance="primary"
+                                onClick={handleContinueAnyway}
+                            >
+                                Continue Anyway
+                            </Button>
+                        </ButtonGroup>
+                    )
+                }
+            </LoadingContent >
+        </div >
+    );
+}
diff --git a/workspaces/mi/mi-visualizer/src/views/WelcomeView/index.tsx b/workspaces/mi/mi-visualizer/src/views/WelcomeView/index.tsx
index 09e63d3523e..d5c2306db19 100644
--- a/workspaces/mi/mi-visualizer/src/views/WelcomeView/index.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/WelcomeView/index.tsx
@@ -158,13 +158,13 @@ export function WelcomeView() {
 
     const openTroubleshootGuide = () => {
         rpcClient.getMiVisualizerRpcClient().openExternal({
-            uri: "https://mi.docs.wso2.com/en/4.3.0/develop/mi-for-vscode/troubleshooting-mi-for-vscode/"
+            uri: "https://mi.docs.wso2.com/en/latest/develop/mi-for-vscode/troubleshooting-mi-for-vscode/"
         })
     }
 
     const openGettingStartedGuide = () => {
         rpcClient.getMiVisualizerRpcClient().openExternal({
-            uri: "https://mi.docs.wso2.com/en/4.3.0/get-started/development-kickstart/"
+            uri: "https://mi.docs.wso2.com/en/latest/get-started/development-kickstart/"
         })
     }