From d71c172505c24aeb6e2715bb7976188e7fa14152 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 27 Jan 2026 15:34:17 +0200
Subject: [PATCH 01/15] Alter the expert's chat input

---
 .../src/components/expert/ExpertChatInput.vue | 150 ++++++++++++------
 .../store/modules/product/assistant/index.js  |   3 +
 2 files changed, 105 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/expert/ExpertChatInput.vue b/frontend/src/components/expert/ExpertChatInput.vue
index 2ab245f22a..25457fe969 100644
--- a/frontend/src/components/expert/ExpertChatInput.vue
+++ b/frontend/src/components/expert/ExpertChatInput.vue
@@ -12,44 +12,60 @@
             </button>
             <div class="right-buttons">
                 <capabilities-selector v-if="isOperatorAgent" />
-                <button
-                    v-if="isGenerating && !isSessionExpired"
-                    type="button"
-                    class="btn-stop"
-                    @click="handleStop"
-                >
-                    Stop
-                </button>
-                <button
-                    v-else-if="!isSessionExpired"
-                    type="button"
-                    class="btn-send"
-                    :disabled="!canSend"
-                    @click="handleSend"
-                >
-                    Send
-                </button>
             </div>
         </div>
+        <div class="input-wrapper" :class="{ 'focused': isTextareaFocused }">
+            <!-- Textarea -->
+            <textarea
+                ref="textarea"
+                v-model="inputText"
+                class="chat-input"
+                :placeholder="placeholderText"
+                :disabled="isInputDisabled"
+                @keydown="handleKeydown"
+                @focus="isTextareaFocused = true"
+                @blur="isTextareaFocused = false"
+            />
 
