feat(expert): grouped clarifying questions UI + render robustness

frontend/src/components/expert/components/ExpertChatInput.vue

@@ -17,6 +17,39 @@
             </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">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"
+                            :usesLinks="false"
+                            :visually-hide-title="true"
+                            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>
         <div class="input-wrapper" :class="{ 'focused': isTextareaFocused }">
@@ -65,6 +98,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 +114,8 @@ export default {
     components: {
         CapabilitiesSelector,
         ContextSelector,
-        ResizeBar
+        ResizeBar,
+        ToggleButtonGroup
     },
     inject: {
         togglePinWithWidth: {
@@ -123,8 +158,39 @@ export default {
             'isInsightsAgent',
             'hasSelectedCapabilities',
             'hasMessages',
-            'isWaitingForResponse'
+            'isWaitingForResponse',
+            'pendingInput',
+            'questionCadence',
+            'planMode'
         ]),
+        questionCadenceButtons () {
+            return [
+                { title: 'All at once', value: 'all' },
+                { title: 'One at a time', value: 'one' }
+            ]
+        },
+        questionCadenceWrapper: {
+            get () {
+                return this.questionCadence
+            },
+            set (value) {
+                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
@@ -148,6 +214,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 +235,7 @@ export default {
     },
     methods: {
         ...mapActions(useProductAssistantStore, ['resetContextSelection']),
-        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'handleMessageResponse']),
+        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'handleMessageResponse', 'setPendingInput', 'setQuestionCadence', 'setPlanMode']),
         async handleSend () {
             if (!this.canSend) return
 
@@ -232,6 +309,7 @@ export default {
 .right-buttons {
     display: flex;
     gap: 0.5rem;
+    align-items: center;
 }
 
 button {
@@ -350,3 +428,42 @@ 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);
+    min-width: 16rem;
+
+    .expert-settings-menu__group {
+        display: flex;
+        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 {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        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>

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,