diff --git a/ci/ci-values.yaml b/ci/ci-values.yaml
index 05eda6c164..fa78a9dc74 100644
--- a/ci/ci-values.yaml
+++ b/ci/ci-values.yaml
@@ -54,4 +54,4 @@ postgresql:
         - "management"
 
 ingress:
-  className: traefik
\ No newline at end of file
+  className: traefik
diff --git a/forge/db/views/ProjectTemplate.js b/forge/db/views/ProjectTemplate.js
index 3d9fef4c24..dd2912a897 100644
--- a/forge/db/views/ProjectTemplate.js
+++ b/forge/db/views/ProjectTemplate.js
@@ -16,7 +16,7 @@ module.exports = function (app) {
                 name: result.name,
                 description: result.description,
                 active: result.active,
-                instanceCount: result.projectCount,
+                instanceCount: parseInt(result.projectCount) || 0,
                 settings: result.settings || {},
                 policy: result.policy || {},
                 createdAt: result.createdAt,
@@ -56,7 +56,7 @@ module.exports = function (app) {
                 name: result.name,
                 description: result.description,
                 active: result.active,
-                instanceCount: result.projectCount,
+                instanceCount: parseInt(result.projectCount) || 0,
                 createdAt: result.createdAt,
                 links: result.links
             }
diff --git a/frontend/src/api/user.js b/frontend/src/api/user.js
index 21bf7c906a..3f1c21c37d 100644
--- a/frontend/src/api/user.js
+++ b/frontend/src/api/user.js
@@ -239,6 +239,9 @@ const disableMFA = async () => {
 const verifyMFA = async (token) => {
     return client.put('/api/v1/user/mfa/verify', { token }).then(res => res.data)
 }
+const initiateExpertChat = async ({ sessionId }) => {
+    return client.post('/api/v1/user/expert-creds', { sessionId }).then(res => res.data)
+}
 
 export default {
     registerUser,
@@ -267,5 +270,6 @@ export default {
     updatePersonalAccessToken,
     enableMFA,
     verifyMFA,
-    disableMFA
+    disableMFA,
+    initiateExpertChat
 }
diff --git a/frontend/src/components/expert/Expert.vue b/frontend/src/components/expert/Expert.vue
index f40c17ab36..406248a9ea 100644
--- a/frontend/src/components/expert/Expert.vue
+++ b/frontend/src/components/expert/Expert.vue
@@ -148,7 +148,8 @@ export default {
             'setAgentMode',
             'setAbortController',
             'resetSessionTimer',
-            'addWelcomeMessageIfNeeded'
+            'addWelcomeMessageIfNeeded',
+            'stopInflightChat'
         ]),
         ...mapActions(useProductExpertInsightsAgentStore, ['getCapabilities']),
         ...mapActions(useProductAssistantStore, ['reset']),
@@ -157,6 +158,7 @@ export default {
                 this.abortController.abort()
                 this.setAbortController(null)
             }
+            this.stopInflightChat()
         },
         handleScroll () {
             // Debounce scroll detection
diff --git a/frontend/src/components/expert/components/ExpertChatInput.vue b/frontend/src/components/expert/components/ExpertChatInput.vue
index 9a0a61ce61..9238db99f2 100644
--- a/frontend/src/components/expert/components/ExpertChatInput.vue
+++ b/frontend/src/components/expert/components/ExpertChatInput.vue
@@ -33,7 +33,7 @@
             />
 
             <div class="actions">
-                <div class="left">
+                <div class="left overflow-hidden">
                     <context-selector v-if="isImmersive && !isInsightsAgent" />
                 </div>
 
@@ -64,13 +64,13 @@
 <script>
 import { mapActions, mapState } from 'pinia'
 
-import { useResizingHelper } from '../../../composables/ResizingHelper.js'
-
 import ResizeBar from '../../ResizeBar.vue'
 
 import CapabilitiesSelector from './CapabilitiesSelector.vue'
 import ContextSelector from './context-selection/index.vue'
 
+import { useResizingHelper } from '@/composables/ResizingHelper.js'
+
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
 import { useProductExpertStore } from '@/stores/product-expert.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
@@ -113,8 +113,8 @@ export default {
     },
     computed: {
         ...mapState(useProductAssistantStore, [
-            'immersiveInstance',
-            'immersiveDevice'
+            'isImmersiveInstance',
+            'isImmersiveDevice'
         ]),
         ...mapState(useUxDrawersStore, ['rightDrawer']),
         ...mapState(useProductExpertStore, [
@@ -145,7 +145,7 @@ export default {
                 : 'Tell us what you need help with'
         },
         isImmersive () {
-            return this.immersiveDevice || this.immersiveInstance
+            return this.isImmersiveDevice || this.isImmersiveInstance
         }
     },
     mounted () {
diff --git a/frontend/src/components/expert/components/ExpertLoadingIndicator.vue b/frontend/src/components/expert/components/ExpertLoadingIndicator.vue
index ceb9c02062..22921e9480 100644
--- a/frontend/src/components/expert/components/ExpertLoadingIndicator.vue
+++ b/frontend/src/components/expert/components/ExpertLoadingIndicator.vue
@@ -53,8 +53,12 @@ export default {
         }
     },
     computed: {
-        ...mapState(useProductExpertStore, ['loadingVariant']),
+        ...mapState(useProductExpertStore, ['loadingVariant', 'inFlightUpdates']),
         messages () {
+            if (this.inFlightUpdates.length > 0) {
+                return this.inFlightUpdates
+            }
+
             return this.messageVariants[this.loadingVariant]
         },
         currentMessage () {
diff --git a/frontend/src/components/expert/components/ExpertMessages.vue b/frontend/src/components/expert/components/ExpertMessages.vue
index bc64a6cded..76ffe3b574 100644
--- a/frontend/src/components/expert/components/ExpertMessages.vue
+++ b/frontend/src/components/expert/components/ExpertMessages.vue
@@ -22,6 +22,7 @@ import AiMessage from './messages/AiMessage.vue'
 import HumanMessage from './messages/HumanMessage.vue'
 import SystemMessage from './messages/SystemMessage.vue'
 
+import { downloadData } from '@/composables/Download.js'
 import { useProductExpertStore } from '@/stores/product-expert.js'
 
 export default {
@@ -46,11 +47,19 @@ export default {
     },
     mounted () {
         this.mountResizeObserver()
+        window.addEventListener('keydown', this.onKeyDown)
     },
     beforeUnmount () {
         this.unmountResizeObserver()
+        window.removeEventListener('keydown', this.onKeyDown)
     },
     methods: {
+        onKeyDown (e) {
+            if (e.altKey && e.shiftKey && e.key.toLowerCase() === 'd') {
+                e.preventDefault()
+                downloadData(this.messages, 'expert-messages.json')
+            }
+        },
         mountResizeObserver () {
             const el = this.$refs.messagesWrapper
             if (!el) return
diff --git a/frontend/src/components/expert/components/messages/AiMessage.vue b/frontend/src/components/expert/components/messages/AiMessage.vue
index b38503b269..0fc8817324 100644
--- a/frontend/src/components/expert/components/messages/AiMessage.vue
+++ b/frontend/src/components/expert/components/messages/AiMessage.vue
@@ -12,12 +12,13 @@
 </template>
 
 <script>
-import useStreamingList from '../../../../composables/StreamingListHelper.js'
-import { slugify } from '../../../../composables/strings/String.js'
-
 import AnswerWrapper from './components/AnswerWrapper.vue'
+
 import ToolCalls from './components/ToolCalls.vue'
 
+import useStreamingList from '@/composables/StreamingListHelper.js'
+import { slugify } from '@/composables/strings/String.js'
+
 export default {
     name: 'AiMessage',
     components: { ToolCalls, AnswerWrapper },
diff --git a/frontend/src/components/expert/components/messages/components/ToolCallItem.vue b/frontend/src/components/expert/components/messages/components/ToolCallItem.vue
new file mode 100644
index 0000000000..0e75658fee
--- /dev/null
+++ b/frontend/src/components/expert/components/messages/components/ToolCallItem.vue
@@ -0,0 +1,242 @@
+<template>
+    <div class="ff-expert-tool-call--item">
+        <div class="ff-expert-tool-call--title">{{ tool.title || tool.name }}</div>
+        <div class="ff-expert-tool-call--name">
+            <div>
+                <span class="ff-expert-tool-call--badge" :title="formatKindFull(tool.kind)">{{ formatKindBadge(tool.kind) }}</span>
+                {{ tool.name }}
+            </div>
+            <span class="ff-expert-tool-call--section-duration">{{ tool.durationMs || 0 }} ms</span>
+        </div>
+        <div v-if="expanded" class="ff-expert-tool-call--details">
+            <!-- Input section (collapsible, expanded by default) -->
+            <div v-if="hasContent(tool.args)" class="ff-expert-tool-call--section">
+                <div
+                    class="ff-expert-tool-call--section-header"
+                    @click.stop="inputExpanded = !inputExpanded"
+                >
+                    <ChevronRightIcon
+                        class="ff-icon-small"
+                        :class="{ 'rotated': inputExpanded }"
+                    />
+                    <span class="ff-expert-tool-call--section-label">Input</span>
+                </div>
+                <div v-if="inputExpanded" class="ff-expert-tool-call--code">
+                    <!-- eslint-disable-next-line vue/no-v-html -->
+                    <pre><code v-html="highlightJson(tool.args)" /></pre>
+                </div>
+            </div>
+            <!-- Output section (collapsible, collapsed by default) -->
+            <div v-if="hasContent(tool.output)" class="ff-expert-tool-call--section">
+                <div
+                    class="ff-expert-tool-call--section-header"
+                    @click.stop="outputExpanded = !outputExpanded"
+                >
+                    <ChevronRightIcon
+                        class="ff-icon-small"
+                        :class="{ 'rotated': outputExpanded }"
+                    />
+                    <span class="ff-expert-tool-call--section-label">Output</span>
+                </div>
+                <div v-if="outputExpanded" class="ff-expert-tool-call--code">
+                    <!-- eslint-disable-next-line vue/no-v-html -->
+                    <pre><code v-html="highlightJson(tool.output)" /></pre>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ChevronRightIcon } from '@heroicons/vue/solid'
+import hljs from 'highlight.js/lib/core'
+import json from 'highlight.js/lib/languages/json'
+
+hljs.registerLanguage('json', json)
+
+export default {
+    name: 'ToolCallItem',
+    components: {
+        ChevronRightIcon
+    },
+    props: {
+        tool: {
+            type: Object,
+            required: true
+        },
+        expanded: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            inputExpanded: false,
+            outputExpanded: false
+        }
+    },
+    methods: {
+        formatKindBadge (kind) {
+            const badgeMap = {
+                mcp_tool: 'T',
+                mcp_resource: 'R',
+                mcp_resource_template: 'RT',
+                mcp_prompt: 'P'
+            }
+            return badgeMap[kind] || '?'
+        },
+        formatKindFull (kind) {
+            const kindMap = {
+                mcp_tool: 'MCP Tool',
+                mcp_resource: 'MCP Resource',
+                mcp_resource_template: 'MCP Resource Template',
+                mcp_prompt: 'MCP Prompt'
+            }
+            return kindMap[kind] || kind || 'Unknown'
+        },
+        hasContent (data) {
+            if (data === null || data === undefined) return false
+            if (Array.isArray(data)) return data.length > 0
+            if (typeof data === 'object') return Object.keys(data).length > 0
+            if (typeof data === 'string') return data.trim() !== ''
+            return true
+        },
+        highlightJson (data) {
+            let jsonStr
+            if (typeof data === 'string') {
+                try {
+                    jsonStr = JSON.stringify(JSON.parse(data), null, 2)
+                } catch {
+                    jsonStr = data
+                }
+            } else {
+                jsonStr = JSON.stringify(data, null, 2)
+            }
+            return hljs.highlight(jsonStr, { language: 'json' }).value
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import 'highlight.js/styles/github.css';
+
+.ff-expert-tool-call--item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.ff-expert-tool-call--title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: $ff-grey-800;
+}
+
+.ff-expert-tool-call--name {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    color: $ff-grey-500;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+}
+
+.ff-expert-tool-call--badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.125rem;
+    padding: 0 0.25rem;
+    font-size: 0.5625rem;
+    font-weight: 700;
+    color: $ff-grey-600;
+    background-color: $ff-grey-200;
+    border-radius: 0.1875rem;
+    flex-shrink: 0;
+    cursor: help;
+}
+
+.ff-expert-tool-call--details {
+    margin-top: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.ff-expert-tool-call--section {
+    border: 1px solid $ff-grey-200;
+    border-radius: 0.375rem;
+    overflow: hidden;
+}
+
+.ff-expert-tool-call--section-header {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    background-color: white;
+    cursor: pointer;
+    user-select: none;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: $ff-grey-600;
+
+    &:hover {
+        background-color: $ff-grey-50;
+    }
+
+    .ff-icon-small {
+        width: 0.75rem;
+        height: 0.75rem;
+        color: $ff-grey-400;
+        flex-shrink: 0;
+        transition: transform 0.2s ease;
+
+        &.rotated {
+            transform: rotate(90deg);
+        }
+    }
+}
+
+.ff-expert-tool-call--section-label {
+    flex: 1;
+}
+
+.ff-expert-tool-call--section-duration {
+    color: $ff-grey-400;
+    font-weight: 400;
+}
+
+.ff-expert-tool-call--code {
+    pre {
+        margin: 0;
+        padding: 0.75rem;
+        background-color: $ff-grey-100;
+        border-radius: 0.375rem;
+        overflow-x: auto;
+
+        code {
+            font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+            font-size: 0.8125rem;
+            color: $ff-grey-800;
+            white-space: pre-wrap;
+            word-break: break-word;
+            border: none;
+            background: transparent;
+            padding: 0;
+        }
+    }
+
+    // When inside a section, remove border-radius top and add border
+    .ff-expert-tool-call--section & {
+        border-top: 1px solid $ff-grey-200;
+
+        pre {
+            border-radius: 0;
+        }
+    }
+}
+</style>
diff --git a/frontend/src/components/expert/components/messages/components/ToolCalls.vue b/frontend/src/components/expert/components/messages/components/ToolCalls.vue
index 3943d8106a..565d2b7dd7 100644
--- a/frontend/src/components/expert/components/messages/components/ToolCalls.vue
+++ b/frontend/src/components/expert/components/messages/components/ToolCalls.vue
@@ -9,70 +9,27 @@
                 {{ formattedDuration }} ms
             </span>
         </div>
-        <div class="ff-expert-tool-call--body">
-            <div
+        <div class="ff-expert-tool-call--body" :class="{ 'is-expanded': expanded }">
+            <ToolCallItem
                 v-for="tool in toolCalls"
                 :key="tool.id"
-                class="ff-expert-tool-call--item"
-            >
-                <div class="ff-expert-tool-call--title">{{ tool.title || tool.name }}</div>
-                <div class="ff-expert-tool-call--name">
-                    <span class="ff-expert-tool-call--badge" :title="formatKindFull(tool.kind)">{{ formatKindBadge(tool.kind) }}</span>
-                    {{ tool.name }}
-                </div>
-                <div v-if="expanded" class="ff-expert-tool-call--details">
-                    <!-- Input section (collapsible, expanded by default) -->
-                    <div v-if="hasContent(tool.args)" class="ff-expert-tool-call--section">
-                        <div
-                            class="ff-expert-tool-call--section-header"
-                            @click.stop="toggleSection(tool.id, 'input')"
-                        >
-                            <ChevronRightIcon
-                                class="ff-icon-small"
-                                :class="{ 'rotated': isSectionExpanded(tool.id, 'input') }"
-                            />
-                            <span class="ff-expert-tool-call--section-label">Input</span>
-                        </div>
-                        <div v-if="isSectionExpanded(tool.id, 'input')" class="ff-expert-tool-call--code">
-                            <!-- eslint-disable-next-line vue/no-v-html -->
-                            <pre><code v-html="highlightJson(tool.args)" /></pre>
-                        </div>
-                    </div>
-                    <!-- Output section (collapsible, collapsed by default) -->
-                    <div v-if="hasContent(tool.output)" class="ff-expert-tool-call--section">
-                        <div
-                            class="ff-expert-tool-call--section-header"
-                            @click.stop="toggleSection(tool.id, 'output')"
-                        >
-                            <ChevronRightIcon
-                                class="ff-icon-small"
-                                :class="{ 'rotated': isSectionExpanded(tool.id, 'output') }"
-                            />
-                            <span class="ff-expert-tool-call--section-label">Output</span>
-                            <span class="ff-expert-tool-call--section-duration">{{ tool.durationMs || 0 }} ms</span>
-                        </div>
-                        <div v-if="isSectionExpanded(tool.id, 'output')" class="ff-expert-tool-call--code">
-                            <!-- eslint-disable-next-line vue/no-v-html -->
-                            <pre><code v-html="highlightJson(tool.output)" /></pre>
-                        </div>
-                    </div>
-                </div>
-            </div>
+                :tool="tool"
+                :expanded="expanded"
+            />
         </div>
     </div>
 </template>
 
 <script>
 import { ChevronRightIcon } from '@heroicons/vue/solid'
-import hljs from 'highlight.js/lib/core'
-import json from 'highlight.js/lib/languages/json'
 
-hljs.registerLanguage('json', json)
+import ToolCallItem from './ToolCallItem.vue'
 
 export default {
     name: 'ToolCalls',
     components: {
-        ChevronRightIcon
+        ChevronRightIcon,
+        ToolCallItem
     },
     props: {
         message: {
@@ -85,8 +42,7 @@ export default {
     },
     data () {
         return {
-            expanded: false,
-            expandedSections: {} // Track which sections are expanded: { 'toolId-input': true, 'toolId-output': false }
+            expanded: false
         }
     },
     computed: {
@@ -107,66 +63,12 @@ export default {
     methods: {
         toggleExpanded () {
             this.expanded = !this.expanded
-        },
-        toggleSection (toolId, section) {
-            const key = `${toolId}-${section}`
-            const currentState = this.isSectionExpanded(toolId, section)
-            this.expandedSections[key] = !currentState
-        },
-        isSectionExpanded (toolId, section) {
-            const key = `${toolId}-${section}`
-            // Input sections are expanded by default, output sections are collapsed
-            if (!(key in this.expandedSections)) {
-                return section === 'input'
-            }
-            return this.expandedSections[key]
-        },
-        formatKindBadge (kind) {
-            const badgeMap = {
-                mcp_tool: 'T',
-                mcp_resource: 'R',
-                mcp_resource_template: 'RT',
-                mcp_prompt: 'P'
-            }
-            return badgeMap[kind] || '?'
-        },
-        formatKindFull (kind) {
-            const kindMap = {
-                mcp_tool: 'MCP Tool',
-                mcp_resource: 'MCP Resource',
-                mcp_resource_template: 'MCP Resource Template',
-                mcp_prompt: 'MCP Prompt'
-            }
-            return kindMap[kind] || kind || 'Unknown'
-        },
-        hasContent (data) {
-            if (data === null || data === undefined) return false
-            if (Array.isArray(data)) return data.length > 0
-            if (typeof data === 'object') return Object.keys(data).length > 0
-            if (typeof data === 'string') return data.trim() !== ''
-            return true
-        },
-        highlightJson (data) {
-            let jsonStr
-            if (typeof data === 'string') {
-                // Try to parse and re-stringify for formatting, fallback to raw string
-                try {
-                    jsonStr = JSON.stringify(JSON.parse(data), null, 2)
-                } catch {
-                    jsonStr = data
-                }
-            } else {
-                jsonStr = JSON.stringify(data, null, 2)
-            }
-            return hljs.highlight(jsonStr, { language: 'json' }).value
         }
     }
 }
 </script>
 
 <style scoped lang="scss">
-@import 'highlight.js/styles/github.css';
-
 .ff-expert-tool-call {
     background-color: $ff-grey-50;
     border: 1px solid $ff-grey-200;
@@ -214,128 +116,18 @@ export default {
 }
 
 .ff-expert-tool-call--body {
+    --item-height: 3rem;
     border-top: 1px solid $ff-grey-200;
     padding: 0.75rem 1rem;
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-}
-
-.ff-expert-tool-call--item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-.ff-expert-tool-call--title {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: $ff-grey-800;
-}
+    max-height: calc(var(--item-height) * 2 + 1.5rem);
+    overflow-y: auto;
+    transition: max-height 0.2s ease;
 
-.ff-expert-tool-call--name {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    font-size: 0.75rem;
-    color: $ff-grey-500;
-    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-}
-
-.ff-expert-tool-call--badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 1.25rem;
-    height: 1.125rem;
-    padding: 0 0.25rem;
-    font-size: 0.5625rem;
-    font-weight: 700;
-    color: $ff-grey-600;
-    background-color: $ff-grey-200;
-    border-radius: 0.1875rem;
-    flex-shrink: 0;
-    cursor: help;
-}
-
-.ff-expert-tool-call--details {
-    margin-top: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.ff-expert-tool-call--section {
-    border: 1px solid $ff-grey-200;
-    border-radius: 0.375rem;
-    overflow: hidden;
-}
-
-.ff-expert-tool-call--section-header {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.5rem 0.75rem;
-    background-color: white;
-    cursor: pointer;
-    user-select: none;
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: $ff-grey-600;
-
-    &:hover {
-        background-color: $ff-grey-50;
-    }
-
-    .ff-icon-small {
-        width: 0.75rem;
-        height: 0.75rem;
-        color: $ff-grey-400;
-        flex-shrink: 0;
-        transition: transform 0.2s ease;
-
-        &.rotated {
-            transform: rotate(90deg);
-        }
-    }
-}
-
-.ff-expert-tool-call--section-label {
-    flex: 1;
-}
-
-.ff-expert-tool-call--section-duration {
-    color: $ff-grey-400;
-    font-weight: 400;
-}
-
-.ff-expert-tool-call--code {
-    pre {
-        margin: 0;
-        padding: 0.75rem;
-        background-color: $ff-grey-100;
-        border-radius: 0.375rem;
-        overflow-x: auto;
-
-        code {
-            font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-            font-size: 0.8125rem;
-            color: $ff-grey-800;
-            white-space: pre-wrap;
-            word-break: break-word;
-            border: none;
-            background: transparent;
-            padding: 0;
-        }
-    }
-
-    // When inside a section, remove border-radius top and add border
-    .ff-expert-tool-call--section & {
-        border-top: 1px solid $ff-grey-200;
-
-        pre {
-            border-radius: 0;
-        }
+    &.is-expanded {
+        max-height: calc(var(--item-height) * 15 + 1.5rem);
     }
 }
 </style>
diff --git a/frontend/src/components/expert/components/messages/components/resources/StreamableContent.vue b/frontend/src/components/expert/components/messages/components/resources/StreamableContent.vue
index 436250a8cc..43bdb2ab8f 100644
--- a/frontend/src/components/expert/components/messages/components/resources/StreamableContent.vue
+++ b/frontend/src/components/expert/components/messages/components/resources/StreamableContent.vue
@@ -222,5 +222,24 @@ export default {
             background-color: $ff-color--highlight;
         }
     }
+
+    :deep(code) {
+        padding: 0;
+        border: none;
+        border-radius: 0;
+    }
+
+    :deep(table) {
+        border-collapse: collapse; /* removes double borders */
+
+        tr + tr td {
+            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+            border-top: 1px solid $ff-grey-200;
+        }
+
+        td, th {
+            padding: 5px 10px;
+        }
+    }
 }
 </style>
diff --git a/frontend/src/composables/services/MqttExpertTopicHelper.ts b/frontend/src/composables/services/MqttExpertTopicHelper.ts
new file mode 100644
index 0000000000..cb5a71b6ad
--- /dev/null
+++ b/frontend/src/composables/services/MqttExpertTopicHelper.ts
@@ -0,0 +1,138 @@
+import { useAccountAuthStore, useContextStore, useProductExpertStore } from '@/stores'
+
+interface EntityWithId {
+    id: string
+    [key: string]: unknown
+}
+
+interface EntityTopicPathsOptions {
+    application?: EntityWithId | null
+    instance?: EntityWithId | null
+    device?: EntityWithId | null
+    team?: EntityWithId | null
+}
+
+interface EntityTopicPaths {
+    entityType: 'a' | 'p' | 'd' | 't'
+    entityId: string | undefined
+}
+
+type AgentChannel = 'support' | 'insights'
+type TopicType = 'chat' | 'inflight'
+type TopicAction = 'response' | 'request'
+
+interface ParsedTopic {
+    topic: string
+    isReply: boolean
+    isInflightRequest: boolean
+    entityType: string
+    entityId: string
+    agentChannel: 'support' | 'insights' | string
+    topicType: string | 'chat' | 'inflight' | null
+    topicAction: string | 'request' | 'response' | null
+    inflightType: string | null
+}
+
+interface BuildTopicOptions {
+    entityType?: EntityTopicPaths['entityType'] | null
+    entityId?: string | null
+    agentChannel?: AgentChannel
+    topicType?: TopicType
+    topicAction?: TopicAction,
+    inflightType?: string | null
+}
+
+export function useMqttExpertTopicHelper () {
+    function getEntityTopicPaths (options?: EntityTopicPathsOptions): EntityTopicPaths {
+        const { application, instance, device, team } = options ?? {}
+        const contextStore = useContextStore()
+
+        switch (true) {
+        case !!application || !!contextStore.application:
+            return {
+                entityType: 'a',
+                entityId: application?.id ?? contextStore.application?.id
+            }
+        case !!instance || !!contextStore.instance:
+            return {
+                entityType: 'p',
+                entityId: instance?.id ?? contextStore.instance.id
+            }
+        case !!device || !!contextStore.device:
+            return {
+                entityType: 'd',
+                entityId: device?.id ?? contextStore.device?.id
+            }
+        default:
+            return {
+                entityType: 't',
+                entityId: team?.id ?? contextStore.team?.id
+            }
+        }
+    }
+
+    function buildTopic (options?: BuildTopicOptions): string {
+        const { entityType, entityId, agentChannel, topicType, topicAction, inflightType } = options ?? {}
+
+        if (!entityType) throw new Error('Topic "entityType" is mandatory')
+        if (!entityId) throw new Error('Topic "entityId" is mandatory')
+        if (!agentChannel || !['support', 'insights'].includes(agentChannel)) {
+            throw new Error(`"agentChannel" must be either "support" or "insights", "${agentChannel}" given`)
+        }
+        if (!topicType || !['chat', 'inflight'].includes(topicType)) {
+            throw new Error(`"topicType" must be either "chat" or "inflight", "${topicType}" given`)
+        }
+        if (!topicAction || !['response', 'request'].includes(topicAction)) {
+            throw new Error(`"topicAction" must be either "response" or "request", "${topicAction}" given`)
+        }
+
+        const authStore = useAccountAuthStore()
+        const expertStore = useProductExpertStore()
+
+        const sessionId = expertStore.sessionId
+
+        return [
+            'ff',
+            'v1',
+            'expert',
+            authStore.user.id,
+            sessionId,
+            entityType,
+            entityId,
+            agentChannel,
+            topicType,
+            inflightType,
+            topicAction
+        ]
+            .filter(str => str).join('/')
+    }
+
+    function parseTopic (topic: string): ParsedTopic {
+        // topic examples
+        // ff/v1/expert/<userId>/<sessionId>/<entityType>/<entityId>/<agentChannel>/<topicType>/<topicAction>
+        // ff/v1/expert/<userId>/<sessionId>/<entityType>/<entityId>/<agentChannel>/<topicType>/<tool>/<topicAction>
+
+        if (!topic || topic.length === 0) throw new Error(`Invalid topic received: "${topic}"`)
+
+        const split = topic.split('/')
+
+        const inflightRequest = topic.includes('/inflight/') && topic.endsWith('/request')
+        return {
+            topic,
+            isReply: topic.endsWith('/response'),
+            isInflightRequest: inflightRequest,
+            entityType: split[5],
+            entityId: split[6],
+            agentChannel: split[7],
+            topicType: split[8],
+            topicAction: split.at(-1),
+            inflightType: inflightRequest ? split.at(-2) ?? null : null
+        }
+    }
+
+    return {
+        getEntityTopicPaths,
+        buildTopic,
+        parseTopic
+    }
+}
diff --git a/frontend/src/mixins/Application.js b/frontend/src/mixins/Application.js
index e744829d7e..7812450172 100644
--- a/frontend/src/mixins/Application.js
+++ b/frontend/src/mixins/Application.js
@@ -1,3 +1,5 @@
+import { mapActions } from 'pinia'
+
 import ApplicationApi from '../api/application.js'
 import alerts from '../services/alerts.js'
 
@@ -26,8 +28,14 @@ export default {
         }
     },
     watch: {
+        application (application) {
+            if (application) {
+                this.setContextualApplication(application)
+            }
+        }
     },
     methods: {
+        ...mapActions(useContextStore, { setContextualApplication: 'setApplication' }),
         async updateApplication () {
             const applicationId = this.$route.params.id
 
@@ -96,5 +104,8 @@ export default {
     },
     async created () {
 
+    },
+    beforeUnmount () {
+        this.setContextualApplication(null)
     }
 }
diff --git a/frontend/src/mixins/Instance.js b/frontend/src/mixins/Instance.js
index 99e2db4bbf..7a2d00b903 100644
--- a/frontend/src/mixins/Instance.js
+++ b/frontend/src/mixins/Instance.js
@@ -1,4 +1,4 @@
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
 import InstanceApi from '../api/instances.js'
 import SnapshotApi from '../api/projectSnapshots.js'
@@ -34,9 +34,13 @@ export default {
         }
     },
     watch: {
-        instance: 'instanceChanged'
+        instance (instance) {
+            this.instanceChanged()
+            this.setContextualInstance(instance)
+        }
     },
     methods: {
+        ...mapActions(useContextStore, { setContextualInstance: 'setInstance' }),
         showConfirmDeleteDialog () {
             this.$refs.confirmInstanceDeleteDialog.show(this.instance)
         },
@@ -106,5 +110,8 @@ export default {
                 await this.loadInstance()
             }
         )
+    },
+    beforeUnmount () {
+        this.setContextualInstance(null)
     }
 }
diff --git a/frontend/src/pages/admin/Settings/General.vue b/frontend/src/pages/admin/Settings/General.vue
index f99877b019..928c75d1ec 100644
--- a/frontend/src/pages/admin/Settings/General.vue
+++ b/frontend/src/pages/admin/Settings/General.vue
@@ -157,7 +157,7 @@
                 <ff-button kind="danger" @click="disableStatsToken">Disable</ff-button>
             </template>
         </ff-dialog>
-        <template v-if="featuresCheck?.isExpertCommsBetaEnabled">
+        <template v-if="featuresCheck?.isPostHogFeatureFlagsEnabled">
             <FormRow v-model="expertAgentEnabled" type="checkbox">
                 Allow Expert agent to connect to the platform
                 <template #description>
@@ -466,7 +466,7 @@ export default {
 
         // The Expert Agent Credentials option in the admin UI is only ever supposed to be shown on
         // FFC platforms. If the feature flag is retired, we will need to gate this some other way.
-        if (this.featuresCheck?.isExpertCommsBetaEnabled) {
+        if (this.featuresCheck?.isPostHogFeatureFlagsEnabled) {
             this.expertAgentEnabled = this.input['platform:expert-agent:creds']
             if (!this.expertAgentEnabled) {
                 this.expertAgentCreds = ''
diff --git a/frontend/src/pages/application/index.vue b/frontend/src/pages/application/index.vue
index 3b5b649626..9d63f3eb0b 100644
--- a/frontend/src/pages/application/index.vue
+++ b/frontend/src/pages/application/index.vue
@@ -31,13 +31,9 @@
 </template>
 
 <script>
-// import { ChipIcon, ClockIcon, CogIcon, TerminalIcon, ViewListIcon } from '@heroicons/vue/solid'
-
 import { mapState } from 'pinia'
 
 import InstanceStatusPolling from '../../components/InstanceStatusPolling.vue'
-// import PipelinesIcon from '../../components/icons/Pipelines.js'
-// import ProjectsIcon from '../../components/icons/Projects.js'
 import usePermissions from '../../composables/Permissions.js'
 
 import applicationMixin from '../../mixins/Application.js'
diff --git a/frontend/src/pages/device/Editor/index.vue b/frontend/src/pages/device/Editor/index.vue
index 5dfeb06cd0..53bd5112b9 100644
--- a/frontend/src/pages/device/Editor/index.vue
+++ b/frontend/src/pages/device/Editor/index.vue
@@ -214,8 +214,8 @@ export default {
             deep: true,
             handler (device) {
                 if (device && this.isEditorAvailable) {
-                    this.setContextDevice(device)
                     this.bindDevice(device, true)
+                    this.setContextualDevice(device)
                     this.handlePolling()
                 } else {
                     this.$router.push({ name: 'device-overview' })
@@ -228,11 +228,17 @@ export default {
     mounted () {
         this.loadDevice()
     },
+    beforeUnmount () {
+        this.setIsImmersive(false)
+    },
     unmounted () {
         this.stopPolling()
     },
     methods: {
-        ...mapActions(useContextStore, { setContextDevice: 'setDevice' }),
+        ...mapActions(useContextStore, {
+            setIsImmersive: 'setIsImmersive',
+            setContextualDevice: 'setDevice'
+        }),
         ...mapActions(useUxDrawersStore, ['toggleEditorImmersiveDrawer']),
         loadDevice: async function () {
             let tries = 0
diff --git a/frontend/src/pages/device/index.vue b/frontend/src/pages/device/index.vue
index db9f4bbb9b..f068b59666 100644
--- a/frontend/src/pages/device/index.vue
+++ b/frontend/src/pages/device/index.vue
@@ -368,6 +368,10 @@ export default {
     async mounted () {
         this.mounted = true
         await this.loadDevice()
+        this.setContextualDevice(this.device)
+    },
+    beforeUnmount () {
+        this.setContextualDevice(null)
     },
     unmounted () {
         this.pollTimer?.stop()
@@ -375,6 +379,7 @@ export default {
     },
     methods: {
         ...mapActions(useUxStore, ['validateUserAction']),
+        ...mapActions(useContextStore, { setContextualDevice: 'setDevice' }),
         pollTimerElapsed: async function () {
             // Only refresh device via the timer if we are on the overview page, developer mode page
             // the device status is empty or the device is in a transition state
diff --git a/frontend/src/pages/instance/Editor/index.vue b/frontend/src/pages/instance/Editor/index.vue
index 08c5bc6f1f..b988d08135 100644
--- a/frontend/src/pages/instance/Editor/index.vue
+++ b/frontend/src/pages/instance/Editor/index.vue
@@ -168,11 +168,15 @@ export default {
             this.setInstance(instance)
         }
     },
+    mounted () {
+        this.setIsImmersive(true)
+    },
     unmounted () {
         this.clearInstance()
+        this.setIsImmersive(false)
     },
     methods: {
-        ...mapActions(useContextStore, ['setInstance', 'clearInstance']),
+        ...mapActions(useContextStore, ['setIsImmersive', 'setInstance', 'clearInstance']),
         ...mapActions(useUxDrawersStore, ['toggleEditorImmersiveDrawer']),
         notifyDrawerState () {
             this.$refs.editorDrawer?.notifyDrawerState()
diff --git a/frontend/src/services/mqtt.service.ts b/frontend/src/services/mqtt.service.ts
index e09df4b43c..27d56c4824 100644
--- a/frontend/src/services/mqtt.service.ts
+++ b/frontend/src/services/mqtt.service.ts
@@ -1,8 +1,12 @@
 import Mqtt, {
+    type ErrorWithReasonCode,
     type IClientPublishOptions,
+    type IConnackPacket,
+    type IDisconnectPacket,
     type IPublishPacket,
     type MqttClient,
-    type MqttClientEventCallbacks
+    type MqttClientEventCallbacks,
+    type Packet
 } from 'mqtt'
 
 import { BaseService } from './service.contract'
@@ -137,11 +141,13 @@ class MqttService extends BaseService implements MqttServiceI {
                     hasDynamicCredentials: true
                 }),
                 reconnectAttempt: 0,
+                reconnectGeneration: 0,
                 reconnectTimer: null,
                 subscriptions: new Map(),
                 connectionWaiters: new Set(),
                 terminalFailure: false,
                 lastError: null,
+                connectHandlerPromise: null,
                 handlers: {
                     onConnect,
                     onClose,
@@ -430,6 +436,7 @@ class MqttService extends BaseService implements MqttServiceI {
             throw new Error(`${managed.destroyed ? 'Client' : 'MqttService'} has been destroyed`)
         }
 
+        managed.reconnectGeneration += 1
         managed.status = isReconnect ? 'reconnecting' : 'connecting'
         managed.lastError = null
 
@@ -448,6 +455,7 @@ class MqttService extends BaseService implements MqttServiceI {
             } catch {
                 // ignore stale client close failures before replacement
             }
+            this._killStaleClient(previousClient)
         }
 
         const mqttModule = this.$mqtt
@@ -460,7 +468,8 @@ class MqttService extends BaseService implements MqttServiceI {
             password: credentials.password,
             clientId: credentials.clientId,
             reconnectPeriod: 0,
-            protocolVersion: 5
+            protocolVersion: 5,
+            keepalive: 45
         })
 
         managed.client = client
@@ -483,7 +492,7 @@ class MqttService extends BaseService implements MqttServiceI {
             managed.listeners.add(() => client.off(eventName, wrapped))
         }
 
-        register('connect', async () => {
+        register('connect', (connack: IConnackPacket) => {
             managed.status = 'connected'
             managed.reconnectAttempt = 0
             managed.terminalFailure = false
@@ -491,15 +500,21 @@ class MqttService extends BaseService implements MqttServiceI {
             this.clearReconnectTimer(managed)
             this.resolveConnectionWaiters(managed)
 
-            try {
-                await this.replaySubscriptions(managed, client)
-            } catch (error) {
-                if (error instanceof Error) {
-                    managed.handlers.onError?.(error, client)
+            const handleAsync = async () => {
+                try {
+                    await this.replaySubscriptions(managed, client)
+                } catch (error) {
+                    if (error instanceof Error) {
+                        managed.handlers.onError?.(error, client)
+                    }
                 }
+
+                managed.handlers.onConnect?.(connack, client)
             }
 
-            managed.handlers.onConnect?.(client)
+            managed.connectHandlerPromise = handleAsync().finally(() => {
+                managed.connectHandlerPromise = null
+            })
         })
 
         register('close', () => {
@@ -508,19 +523,43 @@ class MqttService extends BaseService implements MqttServiceI {
             this.scheduleReconnect(managed)
         })
 
+        register('disconnect', (packet: IDisconnectPacket) => {
+            managed.handlers.onDisconnect?.(packet, client)
+        })
+
         register('offline', () => {
             managed.status = 'disconnected'
             managed.handlers.onOffline?.(client)
             this.scheduleReconnect(managed)
         })
 
-        register('error', (error: Error) => {
+        register('end', () => {
+            managed.handlers.onEnd?.(client)
+        })
+
+        register('reconnect', () => {
+            managed.handlers.onReconnect?.(client)
+        })
+
+        register('error', (error: Error | ErrorWithReasonCode) => {
             managed.handlers.onError?.(error, client)
         })
 
         register('message', (topic: string, message: Buffer, packet: IPublishPacket) => {
             managed.handlers.onMessage?.(topic, message, packet, client)
         })
+
+        register('packetsend', (packet: Packet) => {
+            managed.handlers.onPacketSend?.(packet, client)
+        })
+
+        register('packetreceive', (packet: Packet) => {
+            managed.handlers.onPacketReceive?.(packet, client)
+        })
+
+        register('outgoingEmpty', () => {
+            managed.handlers.onOutgoingEmpty?.(client)
+        })
     }
 
     scheduleReconnect (managed: ManagedMqttClient) {
@@ -530,7 +569,9 @@ class MqttService extends BaseService implements MqttServiceI {
             managed.intentionalDisconnect ||
             managed.terminalFailure ||
             !managed.reconnectPolicy.enabled ||
-            managed.reconnectTimer
+            managed.reconnectTimer ||
+            managed.status === 'connected' ||
+            managed.status === 'connecting'
         ) {
             return
         }
@@ -541,10 +582,13 @@ class MqttService extends BaseService implements MqttServiceI {
             managed.reconnectPolicy.initialDelay * Math.pow(managed.reconnectPolicy.factor, attempt)
         )
 
+        const generation = managed.reconnectGeneration
+
         managed.reconnectAttempt += 1
         managed.status = 'reconnecting'
         managed.reconnectTimer = setTimeout(() => {
             managed.reconnectTimer = null
+            if (managed.reconnectGeneration !== generation) return
             this.reconnectClient(managed.key)
         }, delay)
     }
@@ -556,6 +600,14 @@ class MqttService extends BaseService implements MqttServiceI {
                 return
             }
 
+            if (managed.connectHandlerPromise) {
+                await managed.connectHandlerPromise.catch(() => {})
+            }
+
+            if (managed.client?.connected) {
+                return
+            }
+
             try {
                 await this.connectManagedClient(managed, true)
             } catch (error) {
@@ -611,7 +663,7 @@ class MqttService extends BaseService implements MqttServiceI {
         }))
     }
 
-    _buildCredentialsProvider (key: string, getCredentials: MqttCredentialProvider): MqttCredentialProvider {
+    private _buildCredentialsProvider (key: string, getCredentials: MqttCredentialProvider): MqttCredentialProvider {
         return async () => {
             let credentials: MqttCredentials
             try {
@@ -651,23 +703,23 @@ class MqttService extends BaseService implements MqttServiceI {
         }
     }
 
-    _createTerminalConnectionError (message: string): TerminalConnectionError {
+    private _createTerminalConnectionError (message: string): TerminalConnectionError {
         const error: TerminalConnectionError = new Error(message)
         error.code = 'MQTT_TERMINAL_CONNECTION_ERROR'
         return error
     }
 
-    _asTerminalConnectionError (error: unknown, fallbackMessage: string): TerminalConnectionError {
+    private _asTerminalConnectionError (error: unknown, fallbackMessage: string): TerminalConnectionError {
         const normalized: TerminalConnectionError = error instanceof Error ? error : new Error(fallbackMessage)
         normalized.code = 'MQTT_TERMINAL_CONNECTION_ERROR'
         return normalized
     }
 
-    _isTerminalConnectionError (error: unknown): error is TerminalConnectionError {
+    private _isTerminalConnectionError (error: unknown): error is TerminalConnectionError {
         return error instanceof Error && (error as TerminalConnectionError).code === 'MQTT_TERMINAL_CONNECTION_ERROR'
     }
 
-    async _destroyClientUnlocked (key: string): Promise<void> {
+    private async _destroyClientUnlocked (key: string): Promise<void> {
         const managed = this.$clients.get(key)
         if (!managed) return
 
@@ -688,17 +740,32 @@ class MqttService extends BaseService implements MqttServiceI {
         managed.listeners.clear()
 
         if (managed.client) {
+            const client = managed.client
+            managed.client = null
             try {
-                await this.endMqttClient(managed.client, true)
+                await this.endMqttClient(client, true)
             } catch {
                 // ignore close failures during cleanup
             }
+            this._killStaleClient(client)
         }
 
         this.$clients.delete(key)
     }
 
-    _isIgnorableClientCloseError (error: unknown): boolean {
+    private _killStaleClient (client: MqttClient) {
+        try {
+            client.removeAllListeners()
+            const stream = (client as unknown as { stream?: { destroyed?: boolean, destroy?: () => void } }).stream
+            if (stream && !stream.destroyed && typeof stream.destroy === 'function') {
+                stream.destroy()
+            }
+        } catch {
+            // best-effort cleanup of zombie client
+        }
+    }
+
+    private _isIgnorableClientCloseError (error: unknown): boolean {
         return (
             error instanceof Error &&
             typeof error.message === 'string' &&
@@ -706,13 +773,13 @@ class MqttService extends BaseService implements MqttServiceI {
         )
     }
 
-    _isPlainObject (value: unknown): value is Record<string, unknown> {
+    private _isPlainObject (value: unknown): value is Record<string, unknown> {
         if (value === null || typeof value !== 'object') return false
         const prototype = Object.getPrototypeOf(value)
         return prototype === Object.prototype || prototype === null
     }
 
-    _isValidUrl (url: unknown): url is string {
+    private _isValidUrl (url: unknown): url is string {
         if (typeof url !== 'string' || !url.trim()) return false
 
         try {
@@ -723,7 +790,7 @@ class MqttService extends BaseService implements MqttServiceI {
         }
     }
 
-    _isBinaryPayload (payload: unknown): payload is BinaryPayload {
+    private _isBinaryPayload (payload: unknown): payload is BinaryPayload {
         return (
             (typeof Buffer !== 'undefined' && Buffer.isBuffer(payload)) ||
             payload instanceof Uint8Array ||
@@ -731,7 +798,7 @@ class MqttService extends BaseService implements MqttServiceI {
         )
     }
 
-    _normalizeReconnectPolicy ({
+    private _normalizeReconnectPolicy ({
         reconnect,
         reconnectPeriod = 0,
         hasDynamicCredentials = false
@@ -754,15 +821,18 @@ class MqttService extends BaseService implements MqttServiceI {
 
         const enabled = reconnect?.enabled ?? hasDynamicCredentials ?? initialDelay > 0
 
+        const effectiveInitialDelay = enabled && initialDelay === 0 ? 1000 : initialDelay
+        const effectiveMaxDelay = Math.max(effectiveInitialDelay, maxDelay)
+
         return {
             enabled,
-            initialDelay,
-            maxDelay,
+            initialDelay: effectiveInitialDelay,
+            maxDelay: effectiveMaxDelay,
             factor
         }
     }
 
-    _normalizePublishPayload (payload: unknown, serialize: SerializeMode = 'auto'): PublishPayload {
+    private _normalizePublishPayload (payload: unknown, serialize: SerializeMode = 'auto'): PublishPayload {
         if (!['auto', 'raw', 'json', 'string'].includes(serialize)) {
             throw new TypeError(`Invalid MQTT payload serialization mode: "${serialize}"`)
         }
@@ -797,7 +867,7 @@ class MqttService extends BaseService implements MqttServiceI {
         throw new TypeError('Unsupported MQTT payload type for auto serialization')
     }
 
-    _normalizePublishProperties ({
+    private _normalizePublishProperties ({
         correlationData,
         userProperties
     }: {
@@ -817,7 +887,7 @@ class MqttService extends BaseService implements MqttServiceI {
         }
     }
 
-    _normalizeCorrelationData (correlationData: Maybe<string>): string | undefined {
+    private _normalizeCorrelationData (correlationData: Maybe<string>): string | undefined {
         if (correlationData === null || correlationData === undefined) {
             return undefined
         }
@@ -829,7 +899,7 @@ class MqttService extends BaseService implements MqttServiceI {
         throw new TypeError('MQTT publish correlationData must be a string')
     }
 
-    _normalizeUserProperties (userProperties: Maybe<Record<string, string | string[]>>): Record<string, string | string[]> | undefined {
+    private _normalizeUserProperties (userProperties: Maybe<Record<string, string | string[]>>): Record<string, string | string[]> | undefined {
         if (userProperties === null || userProperties === undefined) {
             return undefined
         }
@@ -860,7 +930,7 @@ class MqttService extends BaseService implements MqttServiceI {
         return Object.keys(normalized).length ? normalized : undefined
     }
 
-    _normalizeBinaryPayload (payload: BinaryPayload): NormalizedBinaryPayload {
+    private _normalizeBinaryPayload (payload: BinaryPayload): NormalizedBinaryPayload {
         if (typeof Buffer !== 'undefined' && Buffer.isBuffer(payload)) {
             return payload
         }
@@ -878,7 +948,7 @@ class MqttService extends BaseService implements MqttServiceI {
         return new Uint8Array(payload.buffer, payload.byteOffset, payload.byteLength) as unknown as NormalizedBinaryPayload
     }
 
-    _stringifyPayload (payload: unknown, mode: 'auto' | 'json'): string {
+    private _stringifyPayload (payload: unknown, mode: 'auto' | 'json'): string {
         try {
             return JSON.stringify(payload)
         } catch (error) {
@@ -908,4 +978,84 @@ export async function destroyMqttService (): Promise<void> {
     MqttServiceInstance = null
 }
 
+export const FATAL_ERROR_CODES = new Set([
+    0x84, // Unsupported Protocol Version
+    0x86, // Bad User Name or Password
+    0x8A, // Banned
+    0x8C, // Bad authentication method
+    0x9A, // Retain not supported
+    0x9B, // QoS not supported
+    0x9E, // Shared Subscriptions not supported
+    0xA1, // Subscription Identifiers not supported
+    0xA2 // Wildcard Subscriptions not supported
+])
+
+export const TRANSIENT_ERROR_CODES = new Set([
+    0x88, // Server unavailable
+    0x89, // Server busy
+    0x8B, // Server shutting down
+    0x98, // Administrative action
+    0xA0 // Maximum connect time
+])
+
+export const THROTTLED_ERROR_CODES = new Set([
+    0x97, // Quota exceeded
+    0x9F // Connection rate exceeded
+])
+
+export const PROTOCOL_BUG_ERROR_CODES = new Set([
+    0x81, 0x82, // Malformed Packet, Protocol Error
+    0x8F, 0x90, // Topic Filter / Topic Name invalid
+    0x91, 0x92, // Packet Identifier issues
+    0x93, 0x94, // Receive Maximum / Topic Alias
+    0x95, 0x96, 0x99 // Packet too large, Rate too high, Payload format
+])
+
+export const ERRORS_WITHOUT_CODES = {
+    connack: {
+        slug: 'connack timeout',
+        reason: 'Broker didn\'t respond to CONNECT within connectTimeout'
+    },
+    keepalive: {
+        slug: 'keepalive timeout',
+        reason: 'Broker stopped responding to keepalive pings'
+    },
+    disconnecting: {
+        slug: 'client disconnecting',
+        reason: 'Tried to send a packet while the client is disconnecting'
+    },
+    connection: {
+        slug: 'connection closed',
+        reason: 'Outgoing packet couldn\'t be delivered because connection dropped'
+    },
+    websocket: {
+        slug: 'websocket error',
+        reason: 'WebSocket transport error'
+    },
+    cantConnect: {
+        slug: 'couldn\'t connect to server',
+        reason: 'TCP/WS connection failed entirely'
+    },
+    unrecognizedPacket: {
+        slug: 'unrecognized packet type',
+        reason: 'Broker sent an unknown packet (protocol bug)'
+    },
+    exceedingPacket: {
+        slug: 'exceeding packets size',
+        reason: 'Incoming packet exceeded max size'
+    },
+    unregisteredTopic: {
+        slug: 'received unregistered topic alias',
+        reason: 'Broker sent a topic alias the client doesn\'t know'
+    },
+    topicAliasRange: {
+        slug: 'received topic alias is out of range',
+        reason: 'Topic alias outside negotiated range'
+    },
+    topicAliasMaximum: {
+        slug: 'topicAliasMaximum from broker is out of range',
+        reason: 'CONNACK contained invalid topic alias max'
+    }
+}
+
 export default createMqttService
diff --git a/frontend/src/stores/account-settings.js b/frontend/src/stores/account-settings.js
index a1edd47a72..a2c1f5ed13 100644
--- a/frontend/src/stores/account-settings.js
+++ b/frontend/src/stores/account-settings.js
@@ -5,6 +5,7 @@ import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useContextStore } from '@/stores/context.js'
 
 export const POSTHOG_FLAGS = {
+    FF_FEATURE_FLAGS: 'FF_FEATURE_FLAGS',
     EXPERT_COMMS_BETA_ENABLED: 'EXPERT_COMMS_BETA_ENABLED'
 }
 
@@ -109,6 +110,7 @@ export const useAccountSettingsStore = defineStore('account-settings', {
 
             // adding in PostHog Feature Flags
             checks.isExpertCommsBetaEnabled = !!state.posthogFlags[POSTHOG_FLAGS.EXPERT_COMMS_BETA_ENABLED]
+            checks.isPostHogFeatureFlagsEnabled = !!state.posthogFlags[POSTHOG_FLAGS.FF_FEATURE_FLAGS]
 
             return checks
         }
diff --git a/frontend/src/stores/context.js b/frontend/src/stores/context.js
index 9ecca68a9f..fcf4d7923e 100644
--- a/frontend/src/stores/context.js
+++ b/frontend/src/stores/context.js
@@ -10,10 +10,12 @@ import { useProductExpertStore } from './product-expert.js'
 export const useContextStore = defineStore('context', {
     state: () => ({
         route: null,
+        application: null,
         instance: null,
         device: null,
         team: null,
-        teamMembership: null
+        teamMembership: null,
+        isImmersive: false
     }),
     getters: {
         isFreeTeamType (state) {
@@ -112,6 +114,8 @@ export const useContextStore = defineStore('context', {
         updateRoute (route) { this.route = route },
         setInstance (instance) { this.instance = instance },
         setDevice (device) { this.device = device },
+        setApplication (application) { this.application = application },
+        setIsImmersive (isImmersive) { this.isImmersive = isImmersive },
         clearInstance () { this.instance = null },
         setTeam (team) {
             this.team = team
diff --git a/frontend/src/stores/product-assistant.js b/frontend/src/stores/product-assistant.js
index c173021322..aeb817527d 100644
--- a/frontend/src/stores/product-assistant.js
+++ b/frontend/src/stores/product-assistant.js
@@ -157,11 +157,20 @@ export const useProductAssistantStore = defineStore('product-assistant', {
         // debugLog getter which gates the feature flag. Use this.debugLogEntries
         // internally; external consumers should read this.debugLog (the getter).
         debugLogEntries: [],
-        editorState: { ...buildInitialEditorState() }
+        editorState: { ...buildInitialEditorState() },
+        pendingRequests: new Map() // key is transactionId, value is { resolve, reject, timeout, timestamp, type, action, params }
     }),
     getters: {
-        immersiveInstance: () => useContextStore().instance,
-        immersiveDevice: () => useContextStore().device,
+        isImmersiveInstance: () => {
+            const contextStore = useContextStore()
+
+            return contextStore.instance && contextStore.isImmersive
+        },
+        isImmersiveDevice: () => {
+            const contextStore = useContextStore()
+
+            return contextStore.device && contextStore.isImmersive
+        },
         hasUserSelection: (state) => state.selectedNodes.length > 0,
         hasContextSelection: (state) => state.selectedContext.length > 0,
         hasDebugLogsSelected () {
@@ -260,6 +269,19 @@ export const useProductAssistantStore = defineStore('product-assistant', {
                 return
             }
 
+            const payloadData = payload.data || {}
+            if (payloadData.correlationId && payloadData.type === 'invoke-action') {
+                const { correlationId } = payloadData
+                const inflight = this.pendingRequests.get(correlationId)
+                if (inflight) {
+                    // console.debug('Received response for in-flight request:', { correlationId, originalRequest: inflight.postMessagePayload, response: payloadData })
+                    inflight.resolve(payloadData)
+                    this.pendingRequests.delete(correlationId)
+                } else {
+                    console.warn('Received response with correlationId that does not match any in-flight requests. Ignoring.', { correlationId, response: payloadData })
+                }
+            }
+
             switch (true) {
             case payload.data.type === 'assistant-ready':
                 this.version = payload.data.version
@@ -447,6 +469,53 @@ export const useProductAssistantStore = defineStore('product-assistant', {
                 params
             })
         },
+        async invokeActionAwaitResponse ({ action, params, sessionId, transactionId, chatTransactionId }, timeout = 5000) {
+            // create a promise that will resolve when we receive a response with the matching sessionId and transactionId, or reject after a timeout
+            const pending = {
+                resolve: null,
+                reject: null,
+                resolved: false,
+                rejected: false,
+                timeout: null,
+                timestamp: Date.now(),
+                type: 'invoke-action',
+                action,
+                params,
+                sessionId,
+                transactionId,
+                chatTransactionId
+            }
+            const promise = new Promise((resolve, reject) => {
+                pending.resolve = (payload) => {
+                    clearTimeout(pending.timeout)
+                    this.pendingRequests.delete(pending.transactionId)
+                    if (pending.resolved) return
+                    if (pending.rejected) return
+                    pending.resolved = true
+                    resolve(payload)
+                }
+                pending.reject = (error) => {
+                    clearTimeout(pending.timeout)
+                    this.pendingRequests.delete(pending.transactionId)
+                    if (pending.resolved) return
+                    if (pending.rejected) return
+                    pending.rejected = true
+                    reject(error)
+                }
+                pending.timeout = setTimeout(() => {
+                    pending.reject(new Error('Node-RED command timed out'))
+                }, timeout)
+            })
+            const correlationId = `${sessionId}:${chatTransactionId}:${transactionId}`
+            this.pendingRequests.set(correlationId, pending)
+            this.sendMessage({
+                type: 'invoke-action',
+                action,
+                params,
+                correlationId // post Message Correlation Id
+            })
+            return promise
+        },
         async sendFlowsToImport (flowsJson) {
             return this.sendMessage({
                 type: 'invoke-action',
@@ -478,6 +547,7 @@ export const useProductAssistantStore = defineStore('product-assistant', {
         },
         sendMessage (payload) {
             const orchestrator = getServicesOrchestrator()
+            const contextStore = useContextStore()
 
             orchestrator.$serviceInstances.postMessage.sendMessage({
                 message: {
@@ -485,7 +555,7 @@ export const useProductAssistantStore = defineStore('product-assistant', {
                     ...this.scope
                 },
                 target: window.frames['immersive-editor-iframe'],
-                targetOrigin: this.immersiveInstance?.url
+                targetOrigin: (contextStore.instance || contextStore.device)?.url
             })
         }
     }
diff --git a/frontend/src/stores/product-expert-insights-agent.js b/frontend/src/stores/product-expert-insights-agent.js
index 4df5237a46..79b9ec7f6c 100644
--- a/frontend/src/stores/product-expert-insights-agent.js
+++ b/frontend/src/stores/product-expert-insights-agent.js
@@ -6,6 +6,8 @@ import useTimerHelper from '../composables/TimerHelper.js'
 
 import { useContextStore } from './context.js'
 
+import { INSIGHTS_AGENT } from './product-expert-agents.js'
+
 export const useProductExpertInsightsAgentStore = defineStore('product-expert-insights-agent', {
     state: () => ({
         sessionId: null,
@@ -16,7 +18,9 @@ export const useProductExpertInsightsAgentStore = defineStore('product-expert-in
         sessionExpiredShown: false,
         sessionCheckTimer: null,
         capabilityServers: [],
-        selectedCapabilities: []
+        selectedCapabilities: [],
+        mqttConnectionKey: `expert/${INSIGHTS_AGENT}`,
+        inFlightRequests: new Map()
     }),
     getters: {
         capabilities: (state) => state.capabilityServers.map(c => ({
diff --git a/frontend/src/stores/product-expert-support-agent.js b/frontend/src/stores/product-expert-support-agent.js
index 6ee3f848a6..e41aa6acd5 100644
--- a/frontend/src/stores/product-expert-support-agent.js
+++ b/frontend/src/stores/product-expert-support-agent.js
@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia'
 import { markRaw } from 'vue'
 
+import { SUPPORT_AGENT } from './product-expert-agents.js'
+
 export const useProductExpertSupportAgentStore = defineStore('product-expert-support-agent', {
     state: () => ({
         context: null,
@@ -12,7 +14,9 @@ export const useProductExpertSupportAgentStore = defineStore('product-expert-sup
         sessionStartTime: null,
         sessionWarningShown: false,
         sessionExpiredShown: false,
-        sessionCheckTimer: null
+        sessionCheckTimer: null,
+        mqttConnectionKey: `expert/${SUPPORT_AGENT}`,
+        inFlightRequests: new Map()
     }),
     actions: {
         reset () {
diff --git a/frontend/src/stores/product-expert.js b/frontend/src/stores/product-expert.js
index c325b3c14b..53ed151b13 100644
--- a/frontend/src/stores/product-expert.js
+++ b/frontend/src/stores/product-expert.js
@@ -3,6 +3,7 @@ import { v4 as uuidv4 } from 'uuid'
 import { markRaw } from 'vue'
 
 import expertApi from '../api/expert.js'
+import userApi from '../api/user.js'
 import useTimerHelper from '../composables/TimerHelper.js'
 
 import { useAccountSettingsStore } from './account-settings.js'
@@ -13,11 +14,23 @@ import { useProductExpertInsightsAgentStore } from './product-expert-insights-ag
 import { useProductExpertSupportAgentStore } from './product-expert-support-agent.js'
 import { useUxDrawersStore } from './ux-drawers.js'
 
+import { useMqttExpertTopicHelper } from '@/composables/services/MqttExpertTopicHelper'
+import {
+    ERRORS_WITHOUT_CODES,
+    FATAL_ERROR_CODES,
+    PROTOCOL_BUG_ERROR_CODES,
+    THROTTLED_ERROR_CODES,
+    TRANSIENT_ERROR_CODES
+} from '@/services/mqtt.service'
+
+import getServicesOrchestrator from '@/services/service.orchestrator'
+
 export const useProductExpertStore = defineStore('product-expert', {
     state: () => ({
         agentMode: SUPPORT_AGENT, // support-agent or insights-agent
         loadingVariant: SUPPORT_AGENT,
-        shouldWakeUpAssistant: false
+        shouldWakeUpAssistant: false,
+        inFlightUpdates: []
     }),
     getters: {
         _agentStore () {
@@ -25,11 +38,20 @@ export const useProductExpertStore = defineStore('product-expert', {
                 ? useProductExpertSupportAgentStore()
                 : useProductExpertInsightsAgentStore()
         },
+        /**
+         * @return {import('vue').UnwrapRef<Map<unknown, unknown> | Map<any, any>> | import('vue').UnwrapRef<Map<unknown, unknown> | Map<any, any>>}
+         * @private
+         */
+        _inFlightRequests () {
+            return this.agentMode === SUPPORT_AGENT
+                ? useProductExpertSupportAgentStore().inFlightRequests
+                : useProductExpertInsightsAgentStore().inFlightRequests
+        },
         abortController () { return this._agentStore.abortController },
         messages () { return this._agentStore.messages },
         hasMessages () { return this._agentStore.messages.length > 0 },
         isSessionExpired () { return this._agentStore.sessionExpiredShown },
-        isWaitingForResponse () { return !!this._agentStore.abortController },
+        isWaitingForResponse () { return !!this._agentStore.abortController || this._inFlightRequests.size > 0 },
         isSupportAgent: (state) => state.agentMode === SUPPORT_AGENT,
         isInsightsAgent: (state) => state.agentMode === INSIGHTS_AGENT,
         hasSelectedCapabilities () {
@@ -37,11 +59,17 @@ export const useProductExpertStore = defineStore('product-expert', {
         },
         canImportFlows () {
             const assistantStore = useProductAssistantStore()
-            return !!assistantStore.immersiveInstance && !!assistantStore.supportedActions['custom:import-flow']
+            return !!assistantStore.isImmersiveInstance && !!assistantStore.supportedActions['custom:import-flow']
         },
         canManagePalette () {
             const assistantStore = useProductAssistantStore()
-            return !!assistantStore.immersiveInstance && !!assistantStore.supportedActions['core:manage-palette']
+            return !!assistantStore.isImmersiveInstance && !!assistantStore.supportedActions['core:manage-palette']
+        },
+        mqttConnectionKey () { return this._agentStore.mqttConnectionKey },
+        sessionId () { return this._agentStore.sessionId },
+        shouldUseMqtt () {
+            const accountSettingsStore = useAccountSettingsStore()
+            return accountSettingsStore.featuresCheck?.isExpertCommsBetaEnabled && this.isSupportAgent
         }
     },
     actions: {
@@ -91,7 +119,6 @@ export const useProductExpertStore = defineStore('product-expert', {
                     })
                 })
         },
-
         openAssistantDrawer (options = {}) {
             const featuresCheck = useAccountSettingsStore().featuresCheck
             if (featuresCheck.isExpertAssistantFeatureEnabled === false) return
@@ -120,7 +147,6 @@ export const useProductExpertStore = defineStore('product-expert', {
                     closeOnClickOutside: options?.openPinned !== true
                 }))
         },
-
         wakeUpAssistant ({ shouldHydrateMessages = false } = {}) {
             if (this.shouldWakeUpAssistant) {
                 const featuresCheck = useAccountSettingsStore().featuresCheck
@@ -139,7 +165,6 @@ export const useProductExpertStore = defineStore('product-expert', {
                     .then(() => { this.loadingVariant = this.agentMode })
             }
         },
-
         async handleQuery ({ query }) {
             const agentStore = this._agentStore
 
@@ -166,25 +191,185 @@ export const useProductExpertStore = defineStore('product-expert', {
                     this.addPredefinedAiMessage('Generation stopped.')
                 } else {
                     // API error
-                    console.error('Expert API error:', error)
-                    this.addPredefinedAiMessage('Sorry, I encountered an error. Please try again.')
+                    if (!this.shouldUseMqtt) {
+                        console.error('Expert API error:', error)
+                        this.addPredefinedAiMessage('Sorry, I encountered an error. Please try again.',
+                            { isError: true })
+                    }
                 }
             } finally {
                 agentStore.abortController = null
             }
         },
+        sendQuery ({ query }) {
+            if (this.shouldUseMqtt) {
+                return this.sendMqttQuery({ query })
+            } else {
+                return this.sendHttpQuery({ query })
+            }
+        },
+        async sendHttpQuery ({ query }) {
+            const agentStore = this._agentStore
+            const payload = {
+                query,
+                context: {
+                    ...useContextStore().expert,
+                    agent: this.agentMode
+                },
+                sessionId: agentStore.sessionId,
+                abortController: agentStore.abortController
+            }
+
+            if (this.isInsightsAgent) {
+                payload.context.selectedCapabilities = useProductExpertInsightsAgentStore().selectedCapabilities
+            }
+
+            return expertApi.chat(payload)
+        },
+        async sendMqttQuery ({ query } = {}) {
+            const servicesOrchestrator = getServicesOrchestrator()
+            const mqttService = servicesOrchestrator.$serviceInstances.mqtt
+            const mqttTopicHelper = useMqttExpertTopicHelper()
+
+            const transactionId = uuidv4()
+            const mqttConnectionKey = this.mqttConnectionKey
+
+            if (!mqttService.hasClient(mqttConnectionKey)) await this.establishMqttComms()
+
+            // add the query as an inFlight request
+            this._inFlightRequests.set(transactionId, { query, transactionId })
+
+            const { entityId, entityType } = mqttTopicHelper.getEntityTopicPaths()
+
+            const topic = mqttTopicHelper.buildTopic({
+                entityType,
+                entityId,
+                agentChannel: 'support',
+                topicType: 'chat',
+                topicAction: 'request'
+            })
+
+            try {
+                await mqttService.publishMessage(mqttConnectionKey, {
+                    topic,
+                    qos: 2,
+                    payload: {
+                        query,
+                        context: {
+                            ...useContextStore().expert,
+                            agent: this.agentMode
+                        }
+                    },
+                    correlationData: transactionId,
+                    userProperties: {
+                        sessionId: this.sessionId
+                    }
+                })
+
+                return Promise.resolve()
+            } catch (e) {
+                this._onMqttError(e)
+                return Promise.reject(e)
+            }
+        },
+        async establishMqttComms () {
+            const servicesOrchestrator = getServicesOrchestrator()
+            const mqttService = servicesOrchestrator.$serviceInstances.mqtt
+
+            await mqttService.createClient(this.mqttConnectionKey, {
+                getCredentials: () => userApi.initiateExpertChat({ sessionId: this.sessionId }),
+                onMessage: this._onMqttMessage,
+                onClose: this._onMqttClose,
+                onConnect: this._onMqttConnect,
+                onOffline: this._onMqttOffline,
+                onError: this._onMqttError,
+                onDisconnect: this._onMqttDisconnect
+            })
+        },
+        async handleInFlightRequest ({ topic, message, transactionId, sessionId, chatTransactionId } = {}) {
+            const inFlightRequest = this._inFlightRequests.values().next().value
+
+            // dismiss inFlight requests that don't match the existing sessionId or the inFlight message transactionId
+            if (sessionId !== this.sessionId || inFlightRequest?.transactionId !== chatTransactionId) return
+
+            const servicesOrchestrator = getServicesOrchestrator()
+            const assistantStore = useProductAssistantStore()
+            const topicHelper = useMqttExpertTopicHelper()
+
+            const mqttService = servicesOrchestrator.$serviceInstances.mqtt
+            const parsedTopic = topicHelper.parseTopic(topic)
+            const payload = JSON.parse(message.toString())
+
+            this._addInFlightUpdate(payload.status || payload.toolname || 'Processing request...')
 
+            const responseTopic = topicHelper.buildTopic({
+                entityType: parsedTopic.entityType,
+                entityId: parsedTopic.entityId,
+                agentChannel: 'support',
+                topicType: 'inflight',
+                topicAction: 'response',
+                inflightType: parsedTopic.inflightType,
+                sessionId: sessionId || this.sessionId
+            })
+
+            switch (true) {
+            case parsedTopic.inflightType === 'expert:status-message':
+                await mqttService.publishMessage(this.mqttConnectionKey, {
+                    qos: 2,
+                    topic: responseTopic,
+                    payload: JSON.stringify({
+                        ack: true
+                    }),
+                    correlationData: transactionId,
+                    userProperties: { sessionId, transactionId: chatTransactionId }
+                })
+                break
+            case parsedTopic.inflightType.startsWith('automation:'):
+                try {
+                    const result = await assistantStore.invokeActionAwaitResponse({
+                        action: `automation/${parsedTopic.inflightType.replace('automation:', '')}`,
+                        params: payload.params || {},
+                        sessionId,
+                        chatTransactionId,
+                        transactionId
+                    })
+
+                    await mqttService.publishMessage(this.mqttConnectionKey, {
+                        qos: 2,
+                        topic: responseTopic,
+                        payload: JSON.stringify(result),
+                        correlationData: transactionId,
+                        userProperties: { sessionId, transactionId: chatTransactionId }
+                    })
+                } catch (e) {
+                    this._onMqttError(e)
+                }
+                break
+            default:
+                // do nothing
+            }
+        },
         async handleMessageResponse (response) {
+            // ignore aborted messages through mqtt
+            if (Object.prototype.hasOwnProperty.call(response, 'aborted') && response.aborted === true) return
+
             if (response.answer && Array.isArray(response.answer)) {
                 this.addAiMessage(response)
+                this._clearInFlightUpdates()
             }
         },
-
         async startOver () {
             const agentStore = this._agentStore
             agentStore.sessionId = uuidv4()
             agentStore.messages = []
 
+            if (this.shouldUseMqtt) {
+                const servicesOrchestrator = getServicesOrchestrator()
+                const mqttService = servicesOrchestrator.$serviceInstances.mqtt
+
+                await mqttService.destroyClient(this.mqttConnectionKey)
+            }
+
             // Reset session timing
             this.resetSessionTimer()
             this.startSessionTimer()
@@ -197,35 +382,13 @@ export const useProductExpertStore = defineStore('product-expert', {
             // Add welcome message for current mode
             this.addWelcomeMessageIfNeeded()
         },
-
         setAbortController (controller) {
             this._agentStore.abortController = controller ? markRaw(controller) : null
         },
-
         reset () {
             this._agentStore.reset()
             this.$reset()
         },
-
-        sendQuery ({ query }) {
-            const agentStore = this._agentStore
-            const payload = {
-                query,
-                context: {
-                    ...useContextStore().expert,
-                    agent: this.agentMode
-                },
-                sessionId: agentStore.sessionId,
-                abortController: agentStore.abortController
-            }
-
-            if (this.isInsightsAgent) {
-                payload.context.selectedCapabilities = useProductExpertInsightsAgentStore().selectedCapabilities
-            }
-
-            return expertApi.chat(payload)
-        },
-
         addWelcomeMessageIfNeeded () {
             const currentMode = this.agentMode
             const hasMessages = this._agentStore.messages.length > 0
@@ -256,7 +419,6 @@ export const useProductExpertStore = defineStore('product-expert', {
                 this.addPredefinedAiMessage(message)
             }
         },
-
         // Session timing actions
         startSessionTimer () {
             const agentStore = this._agentStore
@@ -298,7 +460,6 @@ export const useProductExpertStore = defineStore('product-expert', {
 
             agentStore.setSessionCheckTimer(timer)
         },
-
         resetSessionTimer () {
             const agentStore = this._agentStore
             if (agentStore.sessionCheckTimer) {
@@ -309,7 +470,6 @@ export const useProductExpertStore = defineStore('product-expert', {
             agentStore.sessionWarningShown = false
             agentStore.sessionExpiredShown = false
         },
-
         /**
          *
          * @param {'support-agent' | 'insights-agent'} mode
@@ -319,7 +479,6 @@ export const useProductExpertStore = defineStore('product-expert', {
             this.agentMode = mode
             this.loadingVariant = mode
         },
-
         /**
          * Adds a system message to the application's message store.
          *
@@ -337,17 +496,25 @@ export const useProductExpertStore = defineStore('product-expert', {
                 _uuid: uuidv4()
             })
         },
+        addPredefinedAiMessage (message, { isError = false, code = null } = {}) {
+            const lastThree = this._agentStore.messages.slice(-3)
+            const recentErrorCodes = lastThree.map(msg => msg.errorCode).filter(Boolean)
 
-        addPredefinedAiMessage (message) {
-            this._agentStore.messages.push({
-                _type: 'ai',
-                answer: [{ content: message, _streamed: false, _uuid: uuidv4() }],
-                _timestamp: Date.now(),
-                _streamed: false,
-                _uuid: uuidv4()
-            })
+            // When using MQTT, ignore duplicate error messages (e.g., during connection loss or reconnection attempts)
+            // to prevent repetition in the message history
+            if (!this.shouldUseMqtt || !recentErrorCodes.includes(code)) {
+                this._agentStore.messages.push({
+                    _type: 'ai',
+                    generated: true,
+                    error: isError,
+                    errorCode: code,
+                    answer: [{ content: message, _streamed: false, _uuid: uuidv4() }],
+                    _timestamp: Date.now(),
+                    _streamed: false,
+                    _uuid: uuidv4()
+                })
+            }
         },
-
         addAiMessage (message) {
             const answer = message.answer
                 ? message.answer.map(a => ({ ...a, _uuid: uuidv4(), _streamed: false }))
@@ -361,7 +528,6 @@ export const useProductExpertStore = defineStore('product-expert', {
                 _uuid: uuidv4()
             })
         },
-
         addUserMessage (message) {
             this._agentStore.messages.push({
                 _type: 'human',
@@ -370,7 +536,6 @@ export const useProductExpertStore = defineStore('product-expert', {
                 _uuid: uuidv4()
             })
         },
-
         updateMessageStreamedState (uuid) {
             let message = useProductExpertSupportAgentStore().messages.find(m => m._uuid === uuid)
             if (!message) {
@@ -380,7 +545,6 @@ export const useProductExpertStore = defineStore('product-expert', {
                 message._streamed = true
             }
         },
-
         updateAnswerStreamedState ({ messageUuid, answerUuid }) {
             let message = useProductExpertSupportAgentStore().messages.find(m => m._uuid === messageUuid)
             if (!message) {
@@ -393,60 +557,476 @@ export const useProductExpertStore = defineStore('product-expert', {
                 }
             }
         },
-
         hydrateMessages (messages) {
             if (!messages) return
+            const isAiMessage = (message) => message.answer && Array.isArray(message.answer)
+            const isUserMessage = (message) => Object.prototype.hasOwnProperty.call(message, 'query') && message.query
+
             messages.forEach((message) => {
-                // todo break this into manageable chunks, do we actually still need it?
-                if (message.answer && Array.isArray(message.answer)) {
-                    // Extract MCP items (tools, resources, resource templates, prompts) from the answer array
-                    const mcpItems = message.answer.filter(item =>
-                        item.kind === 'mcp_tool' ||
-                        item.kind === 'mcp_resource' ||
-                        item.kind === 'mcp_resource_template' ||
-                        item.kind === 'mcp_prompt'
+                switch (true) {
+                case isAiMessage(message):
+                    this.addAiMessage(message, false)
+                    break
+                case isUserMessage(message):
+                    this.addUserMessage(message.query)
+                    break
+                default:
+                    // do nothing, unrecognized message
+                }
+            })
+        },
+        async _onMqttMessage  (topic, message, packet) {
+            // ignore any messages if inFlightRequests has been cleared (it means that the chat was stopped mid-flight)
+            if (this._inFlightRequests.size === 0) return
+
+            const topicHelper = useMqttExpertTopicHelper()
+            const parsedTopic = topicHelper.parseTopic(topic)
+            const transactionId = packet.properties?.correlationData ? new TextDecoder().decode(packet.properties.correlationData) : null
+            const sessionId = packet.properties?.userProperties?.sessionId // chat session
+            const chatTransactionId = packet.properties?.userProperties?.transactionId // passed through for integrity
+
+            switch (true) {
+            case parsedTopic.isReply:
+                // remove inFlight request because it is now resolved
+                this._inFlightRequests.delete(transactionId)
+                // handle the response
+                await this.handleMessageResponse(JSON.parse(message.toString()))
+                break
+            case parsedTopic.isInflightRequest:
+                await this.handleInFlightRequest({
+                    topic,
+                    message,
+                    packet,
+                    transactionId,
+                    sessionId,
+                    chatTransactionId
+                })
+                break
+            default:
+                // do nothing
+            }
+        },
+        _onMqttClose  () {
+            const rand = Math.floor(Math.random() * 6)
+            const message = [
+                'Looks like we got disconnected. Send another message to pick up where we left off, or start a fresh session.',
+                'The connection took an unscheduled vacation. You can keep going by sending a message, or start a new session.',
+                'I blinked and lost you there. Drop me a message to continue, or start over — no hard feelings.',
+                'Well, that was rude of the connection. Send a message to resume, or kick off a new session.',
+                "We got cut off mid-conversation. Send a message to jump back in, or start fresh if you'd prefer.",
+                'The line went dead on us. You can pick this back up with a new message, or start a clean session.'
+            ][rand]
+
+            this.addPredefinedAiMessage(
+                message,
+                { isError: true, code: 'con_close' }
+            )
+        },
+        async _onMqttConnect (connack) {
+            if (connack.reasonCode && connack.reasonCode >= 0x80) {
+                // mqtt.js usually emits 'error' instead, but guard anyway
+                return this.handleMqttError(connack.reasonCode, connack.properties?.reasonString)
+            }
+
+            const servicesOrchestrator = getServicesOrchestrator()
+            const mqttService = servicesOrchestrator.$serviceInstances.mqtt
+
+            // if the last message was an error, it means we just reconnected after a failure
+            // letting users know that everything is all right
+            const lastMessage = this.messages.length > 0 ? this.messages[this.messages.length - 1] : null
+            if (lastMessage && lastMessage.error) {
+                const rand = Math.floor(Math.random() * 9)
+                this.addPredefinedAiMessage([
+                    "I'm back! Sorry about that — where were we?",
+                    'Reconnected. Miss me? Let\'s pick up where we left off.',
+                    'And we\'re back in business. Carry on as if nothing happened.',
+                    'That was a close one. I have returned.',
+                    'Plot twist — I survived. What did I miss?',
+                    'Back online. Pretend that little intermission never happened.',
+                    'The prodigal connection has returned. Did you redecorate while I was gone?',
+                    'I clawed my way back. What were we talking about?',
+                    'Dropped out for a sec but I never stopped thinking about your question.'
+                ][rand])
+            }
+
+            const mqttTopicHelper = useMqttExpertTopicHelper()
+
+            try {
+                await Promise.all([
+                    mqttService.subscribe(
+                        this.mqttConnectionKey,
+                        mqttTopicHelper.buildTopic({
+                            entityType: '+',
+                            entityId: '+',
+                            agentChannel: 'support',
+                            topicType: 'chat',
+                            topicAction: 'response'
+                        }),
+                        { qos: 2 }
+                    ),
+                    mqttService.subscribe(
+                        this.mqttConnectionKey,
+                        mqttTopicHelper.buildTopic({
+                            entityType: '+',
+                            entityId: '+',
+                            agentChannel: 'support',
+                            topicType: 'inflight',
+                            topicAction: 'request',
+                            inflightType: '+'
+                        }),
+                        { qos: 2 }
                     )
+                ])
+            } catch (error) {
+                this._onMqttError(error instanceof Error ? error : new Error(String(error)))
+            }
+        },
+        _onMqttDisconnect (packet) {
+            this.handleMqttError(packet.reasonCode, packet.properties?.reasonString)
+        },
+        _onMqttOffline () {
+            console.warn('#################### mqtt offline')
+            // TODO add error message, handle reconnect, notify user
+        },
+        _onMqttError (err) {
+            this.handleMqttError(err.code, err.message)
+        },
+        _addInFlightUpdate (status) {
+            this.inFlightUpdates.push(status)
+        },
+        _clearInFlightUpdates () {
+            this.inFlightUpdates = []
+        },
+        async handleMqttError (code, reason) {
+            // stopping inFlight chat requests to ignore any in flight messages if any and also clear the loader
+            this.stopInflightChat()
+            this._clearInFlightUpdates()
+
+            const servicesOrchestrator = getServicesOrchestrator()
+            const mqttService = servicesOrchestrator.$serviceInstances.mqtt
+
+            const rand = Math.floor(Math.random() * 3)
+            let payload = {
+                code: 'n/a',
+                message: [
+                    "Something went sideways but I'm not sure what. Let me reconnect and pretend that didn't happen...",
+                    "Lost connection for mysterious reasons. Even I don't know what happened. Reconnecting...",
+                    'Well, that was unexpected. Let me dust myself off and reconnect...'
+                ][rand]
+            }
+
+            // The error code may be missing because an ErrorWithReasonCode was not thrown, so we must rely on the error message instead
+            if (code === null) {
+                const reasonContainsSlug = (slug) => {
+                    if (typeof slug === 'string') {
+                        return reason.toLowerCase().includes(slug)
+                    } return false
+                }
 
-                    // Handle MCP calls if present - includes tools, resources, and prompts
-                    if (mcpItems.length > 0) {
-                        const toolCalls = mcpItems.map(item => ({
-                            id: item.toolId,
-                            name: item.toolName,
-                            title: item.toolTitle || item.toolName,
-                            kind: item.kind,
-                            args: item.input,
-                            output: item.output,
-                            durationMs: item.durationMs
-                        }))
-
-                        // Calculate total duration in seconds
-                        const totalDurationMs = mcpItems.reduce((sum, item) => sum + (item.durationMs || 0), 0)
-                        const totalDurationSec = (totalDurationMs / 1000).toFixed(2)
-
-                        this._agentStore.messages.push({
-                            _type: 'ai',
-                            kind: 'tool_calls',
-                            toolCalls,
-                            duration: totalDurationSec,
-                            content: `${toolCalls.length} tool call(s)`,
-                            _timestamp: Date.now(),
-                            _streamed: true,
-                            _uuid: uuidv4()
-                        })
+                switch (true) {
+                case reasonContainsSlug(ERRORS_WITHOUT_CODES.connack.slug):
+                    payload = {
+                        code: 'connack',
+                        message: [
+                            "Knocked on the broker's door but it's giving me the silent treatment. Reconnecting...",
+                            'Waited for a handshake that never came — awkward. Trying again...',
+                            'The broker left me on read. Let me try again...'
+                        ][rand]
                     }
+                    break
+                case reasonContainsSlug(ERRORS_WITHOUT_CODES.keepalive.slug):
+                    payload = {
+                        code: 'keepalive',
+                        message: [
+                            'Hm, looks like I lost my train of thought. Give me a sec to reconnect...',
+                            'I zoned out for a moment there. Reconnecting...',
+                            'The line went quiet — either I got ghosted or the wifi did. Reconnecting...'
+                        ][rand]
+                    }
+                    break
+                case reasonContainsSlug(ERRORS_WITHOUT_CODES.disconnecting.slug):
+                    payload = {
+                        code: 'disconnecting',
+                        message: [
+                            'Caught me mid-goodbye — tried to say something while walking out the door. One moment...',
+                            "I was already packing up when someone yelled 'one more thing!' Hang tight...",
+                            'Oops, talked over my own exit. Let me come back properly...'
+                        ][rand]
+                    }
+                    break
+                case reasonContainsSlug(ERRORS_WITHOUT_CODES.connection.slug):
+                    payload = {
+                        code: 'connection',
+                        message: [
+                            'My message got lost in transit — like a carrier pigeon in a storm. Reconnecting...',
+                            'The connection pulled a disappearing act. Working on getting it back...',
+                            'Well, that dropped faster than my phone signal in an elevator. Reconnecting...'
+                        ][rand]
+                    }
+                    break
+                case reasonContainsSlug(ERRORS_WITHOUT_CODES.websocket.slug):
+                    payload = {
+                        code: 'websocket',
+                        message: [
+                            'The websocket gremlins struck again. Reconnecting...',
+                            'Something tripped over the wires on my end. Give me a moment...',
+                            'My connection threw a tantrum. Calming it down and reconnecting...'
+                        ][rand]
+                    }
+                    break
+                case reasonContainsSlug(ERRORS_WITHOUT_CODES.cantConnect.slug):
+                    payload = {
+                        code: 'cantConnect',
+                        message: [
+                            "Knocked on the door but nobody's home. Trying again...",
+                            "Can't seem to reach my brain right now — it might be napping. Retrying...",
+                            "I'm getting the 'number you have dialed is unavailable' treatment. Retrying..."
+                        ][rand]
+                    }
+                    break
+                case reasonContainsSlug(ERRORS_WITHOUT_CODES.unrecognizedPacket.slug):
+                    payload = {
+                        code: 'unrecognizedPacket',
+                        message: [
+                            "Got a message I can't read — it's like receiving a fax in 2026. Reconnecting...",
+                            "Someone sent me a message in a language I don't speak. Reconnecting...",
+                            'That response made zero sense to me. Let me start fresh...'
+                        ][rand]
+                    }
+                    break
+                case reasonContainsSlug(ERRORS_WITHOUT_CODES.exceedingPacket.slug):
+                    payload = {
+                        code: 'exceedingPacket',
+                        message: [
+                            'That message was way too chonky to handle. Reconnecting...',
+                            'Someone tried to shove a whole novel through the mail slot. Reconnecting...',
+                            'Received a message so big it broke the mailbox. Let me reconnect...'
+                        ][rand]
+                    }
+                    break
+                case reasonContainsSlug(ERRORS_WITHOUT_CODES.unregisteredTopic.slug):
+                    payload = {
+                        code: 'unregisteredTopic',
+                        message: [
+                            "Got a message for someone I don't know. Wrong address? Reconnecting...",
+                            "That message had a return address I've never seen. Let me reconnect...",
+                            "Someone's talking about something I never signed up for. Reconnecting..."
+                        ][rand]
+                    }
+                    break
+                case reasonContainsSlug(ERRORS_WITHOUT_CODES.topicAliasRange.slug):
+                    payload = {
+                        code: 'topicAliasRange',
+                        message: [
+                            "Got an out-of-bounds memo — someone didn't read the fine print. Reconnecting...",
+                            'That reference number is way off the charts. Reconnecting...',
+                            "I was handed a ticket number that doesn't exist. Let me reconnect..."
+                        ][rand]
+                    }
+                    break
+                case reasonContainsSlug(ERRORS_WITHOUT_CODES.topicAliasMaximum.slug):
+                    payload = {
+                        code: 'topicAliasMaximum',
+                        message: [
+                            "The broker and I couldn't agree on the rules. Let me try negotiating again...",
+                            'We had a bit of a contract dispute on connection terms. Reconnecting...',
+                            'The handshake got awkward — bad terms. Let me try again...'
+                        ][rand]
+                    }
+                    break
+                default: // use default payload
+                }
 
-                    this.addAiMessage(message, false)
-                } else if (message.query) {
-                    // Transform user message
-                    this._agentStore.messages.push({
-                        _type: 'human',
-                        content: message.query,
-                        _timestamp: Date.now(),
-                        _uuid: uuidv4()
+                return this.addPredefinedAiMessage(payload.message, { isError: true, code: payload.code })
+            }
+
+            // Permanent config errors
+            if (FATAL_ERROR_CODES.has(code) || PROTOCOL_BUG_ERROR_CODES.has(code)) {
+                await mqttService.endConnection()
+                await mqttService.destroyClient(this.mqttConnectionKey)
+                payload = {
+                    code: 'fatal',
+                    message: [
+                        "Something went seriously wrong and I can't fix it by trying again. Please start over.",
+                        "I've hit a wall I can't climb over. Starting over should get things moving again.",
+                        "That's a hard stop — this one's beyond my self-repair skills. Try starting over."
+                    ][rand]
+                }
+                return
+            }
+
+            switch (code) {
+            case 0x01: // Unacceptable protocol version
+                payload = {
+                    code: 'unacceptable_protocol',
+                    message: [
+                        "Looks like I'm speaking the wrong dialect. Let me sort that out...",
+                        "The server and I aren't on the same page — literally different protocols. Working on it...",
+                        'I showed up to a French restaurant and ordered in Klingon. Give me a moment...'
+                    ][rand]
+                }
+                break
+            case 0x02: // Identifier rejected
+                payload = {
+                    code: 'identifier_rejected',
+                    message: [
+                        "The bouncer didn't like my ID. Let me get a new one...",
+                        "Showed up and they said 'who are you?' — rude. Trying again...",
+                        'My name tag got rejected at the door. Reconnecting with better credentials...'
+                    ][rand]
+                }
+                break
+            case 0x03: // Server unavailable
+                payload = {
+                    code: 'server_unavailable',
+                    message: [
+                        'The server is taking a coffee break. I\'ll try again shortly...',
+                        "Nobody's home on the other end. I'll keep knocking...",
+                        "Server's out of office. Hopefully it didn't set an auto-reply. Retrying..."
+                    ][rand]
+                }
+                break
+            case 0x04: // Bad username or password
+                payload = {
+                    code: 'bad_credentials',
+                    message: [
+                        "Wrong password — and no, I can't just try 'password123'. Fixing it...",
+                        "My credentials got rejected. I knew I should've written them down. Working on it...",
+                        'Access denied — turns out I forgot my own password. Give me a sec...'
+                    ][rand]
+                }
+                break
+            case 0x05: // Not authorized
+                payload = {
+                    code: 'not_authorized',
+                    message: [
+                        "I don't have clearance for this. Let me talk to someone about my permissions...",
+                        'Tried to walk into the VIP section without a wristband. Sorting it out...',
+                        'The velvet rope stopped me. Checking my authorization...'
+                    ][rand]
+                }
+                break
+            case 0x85: // Client Identifier not valid → regenerate, then 'close' reconnects
+                payload = {
+                    code: 'invalid_client_id',
+                    message: [
+                        'My ID card expired mid-conversation. Getting a fresh one...',
+                        "Apparently I don't exist anymore. Time for a new identity...",
+                        "Identity crisis — the server doesn't recognize me. Reinventing myself..."
+                    ][rand]
+                }
+                break
+            case 0x87: // Not authorized → try refreshing the token once
+                payload = {
+                    code: 'not_authorized_token',
+                    message: [
+                        'My backstage pass expired. Refreshing it now...',
+                        'My hall pass ran out. Grabbing a new one from the front desk...',
+                        'Authorization expired — I aged out. Refreshing my token...'
+                    ][rand]
+                }
+                break
+            case 0x8D: // Keep Alive timeout → just reconnect
+                payload = {
+                    code: 'keepalive_timeout',
+                    message: [
+                        "The server thought I fell asleep. I'm still here! Reconnecting...",
+                        'Got marked absent for not raising my hand fast enough. Reconnecting...',
+                        "Missed my check-in — the server assumed the worst. I'm back..."
+                    ][rand]
+                }
+                break
+            case 0x8E: // Session taken over by another tab/device
+                payload = {
+                    code: 'session_taken_over',
+                    message: [
+                        'Another version of me just stole my seat. I\'ll stand down gracefully.',
+                        "Looks like I've been replaced by myself in another tab. Can't compete with that.",
+                        'My evil twin from another tab took over. I\'ll bow out here.'
+                    ][rand]
+                }
+                break
+            case 0x9C: // Use another server (temporary)
+            case 0x9D: // Server moved (persistent)
+                payload = {
+                    code: 'server_moved',
+                    message: [
+                        "The server said 'not here, try next door.' Following directions...",
+                        'Got redirected — the server moved without leaving a forwarding address. Tracking it down...',
+                        "The server pulled a 'new phone, who dis.' Finding its new location..."
+                    ][rand]
+                }
+                break
+            default: // use default payload
+            }
+
+            if (THROTTLED_ERROR_CODES.has(code)) {
+                // // todo add backoff procedure
+                payload = {
+                    code: 'throttled',
+                    message: [
+                        "I'm being told to slow down — apparently even AI can be too eager. Taking a breather...",
+                        'Hit the rate limit. Guess I was talking too fast. Cooling off for a bit...',
+                        "The server said 'whoa, easy there.' Backing off and trying again shortly..."
+                    ][rand]
+                }
+            }
+
+            if (TRANSIENT_ERROR_CODES.has(code)) {
+                payload = {
+                    code: 'transient',
+                    message: [
+                        'Just a hiccup — nothing a quick reconnect won\'t fix...',
+                        'Blinked and lost the connection. Should be back in a moment...',
+                        'Minor turbulence. Fasten your seatbelt, we\'ll be back on course shortly...'
+                    ][rand]
+                }
+            }
+
+            // 0x80 Unspecified, 0x83 Implementation specific, anything unknown:
+            this.addPredefinedAiMessage(payload.message, { isError: true, code: payload.code })
+        },
+        stopInflightChat () {
+            if (this.shouldUseMqtt) {
+                const inFlightRequest = this._inFlightRequests.values().next().value
+                const servicesOrchestrator = getServicesOrchestrator()
+                const mqttService = servicesOrchestrator.$serviceInstances.mqtt
+
+                const hasMqttClient = mqttService.hasClient(this.mqttConnectionKey) &&
+                    (mqttService.getManagedClient(this.mqttConnectionKey)).status === 'connected'
+
+                if (inFlightRequest && hasMqttClient) {
+                    const mqttTopicHelper = useMqttExpertTopicHelper()
+
+                    const { entityId, entityType } = mqttTopicHelper.getEntityTopicPaths()
+
+                    const topic = mqttTopicHelper.buildTopic({
+                        entityType,
+                        entityId,
+                        agentChannel: 'support',
+                        topicType: 'chat',
+                        topicAction: 'request'
+                    })
+
+                    // publishing an abort message to stop the agent
+                    mqttService.publishMessage(this.mqttConnectionKey, {
+                        topic,
+                        qos: 2,
+                        payload: {
+                            abort: true,
+                            context: {
+                                ...useContextStore().expert,
+                                agent: this.agentMode
+                            }
+                        },
+                        correlationData: inFlightRequest.transactionId,
+                        userProperties: {
+                            sessionId: this.sessionId
+                        }
                     })
                 }
-                // Else: ignore messages that don't match either format
-            })
+            }
+            this._inFlightRequests.clear()
         }
     },
     persist: {
diff --git a/frontend/src/types/services/mqtt.types.ts b/frontend/src/types/services/mqtt.types.ts
index 2d21a6346a..e14dfbb082 100644
--- a/frontend/src/types/services/mqtt.types.ts
+++ b/frontend/src/types/services/mqtt.types.ts
@@ -1,7 +1,11 @@
 import type {
+    ErrorWithReasonCode,
     IClientSubscribeOptions,
+    IConnackPacket,
+    IDisconnectPacket,
     IPublishPacket,
-    MqttClient
+    MqttClient,
+    Packet
 } from 'mqtt'
 
 import type { AppService } from '@/types'
@@ -36,11 +40,17 @@ export interface MqttReconnectPolicy {
 }
 
 export interface MqttConnectionHandlers {
-    onConnect?: (client: MqttClient) => void
+    onConnect?: (packet: IConnackPacket, client: MqttClient) => void
     onClose?: (client: MqttClient) => void
+    onDisconnect?: (packet: IDisconnectPacket, client: MqttClient) => void
     onOffline?: (client: MqttClient) => void
-    onError?: (error: Error, client: MqttClient | null) => void
+    onEnd?: (client: MqttClient) => void
+    onReconnect?: (client: MqttClient) => void
+    onError?: (error: Error | ErrorWithReasonCode, client: MqttClient | null) => void
     onMessage?: (topic: string, message: Buffer, packet: IPublishPacket, client: MqttClient) => void
+    onPacketSend?: (packet: Packet, client: MqttClient) => void
+    onPacketReceive?: (packet: Packet, client: MqttClient) => void
+    onOutgoingEmpty?: (client: MqttClient) => void
 }
 
 export interface MqttPublishRequest {
@@ -87,12 +97,14 @@ export interface ManagedMqttClient {
     getCredentials: MqttCredentialProvider
     reconnectPolicy: MqttReconnectPolicy
     reconnectAttempt: number
+    reconnectGeneration: number
     reconnectTimer: ReturnType<typeof setTimeout> | null
     subscriptions: Map<string, ManagedMqttSubscription>
     handlers: MqttConnectionHandlers
     connectionWaiters: Set<MqttConnectionWaiter>
     terminalFailure: boolean
     lastError: Error | null
+    connectHandlerPromise: Promise<void> | null
 }
 
 export interface MqttServiceI extends AppService {
diff --git a/test/unit/frontend/services/mqtt.service.spec.js b/test/unit/frontend/services/mqtt.service.spec.js
index b86197b0d9..4465344d09 100644
--- a/test/unit/frontend/services/mqtt.service.spec.js
+++ b/test/unit/frontend/services/mqtt.service.spec.js
@@ -493,6 +493,7 @@ describe('MqttService', async () => {
             await service.subscribe('reconnect-key', 'topic/a', { qos: 1 })
 
             firstClient.emit('connect')
+            firstClient.connected = false
             firstClient.emit('offline')
 
             await vi.advanceTimersByTimeAsync(1000)
@@ -547,6 +548,7 @@ describe('MqttService', async () => {
             })
 
             firstClient.emit('connect')
+            firstClient.connected = false
             firstClient.emit('offline')
 
             await vi.advanceTimersByTimeAsync(1000)
diff --git a/test/unit/frontend/stores/product-assistant.spec.js b/test/unit/frontend/stores/product-assistant.spec.js
index 68029a55c0..f9c63932e5 100644
--- a/test/unit/frontend/stores/product-assistant.spec.js
+++ b/test/unit/frontend/stores/product-assistant.spec.js
@@ -86,33 +86,47 @@ describe('product-assistant store', () => {
     })
 
     describe('getters', () => {
-        describe('immersiveInstance', () => {
-            it('returns null when context store has no instance', () => {
+        describe('isImmersiveInstance', () => {
+            it('returns falsy when context store has no instance', () => {
                 const store = useProductAssistantStore()
-                expect(store.immersiveInstance).toBeNull()
+                expect(store.isImmersiveInstance).toBeFalsy()
             })
 
-            it('returns the instance from the context store', () => {
+            it('returns falsy when instance is set but isImmersive is false', () => {
                 const contextStore = useContextStore()
                 const store = useProductAssistantStore()
-                const mockInstance = { id: 'inst-1', url: 'http://localhost:1880' }
-                contextStore.setInstance(mockInstance)
-                expect(store.immersiveInstance).toEqual(mockInstance)
+                contextStore.setInstance({ id: 'inst-1', url: 'http://localhost:1880' })
+                expect(store.isImmersiveInstance).toBeFalsy()
+            })
+
+            it('returns true when instance is set and isImmersive is true', () => {
+                const contextStore = useContextStore()
+                const store = useProductAssistantStore()
+                contextStore.setInstance({ id: 'inst-1', url: 'http://localhost:1880' })
+                contextStore.setIsImmersive(true)
+                expect(store.isImmersiveInstance).toBe(true)
             })
         })
 
-        describe('immersiveDevice', () => {
-            it('returns null when context store has no device', () => {
+        describe('isImmersiveDevice', () => {
+            it('returns falsy when context store has no device', () => {
+                const store = useProductAssistantStore()
+                expect(store.isImmersiveDevice).toBeFalsy()
+            })
+
+            it('returns falsy when device is set but isImmersive is false', () => {
+                const contextStore = useContextStore()
                 const store = useProductAssistantStore()
-                expect(store.immersiveDevice).toBeNull()
+                contextStore.setDevice({ id: 'dev-1', editor: { url: 'http://device.local' } })
+                expect(store.isImmersiveDevice).toBeFalsy()
             })
 
-            it('returns the device from the context store', () => {
+            it('returns true when device is set and isImmersive is true', () => {
                 const contextStore = useContextStore()
                 const store = useProductAssistantStore()
-                const mockDevice = { id: 'dev-1', editor: { url: 'http://device.local' } }
-                contextStore.setDevice(mockDevice)
-                expect(store.immersiveDevice).toEqual(mockDevice)
+                contextStore.setDevice({ id: 'dev-1', editor: { url: 'http://device.local' } })
+                contextStore.setIsImmersive(true)
+                expect(store.isImmersiveDevice).toBe(true)
             })
         })
 
diff --git a/test/unit/frontend/stores/product-expert.spec.js b/test/unit/frontend/stores/product-expert.spec.js
index 3ccae5fa9a..59ab6fdc19 100644
--- a/test/unit/frontend/stores/product-expert.spec.js
+++ b/test/unit/frontend/stores/product-expert.spec.js
@@ -13,7 +13,7 @@ vi.mock('@/stores/context.js', () => ({
 
 vi.mock('@/stores/product-assistant.js', () => ({
     useProductAssistantStore: vi.fn(() => ({
-        immersiveInstance: null,
+        isImmersiveInstance: null,
         supportedActions: {}
     }))
 }))