-        <!-- Textarea -->
-        <textarea
-            ref="textarea"
-            v-model="inputText"
-            class="chat-input"
-            :placeholder="placeholderText"
-            :disabled="isInputDisabled"
-            @keydown="handleKeydown"
-        />
+            <div class="actions">
+                <div class="left">
+                    <include-selection-button v-if="hasUserSelection" v-model="includeSelection" />
+                </div>
+
+                <div class="right">
+                    <button
+                        v-if="isGenerating && !isSessionExpired"
+                        type="button"
+                        class="btn-stop"
+                        @click="handleStop"
+                    >
+                        Stop
+                    </button>
+                    <button
+                        v-else-if="!isSessionExpired"
+                        type="button"
+                        class="btn-send"
+                        :disabled="!canSend"
+                        @click="handleSend"
+                    >
+                        Send
+                    </button>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 import CapabilitiesSelector from './components/CapabilitiesSelector.vue'
+import IncludeSelectionButton from './components/IncludeSelectionButton.vue'
 
 export default {
     name: 'ExpertChatInput',
     components: {
+        IncludeSelectionButton,
         CapabilitiesSelector
     },
     props: {
@@ -81,10 +97,13 @@ export default {
     emits: ['send', 'stop', 'start-over'],
     data () {
         return {
-            inputText: ''
+            inputText: '',
+            includeSelection: true,
+            isTextareaFocused: false
         }
     },
     computed: {
+        ...mapGetters('product/assistant', ['hasUserSelection']),
         isInputDisabled () {
             if (this.isSessionExpired) return true
             if (this.isGenerating) return true
@@ -148,7 +167,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1rem; // pb-4
+    margin-bottom: 0.5rem;
 }
 
 .right-buttons {
@@ -174,6 +193,8 @@ button {
     background-color: white;
     color: inherit;
     border-color: #C7D2FE; // indigo-300
+    padding: 0.25rem 0.50rem;
+    border-radius: 5px;
 
     &:hover:not(:disabled) {
         background-color: #F9FAFB; // gray-50
@@ -184,6 +205,8 @@ button {
     background-color: $ff-indigo-600;
     color: white;
     border-color: $ff-indigo-600;
+    border-radius: 5px;
+    padding: 0.25rem 0.50rem;
 
     &:hover:not(:disabled) {
         background-color: $ff-indigo-700;
@@ -197,6 +220,8 @@ button {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    border-radius: 5px;
+    padding: 0.25rem 0.50rem;
 
     &::before {
         content: '';
@@ -211,33 +236,62 @@ button {
     }
 }
 
-.chat-input {
-    width: 100%;
-    height: 6rem; // h-24
-    padding: 1rem; // p-4
+.input-wrapper {
+    display: flex;
+    flex-direction: column;
+    min-height: 10vh;
     border: 2px solid #D1D5DB; // border-2 border-gray-300
     border-radius: 0.5rem; // rounded-lg
-    font-size: 0.875rem; // text-sm
-    line-height: 1.5;
-    color: #111827; // text-gray-900
-    resize: none;
-    outline: none;
-    font-family: inherit;
-    background: white;
+    transition: border-color 0.2s ease;
 
-    &:focus {
-        border-color: $ff-indigo-500; // focus:border-indigo-500
-        outline: none;
+    &.focused {
+        border-color: $ff-indigo-500;
     }
 
-    &:disabled {
-        cursor: not-allowed;
-        background-color: #F9FAFB; // bg-gray-50
-        color: #6B7280; // text-gray-500
+    .chat-input {
+        flex: 1;
+        width: 100%;
+        padding: 1rem; // p-4
+        box-sizing: border-box;
+        overflow-y: auto;
+        border: none;
+        outline: none;
+        font-size: 0.875rem; // text-sm
+        line-height: 1.5;
+        color: #111827; // text-gray-900
+        resize: none;
+        font-family: inherit;
+        background: white;
+
+        &:focus {
+            outline: none;
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+            background-color: #F9FAFB; // bg-gray-50
+            color: #6B7280; // text-gray-500
+        }
+
+        &::placeholder {
+            color: #9CA3AF; // placeholder gray
+        }
     }
 
-    &::placeholder {
-        color: #9CA3AF; // placeholder gray
+    .actions {
+        padding: .5rem;
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+            display: flex;
+            justify-content: flex-start;
+        }
+
+        .right {
+            display: flex;
+            justify-content: flex-end;
+        }
     }
 }
 </style>
diff --git a/frontend/src/store/modules/product/assistant/index.js b/frontend/src/store/modules/product/assistant/index.js
index 2563855123..52fafebcdd 100644
--- a/frontend/src/store/modules/product/assistant/index.js
+++ b/frontend/src/store/modules/product/assistant/index.js
@@ -21,6 +21,9 @@ const state = initialState()
 const getters = {
     immersiveInstance: (state, getters, rootState) => {
         return rootState.context.instance
+    },
+    hasUserSelection: (state) => {
+        return state.selectedNodes.length
     }
 }
 

From d03b8ebaac9367581592706ebb763bdf3e6f3d7a Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 27 Jan 2026 15:54:51 +0200
Subject: [PATCH 02/15] Add horizontal resizing support to `ResizeBar`
 component

---
 .../Editor/components/drawer/ResizeBar.vue    | 80 ++++++++++++-------
 1 file changed, 52 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/instance/Editor/components/drawer/ResizeBar.vue b/frontend/src/pages/instance/Editor/components/drawer/ResizeBar.vue
index a4650600a3..064107714e 100644
--- a/frontend/src/pages/instance/Editor/components/drawer/ResizeBar.vue
+++ b/frontend/src/pages/instance/Editor/components/drawer/ResizeBar.vue
@@ -1,43 +1,67 @@
 <template>
-    <div class="resize-bar" />
+    <div class="resize-bar" :class="{horizontal: isHorizontal}" />
 </template>
 
 <script>
 export default {
-    name: 'ResizeBar'
+    name: 'ResizeBar',
+    props: {
+        direction: {
+            type: String,
+            default: 'vertical' // vertical || horizontal
+        }
+    },
+    computed: {
+        isHorizontal () {
+            return this.direction === 'horizontal'
+        }
+    }
 }
 </script>
 
 <style scoped lang="scss">
 .resize-bar {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 6px;
-  height: 100%;
-  border-right: 1px solid $ff-grey-400;
-  background: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 15;
-
-  &::before {
-    content: '...';
-    position: relative;
-    left: 3px;
-    writing-mode: vertical-rl;
-    line-height: 0.5;
-    letter-spacing: 4px;
-    color: $ff-grey-500;
-  }
-
-  &:hover {
-    cursor: ew-resize;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 6px;
+    height: 100%;
+    border-right: 1px solid $ff-grey-400;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 15;
 
     &::before {
-      color: $ff-grey-700;
+        content: '...';
+        position: relative;
+        left: 3px;
+        writing-mode: vertical-rl;
+        line-height: 0.5;
+        letter-spacing: 4px;
+        color: $ff-grey-500;
+    }
+
+    &:hover {
+        cursor: ew-resize;
+
+        &::before {
+            color: $ff-grey-700;
+        }
+    }
+
+    &.horizontal {
+        width: 100%;
+        height: 6px;
+
+        &::before {
+            writing-mode: horizontal-tb;
+        }
+
+        &:hover {
+            cursor: ns-resize;
+        }
     }
-  }
 }
 </style>

From ee0adb102e099b70eb19fb6b866e7c30c93cdd4f Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 27 Jan 2026 16:43:36 +0200
Subject: [PATCH 03/15] Add resizable height functionality to `ExpertChatInput`
 component

---
 .../src/components/expert/ExpertChatInput.vue | 78 ++++++++++++++++++-
 1 file changed, 76 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/expert/ExpertChatInput.vue b/frontend/src/components/expert/ExpertChatInput.vue
index 25457fe969..954b9d3710 100644
--- a/frontend/src/components/expert/ExpertChatInput.vue
+++ b/frontend/src/components/expert/ExpertChatInput.vue
@@ -1,5 +1,9 @@
 <template>
-    <div class="ff-expert-input">
+    <div class="ff-expert-input" :style="{height: componentHeight + 'px'}">
+        <resize-bar
+            direction="horizontal"
+            @mousedown="startResize"
+        />
         <!-- Action buttons row -->
         <div class="action-buttons">
             <button
@@ -59,12 +63,19 @@
 <script>
 import { mapGetters } from 'vuex'
 
+import ResizeBar from '../../pages/instance/Editor/components/drawer/ResizeBar.vue'
+
 import CapabilitiesSelector from './components/CapabilitiesSelector.vue'
 import IncludeSelectionButton from './components/IncludeSelectionButton.vue'
 
+// todo.... something
+const DRAWER_MOBILE_BREAKPOINT = 640 // Viewport width below which mobile layout applies
+const DRAWER_MAX_WIDTH_RATIO = 0.9 // Maximum drawer width as percentage of viewport (desktop)
+
 export default {
     name: 'ExpertChatInput',
     components: {
+        ResizeBar,
         IncludeSelectionButton,
         CapabilitiesSelector
     },
@@ -99,7 +110,18 @@ export default {
         return {
             inputText: '',
             includeSelection: true,
-            isTextareaFocused: false
+            isTextareaFocused: false,
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight,
+            component: {
+                resizing: false,
+                startX: 0,
+                startY: 0,
+                startWidth: 0,
+                startHeight: 0,
+                width: 0,
+                height: 0
+            }
         }
     },
     computed: {
@@ -120,6 +142,14 @@ export default {
             return this.isOperatorAgent
                 ? 'Tell us what you want to know about'
                 : 'Tell us what you need help with'
+        },
+        componentHeight () {
+            if (this.viewportHeight < DRAWER_MOBILE_BREAKPOINT) {
+                // Mobile: drawer takes up full viewport
+                return Math.min(this.component.height, this.viewportHeight)
+            }
+            // Desktop: drawer can't exceed specified percentage of viewport
+            return Math.min(this.component.height, this.viewportHeight * DRAWER_MAX_WIDTH_RATIO)
         }
     },
     methods: {
@@ -147,6 +177,47 @@ export default {
                 this.handleSend()
             }
             // Shift+Enter = new line (default behavior)
+        },
+        startResize (e) {
+            this.component.resizing = true
+
+            this.component.startX = e.clientX
+            this.component.startY = e.clientY
+
+            this.component.startWidth = this.component.width
+            this.component.startHeight = this.component.height
+
+            document.addEventListener('mousemove', this.resize)
+            document.addEventListener('mouseup', this.stopResize)
+        },
+        resize (e) {
+            if (this.component.resizing) {
+                const widthChange = e.clientX - this.component.startX
+                const heightChange = e.clientY - this.component.startY
+
+                const newWidth = this.component.startWidth + widthChange
+                const newHeight = this.component.startHeight - heightChange
+
+                // todo figure out what to do with these
+                const COMPONENT_MIN_WIDTH = 0
+                const COMPONENT_MIN_HEIGHT = 0
+                const DRAWER_MAX_VIEWPORT_MARGIN_X = 0
+                const DRAWER_MAX_VIEWPORT_MARGIN_Y = 0
+
+                this.component.width = Math.min(
+                    Math.max(COMPONENT_MIN_WIDTH, newWidth),
+                    this.viewportWidth - DRAWER_MAX_VIEWPORT_MARGIN_X
+                )
+                this.component.height = Math.min(
+                    Math.max(COMPONENT_MIN_HEIGHT, newHeight),
+                    this.viewportHeight - DRAWER_MAX_VIEWPORT_MARGIN_Y
+                )
+            }
+        },
+        stopResize () {
+            this.component.resizing = false
+            document.removeEventListener('mousemove', this.resize)
+            document.removeEventListener('mouseup', this.stopResize)
         }
     }
 }
@@ -161,6 +232,8 @@ export default {
     border-top: 1px solid #E5E7EB; // border-gray-200
     background: white;
     flex-shrink: 0; // Prevent input area from shrinking
+    position: relative;
+    min-height: 15vh;
 }
 
 .action-buttons {
@@ -237,6 +310,7 @@ button {
 }
 
 .input-wrapper {
+    flex: 1;
     display: flex;
     flex-direction: column;
     min-height: 10vh;

From 75fcbde8b85652f59a145bc496bf2c669b9f4e3e Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 28 Jan 2026 13:46:04 +0200
Subject: [PATCH 04/15] Refactor `ExpertChatInput` to use `ResizingHelper`
 composable for height management and cleanup resizing logic

---
 .../src/components/expert/ExpertChatInput.vue |  89 ++++---------
 frontend/src/composables/ResizingHelper.js    | 121 ++++++++++++++++++
 2 files changed, 144 insertions(+), 66 deletions(-)
 create mode 100644 frontend/src/composables/ResizingHelper.js

diff --git a/frontend/src/components/expert/ExpertChatInput.vue b/frontend/src/components/expert/ExpertChatInput.vue
index 954b9d3710..32c18c70cd 100644
--- a/frontend/src/components/expert/ExpertChatInput.vue
+++ b/frontend/src/components/expert/ExpertChatInput.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="ff-expert-input" :style="{height: componentHeight + 'px'}">
+    <div ref="resizeTarget" class="ff-expert-input" :style="{height: heightStyle}">
         <resize-bar
             direction="horizontal"
             @mousedown="startResize"
@@ -63,15 +63,13 @@
 <script>
 import { mapGetters } from 'vuex'
 
+import { useResizingHelper } from '../../composables/ResizingHelper.js'
+
 import ResizeBar from '../../pages/instance/Editor/components/drawer/ResizeBar.vue'
 
 import CapabilitiesSelector from './components/CapabilitiesSelector.vue'
 import IncludeSelectionButton from './components/IncludeSelectionButton.vue'
 
-// todo.... something
-const DRAWER_MOBILE_BREAKPOINT = 640 // Viewport width below which mobile layout applies
-const DRAWER_MAX_WIDTH_RATIO = 0.9 // Maximum drawer width as percentage of viewport (desktop)
-
 export default {
     name: 'ExpertChatInput',
     components: {
@@ -106,22 +104,20 @@ export default {
         }
     },
     emits: ['send', 'stop', 'start-over'],
+    setup () {
+        const { startResize, heightStyle, bindResizer } = useResizingHelper()
+
+        return {
+            startResize,
+            bindResizer,
+            heightStyle
+        }
+    },
     data () {
         return {
             inputText: '',
             includeSelection: true,
-            isTextareaFocused: false,
-            viewportWidth: window.innerWidth,
-            viewportHeight: window.innerHeight,
-            component: {
-                resizing: false,
-                startX: 0,
-                startY: 0,
-                startWidth: 0,
-                startHeight: 0,
-                width: 0,
-                height: 0
-            }
+            isTextareaFocused: false
         }
     },
     computed: {
@@ -142,16 +138,17 @@ export default {
             return this.isOperatorAgent
                 ? 'Tell us what you want to know about'
                 : 'Tell us what you need help with'
-        },
-        componentHeight () {
-            if (this.viewportHeight < DRAWER_MOBILE_BREAKPOINT) {
-                // Mobile: drawer takes up full viewport
-                return Math.min(this.component.height, this.viewportHeight)
-            }
-            // Desktop: drawer can't exceed specified percentage of viewport
-            return Math.min(this.component.height, this.viewportHeight * DRAWER_MAX_WIDTH_RATIO)
         }
     },
+    mounted () {
+        this.bindResizer({
+            component: this.$refs.resizeTarget,
+            mobileBreakpoint: 640, // match your app breakpoint
+            maxHeightRatio: 0.9, // whatever you want the cap to be
+            minHeight: 120, // optional: stop it collapsing to 0
+            maxViewportMarginY: 80 // optional: keep some space
+        })
+    },
     methods: {
         handleSend () {
             if (!this.canSend) return
@@ -177,47 +174,6 @@ export default {
                 this.handleSend()
             }
             // Shift+Enter = new line (default behavior)
-        },
-        startResize (e) {
-            this.component.resizing = true
-
-            this.component.startX = e.clientX
-            this.component.startY = e.clientY
-
-            this.component.startWidth = this.component.width
-            this.component.startHeight = this.component.height
-
-            document.addEventListener('mousemove', this.resize)
-            document.addEventListener('mouseup', this.stopResize)
-        },
-        resize (e) {
-            if (this.component.resizing) {
-                const widthChange = e.clientX - this.component.startX
-                const heightChange = e.clientY - this.component.startY
-
-                const newWidth = this.component.startWidth + widthChange
-                const newHeight = this.component.startHeight - heightChange
-
-                // todo figure out what to do with these
-                const COMPONENT_MIN_WIDTH = 0
-                const COMPONENT_MIN_HEIGHT = 0
-                const DRAWER_MAX_VIEWPORT_MARGIN_X = 0
-                const DRAWER_MAX_VIEWPORT_MARGIN_Y = 0
-
-                this.component.width = Math.min(
-                    Math.max(COMPONENT_MIN_WIDTH, newWidth),
-                    this.viewportWidth - DRAWER_MAX_VIEWPORT_MARGIN_X
-                )
-                this.component.height = Math.min(
-                    Math.max(COMPONENT_MIN_HEIGHT, newHeight),
-                    this.viewportHeight - DRAWER_MAX_VIEWPORT_MARGIN_Y
-                )
-            }
-        },
-        stopResize () {
-            this.component.resizing = false
-            document.removeEventListener('mousemove', this.resize)
-            document.removeEventListener('mouseup', this.stopResize)
         }
     }
 }
@@ -234,6 +190,7 @@ export default {
     flex-shrink: 0; // Prevent input area from shrinking
     position: relative;
     min-height: 15vh;
+    max-height: 40vh;
 }
 
 .action-buttons {
diff --git a/frontend/src/composables/ResizingHelper.js b/frontend/src/composables/ResizingHelper.js
new file mode 100644
index 0000000000..6af165f34c
--- /dev/null
+++ b/frontend/src/composables/ResizingHelper.js
@@ -0,0 +1,121 @@
+import { computed, ref } from 'vue'
+
+export function useResizingHelper () {
+    const viewportWidth = ref(window.innerWidth)
+    const viewportHeight = ref(window.innerHeight)
+
+    const MIN_WIDTH = ref(0)
+    const MIN_HEIGHT = ref(0)
+    const MAX_VIEWPORT_MARGIN_X = ref(0)
+    const MAX_VIEWPORT_MARGIN_Y = ref(0)
+
+    const MOBILE_BREAKPOINT = ref(0)
+    const MAX_WIDTH_RATIO = ref(1)
+    const MAX_HEIGHT_RATIO = ref(1)
+
+    let resizing = false
+    let startX = 0
+    let startY = 0
+    let startWidth = 0
+    let startHeight = 0
+
+    const width = ref(0)
+    const height = ref(0)
+
+    function startResize (e) {
+        resizing = true
+        startX = e.clientX
+        startY = e.clientY
+
+        startWidth = width.value
+        startHeight = height.value
+
+        document.addEventListener('mousemove', resize)
+        document.addEventListener('mouseup', stopResize)
+    }
+
+    function stopResize () {
+        resizing = false
+        document.removeEventListener('mousemove', resize)
+        document.removeEventListener('mouseup', stopResize)
+    }
+
+    function resize (e) {
+        if (resizing) {
+            const widthChange = e.clientX - startX
+            const heightChange = e.clientY - startY
+
+            const newWidth = startWidth + widthChange
+            const newHeight = startHeight - heightChange
+
+            width.value = Math.min(
+                Math.max(MIN_WIDTH.value, newWidth),
+                viewportWidth.value - MAX_VIEWPORT_MARGIN_X.value
+            )
+            height.value = Math.min(
+                Math.max(MIN_HEIGHT.value, newHeight),
+                viewportHeight.value - MAX_VIEWPORT_MARGIN_Y.value
+            )
+        }
+    }
+
+    function bindResizer ({
+        component = null,
+        initialWidth = 0,
+        initialHeight = 0,
+        minWidth,
+        minHeight,
+        maxViewportMarginX,
+        maxViewportMarginY,
+        mobileBreakpoint,
+        maxWidthRatio,
+        maxHeightRatio
+    } = {}) {
+        let componentWidth = initialWidth
+        let componentHeight = initialHeight
+
+        if (component) {
+            const element = component.$el || component
+
+            if (element && element.getBoundingClientRect) {
+                const rect = element.getBoundingClientRect()
+                componentWidth = initialWidth || rect.width
+                componentHeight = initialHeight || rect.height
+            }
+        }
+
+        height.value = componentHeight
+        width.value = componentWidth
+
+        MIN_WIDTH.value = minWidth
+        MIN_HEIGHT.value = minHeight
+        MAX_VIEWPORT_MARGIN_X.value = maxViewportMarginX
+        MAX_VIEWPORT_MARGIN_Y.value = maxViewportMarginY
+
+        MOBILE_BREAKPOINT.value = mobileBreakpoint ?? 0
+        MAX_WIDTH_RATIO.value = maxWidthRatio ?? 1
+        MAX_HEIGHT_RATIO.value = maxHeightRatio ?? 1
+    }
+
+    const heightStyle = computed(() => {
+        if (viewportHeight.value < MOBILE_BREAKPOINT.value) {
+            return `${Math.min(height.value, viewportHeight.value)}px`
+        }
+        return `${Math.min(height.value, viewportHeight.value * MAX_HEIGHT_RATIO.value)}px`
+    })
+
+    const widthStyle = computed(() => {
+        if (viewportWidth.value < MOBILE_BREAKPOINT.value) {
+            return `${Math.min(width.value, viewportWidth.value)}px`
+        }
+        return `${Math.min(width.value, viewportWidth.value * MAX_WIDTH_RATIO.value)}px`
+    })
+
+    return {
+        heightStyle,
+        widthStyle,
+        startResize,
+        stopResize,
+        bindResizer
+    }
+}

From 5d8f50145cbd048b127aaa499b3bcda9ce5b5b1d Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 28 Jan 2026 18:17:44 +0200
Subject: [PATCH 05/15] Refactor `ExpertChatInput` and adjust button styles for
 `CapabilitiesSelector`

---
 frontend/src/components/expert/ExpertChatInput.vue           | 2 +-
 .../components/expert/components/CapabilitiesSelector.vue    | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/expert/ExpertChatInput.vue b/frontend/src/components/expert/ExpertChatInput.vue
index 32c18c70cd..cf360ec31b 100644
--- a/frontend/src/components/expert/ExpertChatInput.vue
+++ b/frontend/src/components/expert/ExpertChatInput.vue
@@ -33,7 +33,7 @@
 
             <div class="actions">
                 <div class="left">
-                    <include-selection-button v-if="hasUserSelection" v-model="includeSelection" />
+                    <include-selection-button v-if="hasUserSelection" />
                 </div>
 
                 <div class="right">
diff --git a/frontend/src/components/expert/components/CapabilitiesSelector.vue b/frontend/src/components/expert/components/CapabilitiesSelector.vue
index 2918aa46b1..c49dcf3802 100644
--- a/frontend/src/components/expert/components/CapabilitiesSelector.vue
+++ b/frontend/src/components/expert/components/CapabilitiesSelector.vue
@@ -165,9 +165,9 @@ export default {
         }
 
         button.ff-button {
-            padding: 0.5rem 0.75rem;
             border: 1px solid #c7d2fe; // indigo-300 to match other buttons
-            border-radius: 9999px; // pill shape
+            border-radius: 5px;
+            padding: 0.25rem 0.50rem;
             background: $ff-white;
             color: #1f2937; // gray-800, explicit dark text
             font-size: 0.875rem;
@@ -201,7 +201,6 @@ export default {
                 background: $ff-indigo-600;
                 border-color: $ff-indigo-600;
                 color: $ff-white;
-                border-radius: 9999px; // keep pill shape when open
 
                 .icon {
                     svg {

From 806c083d3b1a9263e4f118b9cf2c5259a42b881c Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 29 Jan 2026 13:27:23 +0200
Subject: [PATCH 06/15] Update `ExpertChatInput` to conditionally show
 `IncludeSelectionButton` and add `selectedNodes` to context

---
 frontend/src/components/expert/ExpertChatInput.vue | 2 +-
 frontend/src/store/modules/context/index.js        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/expert/ExpertChatInput.vue b/frontend/src/components/expert/ExpertChatInput.vue
index cf360ec31b..2cf248c9d5 100644
--- a/frontend/src/components/expert/ExpertChatInput.vue
+++ b/frontend/src/components/expert/ExpertChatInput.vue
@@ -33,7 +33,7 @@
 
             <div class="actions">
                 <div class="left">
-                    <include-selection-button v-if="hasUserSelection" />
+                    <include-selection-button v-if="hasUserSelection && !isOperatorAgent" />
                 </div>
 
                 <div class="right">
diff --git a/frontend/src/store/modules/context/index.js b/frontend/src/store/modules/context/index.js
index c48ceb7465..1a599c7abf 100644
--- a/frontend/src/store/modules/context/index.js
+++ b/frontend/src/store/modules/context/index.js
@@ -52,6 +52,7 @@ const getters = {
             deviceId: deviceId ?? null,
             applicationId: applicationId ?? null,
             isTrialAccount: rootGetters['account/isTrialAccount'] || false,
+            selectedNodes: rootGetters['product/assistant/immersiveInstance'] ? rootState['product/assistant/selectedNodes'] : [],
             pageName: state.route.name,
             rawRoute,
             scope

From ed003a60fd41160e6bc96010b2e6e237112588e6 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 29 Jan 2026 13:44:36 +0200
Subject: [PATCH 07/15] Add `assistantFeatures` state and expose version,
 features, and selected nodes in context

---
 frontend/src/store/modules/context/index.js           | 11 ++++++++++-
 frontend/src/store/modules/product/assistant/index.js |  7 +++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/store/modules/context/index.js b/frontend/src/store/modules/context/index.js
index 1a599c7abf..e349c44c6e 100644
--- a/frontend/src/store/modules/context/index.js
+++ b/frontend/src/store/modules/context/index.js
@@ -14,6 +14,8 @@ const getters = {
         // Return safe defaults when route is not yet initialized
         if (!state.route) {
             return {
+                assistantVersion: rootGetters['product/assistant/version'],
+                assistantFeatures: rootGetters['product/assistant/assistantFeatures'],
                 userId: rootState.account?.user?.id || null,
                 teamId: rootState.account?.team?.id || null,
                 teamSlug: rootState.account?.team?.slug || null,
@@ -23,6 +25,7 @@ const getters = {
                 isTrialAccount: rootGetters['account/isTrialAccount'] || false,
                 pageName: null,
                 rawRoute: {},
+                selectedNodes: null,
                 scope: 'ff-app'
             }
         }
@@ -43,8 +46,14 @@ const getters = {
                 : 'ff-app'
 
         const { matched, redirectedFrom, ...rawRoute } = state.route ?? {}
+        let selectedNodes = null
 
+        if (scope === 'immersive' && rootGetters['product/expert/isFfAgent'] && rootState['product/assistant/selectedNodes'].length > 0) {
+            selectedNodes = rootState['product/assistant/selectedNodes']
+        }
         return {
+            assistantVersion: rootGetters['product/assistant/version'],
+            assistantFeatures: rootGetters['product/assistant/assistantFeatures'],
             userId: rootState.account?.user?.id || null,
             teamId: rootState.account?.team?.id || null,
             teamSlug: rootState.account?.team?.slug || null,
@@ -52,9 +61,9 @@ const getters = {
             deviceId: deviceId ?? null,
             applicationId: applicationId ?? null,
             isTrialAccount: rootGetters['account/isTrialAccount'] || false,
-            selectedNodes: rootGetters['product/assistant/immersiveInstance'] ? rootState['product/assistant/selectedNodes'] : [],
             pageName: state.route.name,
             rawRoute,
+            selectedNodes,
             scope
         }
     }
diff --git a/frontend/src/store/modules/product/assistant/index.js b/frontend/src/store/modules/product/assistant/index.js
index 52fafebcdd..bb1f6fe35e 100644
--- a/frontend/src/store/modules/product/assistant/index.js
+++ b/frontend/src/store/modules/product/assistant/index.js
@@ -3,6 +3,7 @@ import messagingService from '../../../../services/messaging.service.js'
 const initialState = () => ({
     version: null,
     supportedActions: {},
+    assistantFeatures: {},
     palette: {},
     scope: {
         target: 'nr-assistant',
@@ -40,6 +41,9 @@ const mutations = {
     SET_SELECTED_NODES (state, selection) {
         state.selectedNodes = selection
     },
+    SET_FEATURES (state, features) {
+        state.assistantFeatures = features
+    },
     RESET (state) {
         const newState = initialState()
         Object.keys(newState).forEach(key => {
@@ -58,6 +62,9 @@ const actions = {
         case payload.data.type === 'assistant-ready':
             commit('SET_VERSION', payload.data.version)
             commit('SET_PALETTE', payload.data.palette)
+            console.log(payload.data.features)
+
+            commit('SET_FEATURES', payload.data.features)
             dispatch('requestSupportedActions')
             dispatch('requestSelectedNodes')
             return await dispatch('requestPalette')

From 9f91e4b0346bac21a4f1902bc43d4fe916e90642 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 29 Jan 2026 13:45:31 +0200
Subject: [PATCH 08/15] Remove debug `console.log` from `assistant-ready`
 action handler

---
 frontend/src/store/modules/product/assistant/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/store/modules/product/assistant/index.js b/frontend/src/store/modules/product/assistant/index.js
index bb1f6fe35e..0b49bbdfe8 100644
--- a/frontend/src/store/modules/product/assistant/index.js
+++ b/frontend/src/store/modules/product/assistant/index.js
@@ -62,7 +62,6 @@ const actions = {
         case payload.data.type === 'assistant-ready':
             commit('SET_VERSION', payload.data.version)
             commit('SET_PALETTE', payload.data.palette)
-            console.log(payload.data.features)
 
             commit('SET_FEATURES', payload.data.features)
             dispatch('requestSupportedActions')

From 0759ea63b66f7394d55aad4c6b82efd7e936d462 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 29 Jan 2026 13:58:26 +0200
Subject: [PATCH 09/15] Add `nodeRedVersion` state and mutation to manage
 Node-RED version in assistant context

---
 frontend/src/store/modules/product/assistant/index.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/store/modules/product/assistant/index.js b/frontend/src/store/modules/product/assistant/index.js
index 0b49bbdfe8..48c6aaa3f2 100644
--- a/frontend/src/store/modules/product/assistant/index.js
+++ b/frontend/src/store/modules/product/assistant/index.js
@@ -10,6 +10,7 @@ const initialState = () => ({
         scope: 'flowfuse-expert',
         source: 'flowfuse-expert'
     },
+    nodeRedVersion: null,
     selectedNodes: []
 })
 
@@ -44,6 +45,9 @@ const mutations = {
     SET_FEATURES (state, features) {
         state.assistantFeatures = features
     },
+    SET_NODE_RED_VERSION (state, version) {
+        state.nodeRedVersion = version
+    },
     RESET (state) {
         const newState = initialState()
         Object.keys(newState).forEach(key => {
@@ -64,6 +68,7 @@ const actions = {
             commit('SET_PALETTE', payload.data.palette)
 
             commit('SET_FEATURES', payload.data.features)
+            commit('SET_NODE_RED_VERSION', payload.data.nodeRedVersion)
             dispatch('requestSupportedActions')
             dispatch('requestSelectedNodes')
             return await dispatch('requestPalette')

From 70c0609eafad26b771c91a184d96ffa3d8b29db8 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 29 Jan 2026 14:47:14 +0200
Subject: [PATCH 10/15] Fix inconsistent state referencing for `selectedNodes`
 in context module

---
 frontend/src/store/modules/context/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/store/modules/context/index.js b/frontend/src/store/modules/context/index.js
index e349c44c6e..9c11e7f1d3 100644
--- a/frontend/src/store/modules/context/index.js
+++ b/frontend/src/store/modules/context/index.js
@@ -48,7 +48,7 @@ const getters = {
         const { matched, redirectedFrom, ...rawRoute } = state.route ?? {}
         let selectedNodes = null
 
-        if (scope === 'immersive' && rootGetters['product/expert/isFfAgent'] && rootState['product/assistant/selectedNodes'].length > 0) {
+        if (scope === 'immersive' && rootGetters['product/expert/isFfAgent'] && rootState.product.assistant.selectedNodes.length > 0) {
             selectedNodes = rootState['product/assistant/selectedNodes']
         }
         return {

From c66236249fad4ff3540a500200ca7a06d467ea04 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 29 Jan 2026 14:49:58 +0200
Subject: [PATCH 11/15] Fix inconsistent state referencing for `selectedNodes`
 in context module pt. 2

---
 frontend/src/store/modules/context/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/store/modules/context/index.js b/frontend/src/store/modules/context/index.js
index 9c11e7f1d3..d82ee9eaec 100644
--- a/frontend/src/store/modules/context/index.js
+++ b/frontend/src/store/modules/context/index.js
@@ -49,7 +49,7 @@ const getters = {
         let selectedNodes = null
 
         if (scope === 'immersive' && rootGetters['product/expert/isFfAgent'] && rootState.product.assistant.selectedNodes.length > 0) {
-            selectedNodes = rootState['product/assistant/selectedNodes']
+            selectedNodes = rootState.product.assistant.selectedNodes
         }
         return {
             assistantVersion: rootGetters['product/assistant/version'],

From 7c6dfd0c0be79759b97c2ec5a3926c9a95fd5a14 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 29 Jan 2026 14:53:38 +0200
Subject: [PATCH 12/15] Fix inconsistent state access for `assistantVersion`,
 `nodeRedVersion`, and `assistantFeatures` in context module

---
 frontend/src/store/modules/context/index.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/store/modules/context/index.js b/frontend/src/store/modules/context/index.js
index d82ee9eaec..14b494092c 100644
--- a/frontend/src/store/modules/context/index.js
+++ b/frontend/src/store/modules/context/index.js
@@ -14,8 +14,9 @@ const getters = {
         // Return safe defaults when route is not yet initialized
         if (!state.route) {
             return {
-                assistantVersion: rootGetters['product/assistant/version'],
-                assistantFeatures: rootGetters['product/assistant/assistantFeatures'],
+                assistantVersion: rootState.product.assistant.version,
+                nodeRedVersion: rootState.product.assistant.nodeRedVersion,
+                assistantFeatures: rootState.product.assistant.assistantFeatures,
                 userId: rootState.account?.user?.id || null,
                 teamId: rootState.account?.team?.id || null,
                 teamSlug: rootState.account?.team?.slug || null,
@@ -52,8 +53,9 @@ const getters = {
             selectedNodes = rootState.product.assistant.selectedNodes
         }
         return {
-            assistantVersion: rootGetters['product/assistant/version'],
-            assistantFeatures: rootGetters['product/assistant/assistantFeatures'],
+            assistantVersion: rootState.product.assistant.version,
+            nodeRedVersion: rootState.product.assistant.nodeRedVersion,
+            assistantFeatures: rootState.product.assistant.assistantFeatures,
             userId: rootState.account?.user?.id || null,
             teamId: rootState.account?.team?.id || null,
             teamSlug: rootState.account?.team?.slug || null,

From 4a375ea39ab4e4659fc1058a373a9d9d520b70d1 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 29 Jan 2026 14:54:10 +0200
Subject: [PATCH 13/15] Refactor `nodeRedVersion` state placement for
 consistency in context module

---
 frontend/src/store/modules/context/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/store/modules/context/index.js b/frontend/src/store/modules/context/index.js
index 14b494092c..4fd17294c0 100644
--- a/frontend/src/store/modules/context/index.js
+++ b/frontend/src/store/modules/context/index.js
@@ -15,7 +15,6 @@ const getters = {
         if (!state.route) {
             return {
                 assistantVersion: rootState.product.assistant.version,
-                nodeRedVersion: rootState.product.assistant.nodeRedVersion,
                 assistantFeatures: rootState.product.assistant.assistantFeatures,
                 userId: rootState.account?.user?.id || null,
                 teamId: rootState.account?.team?.id || null,
@@ -24,6 +23,7 @@ const getters = {
                 deviceId: null,
                 applicationId: null,
                 isTrialAccount: rootGetters['account/isTrialAccount'] || false,
+                nodeRedVersion: rootState.product.assistant.nodeRedVersion,
                 pageName: null,
                 rawRoute: {},
                 selectedNodes: null,
@@ -54,7 +54,6 @@ const getters = {
         }
         return {
             assistantVersion: rootState.product.assistant.version,
-            nodeRedVersion: rootState.product.assistant.nodeRedVersion,
             assistantFeatures: rootState.product.assistant.assistantFeatures,
             userId: rootState.account?.user?.id || null,
             teamId: rootState.account?.team?.id || null,
@@ -64,6 +63,7 @@ const getters = {
             applicationId: applicationId ?? null,
             isTrialAccount: rootGetters['account/isTrialAccount'] || false,
             pageName: state.route.name,
+            nodeRedVersion: rootState.product.assistant.nodeRedVersion,
             rawRoute,
             selectedNodes,
             scope

From 80d4320cdd3d514d760f8529030d3222d1364a1d Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 29 Jan 2026 17:30:56 +0000
Subject: [PATCH 14/15] Add dynamic event subscriptions

---
 .../store/modules/product/assistant/index.js  | 122 +++++++++++++++---
 1 file changed, 107 insertions(+), 15 deletions(-)

diff --git a/frontend/src/store/modules/product/assistant/index.js b/frontend/src/store/modules/product/assistant/index.js
index 48c6aaa3f2..65df4244cf 100644
--- a/frontend/src/store/modules/product/assistant/index.js
+++ b/frontend/src/store/modules/product/assistant/index.js
@@ -1,18 +1,79 @@
 import messagingService from '../../../../services/messaging.service.js'
 
-const initialState = () => ({
-    version: null,
-    supportedActions: {},
-    assistantFeatures: {},
-    palette: {},
-    scope: {
-        target: 'nr-assistant',
-        scope: 'flowfuse-expert',
-        source: 'flowfuse-expert'
-    },
-    nodeRedVersion: null,
-    selectedNodes: []
-})
+const eventsRegistry = {
+    'editor:open': {
+        nodeRedEvent: 'editor:open', // this is the Node-RED event
+        propertyBag: 'editorState',
+        propertyName: 'editorOpen',
+        propertyValue: true
+    },
+    'editor:close': {
+        nodeRedEvent: 'testing stuff matey',
+        propertyBag: 'editorState',
+        propertyName: 'editorOpen',
+        propertyValue: false
+    },
+    'search:open': {
+        nodeRedEvent: 'search:open',
+        propertyBag: 'editorState',
+        propertyName: 'searchOpen',
+        propertyValue: true
+    },
+    'search:close': {
+        nodeRedEvent: 'search:close',
+        propertyBag: 'editorState',
+        propertyName: 'searchOpen',
+        propertyValue: false
+    },
+    'actionList:open': {
+        nodeRedEvent: 'actionList:open',
+        propertyBag: 'editorState',
+        propertyName: 'actionListOpen',
+        propertyValue: true
+    },
+    'actionList:close': {
+        nodeRedEvent: 'actionList:close',
+        propertyBag: 'editorState',
+        propertyName: 'actionListOpen',
+        propertyValue: false
+    },
+    'type-search:open': {
+        nodeRedEvent: 'type-search:open',
+        propertyBag: 'editorState',
+        propertyName: 'typeSearchOpen',
+        propertyValue: true
+    },
+    'type-search:close': {
+        nodeRedEvent: 'type-search:close',
+        propertyBag: 'editorState',
+        propertyName: 'typeSearchOpen',
+        propertyValue: false
+    }
+}
+
+const initialState = () => {
+    const initialEditorState = {}
+    Object.values(eventsRegistry).forEach(eventDetails => {
+        if (eventDetails.propertyBag === 'editorState') {
+            initialEditorState[eventDetails.propertyName] = false // default to false
+        }
+    })
+
+    return {
+        version: null,
+        supportedActions: {},
+        assistantFeatures: {},
+        palette: {},
+        scope: {
+            target: 'nr-assistant',
+            scope: 'flowfuse-expert',
+            source: 'flowfuse-expert'
+        },
+        nodeRedVersion: null,
+        selectedNodes: [],
+        editorState: { ...initialEditorState }
+    }
+}
 
 const meta = {
     persistence: {}
@@ -37,7 +98,7 @@ const mutations = {
         state.supportedActions = supportedActions
     },
     SET_PALETTE (state, palette) {
-        state.palette = palette ?? []
+        state.palette = palette ?? {}
     },
     SET_SELECTED_NODES (state, selection) {
         state.selectedNodes = selection
@@ -48,6 +109,18 @@ const mutations = {
     SET_NODE_RED_VERSION (state, version) {
         state.nodeRedVersion = version
     },
+    SET_REGISTERED_EVENT_PROPERTY (state, { registeredEvent, data }) {
+        const propertyBag = registeredEvent.propertyBag
+        if (!propertyBag || !Object.prototype.hasOwnProperty.call(state, propertyBag)) {
+            return
+        }
+        const propertyName = registeredEvent.propertyName
+        const propertyValue = registeredEvent.propertyValue || false
+        if (!propertyName) {
+            return
+        }
+        state[propertyBag][propertyName] = propertyValue
+    },
     RESET (state) {
         const newState = initialState()
         Object.keys(newState).forEach(key => {
@@ -66,18 +139,25 @@ const actions = {
         case payload.data.type === 'assistant-ready':
             commit('SET_VERSION', payload.data.version)
             commit('SET_PALETTE', payload.data.palette)
-
             commit('SET_FEATURES', payload.data.features)
             commit('SET_NODE_RED_VERSION', payload.data.nodeRedVersion)
             dispatch('requestSupportedActions')
             dispatch('requestSelectedNodes')
+            dispatch('registerEventListeners')
             return await dispatch('requestPalette')
+        case typeof eventsRegistry[payload.data.type] === 'object':
+            return dispatch('setRegisteredEventProperty', {
+                registeredEvent: eventsRegistry[payload.data.type],
+                data: payload.data
+            })
         case payload.data.type === 'get-assistant-version':
             return dispatch('setVersion', payload.data.version)
         case payload.data.type === 'get-supported-actions':
             return dispatch('setSupportedActions', payload.data.supportedActions)
         case payload.data.type === 'set-palette':
             return dispatch('setPalette', payload.data.palette)
+        case payload.data.type === 'set-assistant-features':
+            return dispatch('setFeatures', payload.data.features)
         case payload.data.type === 'set-selection':
             return dispatch('setSelectedNodes', payload.data.selection)
         default:
@@ -96,12 +176,24 @@ const actions = {
     requestSelectedNodes: async ({ dispatch }) => {
         return dispatch('sendMessage', { type: 'get-selection' })
     },
+    registerEventListeners: async ({ dispatch }) => {
+        return dispatch('sendMessage', {
+            type: 'register-event-listeners',
+            params: eventsRegistry
+        })
+    },
+    setRegisteredEventProperty: ({ commit }, { registeredEvent, data }) => {
+        commit('SET_REGISTERED_EVENT_PROPERTY', { registeredEvent, data })
+    },
     setVersion: ({ commit }, version) => {
         commit('SET_VERSION', version)
     },
     setSupportedActions: ({ commit }, supportedActions) => {
         commit('SET_SUPPORTED_ACTIONS', supportedActions)
     },
+    setFeatures: ({ commit }, features) => {
+        commit('SET_FEATURES', features)
+    },
     setPalette: ({ commit }, palette) => {
         commit('SET_PALETTE', palette)
     },

From 2e4e0e4304d2e9d64d335174ca05d027716ed366 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 29 Jan 2026 17:31:19 +0000
Subject: [PATCH 15/15] Show issues and suggestions in chat output

---
 .../components/expert/ExpertChatMessage.vue   | 27 ++++++++++++++++++-
 .../src/store/modules/product/expert/index.js |  9 +++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/expert/ExpertChatMessage.vue b/frontend/src/components/expert/ExpertChatMessage.vue
index d56bfc977b..ecd2354a05 100644
--- a/frontend/src/components/expert/ExpertChatMessage.vue
+++ b/frontend/src/components/expert/ExpertChatMessage.vue
@@ -53,7 +53,19 @@ export default {
                 return this.sanitize(this.message.content)
             }
             // Convert markdown to HTML
-            const html = marked(this.message.content || '', {
+            const content = []
+            content.push(this.message.content || '')
+            if (this.message.resources?.issues?.length > 0) {
+                content.push('\n\n')
+                content.push('**Issues:**')
+                content.push(this.message.resources.issues.map(issue => `\n- ${this.sanitize(issue)}`).join(''))
+            }
+            if (this.message.resources?.suggestions?.length > 0) {
+                content.push('\n\n')
+                content.push('**Suggestions:**')
+                content.push(this.message.resources.suggestions.map(suggestion => `\n- ${this.sanitize(suggestion)}`).join(''))
+            }
+            const html = marked(content.join('\n'), {
                 breaks: true,
                 gfm: true
             })
@@ -65,6 +77,18 @@ export default {
                     utm_campaign: 'expert-chat'
                 }
             })
+        },
+        issues () {
+            return this.resources.issues
+        },
+        suggestions () {
+            return this.resources.suggestions
+        },
+        hasIssues () {
+            return (this.resources.issues && this.resources.issues.length > 0)
+        },
+        hasSuggestions () {
+            return (this.resources.suggestions && this.resources.suggestions.length > 0)
         }
     }
 }
@@ -149,6 +173,7 @@ export default {
     :deep(ul), :deep(ol) {
         margin: 0.5rem 0;
         padding-left: 1.5rem;
+        list-style: square;
     }
 
     :deep(li) {
diff --git a/frontend/src/store/modules/product/expert/index.js b/frontend/src/store/modules/product/expert/index.js
index 8be3d4d512..2d5bb98a61 100644
--- a/frontend/src/store/modules/product/expert/index.js
+++ b/frontend/src/store/modules/product/expert/index.js
@@ -447,6 +447,15 @@ const actions = {
                         content: item.title || 'Resources',
                         timestamp: Date.now()
                     })
+                } else if (item.kind === 'chat' && ((Array.isArray(item.issues) && item.issues.length > 0) || (Array.isArray(item.suggestions) && item.suggestions.length > 0))) {
+                    // Add chat message with issues and suggestions
+                    commit('ADD_MESSAGE', {
+                        type: 'ai',
+                        kind: 'chat',
+                        resources: item,
+                        content: item.content || 'Response',
+                        timestamp: Date.now()
+                    })
                 } else if (item.kind === 'chat') {
                     // Add chat message with streaming effect
                     await dispatch('streamMessage', item.content)