From 2d01ecfc53cb94abe3735b8490caa6b5228f5bc7 Mon Sep 17 00:00:00 2001
From: andypalmi <andrea@flowfuse.com>
Date: Wed, 17 Jun 2026 17:37:42 +0200
Subject: [PATCH 1/5] feat(expert): grouped clarifying questions UI (#407)

Replace the flat quick-replies renderer with QuestionsList, which renders
1-4 grouped clarifying questions, each with 2-4 options. Single-select
questions show radio indicators, multi-select show checkboxes, with a
Select one / Select all that apply hint. A Send button (enabled once
every question is answered) submits the composed reply; a pencil button
sends it to the input for editing first.

- New QuestionsList.vue (themed with FlowFuse accent tokens)
- AnswerWrapper wired to render questions and handle submit/edit
- pendingInput store state + setPendingInput action for edit-first flow
- ExpertChatInput watches pendingInput to prefill the textarea
---
 .../expert/components/ExpertChatInput.vue     |  16 +-
 .../messages/components/AnswerWrapper.vue     |  34 +-
 .../components/resources/QuestionsList.vue    | 304 ++++++++++++++++++
 frontend/src/stores/product-expert.js         |   4 +
 4 files changed, 354 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/expert/components/messages/components/resources/QuestionsList.vue

diff --git a/frontend/src/components/expert/components/ExpertChatInput.vue b/frontend/src/components/expert/components/ExpertChatInput.vue
index 5d165ee52c..e9941d8e4d 100644
--- a/frontend/src/components/expert/components/ExpertChatInput.vue
+++ b/frontend/src/components/expert/components/ExpertChatInput.vue
@@ -123,7 +123,8 @@ export default {
             'isInsightsAgent',
             'hasSelectedCapabilities',
             'hasMessages',
-            'isWaitingForResponse'
+            'isWaitingForResponse',
+            'pendingInput'
         ]),
         isInputDisabled () {
             if (this.isSessionExpired) return true
@@ -148,6 +149,17 @@ export default {
             return this.isImmersiveDevice || this.isImmersiveInstance
         }
     },
