diff --git a/plugins/amazonq/chat/jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/webview/Browser.kt b/plugins/amazonq/chat/jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/webview/Browser.kt
index 2be84634929..6490a145721 100644
--- a/plugins/amazonq/chat/jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/webview/Browser.kt
+++ b/plugins/amazonq/chat/jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/webview/Browser.kt
@@ -114,13 +114,33 @@ class Browser(parent: Disposable, private val webUri: URI, val project: Project)
         highlightCommand: HighlightCommand?,
         activeProfile: QRegionProfile?,
     ): String {
-        val quickActionConfig = generateQuickActionConfig()
         val postMessageToJavaJsCode = receiveMessageQuery.inject("JSON.stringify(message)")
+        val connectorAdapterPath = "http://mynah/js/connectorAdapter.js"
+        generateQuickActionConfig()
         // language=HTML
         val jsScripts = """
+            <script type="text/javascript" src="$connectorAdapterPath"></script>
             <script type="text/javascript" src="$webUri" defer onload="init()"></script>
+            
             <script type="text/javascript">
+            
                 const init = () => {
+                    const hybridChatConnector = connectorAdapter.initiateAdapter(
+                     ${MeetQSettings.getInstance().reinvent2024OnboardingCount < MAX_ONBOARDING_PAGE_COUNT},
+                     ${MeetQSettings.getInstance().disclaimerAcknowledged},
+                     $isFeatureDevAvailable,
+                     $isCodeTransformAvailable,
+                     $isDocAvailable,
+                     $isCodeScanAvailable,
+                     $isCodeTestAvailable,
+                     {
+                            postMessage: message => {
+                                $postMessageToJavaJsCode
+                            }
+                        },
+                    
+                     "${activeProfile?.profileName.orEmpty()}")
+                    const commands = [hybridChatConnector.initialQuickActions[0], hybridChatConnector.initialQuickActions[1]]
                     amazonQChat.createChat(
                         {
                             postMessage: message => {
@@ -129,11 +149,11 @@ class Browser(parent: Disposable, private val webUri: URI, val project: Project)
                         }, 
                         {
                         agenticMode: true,
-                        quickActionCommands: $quickActionConfig,
+                        quickActionCommands: commands,
                         disclaimerAcknowledged: ${MeetQSettings.getInstance().disclaimerAcknowledged},
                         pairProgrammingAcknowledged: ${!MeetQSettings.getInstance().amazonQChatPairProgramming}
                         },
-                        null,
+                        hybridChatConnector,
                         {}
                      
                     );
diff --git a/plugins/amazonq/chat/jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/webview/BrowserConnector.kt b/plugins/amazonq/chat/jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/webview/BrowserConnector.kt
index ebe5858d97e..3ecd758dd8e 100644
--- a/plugins/amazonq/chat/jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/webview/BrowserConnector.kt
+++ b/plugins/amazonq/chat/jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/webview/BrowserConnector.kt
@@ -128,6 +128,13 @@ class BrowserConnector(
             .onEach { json ->
                 val node = serializer.toNode(json)
                 when (node.command) {
+                    // this is sent when the named agents UI is ready
+                    "ui-is-ready" -> {
+                        uiReady.complete(true)
+                        RunOnceUtil.runOnceForApp("AmazonQ-UI-Ready") {
+                            MeetQSettings.getInstance().reinvent2024OnboardingCount += 1
+                        }
+                    }
                     CHAT_DISCLAIMER_ACKNOWLEDGED -> {
                         MeetQSettings.getInstance().disclaimerAcknowledged = true
                     }
@@ -156,13 +163,14 @@ class BrowserConnector(
                 }
 
                 val tabType = node.tabType
-                if (tabType == null) {
+                if (tabType == null || tabType == "cwc") {
                     handleFlareChatMessages(browser, node)
-                }
-                connections.filter { connection -> connection.app.tabTypes.contains(tabType) }.forEach { connection ->
-                    launch {
-                        val message = serializer.deserialize(node, connection.messageTypeRegistry)
-                        connection.messagesFromUiToApp.publish(message)
+                } else {
+                    connections.filter { connection -> connection.app.tabTypes.contains(tabType) }.forEach { connection ->
+                        launch {
+                            val message = serializer.deserialize(node, connection.messageTypeRegistry)
+                            connection.messagesFromUiToApp.publish(message)
+                        }
                     }
                 }
             }
@@ -182,7 +190,7 @@ class BrowserConnector(
         // Send inbound messages to the browser
         val inboundMessages = connections.map { it.messagesFromAppToUi.flow }.merge()
         inboundMessages
-            .onEach { browser.post(serializer.serialize(it)) }
+            .onEach { browser.postChat(serializer.serialize(it)) }
             .launchIn(this)
     }
 
diff --git a/plugins/amazonq/mynah-ui/package-lock.json b/plugins/amazonq/mynah-ui/package-lock.json
index 1849ee5a11f..a16f304d31b 100644
--- a/plugins/amazonq/mynah-ui/package-lock.json
+++ b/plugins/amazonq/mynah-ui/package-lock.json
@@ -9,7 +9,7 @@
             "version": "1.0.0",
             "license": "ISC",
             "dependencies": {
-                "@aws/mynah-ui-chat": "npm:@aws/mynah-ui@4.22.1",
+                "@aws/mynah-ui-chat": "npm:@aws/mynah-ui@4.30.3",
                 "@types/node": "^14.18.5",
                 "fs-extra": "^10.0.1",
                 "sanitize-html": "^2.12.1",
@@ -18,6 +18,7 @@
                 "web-tree-sitter": "^0.20.7"
             },
             "devDependencies": {
+                "@aws/chat-client": "^0.1.4",
                 "@aws/fully-qualified-names": "^2.1.1",
                 "@types/sanitize-html": "^2.8.0",
                 "@typescript-eslint/eslint-plugin": "^5.38.0",
@@ -46,6 +47,28 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/@aws/chat-client": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/@aws/chat-client/-/chat-client-0.1.4.tgz",
+            "integrity": "sha512-5iqo9f/FjipyWxVPByVcI4yF9NPDOFInuS2ak4bK+j4d6ca1n20CnQrEQcMOdGjl5mde51s7X4Jqvlu3smgHGA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@aws/chat-client-ui-types": "^0.1.12",
+                "@aws/language-server-runtimes-types": "^0.1.10",
+                "@aws/mynah-ui": "^4.28.0"
+            }
+        },
+        "node_modules/@aws/chat-client-ui-types": {
+            "version": "0.1.32",
+            "resolved": "https://registry.npmjs.org/@aws/chat-client-ui-types/-/chat-client-ui-types-0.1.32.tgz",
+            "integrity": "sha512-axJymxFQhXh8AOnhek61VL5va917TjIvfHF5sHpyQay+znILAs65osdIMeqHs6VTjZCKtzIEp5iCd6uZbvYRVw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@aws/language-server-runtimes-types": "^0.1.26"
+            }
+        },
         "node_modules/@aws/fully-qualified-names": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/@aws/fully-qualified-names/-/fully-qualified-names-2.1.2.tgz",
@@ -55,11 +78,46 @@
                 "web-tree-sitter": "^0.20.7"
             }
         },
+        "node_modules/@aws/language-server-runtimes-types": {
+            "version": "0.1.26",
+            "resolved": "https://registry.npmjs.org/@aws/language-server-runtimes-types/-/language-server-runtimes-types-0.1.26.tgz",
+            "integrity": "sha512-c63rpUbcrtLqaC33t6elRApQqLbQvFgKzIQ2z/VCavE5F7HSLBfzhHkhgUFd775fBpsF4MHrIzwNitYLhDGobw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "vscode-languageserver-textdocument": "^1.0.12",
+                "vscode-languageserver-types": "^3.17.5"
+            }
+        },
+        "node_modules/@aws/mynah-ui": {
+            "version": "4.30.3",
+            "resolved": "https://registry.npmjs.org/@aws/mynah-ui/-/mynah-ui-4.30.3.tgz",
+            "integrity": "sha512-Xy22dzCaFUqpdSHMpLa8Dsq98DiAUq49dm7Iu8Yj2YZXSCyfKQiYMJOfwU8IoqeNcEney5JRMJpf+/RysWugbA==",
+            "dev": true,
+            "hasInstallScript": true,
+            "license": "Apache License 2.0",
+            "dependencies": {
+                "escape-html": "^1.0.3",
+                "highlight.js": "^11.11.0",
+                "just-clone": "^6.2.0",
+                "marked": "^14.1.0",
+                "sanitize-html": "^2.12.1",
+                "unescape-html": "^1.1.0"
+            },
+            "peerDependencies": {
+                "escape-html": "^1.0.3",
+                "highlight.js": "^11.11.0",
+                "just-clone": "^6.2.0",
+                "marked": "^14.1.0",
+                "sanitize-html": "^2.12.1",
+                "unescape-html": "^1.1.0"
+            }
+        },
         "node_modules/@aws/mynah-ui-chat": {
             "name": "@aws/mynah-ui",
-            "version": "4.22.1",
-            "resolved": "https://registry.npmjs.org/@aws/mynah-ui/-/mynah-ui-4.22.1.tgz",
-            "integrity": "sha512-6mWD5Fp4VDVSKIv3sRKopoeh3GeiXEp2gWXmUWSVE9ccnnnavPyKSebV6vJiHJHtuS1da7i6ZLVednpsV9I49Q==",
+            "version": "4.30.3",
+            "resolved": "https://registry.npmjs.org/@aws/mynah-ui/-/mynah-ui-4.30.3.tgz",
+            "integrity": "sha512-Xy22dzCaFUqpdSHMpLa8Dsq98DiAUq49dm7Iu8Yj2YZXSCyfKQiYMJOfwU8IoqeNcEney5JRMJpf+/RysWugbA==",
             "hasInstallScript": true,
             "license": "Apache License 2.0",
             "dependencies": {
@@ -3515,6 +3573,20 @@
             "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
             "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="
         },
+        "node_modules/vscode-languageserver-textdocument": {
+            "version": "1.0.12",
+            "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
+            "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/vscode-languageserver-types": {
+            "version": "3.17.5",
+            "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
+            "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/watchpack": {
             "version": "2.4.2",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
diff --git a/plugins/amazonq/mynah-ui/package.json b/plugins/amazonq/mynah-ui/package.json
index 591190cfc30..953b82bc434 100644
--- a/plugins/amazonq/mynah-ui/package.json
+++ b/plugins/amazonq/mynah-ui/package.json
@@ -12,7 +12,7 @@
         "lintfix": "eslint -c .eslintrc.js --fix --ext .ts ."
     },
     "dependencies": {
-        "@aws/mynah-ui-chat": "npm:@aws/mynah-ui@4.22.1",
+        "@aws/mynah-ui-chat": "npm:@aws/mynah-ui@4.30.3",
         "@types/node": "^14.18.5",
         "fs-extra": "^10.0.1",
         "sanitize-html": "^2.12.1",
@@ -22,6 +22,7 @@
     },
     "devDependencies": {
         "@aws/fully-qualified-names": "^2.1.1",
+        "@aws/chat-client": "^0.1.4",
         "@types/sanitize-html": "^2.8.0",
         "@typescript-eslint/eslint-plugin": "^5.38.0",
         "@typescript-eslint/parser": "^5.38.0",
diff --git a/plugins/amazonq/mynah-ui/src/mynah-ui/connectorAdapter.ts b/plugins/amazonq/mynah-ui/src/mynah-ui/connectorAdapter.ts
new file mode 100644
index 00000000000..0015e5a940c
--- /dev/null
+++ b/plugins/amazonq/mynah-ui/src/mynah-ui/connectorAdapter.ts
@@ -0,0 +1,120 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import {ChatPrompt, MynahUI, QuickActionCommand, QuickActionCommandGroup} from '@aws/mynah-ui-chat'
+import { isTabType } from './ui/storages/tabsStorage'
+import { WebviewUIHandler } from './ui/main'
+import { TabDataGenerator } from './ui/tabs/generator'
+import { ChatClientAdapter, ChatEventHandler } from '@aws/chat-client'
+import { FqnExtractor } from "./fqn/extractor";
+
+export * from "./ui/main";
+
+declare global {
+    interface Window { fqnExtractor: FqnExtractor; }
+}
+
+window.fqnExtractor = new FqnExtractor();
+
+export const initiateAdapter = (showWelcomePage: boolean,
+                             disclaimerAcknowledged: boolean,
+                             isFeatureDevEnabled: boolean,
+                             isCodeTransformEnabled: boolean,
+                             isDocEnabled: boolean,
+                             isCodeScanEnabled: boolean,
+                             isCodeTestEnabled: boolean,
+                             ideApiPostMessage: (message: any) => void,
+                             profileName?: string) : HybridChatAdapter => {
+    return new HybridChatAdapter(showWelcomePage, disclaimerAcknowledged, isFeatureDevEnabled, isCodeTransformEnabled, isDocEnabled, isCodeScanEnabled, isCodeTestEnabled, ideApiPostMessage, profileName)
+}
+
+
+// Ref: https://github.com/aws/aws-toolkit-vscode/blob/e9ea8082ffe0b9968a873437407d0b6b31b9e1a5/packages/core/src/amazonq/webview/ui/connectorAdapter.ts#L14
+export class HybridChatAdapter implements ChatClientAdapter {
+    private uiHandler?: WebviewUIHandler
+
+    private mynahUIRef?: { mynahUI: MynahUI}
+
+    constructor(
+
+        private showWelcomePage: boolean,
+        private disclaimerAcknowledged: boolean,
+        private isFeatureDevEnabled: boolean,
+        private isCodeTransformEnabled: boolean,
+        private isDocEnabled: boolean,
+        private isCodeScanEnabled: boolean,
+        private isCodeTestEnabled: boolean,
+        private ideApiPostMessage: (message: any) => void,
+        private profileName?: string,
+
+    ) {}
+
+    /**
+     * First we create the ui handler to get the props, then once mynah UI gets created flare will re-inject the
+     * mynah UI instance on the hybrid chat adapter
+     */
+    createChatEventHandler(mynahUIRef: { mynahUI: MynahUI }): ChatEventHandler {
+        this.mynahUIRef = mynahUIRef
+
+        this.uiHandler = new WebviewUIHandler({
+            postMessage: this.ideApiPostMessage,
+            mynahUIRef: this.mynahUIRef,
+            showWelcomePage: this.showWelcomePage,
+            disclaimerAcknowledged: this.disclaimerAcknowledged,
+            isFeatureDevEnabled: this.isFeatureDevEnabled,
+            isCodeTransformEnabled: this.isCodeTransformEnabled,
+            isDocEnabled: this.isDocEnabled,
+            isCodeScanEnabled: this.isCodeScanEnabled,
+            isCodeTestEnabled: this.isCodeTestEnabled,
+            profileName: this.profileName,
+            hybridChat: true,
+        })
+
+        return this.uiHandler.mynahUIProps
+    }
+
+    isSupportedTab(tabId: string): boolean {
+        const tabType = this.uiHandler?.tabsStorage.getTab(tabId)?.type
+        if (!tabType) {
+            return false
+        }
+        return isTabType(tabType) && tabType !== 'cwc'
+    }
+
+    async handleMessageReceive(message: MessageEvent): Promise<void> {
+        if (this.uiHandler) {
+            return this.uiHandler?.connector?.handleMessageReceive(message)
+        }
+
+        console.error('unknown message: ', message.data)
+    }
+
+    isSupportedQuickAction(command: string): boolean {
+        return (
+            command === '/dev' ||
+            command === '/test' ||
+            command === '/review' ||
+            command === '/doc' ||
+            command === '/transform'
+        )
+    }
+
+    handleQuickAction(prompt: ChatPrompt, tabId: string, eventId: string | undefined): void {
+        return this.uiHandler?.quickActionHandler?.handleCommand(prompt, tabId, eventId)
+    }
+
+    get initialQuickActions(): QuickActionCommandGroup[] {
+        const tabDataGenerator = new TabDataGenerator({
+            isFeatureDevEnabled: this.isFeatureDevEnabled,
+            isCodeTransformEnabled: this.isCodeTransformEnabled,
+            isDocEnabled: this.isDocEnabled,
+            isCodeScanEnabled: this.isCodeScanEnabled,
+            isCodeTestEnabled: this.isCodeTestEnabled,
+            profileName: this.profileName
+        })
+        return tabDataGenerator.quickActionsGenerator.generateForTab('cwc') ?? []
+    }
+}
+
+
diff --git a/plugins/amazonq/mynah-ui/src/mynah-ui/fqn/extractor.ts b/plugins/amazonq/mynah-ui/src/mynah-ui/fqn/extractor.ts
index c467d0acf97..2c598c087c1 100644
--- a/plugins/amazonq/mynah-ui/src/mynah-ui/fqn/extractor.ts
+++ b/plugins/amazonq/mynah-ui/src/mynah-ui/fqn/extractor.ts
@@ -1,5 +1,5 @@
 /*!
- * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
 
diff --git a/plugins/amazonq/mynah-ui/src/mynah-ui/fqn/java-import-reader.ts b/plugins/amazonq/mynah-ui/src/mynah-ui/fqn/java-import-reader.ts
index a9bf1771afe..8209a444db3 100644
--- a/plugins/amazonq/mynah-ui/src/mynah-ui/fqn/java-import-reader.ts
+++ b/plugins/amazonq/mynah-ui/src/mynah-ui/fqn/java-import-reader.ts
@@ -1,5 +1,5 @@
 /*!
- * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
 
diff --git a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/connector.ts b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/connector.ts
index 6ceb88108c4..4efe2623646 100644
--- a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/connector.ts
+++ b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/connector.ts
@@ -109,7 +109,7 @@ export class Connector {
     private readonly tabsStorage
     private readonly amazonqCommonsConnector: AmazonQCommonsConnector
 
-    private isUIReady = false
+    isUIReady = false
 
     constructor(props: ConnectorProps) {
         this.sendMessageToExtension = props.sendMessageToExtension
diff --git a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/followUps/handler.ts b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/followUps/handler.ts
index 55e28eaacc5..c5090c15998 100644
--- a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/followUps/handler.ts
+++ b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/followUps/handler.ts
@@ -8,20 +8,21 @@ import { Connector } from '../connector'
 import { TabType, TabsStorage } from '../storages/tabsStorage'
 import { WelcomeFollowupType } from '../apps/amazonqCommonsConnector'
 import { AuthFollowUpType } from './generator'
+import {MynahUIRef} from "../main";
 
 export interface FollowUpInteractionHandlerProps {
-    mynahUI: MynahUI
+    mynahUIRef: MynahUIRef
     connector: Connector
     tabsStorage: TabsStorage
 }
 
 export class FollowUpInteractionHandler {
-    private mynahUI: MynahUI
+    private mynahUIRef: MynahUIRef
     private connector: Connector
     private tabsStorage: TabsStorage
 
     constructor(props: FollowUpInteractionHandlerProps) {
-        this.mynahUI = props.mynahUI
+        this.mynahUIRef = props.mynahUIRef
         this.connector = props.connector
         this.tabsStorage = props.tabsStorage
     }
@@ -50,16 +51,16 @@ export class FollowUpInteractionHandler {
         // which will cause an api call
         // then we can set the loading state to true
         if (followUp.prompt !== undefined) {
-            this.mynahUI.updateStore(tabID, {
+            this.mynahUI?.updateStore(tabID, {
                 loadingChat: true,
                 cancelButtonWhenLoading: false,
                 promptInputDisabledState: true,
             })
-            this.mynahUI.addChatItem(tabID, {
+            this.mynahUI?.addChatItem(tabID, {
                 type: ChatItemType.PROMPT,
                 body: followUp.prompt,
             })
-            this.mynahUI.addChatItem(tabID, {
+            this.mynahUI?.addChatItem(tabID, {
                 type: ChatItemType.ANSWER_STREAM,
                 body: '',
             })
@@ -79,7 +80,7 @@ export class FollowUpInteractionHandler {
 
     public onWelcomeFollowUpClicked(tabID: string, welcomeFollowUpType: WelcomeFollowupType) {
         if (welcomeFollowUpType === 'continue-to-chat') {
-            this.mynahUI.addChatItem(tabID, {
+            this.mynahUI?.addChatItem(tabID, {
                 type: ChatItemType.ANSWER,
                 body: 'Ok, please write your question below.',
             })
@@ -107,15 +108,15 @@ export class FollowUpInteractionHandler {
         // which will cause an api call
         // then we can set the loading state to true
         if (followUp.prompt !== undefined) {
-            this.mynahUI.updateStore(tabID, {
+            this.mynahUI?.updateStore(tabID, {
                 loadingChat: true,
                 promptInputDisabledState: true,
             })
-            this.mynahUI.addChatItem(tabID, {
+            this.mynahUI?.addChatItem(tabID, {
                 type: ChatItemType.PROMPT,
                 body: followUp.prompt,
             })
-            this.mynahUI.addChatItem(tabID, {
+            this.mynahUI?.addChatItem(tabID, {
                 type: ChatItemType.ANSWER_STREAM,
                 body: '',
             })
@@ -131,4 +132,8 @@ export class FollowUpInteractionHandler {
         }
         this.connector.onFollowUpClicked(tabID, messageId, followUp)
     }
+
+    private get mynahUI(): MynahUI | undefined {
+        return this.mynahUIRef.mynahUI
+    }
 }
diff --git a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/main.ts b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/main.ts
index 1d033f1cc65..a44c8d385e4 100644
--- a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/main.ts
+++ b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/main.ts
@@ -4,14 +4,15 @@
  */
 import { Connector, CWCChatItem } from './connector'
 import {
-    ChatItem,
+    ChatItem, ChatItemAction,
     ChatItemType,
     MynahIcons,
     MynahUI,
-    MynahUIDataModel,
+    MynahUIDataModel, MynahUIProps,
     NotificationType,
     ProgressField, QuickActionCommand,
-    ReferenceTrackerInformation
+    ReferenceTrackerInformation,
+    ChatPrompt,
 } from '@aws/mynah-ui-chat'
 import './styles/dark.scss'
 import { TabsStorage, TabType } from './storages/tabsStorage'
@@ -26,643 +27,711 @@ import { MessageController } from './messages/controller'
 import { getActions, getDetails } from './diffTree/actions'
 import { DiffTreeFileInfo } from './diffTree/types'
 import './styles.css'
-import { ChatPrompt, CodeSelectionType} from "@aws/mynah-ui-chat/dist/static";
 import {welcomeScreenTabData} from "./walkthrough/welcome";
 import { agentWalkthroughDataModel } from './walkthrough/agent'
 import {createClickTelemetry, createOpenAgentTelemetry} from "./telemetry/actions";
 import {disclaimerAcknowledgeButtonId, disclaimerCard} from "./texts/disclaimer";
 
+
+// Ref: https://github.com/aws/aws-toolkit-vscode/blob/e9ea8082ffe0b9968a873437407d0b6b31b9e1a5/packages/core/src/amazonq/webview/ui/main.ts
 export const createMynahUI = (
     ideApi: any,
     showWelcomePage: boolean,
     disclaimerAcknowledged: boolean,
-    featureDevInitEnabled: boolean,
-    codeTransformInitEnabled: boolean,
-    docInitEnabled: boolean,
-    codeScanEnabled: boolean,
-    codeTestEnabled: boolean,
+    isFeatureDevEnabled: boolean,
+    isCodeTransformEnabled: boolean,
+    isDocEnabled: boolean,
+    isCodeScanEnabled: boolean,
+    isCodeTestEnabled: boolean,
     highlightCommand?: QuickActionCommand,
-    profileName?: string
-) => {
-    let disclaimerCardActive = !disclaimerAcknowledged
-
-    // eslint-disable-next-line prefer-const
-    let mynahUI: MynahUI
-    // eslint-disable-next-line prefer-const
-    let connector: Connector
-    const responseMetadata = new Map<string, string[]>()
-
-    const tabsStorage = new TabsStorage({
-        onTabTimeout: tabID => {
-            mynahUI.addChatItem(tabID, {
-                type: ChatItemType.ANSWER,
-                body: 'This conversation has timed out after 48 hours. It will not be saved. Start a new conversation.',
-            })
-            mynahUI.updateStore(tabID, {
-                promptInputDisabledState: true,
-                promptInputPlaceholder: 'Session ended.',
-            })
-        },
-    })
-    // Adding the first tab as CWC tab
-    tabsStorage.addTab({
-        id: 'tab-1',
-        status: 'free',
-        type: showWelcomePage ? 'welcome' : 'cwc',
-        isSelected: true,
-    })
-
-    // used to keep track of whether featureDev is enabled and has an active idC
-    let isFeatureDevEnabled = featureDevInitEnabled
-
-    let isCodeTransformEnabled = codeTransformInitEnabled
-
-    let isDocEnabled = docInitEnabled
+    profileName?: string,
 
-    let isCodeScanEnabled = codeScanEnabled
-
-    let isCodeTestEnabled = codeTestEnabled
-
-    const tabDataGenerator = new TabDataGenerator({
+) => {
+    const handler = new WebviewUIHandler({
+        postMessage: ideApi.postMessage,
+        mynahUIRef: { mynahUI: undefined },
+        showWelcomePage,
+        disclaimerAcknowledged,
         isFeatureDevEnabled,
         isCodeTransformEnabled,
         isDocEnabled,
         isCodeScanEnabled,
         isCodeTestEnabled,
         highlightCommand,
-        profileName
+        profileName,
+        hybridChat: false,
     })
 
-    // eslint-disable-next-line prefer-const
-    let followUpsInteractionHandler: FollowUpInteractionHandler
-    // eslint-disable-next-line prefer-const
-    let quickActionHandler: QuickActionHandler
-    // eslint-disable-next-line prefer-const
-    let textMessageHandler: TextMessageHandler
-    // eslint-disable-next-line prefer-const
-    let messageController: MessageController
-
-    // eslint-disable-next-line prefer-const
-    connector = new Connector({
-        tabsStorage,
-        /**
-         * Proxy for allowing underlying common connectors to call quick action handlers
-         */
-        handleCommand: (chatPrompt: ChatPrompt, tabId: string) => {
-            quickActionHandler.handleCommand(chatPrompt, tabId)
-        },
-        onUpdateAuthentication: (
-            featureDevEnabled: boolean,
-            codeTransformEnabled: boolean,
-            docEnabled: boolean,
-            codeScanEnabled: boolean,
-            codeTestEnabled: boolean,
-            authenticatingTabIDs: string[]
-        ): void => {
-            isFeatureDevEnabled = featureDevEnabled
-            isCodeTransformEnabled = codeTransformEnabled
-            isDocEnabled = docEnabled
-            isCodeScanEnabled = codeScanEnabled
-            isCodeTestEnabled = codeTestEnabled
-
-            quickActionHandler.isFeatureDevEnabled = isFeatureDevEnabled
-            quickActionHandler.isCodeTransformEnabled = isCodeTransformEnabled
-            quickActionHandler.isDocEnabled = isDocEnabled
-            quickActionHandler.isCodeTestEnabled = isCodeTestEnabled
-            quickActionHandler.isCodeScanEnabled = isCodeScanEnabled
-            tabDataGenerator.quickActionsGenerator.isFeatureDevEnabled = isFeatureDevEnabled
-            tabDataGenerator.quickActionsGenerator.isCodeTransformEnabled = isCodeTransformEnabled
-            tabDataGenerator.quickActionsGenerator.isDocEnabled = isDocEnabled
-            tabDataGenerator.quickActionsGenerator.isCodeScanEnabled = isCodeScanEnabled
-            tabDataGenerator.quickActionsGenerator.isCodeTestEnabled = isCodeTestEnabled
-
-            // Set the new defaults for the quick action commands in all tabs now that isFeatureDevEnabled and isCodeTransformEnabled were enabled/disabled
-            for (const tab of tabsStorage.getTabs()) {
-                mynahUI.updateStore(tab.id, {
-                    quickActionCommands: tabDataGenerator.quickActionsGenerator.generateForTab(tab.type),
+    return {
+        mynahUI: handler.mynahUI,
+        messageReceiver: handler.connector?.handleMessageReceive,
+    }
+}
+
+export class WebviewUIHandler {
+    postMessage: any
+    showWelcomePage: boolean
+    disclaimerAcknowledged: boolean
+    isFeatureDevEnabled: boolean
+    isCodeTransformEnabled: boolean
+    isDocEnabled: boolean
+    isCodeScanEnabled: boolean
+    isCodeTestEnabled: boolean
+    highlightCommand?: QuickActionCommand
+    profileName?: string
+    responseMetadata: Map<string, string[]>
+    tabsStorage: TabsStorage
+
+    mynahUIProps: MynahUIProps
+    connector?: Connector
+    tabDataGenerator?: TabDataGenerator
+    followUpsInteractionHandler?: FollowUpInteractionHandler
+    quickActionHandler?: QuickActionHandler
+    textMessageHandler?: TextMessageHandler
+    messageController?: MessageController
+
+    savedContextCommands: MynahUIDataModel['contextCommands']
+    disclaimerCardActive : boolean
+
+
+    mynahUIRef: { mynahUI: MynahUI | undefined }
+    constructor({
+                    postMessage,
+                    mynahUIRef,
+                    showWelcomePage,
+                    disclaimerAcknowledged,
+                    isFeatureDevEnabled,
+                    isCodeTransformEnabled,
+                    isDocEnabled,
+                    isCodeScanEnabled,
+                    isCodeTestEnabled,
+                    highlightCommand,
+                    profileName,
+                    hybridChat,
+
+                } : {
+        postMessage: any
+        mynahUIRef: { mynahUI: MynahUI | undefined }
+        showWelcomePage: boolean,
+        disclaimerAcknowledged: boolean,
+        isFeatureDevEnabled: boolean
+        isCodeTransformEnabled: boolean
+        isDocEnabled: boolean
+        isCodeScanEnabled: boolean
+        isCodeTestEnabled: boolean
+        highlightCommand?: QuickActionCommand,
+        profileName?: string,
+        hybridChat?: boolean
+
+
+    }) {
+        this.postMessage = postMessage
+        this.mynahUIRef = mynahUIRef
+        this.showWelcomePage = showWelcomePage;
+        this.disclaimerAcknowledged = disclaimerAcknowledged
+        this.isFeatureDevEnabled = isFeatureDevEnabled
+        this.isCodeTransformEnabled = isCodeTransformEnabled
+        this.isDocEnabled = isDocEnabled
+        this.isCodeScanEnabled = isCodeScanEnabled
+        this.isCodeTestEnabled = isCodeTestEnabled
+        this.profileName = profileName
+        this.responseMetadata = new Map<string, string[]>()
+        this.disclaimerCardActive = !disclaimerAcknowledged
+
+
+        this.tabsStorage = new TabsStorage({
+            onTabTimeout: tabID => {
+                this.mynahUI?.addChatItem(tabID, {
+                    type: ChatItemType.ANSWER,
+                    body: 'This conversation has timed out after 48 hours. It will not be saved. Start a new conversation.',
+                })
+                this.mynahUI?.updateStore(tabID, {
+                    promptInputDisabledState: true,
+                    promptInputPlaceholder: 'Session ended.',
+                })
+            },
+        })
+
+        this.tabDataGenerator = new TabDataGenerator({
+            isFeatureDevEnabled,
+            isCodeTransformEnabled,
+            isDocEnabled,
+            isCodeScanEnabled,
+            isCodeTestEnabled,
+            highlightCommand,
+            profileName
+        })
+
+        this.connector = new Connector({
+            tabsStorage: this.tabsStorage,
+            /**
+             * Proxy for allowing underlying common connectors to call quick action handlers
+             */
+            handleCommand: (chatPrompt: ChatPrompt, tabId: string) => {
+                this.quickActionHandler?.handleCommand(chatPrompt, tabId)
+            },
+            onUpdateAuthentication: (
+                featureDevEnabled: boolean,
+                codeTransformEnabled: boolean,
+                docEnabled: boolean,
+                codeScanEnabled: boolean,
+                codeTestEnabled: boolean,
+                authenticatingTabIDs: string[]
+            ): void => {
+                isFeatureDevEnabled = featureDevEnabled
+                isCodeTransformEnabled = codeTransformEnabled
+                isDocEnabled = docEnabled
+                isCodeScanEnabled = codeScanEnabled
+                isCodeTestEnabled = codeTestEnabled
+
+                this.quickActionHandler = new QuickActionHandler({
+                    mynahUIRef: this.mynahUIRef,
+                    connector: this.connector!,
+                    tabsStorage: this.tabsStorage,
+                    isFeatureDevEnabled: this.isFeatureDevEnabled,
+                    isCodeTransformEnabled: this.isCodeTransformEnabled,
+                    isDocEnabled: this.isDocEnabled,
+                    isCodeScanEnabled: this.isCodeScanEnabled,
+                    isCodeTestEnabled: this.isCodeTestEnabled,
+                    hybridChat
                 })
-            }
 
-            // Unlock every authenticated tab that is now authenticated
-            for (const tabID of authenticatingTabIDs) {
-                const tabType = tabsStorage.getTab(tabID)?.type
-                if (
-                    (tabType === 'featuredev' && featureDevEnabled) ||
-                    (tabType === 'codetransform' && codeTransformEnabled) ||
-                    (tabType === 'doc' && docEnabled) ||
-                    (tabType === 'codetransform' && codeTransformEnabled) ||
-                    (tabType === 'codetest' && codeTestEnabled)
-                ) {
-                    mynahUI.addChatItem(tabID, {
-                        type: ChatItemType.ANSWER,
-                        body: 'Authentication successful. Connected to Amazon Q.',
-                    })
-                    mynahUI.updateStore(tabID, {
-                        // Always disable prompt for code transform tabs
-                        promptInputDisabledState: tabType === 'codetransform',
+                this.tabDataGenerator = new TabDataGenerator({
+                    isFeatureDevEnabled,
+                    isCodeTransformEnabled,
+                    isDocEnabled,
+                    isCodeScanEnabled,
+                    isCodeTestEnabled,
+                    highlightCommand,
+                    profileName
+                })
+
+                // Set the new defaults for the quick action commands in all tabs now that isFeatureDevEnabled and isCodeTransformEnabled were enabled/disabled
+                for (const tab of this.tabsStorage.getTabs()) {
+                    this.mynahUI?.updateStore(tab.id, {
+                        quickActionCommands: this.tabDataGenerator.quickActionsGenerator.generateForTab(tab.type),
                     })
                 }
-            }
-        },
-        onFileActionClick: (): void => {},
-        onCWCOnboardingPageInteractionMessage: (message: ChatItem): string | undefined => {
-            return messageController.sendMessageToTab(message, 'cwc')
-        },
-        onCWCContextCommandMessage: (message: ChatItem, command?: string): string | undefined => {
-            if (command === 'aws.amazonq.sendToPrompt') {
-                return messageController.sendSelectedCodeToTab(message)
-            } else {
-                const tabID = messageController.sendMessageToTab(message, 'cwc')
-                if (tabID && command) {
-                    ideApi.postMessage(createOpenAgentTelemetry('cwc', 'right-click'))
+
+                // Unlock every authenticated tab that is now authenticated
+                for (const tabID of authenticatingTabIDs) {
+                    const tabType = this.tabsStorage.getTab(tabID)?.type
+                    if (
+                        (tabType === 'featuredev' && featureDevEnabled) ||
+                        (tabType === 'codetransform' && codeTransformEnabled) ||
+                        (tabType === 'doc' && docEnabled) ||
+                        (tabType === 'codetransform' && codeTransformEnabled) ||
+                        (tabType === 'codetest' && codeTestEnabled)
+                    ) {
+                        this.mynahUI?.addChatItem(tabID, {
+                            type: ChatItemType.ANSWER,
+                            body: 'Authentication successful. Connected to Amazon Q.',
+                        })
+                        this.mynahUI?.updateStore(tabID, {
+                            // Always disable prompt for code transform tabs
+                            promptInputDisabledState: tabType === 'codetransform',
+                        })
+                    }
                 }
+            },
+            onFileActionClick: (): void => {},
+            onCWCOnboardingPageInteractionMessage: (message: ChatItem): string | undefined => {
+                return this.messageController?.sendMessageToTab(message, 'cwc')
+            },
+            onCWCContextCommandMessage: (message: ChatItem, command?: string): string | undefined => {
+                if (command === 'aws.amazonq.sendToPrompt') {
+                    return this.messageController?.sendSelectedCodeToTab(message)
+                } else {
+                    const tabID = this.messageController?.sendMessageToTab(message, 'cwc')
+                    if (tabID && command) {
+                        this.postMessage.postMessage(createOpenAgentTelemetry('cwc', 'right-click'))
+                    }
 
-                return tabID
-            }
-        },
-        onWelcomeFollowUpClicked: (tabID: string, welcomeFollowUpType: WelcomeFollowupType) => {
-            followUpsInteractionHandler.onWelcomeFollowUpClicked(tabID, welcomeFollowUpType)
-        },
-        onChatInputEnabled: (tabID: string, enabled: boolean) => {
-            mynahUI.updateStore(tabID, {
-                promptInputDisabledState: tabsStorage.isTabDead(tabID) || !enabled,
-            })
-        },
-        onAsyncEventProgress: (tabID: string, inProgress: boolean, message: string | undefined, cancelButtonWhenLoading: boolean = false) => {
-            if (inProgress) {
-                mynahUI.updateStore(tabID, {
-                    loadingChat: true,
-                    promptInputDisabledState: true,
-                    cancelButtonWhenLoading,
+                    return tabID
+                }
+            },
+            onWelcomeFollowUpClicked: (tabID: string, welcomeFollowUpType: WelcomeFollowupType) => {
+                this.followUpsInteractionHandler?.onWelcomeFollowUpClicked(tabID, welcomeFollowUpType)
+            },
+            onChatInputEnabled: (tabID: string, enabled: boolean) => {
+                this.mynahUI?.updateStore(tabID, {
+                    promptInputDisabledState: this.tabsStorage.isTabDead(tabID) || !enabled,
                 })
-                if (message) {
-                    mynahUI.updateLastChatAnswer(tabID, {
-                        body: message,
+            },
+            onAsyncEventProgress: (tabID: string, inProgress: boolean, message: string | undefined, cancelButtonWhenLoading: boolean = false) => {
+                if (inProgress) {
+                    this.mynahUI?.updateStore(tabID, {
+                        loadingChat: true,
+                        promptInputDisabledState: true,
+                        cancelButtonWhenLoading,
+                    })
+                    if (message) {
+                        this.mynahUI?.updateLastChatAnswer(tabID, {
+                            body: message,
+                        })
+                    }
+                    this.mynahUI?.addChatItem(tabID, {
+                        type: ChatItemType.ANSWER_STREAM,
+                        body: '',
                     })
+                    this.tabsStorage.updateTabStatus(tabID, 'busy')
+                    return
                 }
-                mynahUI.addChatItem(tabID, {
-                    type: ChatItemType.ANSWER_STREAM,
-                    body: '',
-                })
-                tabsStorage.updateTabStatus(tabID, 'busy')
-                return
-            }
 
-            mynahUI.updateStore(tabID, {
-                loadingChat: false,
-                promptInputDisabledState: tabsStorage.isTabDead(tabID),
-            })
-            tabsStorage.updateTabStatus(tabID, 'free')
-        },
-        onCodeTransformChatDisabled: (tabID: string) => {
-            // Clear the chat window to prevent button clicks or form selections
-            mynahUI.updateStore(tabID, {
-                loadingChat: false,
-                chatItems: [],
-            })
-        },
-        onCodeTransformMessageReceived: (
-            tabID: string,
-            chatItem: ChatItem,
-            isLoading: boolean,
-            clearPreviousItemButtons?: boolean
-        ) => {
-            if (chatItem.type === ChatItemType.ANSWER_PART) {
-                mynahUI.updateLastChatAnswer(tabID, {
-                    ...(chatItem.messageId !== undefined ? { messageId: chatItem.messageId } : {}),
-                    ...(chatItem.canBeVoted !== undefined ? { canBeVoted: chatItem.canBeVoted } : {}),
-                    ...(chatItem.codeReference !== undefined ? { codeReference: chatItem.codeReference } : {}),
-                    ...(chatItem.body !== undefined ? { body: chatItem.body } : {}),
-                    ...(chatItem.relatedContent !== undefined ? { relatedContent: chatItem.relatedContent } : {}),
-                    ...(chatItem.formItems !== undefined ? { formItems: chatItem.formItems } : {}),
-                    ...(chatItem.buttons !== undefined ? { buttons: chatItem.buttons } : { buttons: [] }),
-                    // For loading animation to work, do not update the chat item type
-                    ...(chatItem.followUp !== undefined ? { followUp: chatItem.followUp } : {}),
+                this.mynahUI?.updateStore(tabID, {
+                    loadingChat: false,
+                    promptInputDisabledState: this.tabsStorage.isTabDead(tabID),
                 })
-
-                if (!isLoading) {
-                    mynahUI.updateStore(tabID, {
-                        loadingChat: false,
+                this.tabsStorage.updateTabStatus(tabID, 'free')
+            },
+            onCodeTransformChatDisabled: (tabID: string) => {
+                // Clear the chat window to prevent button clicks or form selections
+                this.mynahUI?.updateStore(tabID, {
+                    loadingChat: false,
+                    chatItems: [],
+                })
+            },
+            onCodeTransformMessageReceived: (
+                tabID: string,
+                chatItem: ChatItem,
+                isLoading: boolean,
+                clearPreviousItemButtons?: boolean
+            ) => {
+                if (chatItem.type === ChatItemType.ANSWER_PART) {
+                    this.mynahUI?.updateLastChatAnswer(tabID, {
+                        ...(chatItem.messageId !== undefined ? { messageId: chatItem.messageId } : {}),
+                        ...(chatItem.canBeVoted !== undefined ? { canBeVoted: chatItem.canBeVoted } : {}),
+                        ...(chatItem.codeReference !== undefined ? { codeReference: chatItem.codeReference } : {}),
+                        ...(chatItem.body !== undefined ? { body: chatItem.body } : {}),
+                        ...(chatItem.relatedContent !== undefined ? { relatedContent: chatItem.relatedContent } : {}),
+                        ...(chatItem.formItems !== undefined ? { formItems: chatItem.formItems } : {}),
+                        ...(chatItem.buttons !== undefined ? { buttons: chatItem.buttons } : { buttons: [] }),
+                        // For loading animation to work, do not update the chat item type
+                        ...(chatItem.followUp !== undefined ? { followUp: chatItem.followUp } : {}),
                     })
+
+                    if (!isLoading) {
+                        this.mynahUI?.updateStore(tabID, {
+                            loadingChat: false,
+                        })
+                    }
+
+                    return
                 }
 
-                return
-            }
+                if (
+                    chatItem.type === ChatItemType.PROMPT ||
+                    chatItem.type === ChatItemType.ANSWER_STREAM ||
+                    chatItem.type === ChatItemType.ANSWER
+                ) {
+                    if (chatItem.followUp === undefined && clearPreviousItemButtons === true) {
+                        this.mynahUI?.updateLastChatAnswer(tabID, {
+                            buttons: [],
+                            followUp: { options: [] },
+                        })
+                    }
+
+                    this.mynahUI?.addChatItem(tabID, chatItem)
+                    this.mynahUI?.updateStore(tabID, {
+                        cancelButtonWhenLoading: false,
+                        loadingChat: chatItem.type !== ChatItemType.ANSWER,
+                    })
 
-            if (
-                chatItem.type === ChatItemType.PROMPT ||
-                chatItem.type === ChatItemType.ANSWER_STREAM ||
-                chatItem.type === ChatItemType.ANSWER
-            ) {
-                if (chatItem.followUp === undefined && clearPreviousItemButtons === true) {
-                    mynahUI.updateLastChatAnswer(tabID, {
-                        buttons: [],
-                        followUp: { options: [] },
+                    if (chatItem.type === ChatItemType.PROMPT) {
+                        this.tabsStorage.updateTabStatus(tabID, 'busy')
+                    } else if (chatItem.type === ChatItemType.ANSWER) {
+                        this.tabsStorage.updateTabStatus(tabID, 'free')
+                    }
+                }
+            },
+            onCodeTransformMessageUpdate: (tabID: string, messageId: string, chatItem: Partial<ChatItem>) => {
+                this.mynahUI?.updateChatAnswerWithMessageId(tabID, messageId, chatItem)
+            },
+            onNotification: (notification: { content: string; title?: string; type: NotificationType }) => {
+                this.mynahUI?.notify(notification)
+            },
+            onCodeTransformCommandMessageReceived: (_message: ChatItem, command?: string) => {
+                if (command === 'stop') {
+                    const codeTransformTab = this.tabsStorage.getTabs().find(tab => tab.type === 'codetransform')
+                    if (codeTransformTab !== undefined && codeTransformTab.isSelected) {
+                        return
+                    }
+
+                    this.mynahUI?.notify({
+                        type: NotificationType.INFO,
+                        title: 'Q - Transform',
+                        content: `Amazon Q is stopping your transformation. To view progress in the Q - Transform tab, click anywhere on this notification.`,
+                        duration: 10000,
+                        onNotificationClick: eventId => {
+                            if (codeTransformTab !== undefined) {
+                                // Click to switch to the opened code transform tab
+                                this.mynahUI?.selectTab(codeTransformTab.id, eventId)
+                            } else {
+                                // Click to open a new code transform tab
+                                this.quickActionHandler?.handleCommand({ command: '/transform' }, '', eventId)
+                            }
+                        },
                     })
                 }
+            },
+            sendMessageToExtension: message => {
+                postMessage.postMessage(message)
+            },
+            onChatAnswerUpdated: (tabID: string, item) => {
+                if (item.messageId !== undefined) {
+                    this.mynahUI?.updateChatAnswerWithMessageId(tabID, item.messageId, {
+                        ...(item.body !== undefined ? { body: item.body } : {}),
+                        ...(item.buttons !== undefined ? { buttons: item.buttons } : {}),
+                        ...(item.fileList !== undefined ? { fileList: item.fileList } : {}),
+                        ...(item.footer !== undefined ? { footer: item.footer } : {}),
+                        ...(item.canBeVoted !== undefined ? { canBeVoted: item.canBeVoted } : {}),
+                        ...(item.codeReference !== undefined ? { codeReference: item.codeReference } : {}),
+                    })
+                } else {
+                    this.mynahUI?.updateLastChatAnswer(tabID, {
+                        ...(item.body !== undefined ? { body: item.body } : {}),
+                        ...(item.buttons !== undefined ? { buttons: item.buttons } : {}),
+                        ...(item.fileList !== undefined ? { fileList: item.fileList } : {}),
+                        ...(item.footer !== undefined ? { footer: item.footer } : {}),
+                        ...(item.canBeVoted !== undefined ? { canBeVoted: item.canBeVoted } : {}),
+                        ...(item.codeReference !== undefined ? { codeReference: item.codeReference } : {}),
+                    } as ChatItem)
+                }
+            },
+            onChatAnswerReceived: (tabID: string, item: CWCChatItem) => {
+                if (item.type === ChatItemType.ANSWER_PART || item.type === ChatItemType.CODE_RESULT) {
+                    this.mynahUI?.updateLastChatAnswer(tabID, {
+                        ...(item.messageId !== undefined ? { messageId: item.messageId } : {}),
+                        ...(item.canBeVoted !== undefined ? { canBeVoted: item.canBeVoted } : {}),
+                        ...(item.codeReference !== undefined ? { codeReference: item.codeReference } : {}),
+                        ...(item.body !== undefined ? { body: item.body } : {}),
+                        ...(item.relatedContent !== undefined ? { relatedContent: item.relatedContent } : {}),
+                        ...(item.type === ChatItemType.CODE_RESULT
+                            ? { type: ChatItemType.CODE_RESULT, fileList: item.fileList }
+                            : {}),
+                        ...(item.codeReference !== undefined ? { codeReference: item.codeReference } : {}),
+                    })
+                    if (item.messageId !== undefined && item.userIntent !== undefined && item.codeBlockLanguage !== undefined) {
+                        this.responseMetadata.set(item.messageId, [item.userIntent, item.codeBlockLanguage])
+                    }
+                    return
+                }
 
-                mynahUI.addChatItem(tabID, chatItem)
-                mynahUI.updateStore(tabID, {
-                    cancelButtonWhenLoading: false,
-                    loadingChat: chatItem.type !== ChatItemType.ANSWER,
-                })
-
-                if (chatItem.type === ChatItemType.PROMPT) {
-                    tabsStorage.updateTabStatus(tabID, 'busy')
-                } else if (chatItem.type === ChatItemType.ANSWER) {
-                    tabsStorage.updateTabStatus(tabID, 'free')
+                if (item.body !== undefined || item.relatedContent !== undefined || item.followUp !== undefined) {
+                    this.mynahUI?.addChatItem(tabID, item)
                 }
-            }
-        },
-        onCodeTransformMessageUpdate: (tabID: string, messageId: string, chatItem: Partial<ChatItem>) => {
-            mynahUI.updateChatAnswerWithMessageId(tabID, messageId, chatItem)
-        },
-        onNotification: (notification: { content: string; title?: string; type: NotificationType }) => {
-            mynahUI.notify(notification)
-        },
-        onCodeTransformCommandMessageReceived: (_message: ChatItem, command?: string) => {
-            if (command === 'stop') {
-                const codeTransformTab = tabsStorage.getTabs().find(tab => tab.type === 'codetransform')
-                if (codeTransformTab !== undefined && codeTransformTab.isSelected) {
+
+                if (
+                    item.type === ChatItemType.PROMPT ||
+                    item.type === ChatItemType.SYSTEM_PROMPT ||
+                    item.type === ChatItemType.AI_PROMPT
+                ) {
+                    this.mynahUI?.updateStore(tabID, {
+                        loadingChat: true,
+                        cancelButtonWhenLoading: false,
+                        promptInputDisabledState: true,
+                    })
+
+                    this.tabsStorage.updateTabStatus(tabID, 'busy')
                     return
                 }
 
-                mynahUI.notify({
-                    type: NotificationType.INFO,
-                    title: 'Q - Transform',
-                    content: `Amazon Q is stopping your transformation. To view progress in the Q - Transform tab, click anywhere on this notification.`,
-                    duration: 10000,
-                    onNotificationClick: eventId => {
-                        if (codeTransformTab !== undefined) {
-                            // Click to switch to the opened code transform tab
-                            mynahUI.selectTab(codeTransformTab.id, eventId)
-                        } else {
-                            // Click to open a new code transform tab
-                            quickActionHandler.handleCommand({ command: '/transform' }, '', eventId)
-                        }
+                if (item.type === ChatItemType.ANSWER) {
+                    this.mynahUI?.updateStore(tabID, {
+                        loadingChat: false,
+                        promptInputDisabledState: this.tabsStorage.isTabDead(tabID),
+                    })
+                    this.tabsStorage.updateTabStatus(tabID, 'free')
+                }
+            },
+            onRunTestMessageReceived: (tabID: string, shouldRunTestMessage: boolean) => {
+                if (shouldRunTestMessage) {
+                    this.quickActionHandler?.handleCommand({ command: '/test' }, tabID)
+                }
+            },
+            onMessageReceived: (tabID: string, messageData: MynahUIDataModel) => {
+                this.mynahUI?.updateStore(tabID, messageData)
+            },
+            onFileComponentUpdate: (
+                tabID: string,
+                filePaths: DiffTreeFileInfo[],
+                deletedFiles: DiffTreeFileInfo[],
+                messageId: string,
+                disableFileActions: boolean = false
+            ) => {
+                const updateWith: Partial<ChatItem> = {
+                    type: ChatItemType.ANSWER,
+                    fileList: {
+                        rootFolderTitle: 'Changes',
+                        filePaths: filePaths.map(i => i.zipFilePath),
+                        deletedFiles: deletedFiles.map(i => i.zipFilePath),
+                        details: getDetails([...filePaths, ...deletedFiles]),
+                        actions: disableFileActions ? undefined : getActions([...filePaths, ...deletedFiles]),
                     },
+                }
+                this.mynahUI?.updateChatAnswerWithMessageId(tabID, messageId, updateWith)
+            },
+            onWarning: (tabID: string, message: string, title: string) => {
+                this.mynahUI?.notify({
+                    title: title,
+                    content: message,
+                    type: NotificationType.WARNING,
                 })
-            }
-        },
-        sendMessageToExtension: message => {
-            ideApi.postMessage(message)
-        },
-        onChatAnswerUpdated: (tabID: string, item) => {
-            if (item.messageId !== undefined) {
-                mynahUI.updateChatAnswerWithMessageId(tabID, item.messageId, {
-                    ...(item.body !== undefined ? { body: item.body } : {}),
-                    ...(item.buttons !== undefined ? { buttons: item.buttons } : {}),
-                    ...(item.fileList !== undefined ? { fileList: item.fileList } : {}),
-                    ...(item.footer !== undefined ? { footer: item.footer } : {}),
-                    ...(item.canBeVoted !== undefined ? { canBeVoted: item.canBeVoted } : {}),
-                    ...(item.codeReference !== undefined ? { codeReference: item.codeReference } : {}),
-                })
-            } else {
-                mynahUI.updateLastChatAnswer(tabID, {
-                    ...(item.body !== undefined ? { body: item.body } : {}),
-                    ...(item.buttons !== undefined ? { buttons: item.buttons } : {}),
-                    ...(item.fileList !== undefined ? { fileList: item.fileList } : {}),
-                    ...(item.footer !== undefined ? { footer: item.footer } : {}),
-                    ...(item.canBeVoted !== undefined ? { canBeVoted: item.canBeVoted } : {}),
-                    ...(item.codeReference !== undefined ? { codeReference: item.codeReference } : {}),
-                } as ChatItem)
-            }
-        },
-        onChatAnswerReceived: (tabID: string, item: CWCChatItem) => {
-            if (item.type === ChatItemType.ANSWER_PART || item.type === ChatItemType.CODE_RESULT) {
-                mynahUI.updateLastChatAnswer(tabID, {
-                    ...(item.messageId !== undefined ? { messageId: item.messageId } : {}),
-                    ...(item.canBeVoted !== undefined ? { canBeVoted: item.canBeVoted } : {}),
-                    ...(item.codeReference !== undefined ? { codeReference: item.codeReference } : {}),
-                    ...(item.body !== undefined ? { body: item.body } : {}),
-                    ...(item.relatedContent !== undefined ? { relatedContent: item.relatedContent } : {}),
-                    ...(item.type === ChatItemType.CODE_RESULT
-                        ? { type: ChatItemType.CODE_RESULT, fileList: item.fileList }
-                        : {}),
-                    ...(item.codeReference !== undefined ? { codeReference: item.codeReference } : {}),
+                this.mynahUI?.updateStore(tabID, {
+                    loadingChat: false,
+                    promptInputDisabledState: this.tabsStorage.isTabDead(tabID),
                 })
-                if (item.messageId !== undefined && item.userIntent !== undefined && item.codeBlockLanguage !== undefined) {
-                    responseMetadata.set(item.messageId, [item.userIntent, item.codeBlockLanguage])
+                this.tabsStorage.updateTabStatus(tabID, 'free')
+            },
+            onError: (tabID: string, message: string, title: string) => {
+                const answer: ChatItem = {
+                    type: ChatItemType.ANSWER,
+                    body: `**${title}**${message}`,
                 }
-                return
-            }
 
-            if (item.body !== undefined || item.relatedContent !== undefined || item.followUp !== undefined) {
-                mynahUI.addChatItem(tabID, item)
-            }
+                if (tabID !== '') {
+                    this.mynahUI?.updateStore(tabID, {
+                        loadingChat: false,
+                        promptInputDisabledState: this.tabsStorage.isTabDead(tabID),
+                    })
+                    this.tabsStorage.updateTabStatus(tabID, 'free')
 
-            if (
-                item.type === ChatItemType.PROMPT ||
-                item.type === ChatItemType.SYSTEM_PROMPT ||
-                item.type === ChatItemType.AI_PROMPT
-            ) {
-                mynahUI.updateStore(tabID, {
-                    loadingChat: true,
-                    cancelButtonWhenLoading: false,
-                    promptInputDisabledState: true,
+                    this.mynahUI?.addChatItem(tabID, answer)
+                } else {
+                    const newTabId = this.mynahUI?.updateStore('', {
+                        tabTitle: 'Error',
+                        quickActionCommands: [],
+                        promptInputPlaceholder: '',
+                        chatItems: [answer],
+                    })
+                    if (newTabId === undefined) {
+                        this.mynahUI?.notify({
+                            content: uiComponentsTexts.noMoreTabsTooltip,
+                            type: NotificationType.WARNING,
+                        })
+                        return
+                    } else {
+                        // TODO remove this since it will be added with the onTabAdd and onTabAdd is now sync,
+                        // It means that it cannot trigger after the updateStore function returns.
+                        this.tabsStorage.addTab({
+                            id: newTabId,
+                            status: 'busy',
+                            type: 'cwc',
+                            isSelected: true,
+                        })
+                    }
+                }
+                return
+            },
+            onUpdatePlaceholder: (tabID: string, newPlaceholder: string) => {
+                this.mynahUI?.updateStore(tabID, {
+                    promptInputPlaceholder: newPlaceholder,
                 })
+            },
+            onUpdatePromptProgress: (tabID: string, progressField: ProgressField | null | undefined) => {
+                this.mynahUI?.updateStore(tabID, {
+                    // eslint-disable-next-line no-null/no-null
+                    promptInputProgress: progressField ? progressField : null,
+                })
+            },
+            onNewTab: (tabType: TabType) => {
+                const newTabID = this.mynahUI?.updateStore('', {})
+                if (!newTabID) {
+                    return
+                }
 
-                tabsStorage.updateTabStatus(tabID, 'busy')
-                return
-            }
+                this.tabsStorage.updateTabTypeFromUnknown(newTabID, tabType)
+                this.connector?.onKnownTabOpen(newTabID)
+                this.connector?.onUpdateTabType(newTabID)
 
-            if (item.type === ChatItemType.ANSWER) {
-                mynahUI.updateStore(tabID, {
-                    loadingChat: false,
-                    promptInputDisabledState: tabsStorage.isTabDead(tabID),
+                this.mynahUI?.updateStore(newTabID, this.tabDataGenerator!.getTabData(tabType, true))
+            },
+            onStartNewTransform: (tabID: string) => {
+                this.mynahUI?.updateStore(tabID, { chatItems: [] })
+                this.mynahUI?.updateStore(tabID, this.tabDataGenerator!.getTabData('codetransform', true))
+            },
+            onOpenSettingsMessage: (tabId: string) => {
+                this.mynahUI?.addChatItem(tabId, {
+                    type: ChatItemType.ANSWER,
+                    body: `You need to enable local workspace index in Amazon Q settings.`,
+                    buttons: [
+                        {
+                            id: 'open-settings',
+                            text: 'Open settings',
+                            icon: MynahIcons.EXTERNAL,
+                            keepCardAfterClick: false,
+                            status: 'info',
+                        },
+                    ],
                 })
-                tabsStorage.updateTabStatus(tabID, 'free')
-            }
-        },
-        onRunTestMessageReceived: (tabID: string, shouldRunTestMessage: boolean) => {
-            if (shouldRunTestMessage) {
-                quickActionHandler.handleCommand({ command: '/test' }, tabID)
-            }
-        },
-        onMessageReceived: (tabID: string, messageData: MynahUIDataModel) => {
-            mynahUI.updateStore(tabID, messageData)
-        },
-        onFileComponentUpdate: (
-            tabID: string,
-            filePaths: DiffTreeFileInfo[],
-            deletedFiles: DiffTreeFileInfo[],
-            messageId: string,
-            disableFileActions: boolean = false
-        ) => {
-            const updateWith: Partial<ChatItem> = {
-                type: ChatItemType.ANSWER,
-                fileList: {
-                    rootFolderTitle: 'Changes',
-                    filePaths: filePaths.map(i => i.zipFilePath),
-                    deletedFiles: deletedFiles.map(i => i.zipFilePath),
-                    details: getDetails([...filePaths, ...deletedFiles]),
-                    actions: disableFileActions ? undefined : getActions([...filePaths, ...deletedFiles]),
-                },
-            }
-            mynahUI.updateChatAnswerWithMessageId(tabID, messageId, updateWith)
-        },
-        onWarning: (tabID: string, message: string, title: string) => {
-            mynahUI.notify({
-                title: title,
-                content: message,
-                type: NotificationType.WARNING,
-            })
-            mynahUI.updateStore(tabID, {
-                loadingChat: false,
-                promptInputDisabledState: tabsStorage.isTabDead(tabID),
-            })
-            tabsStorage.updateTabStatus(tabID, 'free')
-        },
-        onError: (tabID: string, message: string, title: string) => {
-            const answer: ChatItem = {
-                type: ChatItemType.ANSWER,
-                body: `**${title}** 
- ${message}`,
-            }
-
-            if (tabID !== '') {
-                mynahUI.updateStore(tabID, {
+                this.tabsStorage.updateTabStatus(tabId, 'free')
+                this.mynahUI?.updateStore(tabId, {
                     loadingChat: false,
-                    promptInputDisabledState: tabsStorage.isTabDead(tabID),
-                })
-                tabsStorage.updateTabStatus(tabID, 'free')
-
-                mynahUI.addChatItem(tabID, answer)
-            } else {
-                const newTabId = mynahUI.updateStore('', {
-                    tabTitle: 'Error',
-                    quickActionCommands: [],
-                    promptInputPlaceholder: '',
-                    chatItems: [answer],
+                    promptInputDisabledState: this.tabsStorage.isTabDead(tabId),
                 })
-                if (newTabId === undefined) {
-                    mynahUI.notify({
-                        content: uiComponentsTexts.noMoreTabsTooltip,
-                        type: NotificationType.WARNING,
-                    })
+                return
+            },
+            onCodeScanMessageReceived: (tabID: string, chatItem: ChatItem, isLoading: boolean, clearPreviousItemButtons?: boolean, runReview?: boolean) => {
+                if (runReview) {
+                    this.quickActionHandler?.handleCommand({ command: "/review" }, "")
                     return
-                } else {
-                    // TODO remove this since it will be added with the onTabAdd and onTabAdd is now sync,
-                    // It means that it cannot trigger after the updateStore function returns.
-                    tabsStorage.addTab({
-                        id: newTabId,
-                        status: 'busy',
-                        type: 'cwc',
-                        isSelected: true,
-                    })
                 }
-            }
-            return
-        },
-        onUpdatePlaceholder(tabID: string, newPlaceholder: string) {
-            mynahUI.updateStore(tabID, {
-                promptInputPlaceholder: newPlaceholder,
-            })
-        },
-        onUpdatePromptProgress(tabID: string, progressField: ProgressField | null | undefined) {
-            mynahUI.updateStore(tabID, {
-                // eslint-disable-next-line no-null/no-null
-                promptInputProgress: progressField ? progressField : null,
-            })
-        },
-        onNewTab(tabType: TabType) {
-            const newTabID = mynahUI.updateStore('', {})
-            if (!newTabID) {
-                return
-            }
+                if (chatItem.type === ChatItemType.ANSWER_PART) {
+                    this.mynahUI?.updateLastChatAnswer(tabID, {
+                        ...(chatItem.messageId !== undefined ? { messageId: chatItem.messageId } : {}),
+                        ...(chatItem.canBeVoted !== undefined ? { canBeVoted: chatItem.canBeVoted } : {}),
+                        ...(chatItem.codeReference !== undefined ? { codeReference: chatItem.codeReference } : {}),
+                        ...(chatItem.body !== undefined ? { body: chatItem.body } : {}),
+                        ...(chatItem.relatedContent !== undefined ? { relatedContent: chatItem.relatedContent } : {}),
+                        ...(chatItem.formItems !== undefined ? { formItems: chatItem.formItems } : {}),
+                        ...(chatItem.buttons !== undefined ? { buttons: chatItem.buttons } : { buttons: [] }),
+                        // For loading animation to work, do not update the chat item type
+                        ...(chatItem.followUp !== undefined ? { followUp: chatItem.followUp } : {}),
+                    })
 
-            tabsStorage.updateTabTypeFromUnknown(newTabID, tabType)
-            connector.onKnownTabOpen(newTabID)
-            connector.onUpdateTabType(newTabID)
-
-            mynahUI.updateStore(newTabID, tabDataGenerator.getTabData(tabType, true))
-        },
-        onStartNewTransform(tabID: string) {
-            mynahUI.updateStore(tabID, { chatItems: [] })
-            mynahUI.updateStore(tabID, tabDataGenerator.getTabData('codetransform', true))
-        },
-        onOpenSettingsMessage(tabId: string) {
-            mynahUI.addChatItem(tabId, {
-                type: ChatItemType.ANSWER,
-                body: `You need to enable local workspace index in Amazon Q settings.`,
-                buttons: [
-                    {
-                        id: 'open-settings',
-                        text: 'Open settings',
-                        icon: MynahIcons.EXTERNAL,
-                        keepCardAfterClick: false,
-                        status: 'info',
-                    },
-                ],
-            })
-            tabsStorage.updateTabStatus(tabId, 'free')
-            mynahUI.updateStore(tabId, {
-                loadingChat: false,
-                promptInputDisabledState: tabsStorage.isTabDead(tabId),
-            })
-            return
-        },
-        onCodeScanMessageReceived(tabID: string, chatItem: ChatItem, isLoading: boolean, clearPreviousItemButtons?: boolean, runReview?: boolean) {
-            if (runReview) {
-                quickActionHandler.handleCommand({ command: "/review" }, "")
-                return
-            }
-            if (chatItem.type === ChatItemType.ANSWER_PART) {
-                mynahUI.updateLastChatAnswer(tabID, {
-                    ...(chatItem.messageId !== undefined ? { messageId: chatItem.messageId } : {}),
-                    ...(chatItem.canBeVoted !== undefined ? { canBeVoted: chatItem.canBeVoted } : {}),
-                    ...(chatItem.codeReference !== undefined ? { codeReference: chatItem.codeReference } : {}),
-                    ...(chatItem.body !== undefined ? { body: chatItem.body } : {}),
-                    ...(chatItem.relatedContent !== undefined ? { relatedContent: chatItem.relatedContent } : {}),
-                    ...(chatItem.formItems !== undefined ? { formItems: chatItem.formItems } : {}),
-                    ...(chatItem.buttons !== undefined ? { buttons: chatItem.buttons } : { buttons: [] }),
-                    // For loading animation to work, do not update the chat item type
-                    ...(chatItem.followUp !== undefined ? { followUp: chatItem.followUp } : {}),
-                })
+                    if (!isLoading) {
+                        this.mynahUI?.updateStore(tabID, {
+                            loadingChat: false,
+                        })
+                    } else {
+                        this.mynahUI?.updateStore(tabID, {
+                            cancelButtonWhenLoading: false
+                        })
+                    }
+                }
 
-                if (!isLoading) {
-                    mynahUI.updateStore(tabID, {
-                        loadingChat: false,
+                if (
+                    chatItem.type === ChatItemType.PROMPT ||
+                    chatItem.type === ChatItemType.ANSWER_STREAM ||
+                    chatItem.type === ChatItemType.ANSWER
+                ) {
+                    if (chatItem.followUp === undefined && clearPreviousItemButtons === true) {
+                        this.mynahUI?.updateLastChatAnswer(tabID, {
+                            buttons: [],
+                            followUp: { options: [] },
+                        })
+                    }
+
+                    this.mynahUI?.addChatItem(tabID, chatItem)
+                    this.mynahUI?.updateStore(tabID, {
+                        loadingChat: chatItem.type !== ChatItemType.ANSWER
                     })
-                } else {
-                    mynahUI.updateStore(tabID, {
-                        cancelButtonWhenLoading: false
+
+                    if (chatItem.type === ChatItemType.PROMPT) {
+                        this.tabsStorage.updateTabStatus(tabID, 'busy')
+                    } else if (chatItem.type === ChatItemType.ANSWER) {
+                        this.tabsStorage.updateTabStatus(tabID, 'free')
+                    }
+                }
+            },
+            onFeatureConfigsAvailable: (
+                highlightCommand?: QuickActionCommand
+            ): void => {
+                this.tabDataGenerator!.highlightCommand = highlightCommand
+
+                for (const tab of this.tabsStorage.getTabs()) {
+                    this.mynahUI?.updateStore(tab.id, {
+                        contextCommands: this.tabDataGenerator!.getTabData(tab.type, true).contextCommands
                     })
                 }
             }
-
-            if (
-                chatItem.type === ChatItemType.PROMPT ||
-                chatItem.type === ChatItemType.ANSWER_STREAM ||
-                chatItem.type === ChatItemType.ANSWER
-            ) {
-                if (chatItem.followUp === undefined && clearPreviousItemButtons === true) {
-                    mynahUI.updateLastChatAnswer(tabID, {
-                        buttons: [],
-                        followUp: { options: [] },
+        })
+        this.mynahUIProps = {
+            onReady: () => {
+                // the legacy event flow adds events listeners to the window, we want to avoid these in the lsp flow, since those
+                // are handled by the flare chat-client
+                if (hybridChat && this.connector) {
+                    this.connector.isUIReady = true
+                    postMessage.postMessage({
+                        command: 'ui-is-ready',
                     })
+                    return
                 }
-
-                mynahUI.addChatItem(tabID, chatItem)
-                mynahUI.updateStore(tabID, {
-                    loadingChat: chatItem.type !== ChatItemType.ANSWER
-                })
-
-                if (chatItem.type === ChatItemType.PROMPT) {
-                    tabsStorage.updateTabStatus(tabID, 'busy')
-                } else if (chatItem.type === ChatItemType.ANSWER) {
-                    tabsStorage.updateTabStatus(tabID, 'free')
-                }
-            }
-        },
-        onFeatureConfigsAvailable: (
-            highlightCommand?: QuickActionCommand
-        ): void => {
-            tabDataGenerator.highlightCommand = highlightCommand
-
-            for (const tab of tabsStorage.getTabs()) {
-                mynahUI.updateStore(tab.id, {
-                    contextCommands: tabDataGenerator.getTabData(tab.type, true).contextCommands
-                })
-            }
-        }
-    })
-
-    mynahUI = new MynahUI({
-        onReady: connector.uiReady,
-        onTabAdd: (tabID: string) => {
-            // If featureDev or gumby has changed availability in between the default store settings and now
-            // make sure to show/hide it accordingly
-            mynahUI.updateStore(tabID, {
-                quickActionCommands: tabDataGenerator.quickActionsGenerator.generateForTab('unknown'),
-                ...(disclaimerCardActive ? { promptInputStickyCard: disclaimerCard } : {}),
-            })
-            connector.onTabAdd(tabID)
-        },
-        onStopChatResponse: (tabID: string) => {
-            mynahUI.updateStore(tabID, {
-                loadingChat: false,
-                promptInputDisabledState: false,
-            })
-            connector.onStopChatResponse(tabID)
-        },
-        onTabRemove: connector.onTabRemove,
-        onTabChange: connector.onTabChange,
-        onChatPrompt: (tabID, prompt, eventId) => {
-            if ((prompt.prompt ?? '') === '' && (prompt.command ?? '') === '') {
-                return
-            }
-
-            if (tabsStorage.getTab(tabID)?.type === 'featuredev') {
-                mynahUI.addChatItem(tabID, {
-                    type: ChatItemType.ANSWER_STREAM,
+                this.connector?.uiReady()
+            },
+            onTabAdd: (tabID: string) => {
+                // If featureDev or gumby has changed availability in between the default store settings and now
+                // make sure to show/hide it accordingly
+                this.mynahUI?.updateStore(tabID, {
+                    quickActionCommands: this.tabDataGenerator?.quickActionsGenerator.generateForTab('unknown'),
+                    ...(this.disclaimerCardActive ? { promptInputStickyCard: disclaimerCard } : {}),
                 })
-            } else if (tabsStorage.getTab(tabID)?.type === 'codetransform') {
-                connector.requestAnswer(tabID, {
-                    chatMessage: prompt.prompt ?? ''
+                this.connector?.onTabAdd(tabID)
+            },
+            onStopChatResponse: (tabID: string) => {
+                this.mynahUI?.updateStore(tabID, {
+                    loadingChat: false,
+                    promptInputDisabledState: false,
                 })
-                return
-            } else if (tabsStorage.getTab(tabID)?.type === 'codetest') {
-                if(prompt.command !== undefined && prompt.command.trim() !== '' && prompt.command !== '/test') {
-                    quickActionHandler.handleCommand(prompt, tabID, eventId)
+                this.connector?.onStopChatResponse(tabID)
+            },
+            onTabRemove: this.connector.onTabRemove,
+            onTabChange: this.connector.onTabChange,
+            onChatPrompt: (tabID: string, prompt : ChatPrompt, eventId: string | undefined) => {
+                if ((prompt.prompt ?? '') === '' && (prompt.command ?? '') === '') {
                     return
-                } else {
-                    connector.requestAnswer(tabID, {
+                }
+
+                if (this.tabsStorage.getTab(tabID)?.type === 'featuredev') {
+                    this.mynahUI?.addChatItem(tabID, {
+                        type: ChatItemType.ANSWER_STREAM,
+                    })
+                } else if (this.tabsStorage.getTab(tabID)?.type === 'codetransform') {
+                    this.connector?.requestAnswer(tabID, {
                         chatMessage: prompt.prompt ?? ''
                     })
                     return
+                } else if (this.tabsStorage.getTab(tabID)?.type === 'codetest') {
+                    if(prompt.command !== undefined && prompt.command.trim() !== '' && prompt.command !== '/test') {
+                        this.quickActionHandler?.handleCommand(prompt, tabID, eventId)
+                        return
+                    } else {
+                        this.connector?.requestAnswer(tabID, {
+                            chatMessage: prompt.prompt ?? ''
+                        })
+                        return
+                    }
+                } else if (this.tabsStorage.getTab(tabID)?.type === 'codescan') {
+                    if(prompt.command !== undefined && prompt.command.trim() !== '') {
+                        this.quickActionHandler?.handleCommand(prompt, tabID, eventId)
+                        return
+                    }
                 }
-            } else if (tabsStorage.getTab(tabID)?.type === 'codescan') {
-                if(prompt.command !== undefined && prompt.command.trim() !== '') {
-                    quickActionHandler.handleCommand(prompt, tabID, eventId)
-                    return
-                }
-            }
 
-            if (tabsStorage.getTab(tabID)?.type === 'welcome') {
-                mynahUI.updateStore(tabID, {
-                    tabHeaderDetails: void 0,
-                    compactMode: false,
-                    tabBackground: false,
-                    promptInputText: '',
-                    promptInputLabel: void 0,
-                    chatItems: [],
-                })
-            }
+                if (this.tabsStorage.getTab(tabID)?.type === 'welcome') {
+                    this.mynahUI?.updateStore(tabID, {
+                        tabHeaderDetails: void 0,
+                        compactMode: false,
+                        tabBackground: false,
+                        promptInputText: '',
+                        promptInputLabel: void 0,
+                        chatItems: [],
+                    })
+                }
 
-            if (prompt.command !== undefined && prompt.command.trim() !== '') {
-                quickActionHandler.handleCommand(prompt, tabID, eventId)
+                if (prompt.command !== undefined && prompt.command.trim() !== '') {
+                    this.quickActionHandler?.handleCommand(prompt, tabID, eventId)
 
-                const newTabType = tabsStorage.getSelectedTab()?.type
-                if (newTabType) {
-                    ideApi.postMessage(createOpenAgentTelemetry(newTabType, 'quick-action'))
+                    const newTabType = this.tabsStorage.getSelectedTab()?.type
+                    if (newTabType) {
+                        postMessage.postMessage(createOpenAgentTelemetry(newTabType, 'quick-action'))
+                    }
+                    return
                 }
-                return
-            }
 
-            textMessageHandler.handle(prompt, tabID)
-        },
-        onVote: connector.onChatItemVoted,
-        onSendFeedback: (tabId, feedbackPayload) => {
-            connector.sendFeedback(tabId, feedbackPayload)
-            mynahUI.notify({
-                type: NotificationType.INFO,
-                title: 'Your feedback is sent',
-                content: 'Thanks for your feedback.',
-            })
-        },
-        onCodeInsertToCursorPosition: connector.onCodeInsertToCursorPosition,
-        onCopyCodeToClipboard: (
-            tabId,
-            messageId,
-            code,
-            type,
-            referenceTrackerInfo,
-            eventId,
-            codeBlockIndex,
-            totalCodeBlocks
-        ) => {
-            connector.onCopyCodeToClipboard(
+                this.textMessageHandler!.handle(prompt, tabID)
+            },
+            onVote: this.connector.onChatItemVoted,
+            onSendFeedback: (tabId, feedbackPayload) => {
+                this.connector?.sendFeedback(tabId, feedbackPayload)
+                this.mynahUI?.notify({
+                    type: NotificationType.INFO,
+                    title: 'Your feedback is sent',
+                    content: 'Thanks for your feedback.',
+                })
+            },
+            onCodeInsertToCursorPosition: this.connector.onCodeInsertToCursorPosition,
+            onCopyCodeToClipboard: (
                 tabId,
                 messageId,
                 code,
@@ -671,147 +740,173 @@ export const createMynahUI = (
                 eventId,
                 codeBlockIndex,
                 totalCodeBlocks
-            )
-            mynahUI.notify({
-                type: NotificationType.SUCCESS,
-                content: 'Selected code is copied to clipboard',
-            })
-        },
-        onChatItemEngagement: connector.triggerSuggestionEngagement,
-        onSourceLinkClick: (tabId, messageId, link, mouseEvent) => {
-            mouseEvent?.preventDefault()
-            mouseEvent?.stopPropagation()
-            mouseEvent?.stopImmediatePropagation()
-            connector.onSourceLinkClick(tabId, messageId, link)
-        },
-        onLinkClick: (tabId, messageId, link, mouseEvent) => {
-            mouseEvent?.preventDefault()
-            mouseEvent?.stopPropagation()
-            mouseEvent?.stopImmediatePropagation()
-            connector.onResponseBodyLinkClick(tabId, messageId, link)
-        },
-        onInfoLinkClick: (tabId: string, link: string, mouseEvent?: MouseEvent) => {
-            mouseEvent?.preventDefault()
-            mouseEvent?.stopPropagation()
-            mouseEvent?.stopImmediatePropagation()
-            connector.onInfoLinkClick(tabId, link)
-        },
-        onResetStore: () => {},
-        onFollowUpClicked: (tabID, messageId, followUp) => {
-            followUpsInteractionHandler.onFollowUpClicked(tabID, messageId, followUp)
-        },
-        onFileActionClick: async (tabID: string, messageId: string, filePath: string, actionName: string) => {
-            connector.onFileActionClick(tabID, messageId, filePath, actionName)
-        },
-        onFileClick: connector.onFileClick,
-        onChatPromptProgressActionButtonClicked: (tabID, action) => {
-            connector.onCustomFormAction(tabID, undefined, action)
-        },
-        tabs: {
-            'tab-1': {
-                isSelected: true,
-                store: {
-                    ...(showWelcomePage
-                        ? welcomeScreenTabData(tabDataGenerator).store
-                        : tabDataGenerator.getTabData('cwc', true)),
-                    ...(disclaimerCardActive ? { promptInputStickyCard: disclaimerCard } : {}),
+            ) => {
+                this.connector?.onCopyCodeToClipboard(
+                    tabId,
+                    messageId,
+                    code,
+                    type,
+                    referenceTrackerInfo,
+                    eventId,
+                    codeBlockIndex,
+                    totalCodeBlocks
+                )
+                this.mynahUI?.notify({
+                    type: NotificationType.SUCCESS,
+                    content: 'Selected code is copied to clipboard',
+                })
+            },
+            onChatItemEngagement: this.connector.triggerSuggestionEngagement,
+            onSourceLinkClick: (tabId, messageId, link, mouseEvent) => {
+                mouseEvent?.preventDefault()
+                mouseEvent?.stopPropagation()
+                mouseEvent?.stopImmediatePropagation()
+                this.connector?.onSourceLinkClick(tabId, messageId, link)
+            },
+            onLinkClick: (tabId, messageId, link, mouseEvent) => {
+                mouseEvent?.preventDefault()
+                mouseEvent?.stopPropagation()
+                mouseEvent?.stopImmediatePropagation()
+                this.connector?.onResponseBodyLinkClick(tabId, messageId, link)
+            },
+            onInfoLinkClick: (tabId: string, link: string, mouseEvent?: MouseEvent) => {
+                mouseEvent?.preventDefault()
+                mouseEvent?.stopPropagation()
+                mouseEvent?.stopImmediatePropagation()
+                this.connector?.onInfoLinkClick(tabId, link)
+            },
+            onResetStore: () => {},
+            onFollowUpClicked: (tabID, messageId, followUp) => {
+                this.followUpsInteractionHandler!.onFollowUpClicked(tabID, messageId, followUp)
+            },
+            onFileActionClick: async (tabID: string, messageId: string, filePath: string, actionName: string) => {
+                this.connector?.onFileActionClick(tabID, messageId, filePath, actionName)
+            },
+            onFileClick: this.connector?.onFileClick,
+            onChatPromptProgressActionButtonClicked: (tabID, action) => {
+                this.connector?.onCustomFormAction(tabID, undefined, action)
+            },
+            tabs: {
+                'tab-1': {
+                    isSelected: true,
+                    store: {
+                        ...(showWelcomePage
+                            ? welcomeScreenTabData(this.tabDataGenerator).store
+                            : this.tabDataGenerator.getTabData('cwc', true)),
+                        ...(this.disclaimerCardActive ? { promptInputStickyCard: disclaimerCard } : {}),
+                    },
                 },
             },
-        },
-        onInBodyButtonClicked: (tabId, messageId, action, eventId) => {
-            if (action.id === disclaimerAcknowledgeButtonId) {
-                disclaimerCardActive = false
-                // post message to tell IDE that disclaimer is acknowledged
-                ideApi.postMessage({
-                    command: 'disclaimer-acknowledged',
-                })
-
-                // create telemetry
-                ideApi.postMessage(createClickTelemetry('amazonq-disclaimer-acknowledge-button'))
-
-                // remove all disclaimer cards from all tabs
-                Object.keys(mynahUI.getAllTabs()).forEach((storeTabKey) => {
-                    // eslint-disable-next-line no-null/no-null
-                    mynahUI.updateStore(storeTabKey, { promptInputStickyCard: null })
-                })
-            }
+            onInBodyButtonClicked: (tabId, messageId, action, eventId) => {
+                if (action.id === disclaimerAcknowledgeButtonId) {
+                    this.disclaimerCardActive = false
+                    // post message to tell IDE that disclaimer is acknowledged
+                    postMessage.postMessage({
+                        command: 'disclaimer-acknowledged',
+                    })
 
-            if (action.id === 'quick-start') {
-                /**
-                 * quick start is the action on the welcome page. When its
-                 * clicked it collapses the view and puts it into regular
-                 * "chat" which is cwc
-                 */
-                tabsStorage.updateTabTypeFromUnknown(tabId, 'cwc')
-
-                // show quick start in the current tab instead of a new one
-                mynahUI.updateStore(tabId, {
-                    tabHeaderDetails: undefined,
-                    compactMode: false,
-                    tabBackground: false,
-                    promptInputText: '/',
-                    promptInputLabel: undefined,
-                    chatItems: [],
-                })
+                    // create telemetry
+                    postMessage.postMessage(createClickTelemetry('amazonq-disclaimer-acknowledge-button'))
 
-                ideApi.postMessage(createClickTelemetry('amazonq-welcome-quick-start-button'))
-                return
-            }
+                    // remove all disclaimer cards from all tabs
+                    Object.keys(this.mynahUI?.getAllTabs() ?? []).forEach((storeTabKey) => {
+                        // eslint-disable-next-line no-null/no-null
+                        this.mynahUI?.updateStore(storeTabKey, { promptInputStickyCard: null })
+                    })
+                }
 
-            if (action.id === 'explore') {
-                const newTabId = mynahUI.updateStore('', agentWalkthroughDataModel)
-                if (newTabId === undefined) {
-                    mynahUI.notify({
-                        content: uiComponentsTexts.noMoreTabsTooltip,
-                        type: NotificationType.WARNING,
+                if (action.id === 'quick-start') {
+                    /**
+                     * quick start is the action on the welcome page. When its
+                     * clicked it collapses the view and puts it into regular
+                     * "chat" which is cwc
+                     */
+                    this.tabsStorage.updateTabTypeFromUnknown(tabId, 'cwc')
+
+                    // show quick start in the current tab instead of a new one
+                    this.mynahUI?.updateStore(tabId, {
+                        tabHeaderDetails: undefined,
+                        compactMode: false,
+                        tabBackground: false,
+                        promptInputText: '/',
+                        promptInputLabel: undefined,
+                        chatItems: [],
                     })
+
+                    postMessage.postMessage(createClickTelemetry('amazonq-welcome-quick-start-button'))
                     return
                 }
-                tabsStorage.updateTabTypeFromUnknown(newTabId, 'agentWalkthrough')
-                ideApi.postMessage(createClickTelemetry('amazonq-welcome-explore-button'))
-                return
-            }
 
-            connector.onCustomFormAction(tabId, messageId, action, eventId)
-        },
-        defaults: {
-            store: tabDataGenerator.getTabData('cwc', true),
-        },
-        config: {
-            maxTabs: 10,
-            feedbackOptions: feedbackOptions,
-            texts: uiComponentsTexts,
-        },
-    })
+                if (action.id === 'explore') {
+                    const newTabId = this.mynahUI?.updateStore('', agentWalkthroughDataModel)
+                    if (newTabId === undefined) {
+                        this.mynahUI?.notify({
+                            content: uiComponentsTexts.noMoreTabsTooltip,
+                            type: NotificationType.WARNING,
+                        })
+                        return
+                    }
+                    this.tabsStorage.updateTabTypeFromUnknown(newTabId, 'agentWalkthrough')
+                    postMessage.postMessage(createClickTelemetry('amazonq-welcome-explore-button'))
+                    return
+                }
 
-    followUpsInteractionHandler = new FollowUpInteractionHandler({
-        mynahUI,
-        connector,
-        tabsStorage,
-    })
-    quickActionHandler = new QuickActionHandler({
-        mynahUI,
-        connector,
-        tabsStorage,
-        isFeatureDevEnabled,
-        isCodeTransformEnabled,
-        isDocEnabled,
-        isCodeScanEnabled,
-        isCodeTestEnabled,
-    })
-    textMessageHandler = new TextMessageHandler({
-        mynahUI,
-        connector,
-        tabsStorage,
-    })
-    messageController = new MessageController({
-        mynahUI,
-        connector,
-        tabsStorage,
-        isFeatureDevEnabled,
-        isCodeTransformEnabled,
-        isDocEnabled,
-        isCodeScanEnabled,
-        isCodeTestEnabled,
-    })
+                this.connector?.onCustomFormAction(tabId, messageId, action, eventId)
+            },
+            defaults: {
+                store: this.tabDataGenerator.getTabData('cwc', true),
+            },
+            config: {
+                maxTabs: 10,
+                feedbackOptions: feedbackOptions,
+                texts: uiComponentsTexts,
+            },
+        }
+        if (!hybridChat) {
+            /**
+             * when in hybrid chat the reference gets resolved later so we
+             * don't need to create mynah UI
+             */
+            this.mynahUIRef = { mynahUI: new MynahUI({ ...this.mynahUIProps, loadStyles: false }) }
+        }
+        this.followUpsInteractionHandler = new FollowUpInteractionHandler({
+            mynahUIRef: this.mynahUIRef,
+            connector: this.connector,
+            tabsStorage: this.tabsStorage,
+        })
+
+        this.textMessageHandler = new TextMessageHandler({
+            mynahUIRef: this.mynahUIRef,
+            connector: this.connector,
+            tabsStorage: this.tabsStorage,
+        })
+        this.messageController = new MessageController({
+            mynahUIRef: this.mynahUIRef,
+            connector: this.connector,
+            tabsStorage: this.tabsStorage,
+            isFeatureDevEnabled,
+            isCodeTransformEnabled,
+            isDocEnabled,
+            isCodeScanEnabled,
+            isCodeTestEnabled,
+        })
+        this.quickActionHandler = new QuickActionHandler({
+            mynahUIRef: this.mynahUIRef,
+            connector: this.connector!,
+            tabsStorage: this.tabsStorage,
+            isFeatureDevEnabled: this.isFeatureDevEnabled,
+            isCodeTransformEnabled: this.isCodeTransformEnabled,
+            isDocEnabled: this.isDocEnabled,
+            isCodeScanEnabled: this.isCodeScanEnabled,
+            isCodeTestEnabled: this.isCodeTestEnabled,
+            hybridChat
+        })
+
+    }
+    get mynahUI(): MynahUI | undefined {
+        return this.mynahUIRef.mynahUI
+    }
 }
+
+
+export type MynahUIRef = { mynahUI: MynahUI | undefined }
diff --git a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/messages/controller.ts b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/messages/controller.ts
index 72635f07755..1a0f43b4bfc 100644
--- a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/messages/controller.ts
+++ b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/messages/controller.ts
@@ -8,9 +8,10 @@ import { Connector } from '../connector'
 import { TabType, TabsStorage } from '../storages/tabsStorage'
 import { TabDataGenerator } from '../tabs/generator'
 import { uiComponentsTexts } from '../texts/constants'
+import {MynahUIRef} from "../main";
 
 export interface MessageControllerProps {
-    mynahUI: MynahUI
+    mynahUIRef: MynahUIRef
     connector: Connector
     tabsStorage: TabsStorage
     isFeatureDevEnabled: boolean
@@ -21,13 +22,13 @@ export interface MessageControllerProps {
 }
 
 export class MessageController {
-    private mynahUI: MynahUI
+    private mynahUIRef: MynahUIRef
     private connector: Connector
     private tabsStorage: TabsStorage
     private tabDataGenerator: TabDataGenerator
 
     constructor(props: MessageControllerProps) {
-        this.mynahUI = props.mynahUI
+        this.mynahUIRef = props.mynahUIRef
         this.connector = props.connector
         this.tabsStorage = props.tabsStorage
         this.tabDataGenerator = new TabDataGenerator({
@@ -43,12 +44,12 @@ export class MessageController {
         const selectedTab = { ...this.tabsStorage.getSelectedTab() }
         if (selectedTab?.id === undefined || selectedTab?.type === 'featuredev') {
             // Create a new tab if there's none
-            const newTabID: string | undefined = this.mynahUI.updateStore(
+            const newTabID: string | undefined = this.mynahUI?.updateStore(
                 '',
                 this.tabDataGenerator.getTabData('cwc', false)
             )
             if (newTabID === undefined) {
-                this.mynahUI.notify({
+                this.mynahUI?.notify({
                     content: uiComponentsTexts.noMoreTabsTooltip,
                     type: NotificationType.WARNING,
                 })
@@ -62,7 +63,7 @@ export class MessageController {
             })
             selectedTab.id = newTabID
         }
-        this.mynahUI.addToUserPrompt(selectedTab.id, message.body as string)
+        this.mynahUI?.addToUserPrompt(selectedTab.id, message.body as string)
 
         return selectedTab.id
     }
@@ -78,13 +79,13 @@ export class MessageController {
             this.tabsStorage.updateTabStatus(selectedTab.id, 'busy')
             this.tabsStorage.updateTabTypeFromUnknown(selectedTab.id, tabType)
 
-            this.mynahUI.updateStore(selectedTab.id, {
+            this.mynahUI?.updateStore(selectedTab.id, {
                 loadingChat: true,
                 cancelButtonWhenLoading: false,
                 promptInputDisabledState: true,
             })
-            this.mynahUI.addChatItem(selectedTab.id, message)
-            this.mynahUI.addChatItem(selectedTab.id, {
+            this.mynahUI?.addChatItem(selectedTab.id, message)
+            this.mynahUI?.addChatItem(selectedTab.id, {
                 type: ChatItemType.ANSWER_STREAM,
                 body: '',
             })
@@ -92,24 +93,24 @@ export class MessageController {
             return selectedTab.id
         }
 
-        const newTabID: string | undefined = this.mynahUI.updateStore(
+        const newTabID: string | undefined = this.mynahUI?.updateStore(
             '',
             this.tabDataGenerator.getTabData('cwc', false)
         )
         if (newTabID === undefined) {
-            this.mynahUI.notify({
+            this.mynahUI?.notify({
                 content: uiComponentsTexts.noMoreTabsTooltip,
                 type: NotificationType.WARNING,
             })
             return undefined
         } else {
-            this.mynahUI.addChatItem(newTabID, message)
-            this.mynahUI.addChatItem(newTabID, {
+            this.mynahUI?.addChatItem(newTabID, message)
+            this.mynahUI?.addChatItem(newTabID, {
                 type: ChatItemType.ANSWER_STREAM,
                 body: '',
             })
 
-            this.mynahUI.updateStore(newTabID, {
+            this.mynahUI?.updateStore(newTabID, {
                 loadingChat: true,
                 cancelButtonWhenLoading: false,
                 promptInputDisabledState: true,
@@ -131,4 +132,7 @@ export class MessageController {
             return newTabID
         }
     }
+    private get mynahUI(): MynahUI | undefined {
+        return this.mynahUIRef.mynahUI
+    }
 }
diff --git a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/messages/handler.ts b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/messages/handler.ts
index 92fff3747ba..7f37ba51ff0 100644
--- a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/messages/handler.ts
+++ b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/messages/handler.ts
@@ -6,20 +6,21 @@
 import { ChatItemType, ChatPrompt, MynahUI } from '@aws/mynah-ui-chat'
 import { Connector } from '../connector'
 import { TabsStorage } from '../storages/tabsStorage'
+import {MynahUIRef} from "../main";
 
 export interface TextMessageHandlerProps {
-    mynahUI: MynahUI
+    mynahUIRef: MynahUIRef
     connector: Connector
     tabsStorage: TabsStorage
 }
 
 export class TextMessageHandler {
-    private mynahUI: MynahUI
+    private mynahUIRef: MynahUIRef
     private connector: Connector
     private tabsStorage: TabsStorage
 
     constructor(props: TextMessageHandlerProps) {
-        this.mynahUI = props.mynahUI
+        this.mynahUIRef = props.mynahUIRef
         this.connector = props.connector
         this.tabsStorage = props.tabsStorage
     }
@@ -28,12 +29,12 @@ export class TextMessageHandler {
         this.tabsStorage.updateTabTypeFromUnknown(tabID, 'cwc')
         this.tabsStorage.resetTabTimer(tabID)
         this.connector.onUpdateTabType(tabID)
-        this.mynahUI.addChatItem(tabID, {
+        this.mynahUI?.addChatItem(tabID, {
             type: ChatItemType.PROMPT,
             body: chatPrompt.escapedPrompt,
         })
 
-        this.mynahUI.updateStore(tabID, {
+        this.mynahUI?.updateStore(tabID, {
             loadingChat: true,
             cancelButtonWhenLoading: false,
             promptInputDisabledState: true,
@@ -48,4 +49,8 @@ export class TextMessageHandler {
             })
             .then(() => {})
     }
+
+    private get mynahUI(): MynahUI | undefined {
+        return this.mynahUIRef.mynahUI
+    }
 }
diff --git a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/quickActions/handler.ts b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/quickActions/handler.ts
index aa7e389652b..6a7f74f2d23 100644
--- a/plugins/amazonq/mynah-ui/src/mynah-ui/ui/quickActions/handler.ts
+++ b/plugins/amazonq/mynah-ui/src/mynah-ui/ui/quickActions/handler.ts
@@ -8,9 +8,10 @@ import { TabDataGenerator } from '../tabs/generator'
 import { Connector } from '../connector'
 import { Tab, TabsStorage } from '../storages/tabsStorage'
 import { uiComponentsTexts } from '../texts/constants'
+import { MynahUIRef } from "../main";
 
 export interface QuickActionsHandlerProps {
-    mynahUI: MynahUI
+    mynahUIRef: MynahUIRef
     connector: Connector
     tabsStorage: TabsStorage
     isFeatureDevEnabled: boolean
@@ -18,10 +19,11 @@ export interface QuickActionsHandlerProps {
     isDocEnabled: boolean
     isCodeScanEnabled: boolean
     isCodeTestEnabled: boolean
+    hybridChat?: boolean
 }
 
 export class QuickActionHandler {
-    private mynahUI: MynahUI
+    private mynahUIRef: MynahUIRef
     private connector: Connector
     private tabsStorage: TabsStorage
     private tabDataGenerator: TabDataGenerator
@@ -30,9 +32,10 @@ export class QuickActionHandler {
     public isDocEnabled: boolean
     public isCodeScanEnabled: boolean
     public isCodeTestEnabled: boolean
+    private isHybridChatEnabled: boolean
 
     constructor(props: QuickActionsHandlerProps) {
-        this.mynahUI = props.mynahUI
+        this.mynahUIRef = props.mynahUIRef
         this.connector = props.connector
         this.tabsStorage = props.tabsStorage
         this.tabDataGenerator = new TabDataGenerator({
@@ -47,6 +50,7 @@ export class QuickActionHandler {
         this.isDocEnabled = props.isDocEnabled
         this.isCodeScanEnabled = props.isCodeScanEnabled
         this.isCodeTestEnabled = props.isCodeTestEnabled
+        this.isHybridChatEnabled = props.hybridChat ?? false
     }
 
     // Entry point for `/xxx` commands
@@ -85,10 +89,10 @@ export class QuickActionHandler {
         // Check for existing opened transform tab
         const existingTransformTab = this.tabsStorage.getTabs().find((tab) => tab.type === 'codetransform')
         if (existingTransformTab !== undefined) {
-            this.mynahUI.selectTab(existingTransformTab.id, eventId || "")
+            this.mynahUI?.selectTab(existingTransformTab.id, eventId || "")
             this.connector.onTabChange(existingTransformTab.id)
 
-            this.mynahUI.notify({
+            this.mynahUI?.notify({
                 title: "Q - Transform",
                 content: "Switched to the opened transformation tab",
             });
@@ -96,12 +100,9 @@ export class QuickActionHandler {
         }
 
         // Add new tab
-        let affectedTabId: string | undefined = tabID
-        if (this.tabsStorage.getTab(affectedTabId)?.type !== 'unknown') {
-            affectedTabId = this.mynahUI.updateStore('', {cancelButtonWhenLoading: false})
-        }
+        const affectedTabId: string | undefined = this.addTab(tabID)
         if (affectedTabId === undefined) {
-            this.mynahUI.notify({
+            this.mynahUI?.notify({
                 content: uiComponentsTexts.noMoreTabsTooltip,
                 type: NotificationType.WARNING,
             })
@@ -110,9 +111,9 @@ export class QuickActionHandler {
             this.tabsStorage.updateTabTypeFromUnknown(affectedTabId, 'codetransform')
             this.connector.onKnownTabOpen(affectedTabId)
             // Clear unknown tab type's welcome message
-            this.mynahUI.updateStore(affectedTabId, {chatItems: []})
-            this.mynahUI.updateStore(affectedTabId, this.tabDataGenerator.getTabData('codetransform', true))
-            this.mynahUI.updateStore(affectedTabId, {
+            this.mynahUI?.updateStore(affectedTabId, {chatItems: []})
+            this.mynahUI?.updateStore(affectedTabId, this.tabDataGenerator.getTabData('codetransform', true))
+            this.mynahUI?.updateStore(affectedTabId, {
                 promptInputDisabledState: true,
                 promptInputPlaceholder: 'Open a new tab to chat with Q.',
                 loadingChat: true,
@@ -126,7 +127,7 @@ export class QuickActionHandler {
     }
 
     private handleClearCommand(tabID: string) {
-        this.mynahUI.updateStore(tabID, {
+        this.mynahUI?.updateStore(tabID, {
             chatItems: [],
         })
         this.connector.clearChat(tabID)
@@ -146,13 +147,11 @@ export class QuickActionHandler {
             return
         }
 
-        let affectedTabId: string | undefined = tabID
+        const affectedTabId: string | undefined = this.addTab(tabID)
         const realPromptText = chatPrompt.escapedPrompt?.trim() ?? ''
-        if (this.tabsStorage.getTab(affectedTabId)?.type !== 'unknown') {
-            affectedTabId = this.mynahUI.updateStore('', {})
-        }
+
         if (affectedTabId === undefined) {
-            this.mynahUI.notify({
+            this.mynahUI?.notify({
                 content: uiComponentsTexts.noMoreTabsTooltip,
                 type: NotificationType.WARNING,
             })
@@ -162,14 +161,14 @@ export class QuickActionHandler {
             this.connector.onKnownTabOpen(affectedTabId)
             this.connector.onUpdateTabType(affectedTabId)
 
-            this.mynahUI.updateStore(affectedTabId, { chatItems: [] })
-            this.mynahUI.updateStore(
+            this.mynahUI?.updateStore(affectedTabId, { chatItems: [] })
+            this.mynahUI?.updateStore(
                 affectedTabId,
                 this.tabDataGenerator.getTabData('featuredev', false, taskName)
             )
 
             const addInformationCard = (tabId: string) => {
-                this.mynahUI.addChatItem(tabId, {
+                this.mynahUI?.addChatItem(tabId, {
                     type: ChatItemType.ANSWER,
                     informationCard: {
                         title: "Feature development",
@@ -191,19 +190,19 @@ export class QuickActionHandler {
             };
 
             if (realPromptText !== '') {
-                this.mynahUI.addChatItem(affectedTabId, {
+                this.mynahUI?.addChatItem(affectedTabId, {
                     type: ChatItemType.PROMPT,
                     body: realPromptText,
                 })
 
                 addInformationCard(affectedTabId)
 
-                this.mynahUI.addChatItem(affectedTabId, {
+                this.mynahUI?.addChatItem(affectedTabId, {
                     type: ChatItemType.ANSWER_STREAM,
                     body: '',
                 })
 
-                this.mynahUI.updateStore(affectedTabId, {
+                this.mynahUI?.updateStore(affectedTabId, {
                     loadingChat: true,
                     promptInputDisabledState: true,
                 })
@@ -222,15 +221,12 @@ private handleDocCommand(chatPrompt: ChatPrompt, tabID: string, taskName: string
             return
         }
 
-        let affectedTabId: string | undefined = tabID
+        const affectedTabId: string | undefined = this.addTab(tabID)
         const realPromptText = chatPrompt.escapedPrompt?.trim() ?? ''
 
-        if (this.tabsStorage.getTab(affectedTabId)?.type !== 'unknown') {
-            affectedTabId = this.mynahUI.updateStore('', {})
-        }
 
         if (affectedTabId === undefined) {
-            this.mynahUI.notify({
+            this.mynahUI?.notify({
                 content: uiComponentsTexts.noMoreTabsTooltip,
                 type: NotificationType.WARNING,
             })
@@ -240,9 +236,9 @@ private handleDocCommand(chatPrompt: ChatPrompt, tabID: string, taskName: string
             this.connector.onKnownTabOpen(affectedTabId)
             this.connector.onUpdateTabType(affectedTabId)
 
-            this.mynahUI.updateStore(affectedTabId, { chatItems: [] })
+            this.mynahUI?.updateStore(affectedTabId, { chatItems: [] })
 
-            this.mynahUI.updateStore(
+            this.mynahUI?.updateStore(
                 affectedTabId, {
                     ...this.tabDataGenerator.getTabData('doc', realPromptText === '', taskName),
                     promptInputDisabledState: true
@@ -250,12 +246,12 @@ private handleDocCommand(chatPrompt: ChatPrompt, tabID: string, taskName: string
             )
 
             if (realPromptText !== '') {
-                this.mynahUI.addChatItem(affectedTabId, {
+                this.mynahUI?.addChatItem(affectedTabId, {
                     type: ChatItemType.PROMPT,
                     body: realPromptText,
                 })
 
-                this.mynahUI.updateStore(affectedTabId, {
+                this.mynahUI?.updateStore(affectedTabId, {
                     loadingChat: true,
                     promptInputDisabledState: true,
                 })
@@ -268,11 +264,11 @@ private handleDocCommand(chatPrompt: ChatPrompt, tabID: string, taskName: string
     }
 
     private showScanInTab( tabId: string) {
-        this.mynahUI.addChatItem(tabId, {
+        this.mynahUI?.addChatItem(tabId, {
             type: ChatItemType.PROMPT,
             body: "Run a code review",
         })
-        this.mynahUI.addChatItem(tabId, {
+        this.mynahUI?.addChatItem(tabId, {
             type: ChatItemType.ANSWER,
             informationCard: {
                 title: "/review",
@@ -298,10 +294,10 @@ private handleDocCommand(chatPrompt: ChatPrompt, tabID: string, taskName: string
         // Check for existing opened code scan tab
         const existingCodeScanTab = this.tabsStorage.getTabs().find(tab => tab.type === 'codescan')
         if (existingCodeScanTab !== undefined ) {
-            this.mynahUI.selectTab(existingCodeScanTab.id, eventId || "")
+            this.mynahUI?.selectTab(existingCodeScanTab.id, eventId || "")
             this.connector.onTabChange(existingCodeScanTab.id)
 
-            this.mynahUI.notify({
+            this.mynahUI?.notify({
                 title: "Q - Review",
                 content: "Switched to the opened code review tab"
             });
@@ -310,12 +306,10 @@ private handleDocCommand(chatPrompt: ChatPrompt, tabID: string, taskName: string
         }
 
         // Add new tab
-        let affectedTabId: string | undefined = tabID
-        if (this.tabsStorage.getTab(affectedTabId)?.type !== 'unknown') {
-            affectedTabId = this.mynahUI.updateStore('', {})
-        }
+        const affectedTabId: string | undefined = this.addTab(tabID)
+
         if (affectedTabId === undefined) {
-            this.mynahUI.notify({
+            this.mynahUI?.notify({
                 content: uiComponentsTexts.noMoreTabsTooltip,
                 type: NotificationType.WARNING
             })
@@ -324,9 +318,9 @@ private handleDocCommand(chatPrompt: ChatPrompt, tabID: string, taskName: string
             this.tabsStorage.updateTabTypeFromUnknown(affectedTabId, 'codescan')
             this.connector.onKnownTabOpen(affectedTabId)
             // Clear unknown tab type's welcome message
-            this.mynahUI.updateStore(affectedTabId, {chatItems: []})
-            this.mynahUI.updateStore(affectedTabId, this.tabDataGenerator.getTabData('codescan', true))
-            this.mynahUI.updateStore(affectedTabId, {
+            this.mynahUI?.updateStore(affectedTabId, {chatItems: []})
+            this.mynahUI?.updateStore(affectedTabId, this.tabDataGenerator.getTabData('codescan', true))
+            this.mynahUI?.updateStore(affectedTabId, {
                 promptInputDisabledState: true,
                 promptInputPlaceholder: 'Waiting on your inputs...',
                 loadingChat: true,
@@ -344,21 +338,17 @@ private handleDocCommand(chatPrompt: ChatPrompt, tabID: string, taskName: string
         const testTabId = this.tabsStorage.getTabs().find((tab) => tab.type === 'codetest')?.id
         const realPromptText = chatPrompt.escapedPrompt?.trim() ?? ''
         if (testTabId !== undefined) {
-            this.mynahUI.selectTab(testTabId, eventId || '')
+            this.mynahUI?.selectTab(testTabId, eventId || '')
             this.connector.onTabChange(testTabId)
             this.connector.startTestGen(testTabId, realPromptText)
             return
         }
-        let affectedTabId: string | undefined = tabID
+        const affectedTabId: string | undefined = this.addTab(tabID)
 
         // if there is no test tab, open a new one
-        if (this.tabsStorage.getTab(affectedTabId)?.type !== 'unknown') {
-            affectedTabId = this.mynahUI.updateStore('', {
-                loadingChat: true,
-            })
-        }
+
         if (affectedTabId === undefined) {
-            this.mynahUI.notify({
+            this.mynahUI?.notify({
                 content: uiComponentsTexts.noMoreTabsTooltip,
                 type: NotificationType.WARNING,
             })
@@ -368,12 +358,12 @@ private handleDocCommand(chatPrompt: ChatPrompt, tabID: string, taskName: string
             this.connector.onKnownTabOpen(affectedTabId)
             this.connector.onUpdateTabType(affectedTabId)
             // reset chat history
-            this.mynahUI.updateStore(affectedTabId, {
+            this.mynahUI?.updateStore(affectedTabId, {
                 chatItems: [],
             })
 
             // creating a new tab and printing some title
-            this.mynahUI.updateStore(
+            this.mynahUI?.updateStore(
                  affectedTabId,
                  this.tabDataGenerator.getTabData('codetest', realPromptText === '', 'Q - Test')
              )
@@ -381,4 +371,36 @@ private handleDocCommand(chatPrompt: ChatPrompt, tabID: string, taskName: string
             this.connector.startTestGen(affectedTabId, realPromptText)
         }
     }
+
+    // Ref: https://github.com/aws/aws-toolkit-vscode/blob/e9ea8082ffe0b9968a873437407d0b6b31b9e1a5/packages/core/src/amazonq/webview/ui/quickActions/handler.ts#L345
+    private addTab(affectedTabId: string | undefined) {
+        if (!affectedTabId || !this.mynahUI) {
+            return
+        }
+
+        const currTab = this.mynahUI.getAllTabs()[affectedTabId]
+        const currTabWasUsed =
+            (currTab.store?.chatItems?.filter((item) => item.type === ChatItemType.PROMPT).length ?? 0) > 0
+        if (currTabWasUsed) {
+            affectedTabId = this.mynahUI.updateStore('', {
+                loadingChat: true,
+                cancelButtonWhenLoading: false,
+            })
+        }
+
+        if (affectedTabId && this.isHybridChatEnabled) {
+            this.tabsStorage.addTab({
+                id: affectedTabId,
+                type: 'unknown',
+                status: 'free',
+                isSelected: true,
+            })
+        }
+
+        return affectedTabId
+    }
+
+    private get mynahUI(): MynahUI | undefined {
+        return this.mynahUIRef.mynahUI
+    }
 }
diff --git a/plugins/amazonq/mynah-ui/webpack.media.config.js b/plugins/amazonq/mynah-ui/webpack.media.config.js
index 978a8369481..c11715ddf97 100644
--- a/plugins/amazonq/mynah-ui/webpack.media.config.js
+++ b/plugins/amazonq/mynah-ui/webpack.media.config.js
@@ -48,4 +48,47 @@ const config = {
         ],
     },
 };
-module.exports = config;
+
+const connectorAdapter = {
+    plugins: [
+        new CopyWebpackPlugin({
+            patterns: [
+                { from: './node_modules/web-tree-sitter/tree-sitter.wasm', to: ''}
+            ]
+        })
+    ],
+    target: 'web',
+    entry: './src/mynah-ui/connectorAdapter.ts',
+    output: {
+        path: path.resolve(__dirname, 'build/assets/js'),
+        filename: 'connectorAdapter.js',
+        library: 'connectorAdapter',
+        libraryTarget: 'var',
+        devtoolModuleFilenameTemplate: '../[resource-path]',
+    },
+    devtool: 'source-map',
+    resolve: {
+        extensions: ['.ts', '.js', '.wasm'],
+        fallback: {
+            fs: false,
+            path: false,
+            util: false
+        }
+    },
+    experiments: { asyncWebAssembly: true },
+    module: {
+        rules: [
+            {test: /\.(sa|sc|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
+            {
+                test: /\.ts$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'ts-loader',
+                    },
+                ],
+            },
+        ],
+    },
+};
+module.exports = [config, connectorAdapter];