diff --git a/frontend/src/components/JsonViewer.vue b/frontend/src/components/JsonViewer.vue
index ccf055974a..a840de19ef 100644
--- a/frontend/src/components/JsonViewer.vue
+++ b/frontend/src/components/JsonViewer.vue
@@ -3,7 +3,7 @@
         <div v-if="showHeader" class="json-viewer__header">
             <ff-button
                 v-if="collapsible"
-                kind="tertiary"
+                :kind="toggleKind"
                 size="small"
                 class="json-viewer__collapse-toggle"
                 :title="collapsed ? 'Expand' : 'Collapse'"
@@ -67,6 +67,10 @@ export default {
         defaultCollapsed: {
             type: Boolean,
             default: false
+        },
+        toggleKind: {
+            type: String,
+            default: 'tertiary'
         }
     },
     data () {
diff --git a/frontend/src/components/expert/components/ExpertLoadingIndicator.vue b/frontend/src/components/expert/components/ExpertLoadingIndicator.vue
index b4d47e4b4f..f385b83cd3 100644
--- a/frontend/src/components/expert/components/ExpertLoadingIndicator.vue
+++ b/frontend/src/components/expert/components/ExpertLoadingIndicator.vue
@@ -5,7 +5,7 @@
             <div class="loading-dot" />
             <div class="loading-dot" />
         </div>
-        <div v-if="showMessage" class="loading-message">
+        <div v-if="showMessages && showMessage" class="loading-message">
             {{ currentMessage }}
         </div>
     </div>
@@ -20,6 +20,13 @@ import { useProductExpertStore } from '@/stores/product-expert.js'
 
 export default {
     name: 'ExpertLoadingIndicator',
+    props: {
+        // Off once the turn streams its own activity, which says more than these lines.
+        showMessages: {
+            type: Boolean,
+            default: true
+        }
+    },
     data () {
         return {
             showMessage: false,
diff --git a/frontend/src/components/expert/components/ExpertMessages.vue b/frontend/src/components/expert/components/ExpertMessages.vue
index 914c0a2b6c..844c694338 100644
--- a/frontend/src/components/expert/components/ExpertMessages.vue
+++ b/frontend/src/components/expert/components/ExpertMessages.vue
@@ -6,7 +6,7 @@
                 <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 />
+                <expert-loading-indicator :show-messages="!hasStreamedActivity" />
             </li>
         </ul>
     </div>
@@ -48,7 +48,7 @@ export default {
         }
     },
     computed: {
-        ...mapState(useProductExpertStore, ['messages', 'isWaitingForResponse']),
+        ...mapState(useProductExpertStore, ['messages', 'isWaitingForResponse', 'hasStreamedActivity']),
         messageTypes () {
             return {
                 ai: markRaw(AiMessage),
diff --git a/frontend/src/components/expert/components/messages/AiMessage.vue b/frontend/src/components/expert/components/messages/AiMessage.vue
index ba97cf0ee2..39713e5b5f 100644
--- a/frontend/src/components/expert/components/messages/AiMessage.vue
+++ b/frontend/src/components/expert/components/messages/AiMessage.vue
@@ -1,6 +1,10 @@
 <template>
     <div class="flex flex-col gap-3">
-        <tool-calls v-if="toolCalls" :message="toolCalls" />
+        <template v-for="item in activity" :key="item._uuid">
+            <reasoning-block v-if="item.kind === 'reasoning'" :item="item" :message-uuid="_uuid" />
+            <agent-message v-else-if="item.kind === 'message'" :item="item" :message-uuid="_uuid" />
+            <timeline-item v-else :item="item" />
+        </template>
         <answer-wrapper
             v-for="(fAnswer, key) in visibleItems"
             :key="slugify(`${fAnswer.kind}-${fAnswer.title}-${fAnswer.summary}-${fAnswer._uuid}`)"
@@ -13,16 +17,18 @@
 </template>
 
 <script>
+import AgentMessage from './components/AgentMessage.vue'
 import AnswerWrapper from './components/AnswerWrapper.vue'
+import ReasoningBlock from './components/ReasoningBlock.vue'
+import TimelineItem from './components/TimelineItem.vue'
 
-import ToolCalls from './components/ToolCalls.vue'
-
+import { ACTIVITY_KINDS } from '@/composables/Components/expert/streamedActivity.js'
 import useStreamingList from '@/composables/StreamingListHelper.js'
 import { slugify } from '@/composables/strings/String.js'
 
 export default {
     name: 'AiMessage',
-    components: { ToolCalls, AnswerWrapper },
+    components: { AgentMessage, AnswerWrapper, ReasoningBlock, TimelineItem },
     props: {
         query: {
             type: String,
@@ -58,6 +64,12 @@ export default {
             required: true,
             type: Boolean
         },
+        // eslint-disable-next-line vue/prop-name-casing
+        _transactionId: {
+            required: false,
+            type: String,
+            default: null
+        },
         instant: {
             type: Boolean,
             default: false
@@ -69,45 +81,23 @@ export default {
         return { initStreamer, setSubItemStreamedState, visibleItems, items }
     },
     computed: {
-        toolCalls () {
-            // todo we need to reconsider how we serve data to the tool calls component. This is ok for now as it
-            //  only impacts the immediate child component (was hacked out of the expert store)
-            const mcpItems = this.answer.filter(answer => ['mcp_tool', 'mcp_resource', 'mcp_resource_template', 'mcp_prompt'].includes(answer.kind))
-
-            // Handle MCP calls if present - includes tools, resources, and prompts
-            if (mcpItems.length > 0) {
-                const toolCalls = mcpItems.map(item => ({
-                    id: item.toolId,
-                    name: item.toolName,
-                    title: item.toolTitle || item.toolName,
-                    kind: item.kind,
-                    args: item.input,
-                    output: item.output,
-                    durationMs: item.durationMs
-                }))
-
-                // Calculate total duration in seconds
-                const totalDurationMs = mcpItems.reduce((sum, item) => sum + (item.durationMs || 0), 0)
-                const totalDurationSec = (totalDurationMs / 1000).toFixed(2)
-
-                return {
-                    type: 'ai',
-                    kind: 'tool_calls',
-                    toolCalls,
-                    duration: totalDurationSec,
-                    content: `${toolCalls.length} tool call(s)`,
-                    timestamp: Date.now()
-                }
-            }
-
-            return null
+        activity () {
+            return this.answer.filter(answer => ACTIVITY_KINDS.includes(answer.kind))
         },
-        filteredAnswers () {
-            return this.answer.filter(answer => !['mcp_tool', 'mcp_resource', 'mcp_resource_template', 'mcp_prompt'].includes(answer.kind))
+        terminalAnswers () {
+            return this.answer.filter(answer => !ACTIVITY_KINDS.includes(answer.kind))
+        }
+    },
+    watch: {
+        // A streamed bubble mounts holding only activity; the final reply merges in later.
+        terminalAnswers (answers) {
+            if (answers.length > this.visibleItems.length) {
+                this.initStreamer(answers, { shouldStream: !this.instant && !this._streamed })
+            }
         }
     },
     async mounted () {
-        await this.initStreamer(this.filteredAnswers, { shouldStream: !this.instant && !this._streamed })
+        await this.initStreamer(this.terminalAnswers, { shouldStream: !this.instant && !this._streamed })
     },
     methods: { slugify }
 }
diff --git a/frontend/src/components/expert/components/messages/components/AgentMessage.vue b/frontend/src/components/expert/components/messages/components/AgentMessage.vue
new file mode 100644
index 0000000000..e8f72f472d
--- /dev/null
+++ b/frontend/src/components/expert/components/messages/components/AgentMessage.vue
@@ -0,0 +1,37 @@
+<template>
+    <message-bubble type="ai" class="ff-expert-agent-message">
+        <rich-content
+            :content="item.text || ''"
+            :message-uuid="messageUuid"
+            :answer-uuid="item._uuid"
+            :should-stream="false"
+        />
+    </message-bubble>
+</template>
+
+<script>
+import MessageBubble from './MessageBubble.vue'
+import RichContent from './resources/RichContent.vue'
+
+export default {
+    name: 'AgentMessage',
+    components: { MessageBubble, RichContent },
+    props: {
+        item: {
+            type: Object,
+            required: true
+        },
+        messageUuid: {
+            type: String,
+            required: true
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.ff-expert-agent-message {
+    align-self: flex-start;
+    max-width: 90%;
+}
+</style>
diff --git a/frontend/src/components/expert/components/messages/components/CollapsibleSection.vue b/frontend/src/components/expert/components/messages/components/CollapsibleSection.vue
index def6629c2e..9a43b99050 100644
--- a/frontend/src/components/expert/components/messages/components/CollapsibleSection.vue
+++ b/frontend/src/components/expert/components/messages/components/CollapsibleSection.vue
@@ -1,10 +1,22 @@
 <template>
     <div class="ff-collapsible" :class="{ 'is-up': openUp }">
-        <div class="ff-collapsible--header" @click="toggle">
+        <ff-button
+            v-if="collapsible"
+            kind="plain"
+            align="left"
+            class="ff-collapsible--header"
+            :aria-expanded="expanded ? 'true' : 'false'"
+            @click="toggle"
+        >
             <ChevronRightIcon class="ff-collapsible--chevron" :class="{ rotated: expanded }" />
             <slot name="header" />
+        </ff-button>
+        <div v-else class="ff-collapsible--header is-static">
+            <span class="ff-collapsible--chevron" />
+            <slot name="header" />
         </div>
-        <div class="ff-collapsible--content" :class="{ expanded }">
+        <slot name="summary" :expanded="expanded" />
+        <div v-if="collapsible" class="ff-collapsible--content" :class="{ expanded }">
             <div class="ff-collapsible--inner" :inert="!expanded">
                 <slot />
             </div>
@@ -15,9 +27,11 @@
 <script>
 import { ChevronRightIcon } from '@heroicons/vue/20/solid'
 
+import FfButton from '../../../../../ui-components/components/Button.vue'
+
 export default {
     name: 'CollapsibleSection',
-    components: { ChevronRightIcon },
+    components: { ChevronRightIcon, FfButton },
     props: {
         autoOpen: {
             type: Boolean,
@@ -30,6 +44,11 @@ export default {
         openUp: {
             type: Boolean,
             default: false
+        },
+        // Off when there is nothing to expand: no chevron and no toggle.
+        collapsible: {
+            type: Boolean,
+            default: true
         }
     },
     data () {
@@ -66,14 +85,30 @@ export default {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    width: 100%;
     padding: 0.25rem 0;
-    cursor: pointer;
+    text-align: left;
     font-size: 0.875rem;
+    line-height: 1.25rem;
     color: var(--ff-color-text-subtle);
 
     &:hover {
         color: var(--ff-color-text);
     }
+
+    &:focus-visible {
+        outline: 2px solid var(--ff-color-focus);
+        outline-offset: 2px;
+        border-radius: 0.25rem;
+    }
+
+    &.is-static {
+        cursor: default;
+
+        &:hover {
+            color: var(--ff-color-text-subtle);
+        }
+    }
 }
 
 .ff-collapsible--chevron {
diff --git a/frontend/src/components/expert/components/messages/components/ReasoningBlock.vue b/frontend/src/components/expert/components/messages/components/ReasoningBlock.vue
new file mode 100644
index 0000000000..dfbb69bbd6
--- /dev/null
+++ b/frontend/src/components/expert/components/messages/components/ReasoningBlock.vue
@@ -0,0 +1,87 @@
+<template>
+    <collapsible-section class="ff-expert-reasoning">
+        <template #header>
+            <LightBulbIcon class="ff-expert-reasoning--glyph" />
+            <span class="ff-expert-reasoning--label">{{ item.done ? 'Thought' : 'Thinking' }}</span>
+        </template>
+        <template #summary="{ expanded }">
+            <div v-if="preview && !expanded" class="ff-expert-reasoning--preview" :title="preview">{{ preview }}</div>
+        </template>
+        <rich-content
+            class="ff-expert-reasoning--body"
+            :content="item.text || ''"
+            :message-uuid="messageUuid"
+            :answer-uuid="item._uuid"
+            :should-stream="false"
+        />
+    </collapsible-section>
+</template>
+
+<script>
+import { LightBulbIcon } from '@heroicons/vue/20/solid'
+
+import CollapsibleSection from './CollapsibleSection.vue'
+import RichContent from './resources/RichContent.vue'
+
+// Collapsed whether streaming or done, so the block keeps its height while the reasoning
+// arrives. One line under the header shows the latest sentence while streaming and the first
+// once done.
+export default {
+    name: 'ReasoningBlock',
+    components: { CollapsibleSection, LightBulbIcon, RichContent },
+    props: {
+        item: {
+            type: Object,
+            required: true
+        },
+        messageUuid: {
+            type: String,
+            required: true
+        }
+    },
+    computed: {
+        preview () {
+            if (typeof this.item.text !== 'string') return ''
+            const plain = this.item.text.replace(/[*_`#>]/g, '')
+            const sentences = plain.split(/(?<=[.!?])\s+|\n+/).map(s => s.trim()).filter(Boolean)
+            return (this.item.done ? sentences[0] : sentences[sentences.length - 1]) || ''
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.ff-expert-reasoning {
+    max-width: 90%;
+}
+
+.ff-expert-reasoning--glyph {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
+}
+
+.ff-expert-reasoning--label {
+    font-weight: 500;
+    flex-shrink: 0;
+}
+
+.ff-expert-reasoning--preview {
+    padding-left: 1.5rem;
+    font-size: 0.8125rem;
+    color: var(--ff-color-text-subtle);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ff-expert-reasoning--body {
+    display: block;
+    margin-top: 0.25rem;
+    padding-left: 0.75rem;
+    border-left: 2px solid var(--ff-color-border-subtle);
+    color: var(--ff-color-text-subtle);
+    font-size: 0.875rem;
+    line-height: 1.5;
+}
+</style>
diff --git a/frontend/src/components/expert/components/messages/components/TimelineItem.vue b/frontend/src/components/expert/components/messages/components/TimelineItem.vue
new file mode 100644
index 0000000000..9abb9771af
--- /dev/null
+++ b/frontend/src/components/expert/components/messages/components/TimelineItem.vue
@@ -0,0 +1,182 @@
+<template>
+    <collapsible-section class="ff-expert-timeline-item" :auto-open="false" :collapsible="hasBody">
+        <template #header>
+            <WrenchIcon class="ff-expert-timeline-item--glyph" />
+            <span class="ff-expert-timeline-item--name" :title="headline">{{ headline }}</span>
+            <span v-if="failed" class="ff-expert-timeline-item--failed-hint">Failed</span>
+        </template>
+
+        <div class="ff-expert-timeline-item--body">
+            <p v-if="reasonText" class="ff-expert-timeline-item--reason">{{ reasonText }}</p>
+            <p v-if="reasonText" class="ff-expert-timeline-item--tool">{{ title }}</p>
+            <p v-if="failed && errorText" class="ff-expert-timeline-item--error">{{ errorText }}</p>
+            <!-- Dev-only raw tool key, on its own line so it never crowds the reason. -->
+            <div v-if="showRawKey" class="ff-expert-timeline-item--raw-key" :title="kindFull">
+                {{ rawKey }}
+            </div>
+            <!-- Input/output are dev-only today, but render whenever present so a future
+                 flag flip needs no UI change. -->
+            <json-viewer v-if="hasInput" :value="parseJson(item.input)" label="Input" collapsible default-collapsed toggle-kind="plain" />
+            <json-viewer v-if="hasOutput" :value="parseJson(item.output)" label="Output" collapsible default-collapsed toggle-kind="plain" />
+        </div>
+    </collapsible-section>
+</template>
+
+<script>
+import { WrenchIcon } from '@heroicons/vue/20/solid'
+
+import CollapsibleSection from './CollapsibleSection.vue'
+
+import JsonViewer from '@/components/JsonViewer.vue'
+
+// Names that must never surface: empty, the old backend placeholder (still in cached turns),
+// and invoke_* wrappers, bare or behind a server prefix (the wrapper is not the real tool).
+const AUTOMATION_PLACEHOLDER = 'FlowFuse Automation'
+function isUsableName (value) {
+    if (typeof value !== 'string') return false
+    const trimmed = value.trim()
+    if (trimmed === '' || trimmed === AUTOMATION_PLACEHOLDER) return false
+    return !/(^|__)invoke_/.test(trimmed)
+}
+
+export default {
+    name: 'TimelineItem',
+    components: { CollapsibleSection, JsonViewer, WrenchIcon },
+    props: {
+        item: {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        reasonText () {
+            return typeof this.item.reason === 'string' ? this.item.reason.trim() : ''
+        },
+        failed () {
+            return this.item.ok === false
+        },
+        errorText () {
+            return typeof this.item.error === 'string' ? this.item.error.trim() : ''
+        },
+        // First usable name: friendly title, else the tool's own name, else the tool a gateway
+        // wrapper called, else the raw key.
+        title () {
+            const input = this.parseJson(this.item.input)
+            return [this.item.toolTitle, this.item.toolName, input?.tool_name, this.item.toolId].find(isUsableName) || 'Tool call'
+        },
+        // The reason says what the call is for, so it leads on one line; the full reason and
+        // the tool title are in the body.
+        headline () {
+            return this.reasonText || this.title
+        },
+        rawKey () {
+            return this.item.toolId || ''
+        },
+        // Dev-only, and hidden when it would just repeat the visible title.
+        showRawKey () {
+            return this.hasDevData && this.rawKey !== '' && this.rawKey !== this.title
+        },
+        kindFull () {
+            return this.item.kind || 'Unknown'
+        },
+        hasInput () {
+            return this.hasContent(this.item.input)
+        },
+        hasOutput () {
+            return this.hasContent(this.item.output)
+        },
+        hasBody () {
+            return this.reasonText !== '' || (this.failed && this.errorText !== '') || this.showRawKey || this.hasInput || this.hasOutput
+        },
+        // Dev flag alone, not input/output presence - so `showToolIO` can surface I/O to
+        // everyone without leaking the raw key.
+        hasDevData () {
+            return this.item.technical === true
+        }
+    },
+    methods: {
+        hasContent (data) {
+            if (data === null || data === undefined) return false
+            if (Array.isArray(data)) return data.length > 0
+            if (typeof data === 'object') return Object.keys(data).length > 0
+            if (typeof data === 'string') return data.trim() !== ''
+            return true
+        },
+        // A JSON string is shown pretty-printed like an object.
+        parseJson (data) {
+            if (typeof data !== 'string') return data
+            try {
+                return JSON.parse(data)
+            } catch {
+                return data
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.ff-expert-timeline-item {
+    // Align with the approval card.
+    max-width: 90%;
+}
+
+.ff-expert-timeline-item--glyph {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
+}
+
+.ff-expert-timeline-item--name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+    color: var(--ff-color-text);
+}
+
+.ff-expert-timeline-item--failed-hint {
+    font-size: 0.6875rem;
+    color: var(--ff-color-status-error-text);
+    margin-left: auto;
+    white-space: nowrap;
+}
+
+.ff-expert-timeline-item--body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 0.25rem;
+    padding-left: 0.75rem;
+    border-left: 2px solid var(--ff-color-border-subtle);
+}
+
+.ff-expert-timeline-item--reason {
+    margin: 0;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: var(--ff-color-text);
+}
+
+.ff-expert-timeline-item--tool {
+    margin: 0;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: var(--ff-color-text-subtle);
+}
+
+.ff-expert-timeline-item--error {
+    margin: 0;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: var(--ff-color-status-error-text);
+}
+
+.ff-expert-timeline-item--raw-key {
+    font-size: 0.6875rem;
+    color: var(--ff-color-text-subtle);
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+    word-break: break-all;
+}
+</style>
diff --git a/frontend/src/components/expert/components/messages/components/ToolCallItem.vue b/frontend/src/components/expert/components/messages/components/ToolCallItem.vue
deleted file mode 100644
index f4958a6886..0000000000
--- a/frontend/src/components/expert/components/messages/components/ToolCallItem.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<template>
-    <div class="ff-expert-tool-call--item">
-        <div class="ff-expert-tool-call--title">{{ tool.title || tool.name }}</div>
-        <div class="ff-expert-tool-call--name">
-            <div>
-                <span class="ff-expert-tool-call--badge" :title="formatKindFull(tool.kind)">{{ formatKindBadge(tool.kind) }}</span>
-                {{ tool.name }}
-            </div>
-            <span class="ff-expert-tool-call--section-duration">{{ tool.durationMs || 0 }} ms</span>
-        </div>
-        <div v-if="expanded" class="ff-expert-tool-call--details">
-            <!-- Input section (collapsible, expanded by default) -->
-            <div v-if="hasContent(tool.args)" class="ff-expert-tool-call--section">
-                <div
-                    class="ff-expert-tool-call--section-header"
-                    @click.stop="inputExpanded = !inputExpanded"
-                >
-                    <ChevronRightIcon
-                        class="ff-icon-small"
-                        :class="{ 'rotated': inputExpanded }"
-                    />
-                    <span class="ff-expert-tool-call--section-label">Input</span>
-                </div>
-                <div v-if="inputExpanded" class="ff-expert-tool-call--code">
-                    <!-- eslint-disable-next-line vue/no-v-html -->
-                    <pre><code v-html="highlightJson(tool.args)" /></pre>
-                </div>
-            </div>
-            <!-- Output section (collapsible, collapsed by default) -->
-            <div v-if="hasContent(tool.output)" class="ff-expert-tool-call--section">
-                <div
-                    class="ff-expert-tool-call--section-header"
-                    @click.stop="outputExpanded = !outputExpanded"
-                >
-                    <ChevronRightIcon
-                        class="ff-icon-small"
-                        :class="{ 'rotated': outputExpanded }"
-                    />
-                    <span class="ff-expert-tool-call--section-label">Output</span>
-                </div>
-                <div v-if="outputExpanded" class="ff-expert-tool-call--code">
-                    <!-- eslint-disable-next-line vue/no-v-html -->
-                    <pre><code v-html="highlightJson(tool.output)" /></pre>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { ChevronRightIcon } from '@heroicons/vue/20/solid'
-import hljs from 'highlight.js/lib/core'
-import json from 'highlight.js/lib/languages/json'
-
-hljs.registerLanguage('json', json)
-
-export default {
-    name: 'ToolCallItem',
-    components: {
-        ChevronRightIcon
-    },
-    props: {
-        tool: {
-            type: Object,
-            required: true
-        },
-        expanded: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data () {
-        return {
-            inputExpanded: false,
-            outputExpanded: false
-        }
-    },
-    methods: {
-        formatKindBadge (kind) {
-            const badgeMap = {
-                mcp_tool: 'T',
-                mcp_resource: 'R',
-                mcp_resource_template: 'RT',
-                mcp_prompt: 'P'
-            }
-            return badgeMap[kind] || '?'
-        },
-        formatKindFull (kind) {
-            const kindMap = {
-                mcp_tool: 'MCP Tool',
-                mcp_resource: 'MCP Resource',
-                mcp_resource_template: 'MCP Resource Template',
-                mcp_prompt: 'MCP Prompt'
-            }
-            return kindMap[kind] || kind || 'Unknown'
-        },
-        hasContent (data) {
-            if (data === null || data === undefined) return false
-            if (Array.isArray(data)) return data.length > 0
-            if (typeof data === 'object') return Object.keys(data).length > 0
-            if (typeof data === 'string') return data.trim() !== ''
-            return true
-        },
-        highlightJson (data) {
-            let jsonStr
-            if (typeof data === 'string') {
-                try {
-                    jsonStr = JSON.stringify(JSON.parse(data), null, 2)
-                } catch {
-                    jsonStr = data
-                }
-            } else {
-                jsonStr = JSON.stringify(data, null, 2)
-            }
-            return hljs.highlight(jsonStr, { language: 'json' }).value
-        }
-    }
-}
-</script>
-
-<style scoped lang="scss">
-.ff-expert-tool-call--item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-.ff-expert-tool-call--title {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--ff-color-text);
-}
-
-.ff-expert-tool-call--name {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.375rem;
-    font-size: 0.75rem;
-    color: var(--ff-color-text-subtle);
-    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-}
-
-.ff-expert-tool-call--badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 1.25rem;
-    height: 1.125rem;
-    padding: 0 0.25rem;
-    font-size: 0.5625rem;
-    font-weight: 700;
-    color: var(--ff-color-text-deep);
-    background-color: var(--ff-color-bg-emphasis);
-    border-radius: 0.1875rem;
-    flex-shrink: 0;
-    cursor: help;
-}
-
-.ff-expert-tool-call--details {
-    margin-top: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.ff-expert-tool-call--section {
-    border: 1px solid var(--ff-color-border);
-    border-radius: 0.375rem;
-    overflow: hidden;
-}
-
-.ff-expert-tool-call--section-header {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.5rem 0.75rem;
-    background-color: var(--ff-color-bg-app);
-    cursor: pointer;
-    user-select: none;
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--ff-color-text-deep);
-
-    &:hover {
-        background-color: var(--ff-color-bg-surface);
-    }
-
-    .ff-icon-small {
-        width: 0.75rem;
-        height: 0.75rem;
-        color: var(--ff-color-text-subtle);
-        flex-shrink: 0;
-        transition: transform 0.2s ease;
-
-        &.rotated {
-            transform: rotate(90deg);
-        }
-    }
-}
-
-.ff-expert-tool-call--section-label {
-    flex: 1;
-}
-
-.ff-expert-tool-call--section-duration {
-    color: var(--ff-color-text-subtle);
-    font-weight: 400;
-}
-
-.ff-expert-tool-call--code {
-    pre {
-        margin: 0;
-        padding: 0.75rem;
-        background-color: var(--ff-color-bg-surface-raised);
-        border-radius: 0.375rem;
-        overflow-x: auto;
-
-        code {
-            font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-            font-size: 0.8125rem;
-            color: var(--ff-color-text);
-            white-space: pre-wrap;
-            word-break: break-word;
-            border: none;
-            background: transparent;
-            padding: 0;
-        }
-    }
-
-    // When inside a section, remove border-radius top and add border
-    .ff-expert-tool-call--section & {
-        border-top: 1px solid var(--ff-color-border);
-
-        pre {
-            border-radius: 0;
-        }
-    }
-}
-</style>
diff --git a/frontend/src/components/expert/components/messages/components/ToolCalls.vue b/frontend/src/components/expert/components/messages/components/ToolCalls.vue
deleted file mode 100644
index d0d0f95a36..0000000000
--- a/frontend/src/components/expert/components/messages/components/ToolCalls.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-    <div class="ff-expert-tool-call">
-        <div class="ff-expert-tool-call--header" @click="toggleExpanded">
-            <ChevronRightIcon class="ff-icon" :class="{ 'rotated': expanded }" />
-            <span class="ff-expert-tool-call--count">
-                {{ toolCallCount }} tool call{{ toolCallCount > 1 ? 's' : '' }}
-            </span>
-            <span class="ff-expert-tool-call--duration">
-                {{ formattedDuration }} ms
-            </span>
-        </div>
-        <div class="ff-expert-tool-call--body" :class="{ 'is-expanded': expanded }">
-            <ToolCallItem
-                v-for="tool in toolCalls"
-                :key="tool.id"
-                :tool="tool"
-                :expanded="expanded"
-            />
-        </div>
-    </div>
-</template>
-
-<script>
-import { ChevronRightIcon } from '@heroicons/vue/20/solid'
-
-import ToolCallItem from './ToolCallItem.vue'
-
-export default {
-    name: 'ToolCalls',
-    components: {
-        ChevronRightIcon,
-        ToolCallItem
-    },
-    props: {
-        message: {
-            type: Object,
-            required: true,
-            validator: (message) => {
-                return Array.isArray(message.toolCalls)
-            }
-        }
-    },
-    data () {
-        return {
-            expanded: false
-        }
-    },
-    computed: {
-        toolCalls () {
-            return this.message.toolCalls || []
-        },
-        toolCallCount () {
-            return this.toolCalls.length
-        },
-        formattedDuration () {
-            const duration = this.message.duration
-            if (duration === null || duration === undefined) return 0
-            // Duration is stored as seconds (string or number), convert to ms
-            const seconds = typeof duration === 'string' ? parseFloat(duration) : duration
-            return Math.round(seconds * 1000)
-        }
-    },
-    methods: {
-        toggleExpanded () {
-            this.expanded = !this.expanded
-        }
-    }
-}
-</script>
-
-<style scoped lang="scss">
-.ff-expert-tool-call {
-    background-color: var(--ff-color-bg-surface);
-    border: 1px solid var(--ff-color-border);
-    border-radius: 0.5rem 0.5rem 0.5rem 0;
-    overflow: hidden;
-    max-width: 90%;
-}
-
-.ff-expert-tool-call--header {
-    display: flex;
-    align-items: center;
-    padding: 0.75rem 1rem;
-    gap: 0.5rem;
-    background-color: var(--ff-color-bg-app);
-    cursor: pointer;
-    user-select: none;
-
-    &:hover {
-        background-color: var(--ff-color-bg-surface);
-    }
-
-    .ff-icon {
-        width: 1rem;
-        height: 1rem;
-        color: var(--ff-color-text-subtle);
-        flex-shrink: 0;
-        transition: transform 0.2s ease;
-
-        &.rotated {
-            transform: rotate(90deg);
-        }
-    }
-}
-
-.ff-expert-tool-call--count {
-    font-size: 1rem;
-    font-weight: 500;
-    color: var(--ff-color-text);
-    flex: 1;
-}
-
-.ff-expert-tool-call--duration {
-    font-size: 1rem;
-    color: var(--ff-color-text-subtle);
-}
-
-.ff-expert-tool-call--body {
-    --item-height: 3rem;
-    border-top: 1px solid var(--ff-color-border);
-    padding: 0.75rem 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    max-height: calc(var(--item-height) * 2 + 1.5rem);
-    overflow-y: auto;
-    transition: max-height 0.2s ease;
-
-    &.is-expanded {
-        max-height: calc(var(--item-height) * 15 + 1.5rem);
-    }
-}
-</style>
diff --git a/frontend/src/components/expert/components/messages/components/resources/ToolApprovalCard.vue b/frontend/src/components/expert/components/messages/components/resources/ToolApprovalCard.vue
index 14eb3d4741..3f0389c870 100644
--- a/frontend/src/components/expert/components/messages/components/resources/ToolApprovalCard.vue
+++ b/frontend/src/components/expert/components/messages/components/resources/ToolApprovalCard.vue
@@ -145,7 +145,7 @@ export default {
     border: 1px solid var(--ff-color-border);
     border-radius: 6px;
     background: var(--ff-color-bg-surface);
-    // Match the "N tool calls" strip (ToolCalls.vue) so the card lines up with it.
+    // Line up with the tool-call cards.
     max-width: 90%;
 }
 
diff --git a/frontend/src/composables/Components/expert/streamedActivity.js b/frontend/src/composables/Components/expert/streamedActivity.js
new file mode 100644
index 0000000000..87eddafadd
--- /dev/null
+++ b/frontend/src/composables/Components/expert/streamedActivity.js
@@ -0,0 +1,10 @@
+export const TOOL_RECORD_KINDS = ['mcp_tool', 'mcp_resource', 'mcp_resource_template', 'mcp_prompt']
+
+// Event kinds accepted on expert:status-message; tool-record is stored under its record kind.
+export const STREAMED_KINDS = ['tool-record', 'reasoning', 'message']
+
+export const ACTIVITY_KINDS = [...TOOL_RECORD_KINDS, 'reasoning', 'message']
+
+export function isToolRecord (item) {
+    return TOOL_RECORD_KINDS.includes(item?.kind)
+}
diff --git a/frontend/src/stores/context.js b/frontend/src/stores/context.js
index 5ca3f3dc03..80b5394f22 100644
--- a/frontend/src/stores/context.js
+++ b/frontend/src/stores/context.js
@@ -194,6 +194,8 @@ export const useContextStore = defineStore('context', {
                 supportsPlanMode: true,
                 supportsHITL: true,
                 supportsPlansAndTasks: true,
+                // Tool calls, reasoning and progress messages streamed into the reply.
+                supportsStreamedActivity: true,
                 toolPermissions: assistantStore.resolvedToolPermissions,
                 canUseWriteTools: hasAMinimumTeamRoleOf(Roles.Member, this.teamMembership)
             }
diff --git a/frontend/src/stores/product-expert.js b/frontend/src/stores/product-expert.js
index 14d0d0f142..0f91c0f921 100644
--- a/frontend/src/stores/product-expert.js
+++ b/frontend/src/stores/product-expert.js
@@ -4,6 +4,7 @@ import { markRaw } from 'vue'
 
 import expertApi from '../api/expert.js'
 import userApi from '../api/user.js'
+import { STREAMED_KINDS, isToolRecord } from '../composables/Components/expert/streamedActivity.js'
 import useTimerHelper from '../composables/TimerHelper.js'
 
 import { useAccountAuthStore } from './account-auth.js'
@@ -100,6 +101,17 @@ export const useProductExpertStore = defineStore('product-expert', {
         hasMessages () { return this._agentStore.messages.length > 0 },
         isSessionExpired () { return this._agentStore.sessionExpiredShown },
         isWaitingForResponse () { return !!this._agentStore.abortController || this._inFlightRequests.size > 0 || this.isStoppingTurn },
+        // Once a live or stopping turn's reply bubble shows streamed activity, the loading
+        // indicator drops its status lines and keeps only the dots. Agents that do not stream
+        // keep both.
+        hasStreamedActivity () {
+            const stopping = this.isSupportAgent ? useProductExpertSupportAgentStore().stoppingTransactions : new Map()
+            return this._agentStore.messages.some(m =>
+                m._type === 'ai' &&
+                (this._inFlightRequests.has(m._transactionId) || stopping.has(m._transactionId)) &&
+                m.answer?.some(item => item._live)
+            )
+        },
         // A stopped turn runs on until the agent's next abort check. Until the agent says it
         // has ended, the session's next message would start a second turn alongside it.
         isStoppingTurn () {
@@ -555,6 +567,16 @@ export const useProductExpertStore = defineStore('product-expert', {
                 }
             }
 
+            // Streamed activity rides expert:status-message with a `kind`. It renders on the
+            // turn's reply, so it is neither acked nor shown on the loading line, and a kind
+            // this client does not know is ignored whole.
+            if (parsedTopic.inflightType === 'expert:status-message' && payload?.kind != null) {
+                if (STREAMED_KINDS.includes(payload.kind) && this._inFlightRequests.has(chatTransactionId)) {
+                    this._appendStreamedActivity(chatTransactionId, payload)
+                }
+                return
+            }
+
             // expert:tasks has its own panel; its status rides expert:status-message.
             // Every other inflight type feeds the loading line, but only while the turn is
             // still live: a status trailing the final reply must not repaint the next turn.
@@ -661,7 +683,7 @@ export const useProductExpertStore = defineStore('product-expert', {
                 // do nothing
             }
         },
-        async handleMessageResponse (response) {
+        async handleMessageResponse (response, transactionId) {
             // ignore aborted messages through mqtt
             if (Object.prototype.hasOwnProperty.call(response, 'aborted') && response.aborted === true) return
 
@@ -675,7 +697,11 @@ export const useProductExpertStore = defineStore('product-expert', {
             }
 
             if (response.answer && Array.isArray(response.answer)) {
-                this.addAiMessage(response)
+                if (transactionId && this._turnBubbles(transactionId).length > 0) {
+                    this._mergeFinalAnswer(transactionId, response)
+                } else {
+                    this.addAiMessage(response)
+                }
                 this._clearInFlightUpdates()
                 // A deferred-approval turn (#421) ends with one card per tool that needs
                 // approval. Track the batch so we can send every decision back at once.
@@ -1017,6 +1043,118 @@ export const useProductExpertStore = defineStore('product-expert', {
                 _uuid: uuidv4()
             })
         },
+        // Place one streamed item in the turn's reply bubble, creating the bubble on the
+        // first item. An id already in the bubble is replaced in place; otherwise the item
+        // goes in seq order, so events arriving out of order still render in order.
+        _appendStreamedActivity (transactionId, event) {
+            if (!transactionId || !event) return
+
+            // A streamed tool record moves its own kind to recordKind, so the card sees the
+            // same shape as the record in the final answer.
+            let item = event
+            if (event.kind === 'tool-record') {
+                const { recordKind, ...record } = event
+                item = { ...record, kind: recordKind || 'mcp_tool' }
+            }
+
+            const found = item.id ? this._findTurnItem(transactionId, a => a.id === item.id) : null
+            if (found) {
+                const { bubble, index } = found
+                const existing = bubble.answer[index]
+                // An update that arrives late must not roll a newer one back, nor reopen a
+                // finished block. The item keeps its first seq so the bubble stays sorted;
+                // _latestSeq tracks the newest update.
+                const latestSeq = existing._latestSeq ?? existing.seq
+                const isOlder = typeof latestSeq === 'number' && typeof item.seq === 'number' && item.seq < latestSeq
+                if (isOlder || (existing.done === true && item.done !== true)) return
+                bubble.answer.splice(index, 1, {
+                    ...existing,
+                    ...item,
+                    seq: existing.seq ?? item.seq,
+                    _latestSeq: item.seq ?? latestSeq,
+                    _uuid: existing._uuid,
+                    _streamed: true,
+                    _live: true
+                })
+                return
+            }
+            this._insertBySeq(this._openTurnBubble(transactionId), { ...item, _uuid: uuidv4(), _streamed: true, _live: true })
+        },
+        _turnBubbles (transactionId) {
+            return this._agentStore.messages.filter(m => m._type === 'ai' && m._transactionId === transactionId)
+        },
+        _findTurnItem (transactionId, predicate) {
+            for (const bubble of this._turnBubbles(transactionId)) {
+                const index = bubble.answer.findIndex(predicate)
+                if (index !== -1) return { bubble, index }
+            }
+            return null
+        },
+        // New items go to the turn's last bubble while it is the last message. Once another
+        // message has landed below it, they start a new bubble so the chat keeps the order
+        // things happened in.
+        _openTurnBubble (transactionId) {
+            const messages = this._agentStore.messages
+            const last = messages[messages.length - 1]
+            if (last?._type === 'ai' && last._transactionId === transactionId) return last
+            const bubble = {
+                answer: [],
+                _type: 'ai',
+                _timestamp: Date.now(),
+                _streamed: false,
+                _uuid: uuidv4(),
+                _transactionId: transactionId
+            }
+            messages.push(bubble)
+            return messages[messages.length - 1]
+        },
+        _insertBySeq (bubble, entry) {
+            if (typeof entry.seq !== 'number') {
+                bubble.answer.push(entry)
+                return
+            }
+            const insertBefore = bubble.answer.findIndex(a => typeof a.seq === 'number' && a.seq > entry.seq)
+            if (insertBefore === -1) {
+                bubble.answer.push(entry)
+            } else {
+                bubble.answer.splice(insertBefore, 0, entry)
+            }
+        },
+        // The final reply lands in the bubbles its streamed items built. Tool records it
+        // carries upgrade the streamed card with the same id; the rest is appended.
+        _mergeFinalAnswer (transactionId, response) {
+            const rest = []
+            for (const item of response.answer) {
+                const found = item.id && isToolRecord(item)
+                    ? this._findTurnItem(transactionId, a => a.id === item.id && isToolRecord(a))
+                    : null
+                if (found) {
+                    const { bubble, index } = found
+                    const existing = bubble.answer[index]
+                    bubble.answer.splice(index, 1, { ...existing, ...item, seq: existing.seq ?? item.seq, _uuid: existing._uuid })
+                } else {
+                    rest.push(item)
+                }
+            }
+            const bubbles = this._turnBubbles(transactionId)
+            const target = rest.length > 0 ? this._openTurnBubble(transactionId) : bubbles[bubbles.length - 1]
+            for (const item of rest) {
+                this._insertBySeq(target, { ...item, _uuid: uuidv4(), _streamed: false })
+            }
+            const { answer: _answer, ...fields } = response
+            Object.assign(target, fields)
+            this._closeTurnItems(transactionId)
+        },
+        // A finished or stopped turn leaves no item still running.
+        _closeTurnItems (transactionId) {
+            for (const bubble of this._turnBubbles(transactionId)) {
+                bubble.answer.forEach((item, index) => {
+                    if (item.done === false) {
+                        bubble.answer.splice(index, 1, { ...item, done: true })
+                    }
+                })
+            }
+        },
         addUserMessage (message) {
             this._agentStore.messages.push({
                 _type: 'human',
@@ -1111,7 +1249,7 @@ export const useProductExpertStore = defineStore('product-expert', {
                     this._recentlyCompleted.delete(this._recentlyCompleted.keys().next().value)
                 }
                 try {
-                    await this.handleMessageResponse(JSON.parse(message.toString()))
+                    await this.handleMessageResponse(JSON.parse(message.toString()), transactionId)
                 } finally {
                     this._drainSendQueue()
                 }
@@ -1682,6 +1820,9 @@ export const useProductExpertStore = defineStore('product-expert', {
                     this._awaitTurnStopped(inFlightRequest.transactionId)
                 }
             }
+            for (const transactionId of this._inFlightRequests.keys()) {
+                this._closeTurnItems(transactionId)
+            }
             this._inFlightRequests.clear()
             this._clearInFlightUpdates()
             this._agentStore.activeTaskList = null
diff --git a/frontend/src/ui-components/components/Button.vue b/frontend/src/ui-components/components/Button.vue
index c62e9e6064..548f27f400 100644
--- a/frontend/src/ui-components/components/Button.vue
+++ b/frontend/src/ui-components/components/Button.vue
@@ -36,7 +36,7 @@
         <span v-if="isIconOnly" class="ff-btn--icon">
             <slot name="icon"></slot>
         </span>
-        <span class="clipped-overflow flex align-center justify-center gap-4">
+        <span class="clipped-overflow flex align-center gap-4" :class="align === 'left' ? 'justify-start' : 'justify-center'">
             <slot></slot>
         </span>
         <span v-if="hasIconRight" class="ff-btn--icon ff-btn--icon-right">
@@ -57,12 +57,16 @@ export default {
         },
         kind: {
             default: 'primary',
-            type: String // "primary", "secondary", "tertiary", "danger", "secondary-danger", "tertiary-danger", "expert"
+            type: String // "primary", "secondary", "tertiary", "danger", "secondary-danger", "tertiary-danger", "expert", "plain"
         },
         size: {
             default: 'normal',
             type: String // "small", "medium", "normal", "full-width"
         },
+        align: {
+            default: 'center',
+            type: String // "center", "left"
+        },
         to: {
             default: null,
             type: [String, Object]
diff --git a/frontend/src/ui-components/stylesheets/ff-components.scss b/frontend/src/ui-components/stylesheets/ff-components.scss
index f6719d940d..55e978cd3d 100644
--- a/frontend/src/ui-components/stylesheets/ff-components.scss
+++ b/frontend/src/ui-components/stylesheets/ff-components.scss
@@ -201,6 +201,19 @@
       animation: none;
     }
   }
+  &--plain {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font-weight: inherit;
+    > .clipped-overflow {
+      display: flex;
+      flex: 1;
+      min-width: 0;
+      gap: $ff-unit-sm;
+    }
+  }
 
   &.ff-btn-small {
     .ff-btn--icon,
diff --git a/test/unit/frontend/components/expert/AiMessage.spec.js b/test/unit/frontend/components/expert/AiMessage.spec.js
new file mode 100644
index 0000000000..ad58155827
--- /dev/null
+++ b/test/unit/frontend/components/expert/AiMessage.spec.js
@@ -0,0 +1,121 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+
+vi.mock('../../../../../frontend/src/services/product.js', () => ({
+    default: { capture: vi.fn() }
+}))
+
+// The flows list pulls in the CJS flow renderer, which cannot load in the test environment
+vi.mock('@flowfuse/flow-renderer', () => ({
+    default: class FlowRenderer {}
+}))
+
+const AiMessage = (await import('../../../../../frontend/src/components/expert/components/messages/AiMessage.vue')).default
+
+const stubs = {
+    'answer-wrapper': true,
+    'rich-content': true
+}
+
+function mountMessage (answer) {
+    return mount(AiMessage, {
+        props: { answer, _type: 'ai', _timestamp: 1, _uuid: 'm1', _streamed: true, instant: true },
+        global: { stubs }
+    })
+}
+
+describe('AiMessage', () => {
+    beforeEach(() => {
+        setActivePinia(createPinia())
+    })
+
+    test('renders tool records without a reason as cards, in array order', () => {
+        const wrapper = mountMessage([
+            { kind: 'mcp_tool', toolTitle: 'Get flows', _uuid: 'a' },
+            { kind: 'mcp_tool', toolTitle: 'List instances', id: 't2', reason: 'Finding the instance', _uuid: 'b' },
+            { kind: 'chat', content: 'Done', _uuid: 'c' }
+        ])
+
+        const headlines = wrapper.findAll('.ff-expert-timeline-item--name').map(n => n.text())
+        expect(headlines).toEqual(['Get flows', 'Finding the instance'])
+        expect(wrapper.findAll('.ff-expert-timeline-item--tool').map(n => n.text())).toEqual(['List instances'])
+        expect(wrapper.findAll('.ff-expert-timeline-item--reason').map(n => n.text())).toEqual(['Finding the instance'])
+    })
+
+    test('keeps reasoning collapsed with the latest sentence while streaming and the first once done', () => {
+        const wrapper = mountMessage([
+            { kind: 'reasoning', id: 'r1', seq: 1, text: 'Reading the flow. Now **checking** the wires', done: false, _uuid: 'a' },
+            { kind: 'reasoning', id: 'r2', seq: 2, text: 'Planning the build.\nThen deploying it.', done: true, _uuid: 'b' }
+        ])
+
+        expect(wrapper.findAll('.ff-collapsible--content.expanded')).toHaveLength(0)
+        expect(wrapper.findAll('.ff-expert-reasoning--preview').map(n => n.text())).toEqual(['Now checking the wires', 'Planning the build.'])
+    })
+
+    test('hides the reasoning preview line while the block is expanded', async () => {
+        const wrapper = mountMessage([
+            { kind: 'reasoning', id: 'r1', seq: 1, text: 'Planning the build.', done: true, _uuid: 'a' }
+        ])
+
+        await wrapper.find('.ff-collapsible--header').trigger('click')
+        expect(wrapper.find('.ff-expert-reasoning--preview').exists()).toBe(false)
+    })
+
+    test('interleaves reasoning, tool cards and messages in answer order', () => {
+        const wrapper = mountMessage([
+            { kind: 'reasoning', id: 'r1', seq: 1, text: 'Plan', done: true, _uuid: 'a' },
+            { kind: 'mcp_tool', id: 't1', seq: 2, toolTitle: 'Get flows', ok: false, error: 'boom', _uuid: 'b' },
+            { kind: 'message', id: 'm1', seq: 3, text: 'Working on it', _uuid: 'c' }
+        ])
+
+        const order = wrapper.element.children
+        expect(order[0].classList.contains('ff-expert-reasoning')).toBe(true)
+        expect(order[1].classList.contains('ff-expert-timeline-item')).toBe(true)
+        expect(order[2].classList.contains('ff-expert-agent-message')).toBe(true)
+        expect(wrapper.find('.ff-expert-timeline-item--failed-hint').exists()).toBe(true)
+    })
+
+    test('shows no chevron or toggle on a tool card with nothing to expand', () => {
+        const wrapper = mountMessage([
+            { kind: 'mcp_tool', toolTitle: 'Get flows', _uuid: 'a' },
+            { kind: 'mcp_tool', toolTitle: 'List instances', reason: 'Finding the instance', _uuid: 'b' }
+        ])
+
+        const cards = wrapper.findAll('.ff-expert-timeline-item')
+        expect(cards[0].find('button.ff-collapsible--header').exists()).toBe(false)
+        expect(cards[0].find('.ff-collapsible--content').exists()).toBe(false)
+        expect(cards[1].find('button.ff-collapsible--header').attributes('aria-expanded')).toBe('false')
+        expect(cards[1].find('button.ff-collapsible--header').classes()).toContain('ff-btn--plain')
+    })
+
+    test('shows tool input and output in collapsed JSON viewers', async () => {
+        const wrapper = mountMessage([
+            { kind: 'mcp_tool', toolTitle: 'Get flows', input: { id: 'i1' }, output: '{"n":1}', _uuid: 'a' }
+        ])
+
+        const header = wrapper.find('button.ff-collapsible--header')
+        await header.trigger('click')
+        expect(header.attributes('aria-expanded')).toBe('true')
+
+        const viewers = wrapper.findAllComponents({ name: 'JsonViewer' })
+        expect(viewers.map(v => v.props('label'))).toEqual(['Input', 'Output'])
+        expect(viewers[1].props('value')).toEqual({ n: 1 })
+        expect(viewers.every(v => v.props('defaultCollapsed'))).toBe(true)
+        expect(viewers.every(v => v.find('.json-viewer__collapse-toggle').attributes('kind') === 'plain')).toBe(true)
+    })
+
+    test('names a gateway wrapper call after the tool it invoked', () => {
+        const wrapper = mountMessage([
+            {
+                kind: 'mcp_tool',
+                toolName: 'mcp_tool__flowfuse-mcp-gateway-0__invoke_read_tool',
+                toolId: 'mcp_tool__flowfuse-mcp-gateway-0__invoke_read_tool',
+                input: '{"tool_name":"list_orders"}',
+                _uuid: 'a'
+            }
+        ])
+
+        expect(wrapper.find('.ff-expert-timeline-item--name').text()).toBe('list_orders')
+    })
+})
diff --git a/test/unit/frontend/components/expert/ExpertLoadingIndicator.spec.js b/test/unit/frontend/components/expert/ExpertLoadingIndicator.spec.js
new file mode 100644
index 0000000000..dfd9707ac0
--- /dev/null
+++ b/test/unit/frontend/components/expert/ExpertLoadingIndicator.spec.js
@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+
+import ExpertLoadingIndicator from '../../../../../frontend/src/components/expert/components/ExpertLoadingIndicator.vue'
+
+describe('ExpertLoadingIndicator', () => {
+    beforeEach(() => {
+        setActivePinia(createPinia())
+        vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+        vi.useRealTimers()
+    })
+
+    test('shows a status line under the dots after a few seconds', async () => {
+        const wrapper = mount(ExpertLoadingIndicator)
+        vi.advanceTimersByTime(5000)
+        await wrapper.vm.$nextTick()
+
+        expect(wrapper.findAll('.loading-dot')).toHaveLength(3)
+        expect(wrapper.find('.loading-message').exists()).toBe(true)
+    })
+
+    test('shows only the dots when status lines are off', async () => {
+        const wrapper = mount(ExpertLoadingIndicator, { props: { showMessages: false } })
+        vi.advanceTimersByTime(5000)
+        await wrapper.vm.$nextTick()
+
+        expect(wrapper.findAll('.loading-dot')).toHaveLength(3)
+        expect(wrapper.find('.loading-message').exists()).toBe(false)
+    })
+})
diff --git a/test/unit/frontend/stores/product-expert.spec.js b/test/unit/frontend/stores/product-expert.spec.js
index 098b516adb..fb58f1bd91 100644
--- a/test/unit/frontend/stores/product-expert.spec.js
+++ b/test/unit/frontend/stores/product-expert.spec.js
@@ -352,6 +352,24 @@ describe('product-expert store', () => {
         })
     })
 
+    describe('handleMessageResponse', () => {
+        it('keeps an answer\'s tool records, with or without a reason, in the new bubble', async () => {
+            const store = useProductExpertStore()
+            const agent = useProductExpertSupportAgentStore()
+
+            await store.handleMessageResponse({
+                answer: [
+                    { kind: 'mcp_tool', id: 't1', toolTitle: 'Get flows' },
+                    { kind: 'mcp_tool', id: 't2', reason: 'Why', toolTitle: 'List' },
+                    { kind: 'chat', content: 'Done' }
+                ]
+            })
+
+            expect(agent.messages).toHaveLength(1)
+            expect(agent.messages[0].answer.map(a => a.kind)).toEqual(['mcp_tool', 'mcp_tool', 'chat'])
+        })
+    })
+
     describe('addPredefinedAiMessage', () => {
         it('pushes an ai message with a single-item answer array', () => {
             const store = useProductExpertStore()
@@ -684,6 +702,166 @@ describe('product-expert store', () => {
             expect(JSON.parse(mqttService.publishMessage.mock.calls[0][1].payload)).toEqual({ ok: true })
         })
 
+        describe('streamed activity', () => {
+            const statusTopic = 'ff/v1/expert/u1/chat-1/team/t1/support/inflight/expert:status-message/request'
+            const send = (payload, srf = 'srf-1', turn = 'turn-1') => store._onMqttMessage(statusTopic, JSON.stringify(payload), packet(srf, turn))
+            const bubble = () => agent.messages.find(m => m._transactionId === 'turn-1')
+
+            beforeEach(() => {
+                agent.inFlightRequests.set('turn-1', { query: 'x', transactionId: 'turn-1' })
+            })
+
+            it('inserts a known kind by seq without acking or touching the loading line', async () => {
+                await send({ kind: 'message', id: 'm2', seq: 2, text: 'second' }, 'srf-1')
+                await send({ kind: 'tool-record', recordKind: 'mcp_tool', id: 't1', seq: 1, reason: 'why', ok: true }, 'srf-2')
+
+                expect(bubble().answer.map(a => a.id)).toEqual(['t1', 'm2'])
+                expect(mqttService.publishMessage).not.toHaveBeenCalled()
+                expect(store.inFlightUpdates).toHaveLength(0)
+            })
+
+            it('reports streamed activity only while the turn is live', async () => {
+                expect(store.hasStreamedActivity).toBe(false)
+
+                await send({ kind: 'message', id: 'm1', seq: 1, text: 'hi' })
+                expect(store.hasStreamedActivity).toBe(true)
+
+                agent.inFlightRequests.delete('turn-1')
+                expect(store.hasStreamedActivity).toBe(false)
+            })
+
+            it('does not count a final-answer item whose typewriter finished as streamed activity', async () => {
+                await store._onMqttMessage(replyTopic, JSON.stringify({ answer: [{ kind: 'chat', content: 'Done' }] }), packet('turn-1', 'turn-1'))
+                agent.inFlightRequests.set('turn-1', { query: 'x', transactionId: 'turn-1' })
+                const message = agent.messages[0]
+                store.updateAnswerStreamedState({ messageUuid: message._uuid, answerUuid: message.answer[0]._uuid })
+
+                expect(store.hasStreamedActivity).toBe(false)
+            })
+
+            it('keeps reporting streamed activity while a stopped turn is ending', async () => {
+                await send({ kind: 'message', id: 'm1', seq: 1, text: 'hi' })
+                agent.stoppingTransactions.set('turn-1', null)
+                agent.inFlightRequests.delete('turn-1')
+
+                expect(store.hasStreamedActivity).toBe(true)
+            })
+
+            it('finishes open items when the final answer lands', async () => {
+                await send({ kind: 'reasoning', id: 'r1', seq: 1, text: 'Looking', done: false }, 'srf-1')
+
+                await store._onMqttMessage(replyTopic, JSON.stringify({ answer: [{ kind: 'chat', content: 'Done' }] }), packet('turn-1', 'turn-1'))
+
+                expect(bubble().answer[0]).toMatchObject({ id: 'r1', done: true })
+            })
+
+            it('finishes open items when the turn is stopped', async () => {
+                await send({ kind: 'reasoning', id: 'r1', seq: 1, text: 'I', done: false }, 'srf-1')
+                await send({ kind: 'reasoning', id: 'r0', seq: 0, text: 'Earlier', done: true }, 'srf-2')
+
+                store.stopInflightChat()
+
+                expect(bubble().answer.map(a => a.done)).toEqual([true, true])
+            })
+
+            it('starts a new bubble for activity that follows a message pushed mid-turn', async () => {
+                await send({ kind: 'tool-record', recordKind: 'mcp_tool', id: 't1', seq: 1, reason: 'why', ok: true }, 'srf-1')
+                store.addSystemMessage({ message: 'Instance ready' })
+                await send({ kind: 'message', id: 'm1', seq: 2, text: 'next' }, 'srf-2')
+                await send({ kind: 'tool-record', recordKind: 'mcp_tool', id: 't1', seq: 3, reason: 'why', ok: false }, 'srf-3')
+
+                expect(agent.messages.map(m => m._type)).toEqual(['ai', 'system', 'ai'])
+                expect(agent.messages[0].answer.map(a => [a.id, a.ok])).toEqual([['t1', false]])
+                expect(agent.messages[2].answer.map(a => a.id)).toEqual(['m1'])
+
+                const answer = [
+                    { kind: 'mcp_tool', id: 't1', seq: 1, toolName: 'list_flows' },
+                    { kind: 'chat', content: 'Done' }
+                ]
+                await store._onMqttMessage(replyTopic, JSON.stringify({ answer }), packet('turn-1', 'turn-1'))
+
+                expect(agent.messages).toHaveLength(3)
+                expect(agent.messages[0].answer[0]).toMatchObject({ id: 't1', toolName: 'list_flows' })
+                expect(agent.messages[2].answer.map(a => a.id || a.kind)).toEqual(['m1', 'chat'])
+            })
+
+            it('ignores a late update that is older than the one shown or would reopen a finished block', async () => {
+                await send({ kind: 'reasoning', id: 'r1', seq: 5, text: 'Looking at the flow', done: false }, 'srf-1')
+                await send({ kind: 'reasoning', id: 'r1', seq: 3, text: 'Look', done: false }, 'srf-2')
+                expect(bubble().answer[0]).toMatchObject({ text: 'Looking at the flow', done: false })
+
+                await send({ kind: 'reasoning', id: 'r1', seq: 7, text: 'Looking at the flow wiring', done: true }, 'srf-3')
+                await send({ kind: 'reasoning', id: 'r1', seq: 9, text: 'Looking', done: false }, 'srf-4')
+                expect(bubble().answer[0]).toMatchObject({ text: 'Looking at the flow wiring', done: true })
+            })
+
+            it('replaces an item with the same id in place', async () => {
+                await send({ kind: 'reasoning', id: 'r1', seq: 1, text: 'Looking', done: false }, 'srf-1')
+                await send({ kind: 'message', id: 'm1', seq: 2, text: 'hi' }, 'srf-2')
+                await send({ kind: 'reasoning', id: 'r1', seq: 1, text: 'Looking at the flow', done: true }, 'srf-3')
+
+                expect(bubble().answer).toHaveLength(2)
+                expect(bubble().answer[0]).toMatchObject({ id: 'r1', text: 'Looking at the flow', done: true })
+            })
+
+            it('keeps an updated item at its first seq so later inserts stay in order', async () => {
+                await send({ kind: 'reasoning', id: 'r1', seq: 1, text: 'Looking', done: false }, 'srf-1')
+                await send({ kind: 'reasoning', id: 'r1', seq: 5, text: 'Looking at the flow', done: true }, 'srf-2')
+                await send({ kind: 'message', id: 'm1', seq: 3, text: 'hi' }, 'srf-3')
+
+                expect(bubble().answer.map(a => a.id)).toEqual(['r1', 'm1'])
+                expect(bubble().answer[0]).toMatchObject({ seq: 1, text: 'Looking at the flow' })
+            })
+
+            it('keeps fields an update leaves out', async () => {
+                await send({ kind: 'tool-record', recordKind: 'mcp_tool', id: 't1', seq: 1, reason: 'why' }, 'srf-1')
+                await send({ kind: 'tool-record', recordKind: 'mcp_tool', id: 't1', seq: 2, ok: true, output: { n: 1 } }, 'srf-2')
+
+                expect(bubble().answer[0]).toMatchObject({ reason: 'why', ok: true, output: { n: 1 } })
+            })
+
+            it('keeps handling a payload without a kind as a status line', async () => {
+                await send({ status: 'Checking the flow' })
+
+                expect(bubble()).toBeUndefined()
+                expect(store.inFlightUpdates).toEqual(['Checking the flow'])
+                expect(JSON.parse(mqttService.publishMessage.mock.calls[0][1].payload)).toEqual({ ack: true })
+            })
+
+            it('ignores an unknown kind entirely', async () => {
+                await send({ kind: 'hologram', id: 'h1', seq: 1, status: 'new thing' })
+
+                expect(agent.messages).toHaveLength(0)
+                expect(store.inFlightUpdates).toHaveLength(0)
+                expect(mqttService.publishMessage).not.toHaveBeenCalled()
+            })
+
+            it('drops an event that arrives after the turn has finished', async () => {
+                await store._onMqttMessage(replyTopic, JSON.stringify({}), packet('turn-1', 'turn-1'))
+
+                await send({ kind: 'message', id: 'm1', seq: 1, text: 'late' })
+
+                expect(agent.messages).toHaveLength(0)
+                expect(mqttService.publishMessage).not.toHaveBeenCalled()
+            })
+
+            it('merges final-answer tool records into streamed cards by id', async () => {
+                await send({ kind: 'tool-record', recordKind: 'mcp_tool', id: 't1', seq: 1, reason: 'why', ok: true }, 'srf-1')
+                const answer = [
+                    { kind: 'mcp_tool', id: 't1', seq: 1, reason: 'why', toolName: 'list_flows' },
+                    { kind: 'mcp_tool', toolName: 'legacy' },
+                    { kind: 'chat', content: 'Done' }
+                ]
+
+                await store._onMqttMessage(replyTopic, JSON.stringify({ answer }), packet('turn-1', 'turn-1'))
+
+                expect(agent.messages).toHaveLength(1)
+                expect(bubble().answer.map(a => a.id || a.toolName || a.kind)).toEqual(['t1', 'legacy', 'chat'])
+                expect(bubble().answer[0]).toMatchObject({ kind: 'mcp_tool', toolName: 'list_flows', ok: true })
+                expect(bubble().answer[0].recordKind).toBeUndefined()
+            })
+        })
+
         it('answers an editor action that fails with its error and keeps the chat going', async () => {
             agent.inFlightRequests.set('turn-1', { query: 'x', transactionId: 'turn-1' })
             invokeAction.mockRejectedValueOnce(new Error('Node-RED command timed out'))
diff --git a/test/unit/frontend/ui-components/unit/components/Button.spec.js b/test/unit/frontend/ui-components/unit/components/Button.spec.js
index d2de9789c2..50fe5f948e 100644
--- a/test/unit/frontend/ui-components/unit/components/Button.spec.js
+++ b/test/unit/frontend/ui-components/unit/components/Button.spec.js
@@ -8,4 +8,13 @@ describe('ff-button', () => {
         const wrapper = mount(FfButton, { props: { kind: 'expert' }, slots: { default: 'Build' } })
         expect(wrapper.classes()).toContain('ff-btn--expert')
     })
+
+    test('centres its label by default and aligns it left when asked', () => {
+        const centred = mount(FfButton, { slots: { default: 'Build' } })
+        expect(centred.find('.clipped-overflow').classes()).toContain('justify-center')
+
+        const left = mount(FfButton, { props: { kind: 'plain', align: 'left' }, slots: { default: 'Build' } })
+        expect(left.classes()).toContain('ff-btn--plain')
+        expect(left.find('.clipped-overflow').classes()).toContain('justify-start')
+    })
 })