+    watch: {
+        pendingInput (text) {
+            if (text) {
+                this.inputText = text
+                this.setPendingInput('')
+                this.$nextTick(() => {
+                    this.$refs.textarea.focus()
+                })
+            }
+        }
+    },
     mounted () {
         this.bindResizer({
             component: this.$refs.resizeTarget,
@@ -158,7 +170,7 @@ export default {
     },
     methods: {
         ...mapActions(useProductAssistantStore, ['resetContextSelection']),
-        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'handleMessageResponse']),
+        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'handleMessageResponse', 'setPendingInput']),
         async handleSend () {
             if (!this.canSend) return
 
diff --git a/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue b/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
index ce26544b8c..9530bf0fda 100644
--- a/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
+++ b/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
@@ -66,6 +66,17 @@
             :should-stream="shouldStream"
             @streaming-complete="onComponentComplete('suggestions-list')"
         />
+
+        <questions-list
+            v-if="shouldShowQuestionsList"
+            :questions="answer.questions"
+            :disabled="isWaitingForResponse"
+            :should-stream="shouldStream"
+            class="mb-3"
+            @select="onQuestionsSubmit"
+            @edit="onQuestionsEdit"
+            @streaming-complete="onComponentComplete('questions-list')"
+        />
     </message-bubble>
 </template>
 
@@ -82,6 +93,7 @@ import FlowsList from './resources/FlowsList.vue'
 import GuideStepsList from './resources/GuideStepsList.vue'
 import IssuesList from './resources/IssuesList.vue'
 import PackagesList from './resources/PackagesList.vue'
+import QuestionsList from './resources/QuestionsList.vue'
 import ResourcesList from './resources/ResourcesList.vue'
 import RichContent from './resources/RichContent.vue'
 import SuggestionsList from './resources/SuggestionsList.vue'
@@ -98,6 +110,7 @@ export default {
         FlowsList,
         AnswerBadge,
         ResourcesList,
+        QuestionsList,
         GuideStepsList,
         MessageBubble,
         GuideHeader,
@@ -126,7 +139,7 @@ export default {
     },
     computed: {
         ...mapState(useProductAssistantStore, ['supportedActions']),
-        ...mapState(useProductExpertStore, ['agentMode']),
+        ...mapState(useProductExpertStore, ['agentMode', 'isWaitingForResponse']),
         hasGuideHeader () {
             // chat answers contain generic titles, they don't need to be displayed
             return !!(this.answer.title && !this.isChatAnswer)
@@ -152,6 +165,9 @@ export default {
         hasPlainContent () {
             return this.answer.content && this.answer.content.length > 0
         },
+        hasQuestions () {
+            return Array.isArray(this.answer.questions) && this.answer.questions.length > 0
+        },
         isChatAnswer () {
             return !Object.hasOwnProperty.call(this.answer, 'kind') || this.answer.kind === 'chat'
         },
@@ -215,6 +231,13 @@ export default {
             if (this.componentStreamingOrder.indexOf(key) === 0) return true
             return this.streamedComponents.length >= this.componentStreamingOrder.indexOf(key)
         },
+        shouldShowQuestionsList () {
+            const key = 'questions-list'
+            if (!this.componentStreamingOrder.includes(key)) return false
+            if (!this.hasQuestions) return false
+            if (this.componentStreamingOrder.indexOf(key) === 0) return true
+            return this.streamedComponents.length >= this.componentStreamingOrder.indexOf(key)
+        },
         shouldStream () {
             return !this.answer._streamed
         }
@@ -250,7 +273,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions(useProductExpertStore, ['updateAnswerStreamedState']),
+        ...mapActions(useProductExpertStore, ['updateAnswerStreamedState', 'handleQuery', 'setPendingInput']),
         buildStreamingOrder () {
             // order matters
             // this is where the decision of the streaming order of components is decided
@@ -263,12 +286,19 @@ export default {
             if (this.hasNodePackages) this.componentStreamingOrder.push('packages-list')
             if (this.hasIssues) this.componentStreamingOrder.push('issues-list')
             if (this.hasSuggestions) this.componentStreamingOrder.push('suggestions-list')
+            if (this.hasQuestions) this.componentStreamingOrder.push('questions-list')
         },
         async onComponentComplete (key) {
             if (!this.shouldStream) await this.waitFor(200)
 
             this.streamedComponents.push(key)
         },
+        onQuestionsSubmit (text) {
+            this.handleQuery({ query: text })
+        },
+        onQuestionsEdit (text) {
+            this.setPendingInput(text)
+        },
         handleClick (e) {
             const target = e.target
             // - Must be in the immersive editor
diff --git a/frontend/src/components/expert/components/messages/components/resources/QuestionsList.vue b/frontend/src/components/expert/components/messages/components/resources/QuestionsList.vue
new file mode 100644
index 0000000000..00a0daf5a1
--- /dev/null
+++ b/frontend/src/components/expert/components/messages/components/resources/QuestionsList.vue
@@ -0,0 +1,304 @@
+<template>
+    <div v-if="questions.length" class="expert-questions">
+        <div v-for="(q, qIndex) in questions" :key="qIndex" class="question-block">
+            <div class="question-head">
+                <span v-if="q.header" class="question-header">{{ q.header }}</span>
+                <h4 class="question-title">{{ q.question }}</h4>
+                <span class="question-hint">{{ q.multiSelect ? 'Select all that apply' : 'Select one' }}</span>
+            </div>
+            <div class="options-grid">
+                <button
+                    v-for="(opt, oIndex) in q.options"
+                    :key="oIndex"
+                    type="button"
+                    class="option-btn"
+                    :class="{ selected: isSelected(qIndex, opt.label), 'is-multi': q.multiSelect }"
+                    :disabled="disabled"
+                    :title="optionTooltip(opt)"
+                    @click="toggle(qIndex, opt.label, q.multiSelect)"
+                >
+                    <span class="option-label">
+                        <span
+                            class="option-indicator"
+                            :class="{ 'is-multi': q.multiSelect, checked: isSelected(qIndex, opt.label) }"
+                            aria-hidden="true"
+                        >
+                            <CheckIcon v-if="q.multiSelect && isSelected(qIndex, opt.label)" class="indicator-check" />
+                        </span>
+                        <span class="option-label-text">{{ opt.label }}</span>
+                    </span>
+                    <span v-if="opt.description" class="option-description">{{ opt.description }}</span>
+                </button>
+            </div>
+        </div>
+        <div class="questions-actions">
+            <ff-button
+                kind="primary"
+                size="small"
+                :disabled="disabled || !allAnswered"
+                @click="$emit('select', compose())"
+            >
+                Send
+            </ff-button>
+            <button
+                class="questions-edit"
+                :disabled="disabled || !allAnswered"
+                title="Edit before sending"
+                @click="$emit('edit', compose())"
+            >
+                <PencilSquareIcon />
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { CheckIcon, PencilSquareIcon } from '@heroicons/vue/20/solid'
+
+export default {
+    name: 'QuestionsList',
+    components: { CheckIcon, PencilSquareIcon },
+    props: {
+        questions: {
+            type: Array,
+            required: true
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        shouldStream: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['select', 'edit', 'streaming-complete'],
+    data () {
+        return {
+            // one array of selected option labels per question
+            selections: this.questions.map(() => [])
+        }
+    },
+    computed: {
+        allAnswered () {
+            return this.questions.every((q, i) => (this.selections[i] || []).length > 0)
+        }
+    },
+    mounted () {
+        // questions are interactive cards, not streamed text; signal completion
+        // so the AnswerWrapper streaming order can advance.
+        this.$nextTick(() => this.$emit('streaming-complete'))
+    },
+    methods: {
+        isSelected (qIndex, label) {
+            return (this.selections[qIndex] || []).includes(label)
+        },
+        toggle (qIndex, label, multiSelect) {
+            const current = this.selections[qIndex] || []
+            let next
+            if (multiSelect) {
+                next = current.includes(label)
+                    ? current.filter(l => l !== label)
+                    : [...current, label]
+            } else {
+                next = current.includes(label) ? [] : [label]
+            }
+            this.selections.splice(qIndex, 1, next)
+        },
+        optionTooltip (opt) {
+            return opt.description ? `${opt.label}\n${opt.description}` : opt.label
+        },
+        compose () {
+            // single question with a single answer: send just the label (natural short reply)
+            if (this.questions.length === 1 && (this.selections[0] || []).length === 1) {
+                return this.selections[0][0]
+            }
+            // otherwise send one "question: answer(s)" line per question
+            return this.questions
+                .map((q, i) => `${q.question} ${(this.selections[i] || []).join(', ')}`)
+                .join('\n')
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.expert-questions {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.question-block {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.question-head {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.question-header {
+    align-self: flex-start;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--ff-color-text-subtle);
+    background: var(--ff-color-bg-surface);
+    border: 1px solid var(--ff-color-border);
+    border-radius: 4px;
+    padding: 1px 6px;
+}
+
+.question-title {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--ff-color-text-strong);
+    margin: 0;
+}
+
+.question-hint {
+    font-size: 0.75rem;
+    font-style: italic;
+    color: var(--ff-color-text-subtle);
+}
+
+.options-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.option-btn {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    align-items: flex-start;
+    width: 100%;
+    text-align: left;
+    padding: 6px 10px;
+    min-height: 32px;
+    border: 1px solid var(--ff-color-border);
+    border-radius: 4px;
+    background: transparent;
+    color: var(--ff-color-text-strong);
+    cursor: pointer;
+    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
+
+    &:hover:not(:disabled) {
+        background: var(--ff-color-bg-surface);
+    }
+
+    &.selected {
+        border-color: var(--ff-color-accent);
+        background: var(--ff-color-accent-surface);
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+.option-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    width: 100%;
+}
+
+.option-indicator {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid var(--ff-color-border);
+    border-radius: 50%; // circular = single-select (radio)
+    background: transparent;
+    transition: border-color 0.15s, background-color 0.15s;
+
+    &.is-multi {
+        border-radius: 4px; // square = multi-select (checkbox)
+    }
+
+    &.checked {
+        border-color: var(--ff-color-accent);
+    }
+
+    // single-select selected: filled inner dot
+    &:not(.is-multi).checked::after {
+        content: '';
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--ff-color-accent);
+    }
+
+    // multi-select selected: solid fill behind the checkmark
+    &.is-multi.checked {
+        background: var(--ff-color-accent);
+    }
+}
+
+.indicator-check {
+    width: 12px;
+    height: 12px;
+    color: var(--ff-color-text-on-brand);
+}
+
+.option-description {
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    opacity: 0.7;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    max-width: 100%;
+}
+
+.questions-actions {
+    display: flex;
+    align-items: stretch;
+    gap: 4px;
+}
+
+.questions-edit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    flex-shrink: 0;
+    border: 1px solid var(--ff-color-border);
+    border-radius: 4px;
+    background: transparent;
+    color: var(--ff-color-text-subtle);
+    cursor: pointer;
+    transition: color 0.15s, background-color 0.15s;
+
+    svg {
+        width: 14px;
+        height: 14px;
+    }
+
+    &:hover:not(:disabled) {
+        color: var(--ff-color-text-strong);
+        background: var(--ff-color-bg-surface);
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+</style>
diff --git a/frontend/src/stores/product-expert.js b/frontend/src/stores/product-expert.js
index a1925a0ed6..8ef8f24847 100644
--- a/frontend/src/stores/product-expert.js
+++ b/frontend/src/stores/product-expert.js
@@ -30,6 +30,7 @@ export const useProductExpertStore = defineStore('product-expert', {
         loadingVariant: SUPPORT_AGENT,
         shouldWakeUpAssistant: false,
         inFlightUpdates: [],
+        pendingInput: '',
         _seenTransactionIds: new Map()
     }),
     getters: {
@@ -176,6 +177,9 @@ export const useProductExpertStore = defineStore('product-expert', {
                     .then(() => { this.loadingVariant = this.agentMode })
             }
         },
+        setPendingInput (text) {
+            this.pendingInput = text
+        },
         async handleQuery ({ query }) {
             const agentStore = this._agentStore
 

From 7675e56434ab53982dde3a11599c874350e7c951 Mon Sep 17 00:00:00 2001
From: andypalmi <andrea@flowfuse.com>
Date: Thu, 18 Jun 2026 11:49:31 +0200
Subject: [PATCH 2/5] fix(expert): contain render errors per-section and fix
 resource card crash

Add ErrorBoundary component and wrap each answer section so a failure in one section (e.g. a malformed resource) degrades only that section instead of blanking the whole message. Guard the optional streamable chain in StandardResourceCard that previously threw on null.
---
 .../expert/components/messages/AiMessage.vue  |  17 +-
 .../messages/components/AnswerWrapper.vue     | 145 ++++++++++--------
 .../messages/components/ErrorBoundary.vue     |  39 +++++
 .../resource-cards/StandardResourceCard.vue   |   2 +-
 4 files changed, 129 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/components/expert/components/messages/components/ErrorBoundary.vue

diff --git a/frontend/src/components/expert/components/messages/AiMessage.vue b/frontend/src/components/expert/components/messages/AiMessage.vue
index 0fc8817324..2169233b5c 100644
--- a/frontend/src/components/expert/components/messages/AiMessage.vue
+++ b/frontend/src/components/expert/components/messages/AiMessage.vue
@@ -1,18 +1,23 @@
 <template>
     <div class="flex flex-col gap-3">
         <tool-calls v-if="toolCalls" :message="toolCalls" />
-        <answer-wrapper
+        <error-boundary
             v-for="(fAnswer, key) in visibleItems"
             :key="slugify(`${fAnswer.kind}-${fAnswer.title}-${fAnswer.summary}-${fAnswer._uuid}`)"
-            :message-uuid="_uuid"
-            :answer="fAnswer"
-            @streaming-complete="setSubItemStreamedState(key)"
-        />
+            @failed="setSubItemStreamedState(key)"
+        >
+            <answer-wrapper
+                :message-uuid="_uuid"
+                :answer="fAnswer"
+                @streaming-complete="setSubItemStreamedState(key)"
+            />
+        </error-boundary>
     </div>
 </template>
 
 <script>
 import AnswerWrapper from './components/AnswerWrapper.vue'
+import ErrorBoundary from './components/ErrorBoundary.vue'
 
 import ToolCalls from './components/ToolCalls.vue'
 
@@ -21,7 +26,7 @@ import { slugify } from '@/composables/strings/String.js'
 
 export default {
     name: 'AiMessage',
-    components: { ToolCalls, AnswerWrapper },
+    components: { ToolCalls, AnswerWrapper, ErrorBoundary },
     props: {
         query: {
             type: String,
diff --git a/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue b/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
index 9530bf0fda..fb584c46af 100644
--- a/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
+++ b/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
@@ -2,81 +2,90 @@
     <message-bubble ref="messageBubble" type="ai">
         <answer-badge v-if="!isChatAnswer" :kind="answer.kind" />
 
-        <rich-content
-            v-if="shouldShowRichContent"
-            :content="answer.content"
-            :message-uuid="messageUuid"
-            :answer-uuid="answer._uuid"
-            :should-stream="shouldStream"
-            class="mb-3"
-            @streaming-complete="onComponentComplete('rich-content')"
-        />
+        <error-boundary v-if="shouldShowRichContent" @failed="onComponentComplete('rich-content')">
+            <rich-content
+                :content="answer.content"
+                :message-uuid="messageUuid"
+                :answer-uuid="answer._uuid"
+                :should-stream="shouldStream"
+                class="mb-3"
+                @streaming-complete="onComponentComplete('rich-content')"
+            />
+        </error-boundary>
 
-        <guide-header
-            v-if="shouldShowGuideHeader"
-            :title="answer.title"
-            :summary="answer.summary"
-            :should-stream="shouldStream"
-            class="mt-3"
-            @streaming-complete="onComponentComplete('guide-header')"
-        />
+        <error-boundary v-if="shouldShowGuideHeader" @failed="onComponentComplete('guide-header')">
+            <guide-header
+                :title="answer.title"
+                :summary="answer.summary"
+                :should-stream="shouldStream"
+                class="mt-3"
+                @streaming-complete="onComponentComplete('guide-header')"
+            />
+        </error-boundary>
 
-        <guide-steps-list
-            v-if="shouldShowGuideStepList"
-            :steps="answer.steps"
-            :should-stream="shouldStream"
-            class="mb-3"
-            @streaming-complete="onComponentComplete('guide-steps-list')"
-        />
+        <error-boundary v-if="shouldShowGuideStepList" @failed="onComponentComplete('guide-steps-list')">
+            <guide-steps-list
+                :steps="answer.steps"
+                :should-stream="shouldStream"
+                class="mb-3"
+                @streaming-complete="onComponentComplete('guide-steps-list')"
+            />
+        </error-boundary>
 
-        <resources-list
-            v-if="shouldShowResourcesList"
-            :resources="answer.resources"
-            :should-stream="shouldStream"
-            class="mb-3"
-            @streaming-complete="onComponentComplete('resources-list')"
-        />
+        <error-boundary v-if="shouldShowResourcesList" @failed="onComponentComplete('resources-list')">
+            <resources-list
+                :resources="answer.resources"
+                :should-stream="shouldStream"
+                class="mb-3"
+                @streaming-complete="onComponentComplete('resources-list')"
+            />
+        </error-boundary>
 
-        <flows-list
-            v-if="shouldShowFlowsList"
-            :flows="answer.flows"
-            :should-stream="shouldStream"
-            class="mb-3"
-            @streaming-complete="onComponentComplete('flows-list')"
-        />
+        <error-boundary v-if="shouldShowFlowsList" @failed="onComponentComplete('flows-list')">
+            <flows-list
+                :flows="answer.flows"
+                :should-stream="shouldStream"
+                class="mb-3"
+                @streaming-complete="onComponentComplete('flows-list')"
+            />
+        </error-boundary>
 
-        <packages-list
-            v-if="shouldShowPackagesList"
-            :packages="answer.nodePackages"
-            :should-stream="shouldStream"
-            class="mb-3"
-            @streaming-complete="onComponentComplete('packages-list')"
-        />
+        <error-boundary v-if="shouldShowPackagesList" @failed="onComponentComplete('packages-list')">
+            <packages-list
+                :packages="answer.nodePackages"
+                :should-stream="shouldStream"
+                class="mb-3"
+                @streaming-complete="onComponentComplete('packages-list')"
+            />
+        </error-boundary>
 
-        <issues-list
-            v-if="shouldShowIssuesList"
-            :issues="answer.issues"
-            :should-stream="shouldStream"
-            @streaming-complete="onComponentComplete('issues-list')"
-        />
+        <error-boundary v-if="shouldShowIssuesList" @failed="onComponentComplete('issues-list')">
+            <issues-list
+                :issues="answer.issues"
+                :should-stream="shouldStream"
+                @streaming-complete="onComponentComplete('issues-list')"
+            />
+        </error-boundary>
 
-        <suggestions-list
-            v-if="shouldShowSuggestionsList"
-            :suggestions="answer.suggestions"
-            :should-stream="shouldStream"
-            @streaming-complete="onComponentComplete('suggestions-list')"
-        />
+        <error-boundary v-if="shouldShowSuggestionsList" @failed="onComponentComplete('suggestions-list')">
+            <suggestions-list
+                :suggestions="answer.suggestions"
+                :should-stream="shouldStream"
+                @streaming-complete="onComponentComplete('suggestions-list')"
+            />
+        </error-boundary>
 
-        <questions-list
-            v-if="shouldShowQuestionsList"
-            :questions="answer.questions"
-            :disabled="isWaitingForResponse"
-            :should-stream="shouldStream"
-            class="mb-3"
-            @select="onQuestionsSubmit"
-            @edit="onQuestionsEdit"
-            @streaming-complete="onComponentComplete('questions-list')"
-        />
+        <error-boundary v-if="shouldShowQuestionsList" @failed="onComponentComplete('questions-list')">
+            <questions-list
+                :questions="answer.questions"
+                :disabled="isWaitingForResponse"
+                :should-stream="shouldStream"
+                class="mb-3"
+                @select="onQuestionsSubmit"
+                @edit="onQuestionsEdit"
+                @streaming-complete="onComponentComplete('questions-list')"
+            />
+        </error-boundary>
     </message-bubble>
 </template>
 
@@ -87,6 +96,7 @@ import { mapActions, mapState } from 'pinia'
 import useTimerHelper from '../../../../../composables/TimerHelper.js'
 
 import AnswerBadge from './AnswerBadge.vue'
+import ErrorBoundary from './ErrorBoundary.vue'
 import GuideHeader from './GuideHeader.vue'
 import MessageBubble from './MessageBubble.vue'
 import FlowsList from './resources/FlowsList.vue'
@@ -109,6 +119,7 @@ export default {
         PackagesList,
         FlowsList,
         AnswerBadge,
+        ErrorBoundary,
         ResourcesList,
         QuestionsList,
         GuideStepsList,
diff --git a/frontend/src/components/expert/components/messages/components/ErrorBoundary.vue b/frontend/src/components/expert/components/messages/components/ErrorBoundary.vue
new file mode 100644
index 0000000000..5afb1a90b6
--- /dev/null
+++ b/frontend/src/components/expert/components/messages/components/ErrorBoundary.vue
@@ -0,0 +1,39 @@
+<template>
+    <slot v-if="!failed" />
+    <div v-else class="expert-render-error">
+        Part of this response couldn't be displayed.
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ErrorBoundary',
+    emits: ['failed'],
+    data () {
+        return {
+            failed: false
+        }
+    },
+    errorCaptured (err) {
+        // A descendant threw during render/lifecycle (e.g. an answer with a malformed
+        // resource missing its url/metadata). Contain it here so a single bad answer
+        // degrades to a small fallback instead of blanking the entire chat message.
+        // Returning false stops the error from propagating further up the tree.
+        // eslint-disable-next-line no-console
+        console.error('[Expert] render error contained by ErrorBoundary:', err)
+        this.failed = true
+        // Let the streaming list advance even though this answer failed to render,
+        // otherwise the parent would stall waiting for a streaming-complete that never fires.
+        this.$emit('failed')
+        return false
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.expert-render-error {
+    font-size: 0.8125rem;
+    color: var(--ff-color-text-subtle);
+    font-style: italic;
+}
+</style>
diff --git a/frontend/src/components/expert/components/messages/components/resource-cards/StandardResourceCard.vue b/frontend/src/components/expert/components/messages/components/resource-cards/StandardResourceCard.vue
index 11a0f45c01..52fbf44d95 100644
--- a/frontend/src/components/expert/components/messages/components/resource-cards/StandardResourceCard.vue
+++ b/frontend/src/components/expert/components/messages/components/resource-cards/StandardResourceCard.vue
@@ -43,7 +43,7 @@ export default {
     emits: ['streaming-complete'],
     data () {
         return {
-            resourceUrl: this.resource.metadata?.streamable.source || this.resource.streamable.url,
+            resourceUrl: this.resource.metadata?.streamable?.source || this.resource.url?.streamable,
             resourceTitle: { ...this.resource.title },
             resourceMetadataSource: this.resource.metadata?.source
         }

From 545c063262aa613be7017074d48313f0092a91e8 Mon Sep 17 00:00:00 2001
From: andypalmi <andrea@flowfuse.com>
Date: Tue, 23 Jun 2026 16:10:42 +0200
Subject: [PATCH 3/5] feat: add clarifying-question cadence control to Expert

Add an All/One toggle for how the Expert asks clarifying questions,
surfaced via a kebab settings menu in the chat input (visible in both
the app drawer and the immersive editor). The cadence persists to
localStorage and ships in the request context so the agent can ask
every blocking question at once or one at a time.

- product-expert store: questionCadence state, setQuestionCadence action, persisted
- context store: include questionCadence in the expert request context
- ExpertChatInput: kebab menu hosting the cadence toggle
- AnswerWrapper: render questions answers without the guide badge/title
---
 .../expert/components/ExpertChatInput.vue     | 68 ++++++++++++++++++-
 .../messages/components/AnswerWrapper.vue     | 10 ++-
 frontend/src/stores/context.js                |  6 +-
 frontend/src/stores/product-expert.js         | 11 ++-
 4 files changed, 86 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/expert/components/ExpertChatInput.vue b/frontend/src/components/expert/components/ExpertChatInput.vue
index e9941d8e4d..a5e194699a 100644
--- a/frontend/src/components/expert/components/ExpertChatInput.vue
+++ b/frontend/src/components/expert/components/ExpertChatInput.vue
@@ -17,6 +17,23 @@
             </button>
             <div class="right-buttons">
                 <capabilities-selector v-if="isInsightsAgent" />
+                <ff-kebab-menu
+                    v-else
+                    class="expert-settings-menu"
+                    data-el="expert-settings-menu"
+                    :menu-items-attrs="{ class: 'expert-settings-options' }"
+                >
+                    <li class="expert-settings-menu__group">
+                        <span class="expert-settings-menu__heading">Clarifying questions</span>
+                        <toggle-button-group
+                            v-model="questionCadenceWrapper"
+                            :buttons="questionCadenceButtons"
+                            :usesLinks="false"
+                            :visually-hide-title="true"
+                            data-el="expert-question-cadence"
+                        />
+                    </li>
+                </ff-kebab-menu>
             </div>
         </div>
         <div class="input-wrapper" :class="{ 'focused': isTextareaFocused }">
@@ -65,6 +82,7 @@
 import { mapActions, mapState } from 'pinia'
 
 import ResizeBar from '../../ResizeBar.vue'
+import ToggleButtonGroup from '../../elements/ToggleButtonGroup.vue'
 
 import CapabilitiesSelector from './CapabilitiesSelector.vue'
 import ContextSelector from './context-selection/index.vue'
@@ -80,7 +98,8 @@ export default {
     components: {
         CapabilitiesSelector,
         ContextSelector,
-        ResizeBar
+        ResizeBar,
+        ToggleButtonGroup
     },
     inject: {
         togglePinWithWidth: {
@@ -124,8 +143,23 @@ export default {
             'hasSelectedCapabilities',
             'hasMessages',
             'isWaitingForResponse',
-            'pendingInput'
+            'pendingInput',
+            'questionCadence'
         ]),
+        questionCadenceButtons () {
+            return [
+                { title: 'All', value: 'all' },
+                { title: 'One', value: 'one' }
+            ]
+        },
+        questionCadenceWrapper: {
+            get () {
+                return this.questionCadence
+            },
+            set (value) {
+                this.setQuestionCadence(value)
+            }
+        },
         isInputDisabled () {
             if (this.isSessionExpired) return true
             if (this.isWaitingForResponse) return true
@@ -170,7 +204,7 @@ export default {
     },
     methods: {
         ...mapActions(useProductAssistantStore, ['resetContextSelection']),
-        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'handleMessageResponse', 'setPendingInput']),
+        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'handleMessageResponse', 'setPendingInput', 'setQuestionCadence']),
         async handleSend () {
             if (!this.canSend) return
 
@@ -244,6 +278,7 @@ export default {
 .right-buttons {
     display: flex;
     gap: 0.5rem;
+    align-items: center;
 }
 
 button {
@@ -362,3 +397,30 @@ button {
     }
 }
 </style>
+
+<!--
+  Unscoped: the kebab options are teleported to <body>, so scoped selectors cannot reach them.
+  .ff-kebab-options is transparent by design (the surface normally comes from .ff-kebab-item
+  rows); this menu hosts a control instead of items, so it paints the surface itself using the
+  same theme variables, keeping light/dark support without bespoke colours.
+-->
+<style lang="scss">
+.expert-settings-options {
+    background-color: var(--ff-color-bg-app);
+
+    .expert-settings-menu__group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        padding: 0.75rem;
+    }
+
+    .expert-settings-menu__heading {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        opacity: 0.7;
+    }
+}
+</style>
diff --git a/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue b/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
index fb584c46af..023bb4e4d0 100644
--- a/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
+++ b/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
@@ -1,6 +1,6 @@
 <template>
     <message-bubble ref="messageBubble" type="ai">
-        <answer-badge v-if="!isChatAnswer" :kind="answer.kind" />
+        <answer-badge v-if="!isChatAnswer && !isQuestionsAnswer" :kind="answer.kind" />
 
         <error-boundary v-if="shouldShowRichContent" @failed="onComponentComplete('rich-content')">
             <rich-content
@@ -152,8 +152,9 @@ export default {
         ...mapState(useProductAssistantStore, ['supportedActions']),
         ...mapState(useProductExpertStore, ['agentMode', 'isWaitingForResponse']),
         hasGuideHeader () {
-            // chat answers contain generic titles, they don't need to be displayed
-            return !!(this.answer.title && !this.isChatAnswer)
+            // chat answers contain generic titles, they don't need to be displayed.
+            // questions answers carry no guide title either.
+            return !!(this.answer.title && !this.isChatAnswer && !this.isQuestionsAnswer)
         },
         hasGuideSteps () {
             return Object.hasOwnProperty.call(this.answer, 'steps') && this.answer.steps.length > 0
@@ -182,6 +183,9 @@ export default {
         isChatAnswer () {
             return !Object.hasOwnProperty.call(this.answer, 'kind') || this.answer.kind === 'chat'
         },
+        isQuestionsAnswer () {
+            return this.answer.kind === 'questions'
+        },
         isEditorContext () {
             // In editor context, the route name includes 'editor'
             return this.$route?.name?.includes('editor') || false
diff --git a/frontend/src/stores/context.js b/frontend/src/stores/context.js
index cc89ea8c69..c29925a01e 100644
--- a/frontend/src/stores/context.js
+++ b/frontend/src/stores/context.js
@@ -57,7 +57,8 @@ export const useContextStore = defineStore('context', {
                     pageName: null,
                     rawRoute: {},
                     selectedNodes: null,
-                    scope: 'ff-app'
+                    scope: 'ff-app',
+                    questionCadence: useProductExpertStore().questionCadence
                 }
             }
 
@@ -106,7 +107,8 @@ export const useContextStore = defineStore('context', {
                 nodeRedVersion: assistantStore.nodeRedVersion,
                 rawRoute,
                 selectedNodes,
-                scope
+                scope,
+                questionCadence: useProductExpertStore().questionCadence
             }
         }
     },
diff --git a/frontend/src/stores/product-expert.js b/frontend/src/stores/product-expert.js
index 8ef8f24847..1aea56c449 100644
--- a/frontend/src/stores/product-expert.js
+++ b/frontend/src/stores/product-expert.js
@@ -29,6 +29,7 @@ export const useProductExpertStore = defineStore('product-expert', {
         agentMode: SUPPORT_AGENT, // support-agent or insights-agent
         loadingVariant: SUPPORT_AGENT,
         shouldWakeUpAssistant: false,
+        questionCadence: 'all', // 'all' = ask every clarifying question at once, 'one' = one at a time
         inFlightUpdates: [],
         pendingInput: '',
         _seenTransactionIds: new Map()
@@ -503,6 +504,14 @@ export const useProductExpertStore = defineStore('product-expert', {
             this.agentMode = mode
             this.loadingVariant = mode
         },
+        /**
+         * Sets how clarifying questions are asked: all at once or one at a time.
+         * @param {'all' | 'one'} cadence
+         */
+        setQuestionCadence (cadence) {
+            if (!['all', 'one'].includes(cadence)) return
+            this.questionCadence = cadence
+        },
         /**
          * Adds a system message to the application's message store.
          *
@@ -1067,7 +1076,7 @@ export const useProductExpertStore = defineStore('product-expert', {
         }
     },
     persist: {
-        pick: ['shouldWakeUpAssistant'],
+        pick: ['shouldWakeUpAssistant', 'questionCadence'],
         storage: localStorage
     }
 })

From dcb7d54659c297af1d9f17333fa4038204d273bd Mon Sep 17 00:00:00 2001
From: andypalmi <andrea@flowfuse.com>
Date: Tue, 23 Jun 2026 16:18:29 +0200
Subject: [PATCH 4/5] fix(expert): improve cadence menu labels and description

Use plain language so the setting is self-explanatory without prior
context: heading "Follow-up questions", inline description, and
button labels "All at once" / "One at a time". Set min-width on the
kebab panel so the description wraps instead of clipping.
---
 .../expert/components/ExpertChatInput.vue       | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/expert/components/ExpertChatInput.vue b/frontend/src/components/expert/components/ExpertChatInput.vue
index a5e194699a..d79ee5f936 100644
--- a/frontend/src/components/expert/components/ExpertChatInput.vue
+++ b/frontend/src/components/expert/components/ExpertChatInput.vue
@@ -24,7 +24,10 @@
                     :menu-items-attrs="{ class: 'expert-settings-options' }"
                 >
                     <li class="expert-settings-menu__group">
-                        <span class="expert-settings-menu__heading">Clarifying questions</span>
+                        <span class="expert-settings-menu__heading">Follow-up questions</span>
+                        <p class="expert-settings-menu__description">
+                            When a request needs more detail, choose how the Expert asks for it.
+                        </p>
                         <toggle-button-group
                             v-model="questionCadenceWrapper"
                             :buttons="questionCadenceButtons"
@@ -148,8 +151,8 @@ export default {
         ]),
         questionCadenceButtons () {
             return [
-                { title: 'All', value: 'all' },
-                { title: 'One', value: 'one' }
+                { title: 'All at once', value: 'all' },
+                { title: 'One at a time', value: 'one' }
             ]
         },
         questionCadenceWrapper: {
@@ -407,6 +410,7 @@ button {
 <style lang="scss">
 .expert-settings-options {
     background-color: var(--ff-color-bg-app);
+    min-width: 16rem;
 
     .expert-settings-menu__group {
         display: flex;
@@ -422,5 +426,12 @@ button {
         letter-spacing: 0.04em;
         opacity: 0.7;
     }
+
+    .expert-settings-menu__description {
+        margin: 0;
+        font-size: 0.75rem;
+        line-height: 1.4;
+        opacity: 0.7;
+    }
 }
 </style>

From 1745d817af2efa9438882645491efdad28e0952f Mon Sep 17 00:00:00 2001
From: andypalmi <andrea@flowfuse.com>
Date: Tue, 23 Jun 2026 16:29:28 +0200
Subject: [PATCH 5/5] feat(expert): add plan mode toggle to Expert settings
 menu

Add an Off/On toggle for plan mode in the kebab settings menu,
alongside the follow-up questions cadence control. When enabled,
the Expert will create a plan before making changes. The setting
persists to localStorage and ships in the request context.
---
 .../expert/components/ExpertChatInput.vue     | 36 +++++++++++++++++--
 frontend/src/stores/context.js                |  6 ++--
 frontend/src/stores/product-expert.js         |  6 +++-
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/expert/components/ExpertChatInput.vue b/frontend/src/components/expert/components/ExpertChatInput.vue
index d79ee5f936..f349c20f8d 100644
--- a/frontend/src/components/expert/components/ExpertChatInput.vue
+++ b/frontend/src/components/expert/components/ExpertChatInput.vue
@@ -36,6 +36,19 @@
                             data-el="expert-question-cadence"
                         />
                     </li>
+                    <li class="expert-settings-menu__group">
+                        <span class="expert-settings-menu__heading">Plan mode</span>
+                        <p class="expert-settings-menu__description">
+                            Create a plan before making changes.
+                        </p>
+                        <toggle-button-group
+                            v-model="planModeWrapper"
+                            :buttons="planModeButtons"
+                            :usesLinks="false"
+                            :visually-hide-title="true"
+                            data-el="expert-plan-mode"
+                        />
+                    </li>
                 </ff-kebab-menu>
             </div>
         </div>
@@ -147,7 +160,8 @@ export default {
             'hasMessages',
             'isWaitingForResponse',
             'pendingInput',
-            'questionCadence'
+            'questionCadence',
+            'planMode'
         ]),
         questionCadenceButtons () {
             return [
@@ -163,6 +177,20 @@ export default {
                 this.setQuestionCadence(value)
             }
         },
+        planModeButtons () {
+            return [
+                { title: 'Off', value: 'off' },
+                { title: 'On', value: 'on' }
+            ]
+        },
+        planModeWrapper: {
+            get () {
+                return this.planMode ? 'on' : 'off'
+            },
+            set (value) {
+                this.setPlanMode(value === 'on')
+            }
+        },
         isInputDisabled () {
             if (this.isSessionExpired) return true
             if (this.isWaitingForResponse) return true
@@ -207,7 +235,7 @@ export default {
     },
     methods: {
         ...mapActions(useProductAssistantStore, ['resetContextSelection']),
-        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'handleMessageResponse', 'setPendingInput', 'setQuestionCadence']),
+        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'handleMessageResponse', 'setPendingInput', 'setQuestionCadence', 'setPlanMode']),
         async handleSend () {
             if (!this.canSend) return
 
@@ -417,6 +445,10 @@ button {
         flex-direction: column;
         gap: 0.5rem;
         padding: 0.75rem;
+
+        + .expert-settings-menu__group {
+            border-top: 1px solid var(--ff-color-border);
+        }
     }
 
     .expert-settings-menu__heading {
diff --git a/frontend/src/stores/context.js b/frontend/src/stores/context.js
index c29925a01e..d22eee5f9f 100644
--- a/frontend/src/stores/context.js
+++ b/frontend/src/stores/context.js
@@ -58,7 +58,8 @@ export const useContextStore = defineStore('context', {
                     rawRoute: {},
                     selectedNodes: null,
                     scope: 'ff-app',
-                    questionCadence: useProductExpertStore().questionCadence
+                    questionCadence: useProductExpertStore().questionCadence,
+                    planMode: useProductExpertStore().planMode
                 }
             }
 
@@ -108,7 +109,8 @@ export const useContextStore = defineStore('context', {
                 rawRoute,
                 selectedNodes,
                 scope,
-                questionCadence: useProductExpertStore().questionCadence
+                questionCadence: useProductExpertStore().questionCadence,
+                planMode: useProductExpertStore().planMode
             }
         }
     },
diff --git a/frontend/src/stores/product-expert.js b/frontend/src/stores/product-expert.js
index 1aea56c449..1a3a5a2cf2 100644
--- a/frontend/src/stores/product-expert.js
+++ b/frontend/src/stores/product-expert.js
@@ -30,6 +30,7 @@ export const useProductExpertStore = defineStore('product-expert', {
         loadingVariant: SUPPORT_AGENT,
         shouldWakeUpAssistant: false,
         questionCadence: 'all', // 'all' = ask every clarifying question at once, 'one' = one at a time
+        planMode: false,
         inFlightUpdates: [],
         pendingInput: '',
         _seenTransactionIds: new Map()
@@ -512,6 +513,9 @@ export const useProductExpertStore = defineStore('product-expert', {
             if (!['all', 'one'].includes(cadence)) return
             this.questionCadence = cadence
         },
+        setPlanMode (enabled) {
+            this.planMode = !!enabled
+        },
         /**
          * Adds a system message to the application's message store.
          *
@@ -1076,7 +1080,7 @@ export const useProductExpertStore = defineStore('product-expert', {
         }
     },
     persist: {
-        pick: ['shouldWakeUpAssistant', 'questionCadence'],
+        pick: ['shouldWakeUpAssistant', 'questionCadence', 'planMode'],
         storage: localStorage
     }
 })