From 16dc17df4481ba1a380666d96a972e0fa4262fea Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Mon, 7 Sep 2026 17:36:42 +0300
Subject: [PATCH 1/3] [8381] Add the onboarding surface variant to the expert
 components

---
 frontend/src/components/expert/Expert.vue     |  15 +-
 .../expert/components/ExpertChatInput.vue     |  13 +-
 .../expert/components/ExpertMessages.vue      |  28 ++-
 .../messages/CollapsedQuestionTurn.vue        | 188 ++++++++++++++++++
 .../expert/composables/collapseTranscript.js  |  71 +++++++
 .../expert/CollapsedQuestionTurn.spec.js      | 106 ++++++++++
 .../expert/collapseTranscript.spec.js         |  98 +++++++++
 7 files changed, 512 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/expert/components/messages/CollapsedQuestionTurn.vue
 create mode 100644 frontend/src/components/expert/composables/collapseTranscript.js
 create mode 100644 test/unit/frontend/components/expert/CollapsedQuestionTurn.spec.js
 create mode 100644 test/unit/frontend/components/expert/collapseTranscript.spec.js

diff --git a/frontend/src/components/expert/Expert.vue b/frontend/src/components/expert/Expert.vue
index ae82a1b764..20c430ac92 100644
--- a/frontend/src/components/expert/Expert.vue
+++ b/frontend/src/components/expert/Expert.vue
@@ -8,7 +8,7 @@
             :class="{ 'has-mode-switcher': isInsightsModeEnabled && isEditorContext }"
             @scroll="handleScroll"
         >
-            <info-banner />
+            <info-banner v-if="!isOnboardingSurface" />
 
             <expert-messages @resizing="scrollToBottom" />
 
@@ -50,6 +50,10 @@ export default {
         togglePinWithWidth: {
             from: 'togglePinWithWidth',
             default: () => () => {} // No-op function when not provided
+        },
+        expertSurface: {
+            from: 'expert-surface',
+            default: 'drawer'
         }
     },
     props: {
@@ -85,6 +89,11 @@ export default {
             // In editor context, the route name includes 'editor'
             return this.$route?.name?.includes('editor') || false
         },
+        isOnboardingSurface () {
+            // In onboarding, the Expert opens the conversation itself, so the
+            // canned welcome message and the support banner stay out of it.
+            return this.expertSurface === 'onboarding'
+        },
         isInsightsModeEnabled () {
             return !!this.featuresCheck?.isExpertInsightsFeatureEnabled
         },
@@ -109,7 +118,9 @@ export default {
                 if (this.isInsightsAgent) {
                     await this.getCapabilities()
                 }
-                this.addWelcomeMessageIfNeeded()
+                if (!this.isOnboardingSurface) {
+                    this.addWelcomeMessageIfNeeded()
+                }
             }
         },
         'instance.meta.state': {
diff --git a/frontend/src/components/expert/components/ExpertChatInput.vue b/frontend/src/components/expert/components/ExpertChatInput.vue
index a485e64d76..3a8f519ab8 100644
--- a/frontend/src/components/expert/components/ExpertChatInput.vue
+++ b/frontend/src/components/expert/components/ExpertChatInput.vue
@@ -5,8 +5,10 @@
             direction="horizontal"
             @mousedown="onStartResize"
         />
-        <!-- Action buttons row -->
-        <div class="action-buttons">
+        <!-- Action buttons row. Hidden during onboarding: the conversation is
+             the whole flow there, so Start over, Plan mode and settings only
+             offer ways to derail it. -->
+        <div v-if="expertSurface !== 'onboarding'" class="action-buttons">
             <button
                 type="button"
                 class="btn-start-over"
@@ -146,6 +148,10 @@ export default {
         togglePinWithWidth: {
             from: 'togglePinWithWidth',
             default: () => () => {} // No-op function when not provided
+        },
+        expertSurface: {
+            from: 'expert-surface',
+            default: 'drawer'
         }
     },
     emits: ['send', 'stop'],
@@ -228,6 +234,9 @@ export default {
             if (this.requestingPlanChange) {
                 return 'Describe a change to the plan, or paste an edited version'
             }
+            if (this.expertSurface === 'onboarding') {
+                return 'Or just tell me in your own words'
+            }
             return this.isInsightsAgent
                 ? 'Tell us what you want to know about'
                 : 'Tell us what you need help with'
diff --git a/frontend/src/components/expert/components/ExpertMessages.vue b/frontend/src/components/expert/components/ExpertMessages.vue
index 76ffe3b574..c686d8ec9f 100644
--- a/frontend/src/components/expert/components/ExpertMessages.vue
+++ b/frontend/src/components/expert/components/ExpertMessages.vue
@@ -1,8 +1,9 @@
 <template>
     <div ref="messagesWrapper" class="messages-wrapper">
         <ul class="flex flex-col gap-3">
-            <li v-for="message in messages" :key="message._uuid" class="flex flex-col gap-3">
-                <component :is="messageTypes[message._type]" v-if="messageTypes[message._type]" v-bind="{...message}" />
+            <li v-for="entry in renderList" :key="entryKey(entry)" class="flex flex-col gap-3">
+                <collapsed-question-turn v-if="entry.kind === 'folded-turn'" :turn="entry" />
+                <component :is="messageTypes[entry.message._type]" v-else-if="messageTypes[entry.message._type]" v-bind="{...entry.message}" />
             </li>
             <li v-if="isWaitingForResponse">
                 <expert-loading-indicator />
@@ -16,9 +17,12 @@
 import { mapState } from 'pinia'
 import { markRaw } from 'vue'
 
+import { buildCollapsedTranscript } from '../composables/collapseTranscript.js'
+
 import ExpertLoadingIndicator from './ExpertLoadingIndicator.vue'
 
 import AiMessage from './messages/AiMessage.vue'
+import CollapsedQuestionTurn from './messages/CollapsedQuestionTurn.vue'
 import HumanMessage from './messages/HumanMessage.vue'
 import SystemMessage from './messages/SystemMessage.vue'
 
@@ -27,7 +31,13 @@ import { useProductExpertStore } from '@/stores/product-expert.js'
 
 export default {
     name: 'ExpertMessages',
-    components: { ExpertLoadingIndicator },
+    components: { CollapsedQuestionTurn, ExpertLoadingIndicator },
+    inject: {
+        expertSurface: {
+            from: 'expert-surface',
+            default: 'drawer'
+        }
+    },
     emits: ['resizing'],
     data () {
         return {
@@ -43,6 +53,15 @@ export default {
                 human: markRaw(HumanMessage),
                 system: markRaw(SystemMessage)
             }
+        },
+        renderList () {
+            // The onboarding surface folds answered question turns into quiet
+            // lines (the collapsing-transcript treatment); the drawer renders
+            // the transcript as-is.
+            if (this.expertSurface === 'onboarding') {
+                return buildCollapsedTranscript(this.messages)
+            }
+            return this.messages.map(message => ({ kind: 'message', message }))
         }
     },
     mounted () {
@@ -54,6 +73,9 @@ export default {
         window.removeEventListener('keydown', this.onKeyDown)
     },
     methods: {
+        entryKey (entry) {
+            return entry.kind === 'folded-turn' ? entry.questionsMessage._uuid : entry.message._uuid
+        },
         onKeyDown (e) {
             if (e.altKey && e.shiftKey && e.key.toLowerCase() === 'd') {
                 e.preventDefault()
diff --git a/frontend/src/components/expert/components/messages/CollapsedQuestionTurn.vue b/frontend/src/components/expert/components/messages/CollapsedQuestionTurn.vue
new file mode 100644
index 0000000000..ddf7b86ace
--- /dev/null
+++ b/frontend/src/components/expert/components/messages/CollapsedQuestionTurn.vue
@@ -0,0 +1,188 @@
+<template>
+    <div class="collapsed-question-turn" :class="{ expanded }">
+        <template v-if="!expanded">
+            <div
+                v-for="(entry, index) in turn.entries"
+                :key="index"
+                class="folded-question"
+                data-el="folded-question"
+            >
+                <button
+                    type="button"
+                    class="question-text"
+                    data-action="toggle-turn"
+                    title="Show the full question card"
+                    @click="expanded = true"
+                >
+                    {{ entry.question }}
+                </button>
+                <div class="folded-answers">
+                    <button
+                        v-for="(chip, chipIndex) in chipsFor(entry)"
+                        :key="chipIndex"
+                        type="button"
+                        class="answer-chip"
+                        data-action="edit-answer"
+                        title="Load this answer into the composer to correct it"
+                        @click="editAnswer(entry)"
+                    >
+                        <span class="chip-label">{{ chip }}</span>
+                        <span class="chip-remove" aria-hidden="true">&times;</span>
+                    </button>
+                    <span v-if="chipsFor(entry).length === 0" class="skipped-marker">Skipped</span>
+                </div>
+            </div>
+        </template>
+        <div v-else class="expanded-messages">
+            <button
+                type="button"
+                class="question-text"
+                data-action="toggle-turn"
+                title="Collapse this step"
+                @click="expanded = false"
+            >
+                Collapse this step
+            </button>
+            <AiMessage v-bind="{ ...turn.questionsMessage }" />
+            <HumanMessage v-if="turn.replyMessage" v-bind="{ ...turn.replyMessage }" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapActions } from 'pinia'
+
+import AiMessage from './AiMessage.vue'
+import HumanMessage from './HumanMessage.vue'
+
+import { useProductExpertStore } from '@/stores/product-expert.js'
+
+export default {
+    name: 'CollapsedQuestionTurn',
+    components: {
+        AiMessage,
+        HumanMessage
+    },
+    props: {
+        turn: {
+            type: Object,
+            required: true
+        }
+    },
+    data () {
+        return {
+            expanded: false
+        }
+    },
+    computed: {
+        // A hand-typed or edited reply doesn't match the question lines, so
+        // every entry resolves to null; fall back to the raw reply text once.
+        hasMatchedAnswers () {
+            return this.turn.entries.some(entry => entry.answer !== null)
+        }
+    },
+    methods: {
+        ...mapActions(useProductExpertStore, ['setPendingInput']),
+        // One chip per pick: QuestionsList composes multi-select answers as a
+        // comma-separated list, so split for display only. Editing any chip
+        // loads the whole answer line, since a resend replaces the full turn.
+        chipsFor (entry) {
+            if (entry.answer) {
+                return entry.answer.split(', ')
+            }
+            if (!this.hasMatchedAnswers && this.turn.replyMessage?.content) {
+                return [this.turn.replyMessage.content]
+            }
+            return []
+        },
+        editAnswer (entry) {
+            if (entry.answer) {
+                this.setPendingInput(`${entry.question} ${entry.answer}`)
+            } else if (this.turn.replyMessage?.content) {
+                this.setPendingInput(this.turn.replyMessage.content)
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.collapsed-question-turn {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.folded-question {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.125rem 0 0.125rem 0.875rem;
+    border-left: 2px solid var(--ff-color-border);
+}
+
+.question-text {
+    font-size: 0.8125rem;
+    color: var(--ff-color-text-subtle);
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+        color: var(--ff-color-text-strong);
+    }
+}
+
+.folded-answers {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.answer-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--ff-color-text-strong);
+    background: var(--ff-color-bg-surface);
+    border: 1px solid var(--ff-color-border);
+    border-radius: 9999px;
+    padding: 0.25rem 0.75rem;
+    cursor: pointer;
+    max-width: 100%;
+
+    &:hover {
+        border-color: var(--ff-color-accent);
+    }
+}
+
+.chip-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 22rem;
+}
+
+.chip-remove {
+    font-weight: 400;
+    color: var(--ff-color-text-subtle);
+    line-height: 1;
+}
+
+.skipped-marker {
+    font-size: 0.875rem;
+    font-style: italic;
+    color: var(--ff-color-text-subtle);
+}
+
+.expanded-messages {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding-left: 0.875rem;
+    border-left: 2px solid var(--ff-color-accent);
+}
+</style>
diff --git a/frontend/src/components/expert/composables/collapseTranscript.js b/frontend/src/components/expert/composables/collapseTranscript.js
new file mode 100644
index 0000000000..ea7ef15bf4
--- /dev/null
+++ b/frontend/src/components/expert/composables/collapseTranscript.js
@@ -0,0 +1,71 @@
+/**
+ * Transcript folding for the onboarding surface's collapsing-transcript
+ * treatment. Pure functions over the store's message list: no state.
+ *
+ * A "questions turn" is an AI message carrying a questions answer, followed
+ * (usually) by the human reply QuestionsList composed for it. Once the turn
+ * has passed, the pair folds into one entry so the transcript stays quiet.
+ */
+
+function getQuestions (message) {
+    if (message._type !== 'ai' || !Array.isArray(message.answer)) {
+        return []
+    }
+    return message.answer
+        .filter(answer => Array.isArray(answer.questions) && answer.questions.length > 0)
+        .flatMap(answer => answer.questions)
+}
+
+/**
+ * Match each question to its line in the composed reply. QuestionsList sends
+ * one "<question> <answers>" line per question; anything that doesn't match
+ * (a hand-typed reply, an edited answer) resolves to null and the caller
+ * falls back to showing the raw reply.
+ */
+function extractAnswers (questions, replyContent) {
+    const lines = (replyContent || '').split('\n')
+    return questions.map(q => {
+        const line = lines.find(l => l.startsWith(q.question))
+        if (!line) {
+            return { question: q.question, answer: null }
+        }
+        const answer = line.slice(q.question.length).trim()
+        return { question: q.question, answer: answer.length > 0 ? answer : null }
+    })
+}
+
+/**
+ * Build the render list for a collapsing transcript.
+ *
+ * Returns entries of two kinds:
+ *  - { kind: 'message', message }: render as-is
+ *  - { kind: 'folded-turn', questionsMessage, replyMessage, entries }:
+ *    a past questions turn folded to one line per question. replyMessage is
+ *    the absorbed human reply, or null if the user never answered.
+ */
+function buildCollapsedTranscript (messages) {
+    const result = []
+    for (let i = 0; i < messages.length; i++) {
+        const message = messages[i]
+        const questions = getQuestions(message)
+        const isLast = i === messages.length - 1
+        if (questions.length === 0 || isLast) {
+            result.push({ kind: 'message', message })
+            continue
+        }
+        const next = messages[i + 1]
+        const replyMessage = next && next._type === 'human' ? next : null
+        if (replyMessage) {
+            i++
+        }
+        result.push({
+            kind: 'folded-turn',
+            questionsMessage: message,
+            replyMessage,
+            entries: extractAnswers(questions, replyMessage?.content)
+        })
+    }
+    return result
+}
+
+export { buildCollapsedTranscript }
diff --git a/test/unit/frontend/components/expert/CollapsedQuestionTurn.spec.js b/test/unit/frontend/components/expert/CollapsedQuestionTurn.spec.js
new file mode 100644
index 0000000000..14d55df2fc
--- /dev/null
+++ b/test/unit/frontend/components/expert/CollapsedQuestionTurn.spec.js
@@ -0,0 +1,106 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => {
+    return {
+        expertStore: { setPendingInput: vi.fn() }
+    }
+})
+
+vi.mock('@/stores/product-expert.js', () => ({
+    useProductExpertStore: () => mocks.expertStore
+}))
+// The real message components pull in the full expert tree; the fold only
+// needs placeholders it can expand into.
+vi.mock('@/components/expert/components/messages/AiMessage.vue', () => ({
+    default: { name: 'AiMessage', template: '<div data-stub="ai-message" />' }
+}))
+vi.mock('@/components/expert/components/messages/HumanMessage.vue', () => ({
+    default: { name: 'HumanMessage', template: '<div data-stub="human-message" />' }
+}))
+
+// imported after mocks so vi.mock hoisting resolves correctly
+import CollapsedQuestionTurn from '../../../../../frontend/src/components/expert/components/messages/CollapsedQuestionTurn.vue'
+
+function answeredTurn () {
+    return {
+        kind: 'folded-turn',
+        questionsMessage: { _uuid: 'a1', _type: 'ai', answer: [] },
+        replyMessage: { _uuid: 'h1', _type: 'human', content: 'Q1? Sensors' },
+        entries: [
+            { question: 'Q1?', answer: 'Sensors' },
+            { question: 'Q2?', answer: 'A dashboard' }
+        ]
+    }
+}
+
+function mountTurn (turn = answeredTurn()) {
+    return mount(CollapsedQuestionTurn, {
+        props: { turn }
+    })
+}
+
+describe('CollapsedQuestionTurn', () => {
+    beforeEach(() => {
+        mocks.expertStore.setPendingInput.mockClear()
+    })
+
+    test('renders one quiet line per question with the pick as a chip', () => {
+        const wrapper = mountTurn()
+        const rows = wrapper.findAll('[data-el="folded-question"]')
+        expect(rows.length).toBe(2)
+        expect(rows[0].text()).toContain('Q1?')
+        expect(rows[0].find('[data-action="edit-answer"]').text()).toContain('Sensors')
+        expect(rows[1].find('[data-action="edit-answer"]').text()).toContain('A dashboard')
+    })
+
+    test('clicking a chip loads the answer into the composer for correction', async () => {
+        const wrapper = mountTurn()
+        await wrapper.findAll('[data-action="edit-answer"]')[0].trigger('click')
+        expect(mocks.expertStore.setPendingInput).toHaveBeenCalledWith('Q1? Sensors')
+    })
+
+    test('an unanswered turn shows a skipped marker and no chips', () => {
+        const turn = answeredTurn()
+        turn.replyMessage = null
+        turn.entries = [{ question: 'Q1?', answer: null }]
+        const wrapper = mountTurn(turn)
+        expect(wrapper.findAll('[data-action="edit-answer"]').length).toBe(0)
+        expect(wrapper.find('[data-el="folded-question"]').text()).toContain('Skipped')
+    })
+
+    test('a multi-select answer renders one chip per pick', async () => {
+        const turn = answeredTurn()
+        turn.entries = [{ question: 'Q1?', answer: 'Allen-Bradley PLC, over Ethernet' }]
+        const wrapper = mountTurn(turn)
+        const chips = wrapper.findAll('[data-action="edit-answer"]')
+        expect(chips.length).toBe(2)
+        expect(chips[0].text()).toContain('Allen-Bradley PLC')
+        expect(chips[1].text()).toContain('over Ethernet')
+
+        // editing any pick loads the whole answer line for correction
+        await chips[1].trigger('click')
+        expect(mocks.expertStore.setPendingInput).toHaveBeenCalledWith('Q1? Allen-Bradley PLC, over Ethernet')
+    })
+
+    test('a free-form reply keeps the raw text as the chip', () => {
+        const turn = answeredTurn()
+        turn.replyMessage = { _uuid: 'h1', _type: 'human', content: 'typed by hand' }
+        turn.entries = [{ question: 'Q1?', answer: null }]
+        const wrapper = mountTurn(turn)
+        const chip = wrapper.find('[data-action="edit-answer"]')
+        expect(chip.text()).toContain('typed by hand')
+    })
+
+    test('expands to the original messages and folds back', async () => {
+        const wrapper = mountTurn()
+        expect(wrapper.find('[data-stub="ai-message"]').exists()).toBe(false)
+
+        await wrapper.find('[data-action="toggle-turn"]').trigger('click')
+        expect(wrapper.find('[data-stub="ai-message"]').exists()).toBe(true)
+        expect(wrapper.find('[data-stub="human-message"]').exists()).toBe(true)
+
+        await wrapper.find('[data-action="toggle-turn"]').trigger('click')
+        expect(wrapper.find('[data-stub="ai-message"]').exists()).toBe(false)
+    })
+})
diff --git a/test/unit/frontend/components/expert/collapseTranscript.spec.js b/test/unit/frontend/components/expert/collapseTranscript.spec.js
new file mode 100644
index 0000000000..6d53f49f0e
--- /dev/null
+++ b/test/unit/frontend/components/expert/collapseTranscript.spec.js
@@ -0,0 +1,98 @@
+import { describe, expect, test } from 'vitest'
+
+import { buildCollapsedTranscript } from '../../../../../frontend/src/components/expert/composables/collapseTranscript.js'
+
+function aiMessage (uuid, answer) {
+    return { _uuid: uuid, _type: 'ai', answer }
+}
+
+function humanMessage (uuid, content) {
+    return { _uuid: uuid, _type: 'human', content }
+}
+
+function questionsAnswer (questions) {
+    return { kind: 'questions', questions }
+}
+
+describe('buildCollapsedTranscript', () => {
+    test('passes plain messages through untouched', () => {
+        const messages = [
+            humanMessage('h1', 'hello'),
+            aiMessage('a1', [{ kind: 'chat', content: 'hi there' }])
+        ]
+        const result = buildCollapsedTranscript(messages)
+        expect(result).toEqual([
+            { kind: 'message', message: messages[0] },
+            { kind: 'message', message: messages[1] }
+        ])
+    })
+
+    test('folds an answered questions turn and absorbs the reply', () => {
+        const questions = [
+            { question: 'Where is your data coming from?', options: [] },
+            { question: 'What do you want to see at the end?', options: [] }
+        ]
+        const messages = [
+            aiMessage('a1', [questionsAnswer(questions)]),
+            humanMessage('h1', 'Where is your data coming from? Sensors\nWhat do you want to see at the end? A dashboard'),
+            aiMessage('a2', [{ kind: 'chat', content: 'great' }])
+        ]
+        const result = buildCollapsedTranscript(messages)
+        expect(result.length).toBe(2)
+        expect(result[0].kind).toBe('folded-turn')
+        expect(result[0].questionsMessage).toBe(messages[0])
+        expect(result[0].replyMessage).toBe(messages[1])
+        expect(result[0].entries).toEqual([
+            { question: 'Where is your data coming from?', answer: 'Sensors' },
+            { question: 'What do you want to see at the end?', answer: 'A dashboard' }
+        ])
+        expect(result[1]).toEqual({ kind: 'message', message: messages[2] })
+    })
+
+    test('does not fold the latest questions message', () => {
+        const messages = [
+            humanMessage('h1', 'hello'),
+            aiMessage('a1', [questionsAnswer([{ question: 'Q?', options: [] }])])
+        ]
+        const result = buildCollapsedTranscript(messages)
+        expect(result).toEqual([
+            { kind: 'message', message: messages[0] },
+            { kind: 'message', message: messages[1] }
+        ])
+    })
+
+    test('folds an unanswered stale questions message without absorbing anything', () => {
+        const messages = [
+            aiMessage('a1', [questionsAnswer([{ question: 'Q?', options: [] }])]),
+            aiMessage('a2', [{ kind: 'chat', content: 'moving on' }])
+        ]
+        const result = buildCollapsedTranscript(messages)
+        expect(result.length).toBe(2)
+        expect(result[0].kind).toBe('folded-turn')
+        expect(result[0].replyMessage).toBe(null)
+        expect(result[0].entries).toEqual([{ question: 'Q?', answer: null }])
+        expect(result[1]).toEqual({ kind: 'message', message: messages[1] })
+    })
+
+    test('keeps the raw reply when answers cannot be matched to questions', () => {
+        const messages = [
+            aiMessage('a1', [questionsAnswer([{ question: 'Q?', options: [] }])]),
+            humanMessage('h1', 'a free-form answer typed by hand'),
+            aiMessage('a2', [{ kind: 'chat', content: 'ok' }])
+        ]
+        const result = buildCollapsedTranscript(messages)
+        expect(result[0].kind).toBe('folded-turn')
+        expect(result[0].entries).toEqual([{ question: 'Q?', answer: null }])
+        expect(result[0].replyMessage).toBe(messages[1])
+    })
+
+    test('never folds non-questions ai messages', () => {
+        const messages = [
+            aiMessage('a1', [{ kind: 'chat', content: 'welcome' }]),
+            humanMessage('h1', 'hello'),
+            aiMessage('a2', [{ kind: 'chat', content: 'hi' }])
+        ]
+        const result = buildCollapsedTranscript(messages)
+        expect(result.every(entry => entry.kind === 'message')).toBe(true)
+    })
+})

From 6084b9981cf7974a732a1352cd7b12d183208e0b Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 10 Sep 2026 14:56:14 +0300
Subject: [PATCH 2/3] [8381] Drop the explanatory comments on
 CollapsedQuestionTurn

---
 .../expert/components/messages/CollapsedQuestionTurn.vue     | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/src/components/expert/components/messages/CollapsedQuestionTurn.vue b/frontend/src/components/expert/components/messages/CollapsedQuestionTurn.vue
index ddf7b86ace..63636b87bb 100644
--- a/frontend/src/components/expert/components/messages/CollapsedQuestionTurn.vue
+++ b/frontend/src/components/expert/components/messages/CollapsedQuestionTurn.vue
@@ -75,17 +75,12 @@ export default {
         }
     },
     computed: {
-        // A hand-typed or edited reply doesn't match the question lines, so
-        // every entry resolves to null; fall back to the raw reply text once.
         hasMatchedAnswers () {
             return this.turn.entries.some(entry => entry.answer !== null)
         }
     },
     methods: {
         ...mapActions(useProductExpertStore, ['setPendingInput']),
-        // One chip per pick: QuestionsList composes multi-select answers as a
-        // comma-separated list, so split for display only. Editing any chip
-        // loads the whole answer line, since a resend replaces the full turn.
         chipsFor (entry) {
             if (entry.answer) {
                 return entry.answer.split(', ')

From 302223c9b1d9c1dcad771194c1bc0cc5c28a3b59 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 10 Sep 2026 15:59:06 +0300
Subject: [PATCH 3/3] [8381] Move collapseTranscript into the composables
 namespace

It had invented a composables folder inside the component tree. Composables
live under frontend/src/composables, mirroring the path of whatever they are
namespaced to, the way InstanceFormHelper sits under
composables/Components/multi-step-forms/instance.

The spec moves to test/unit/frontend/composables, flat, matching how the
existing composable specs sit there regardless of source subdirectory.

Also drops the explanatory comments on the onboarding branches in
ExpertChatInput and ExpertMessages.
---
 .../src/components/expert/components/ExpertChatInput.vue    | 3 ---
 .../src/components/expert/components/ExpertMessages.vue     | 6 ++----
 .../Components/expert}/collapseTranscript.js                | 0
 .../expert => composables}/collapseTranscript.spec.js       | 2 +-
 4 files changed, 3 insertions(+), 8 deletions(-)
 rename frontend/src/{components/expert/composables => composables/Components/expert}/collapseTranscript.js (100%)
 rename test/unit/frontend/{components/expert => composables}/collapseTranscript.spec.js (97%)

diff --git a/frontend/src/components/expert/components/ExpertChatInput.vue b/frontend/src/components/expert/components/ExpertChatInput.vue
index 3a8f519ab8..0d4bade0ea 100644
--- a/frontend/src/components/expert/components/ExpertChatInput.vue
+++ b/frontend/src/components/expert/components/ExpertChatInput.vue
@@ -5,9 +5,6 @@
             direction="horizontal"
             @mousedown="onStartResize"
         />
-        <!-- Action buttons row. Hidden during onboarding: the conversation is
-             the whole flow there, so Start over, Plan mode and settings only
-             offer ways to derail it. -->
         <div v-if="expertSurface !== 'onboarding'" class="action-buttons">
             <button
                 type="button"
diff --git a/frontend/src/components/expert/components/ExpertMessages.vue b/frontend/src/components/expert/components/ExpertMessages.vue
index c686d8ec9f..79071ebd73 100644
--- a/frontend/src/components/expert/components/ExpertMessages.vue
+++ b/frontend/src/components/expert/components/ExpertMessages.vue
@@ -17,7 +17,7 @@
 import { mapState } from 'pinia'
 import { markRaw } from 'vue'
 
-import { buildCollapsedTranscript } from '../composables/collapseTranscript.js'
+import { buildCollapsedTranscript } from '../../../composables/Components/expert/collapseTranscript.js'
 
 import ExpertLoadingIndicator from './ExpertLoadingIndicator.vue'
 
@@ -55,9 +55,7 @@ export default {
             }
         },
         renderList () {
-            // The onboarding surface folds answered question turns into quiet
-            // lines (the collapsing-transcript treatment); the drawer renders
-            // the transcript as-is.
+            // The onboarding surface folds answered question turns into quiet while the drawer renders the transcript as-is.
             if (this.expertSurface === 'onboarding') {
                 return buildCollapsedTranscript(this.messages)
             }
diff --git a/frontend/src/components/expert/composables/collapseTranscript.js b/frontend/src/composables/Components/expert/collapseTranscript.js
similarity index 100%
rename from frontend/src/components/expert/composables/collapseTranscript.js
rename to frontend/src/composables/Components/expert/collapseTranscript.js
diff --git a/test/unit/frontend/components/expert/collapseTranscript.spec.js b/test/unit/frontend/composables/collapseTranscript.spec.js
similarity index 97%
rename from test/unit/frontend/components/expert/collapseTranscript.spec.js
rename to test/unit/frontend/composables/collapseTranscript.spec.js
index 6d53f49f0e..ae63a11f42 100644
--- a/test/unit/frontend/components/expert/collapseTranscript.spec.js
+++ b/test/unit/frontend/composables/collapseTranscript.spec.js
@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest'
 
-import { buildCollapsedTranscript } from '../../../../../frontend/src/components/expert/composables/collapseTranscript.js'
+import { buildCollapsedTranscript } from '../../../../frontend/src/composables/Components/expert/collapseTranscript.js'
 
 function aiMessage (uuid, answer) {
     return { _uuid: uuid, _type: 'ai', answer }