diff --git a/forge/ee/routes/expert/index.js b/forge/ee/routes/expert/index.js
index 99e78bb9a8..20a45a1ff3 100644
--- a/forge/ee/routes/expert/index.js
+++ b/forge/ee/routes/expert/index.js
@@ -43,8 +43,10 @@ module.exports = async function (app) {
                     error: 'unauthorized'
                 })
             }
-            // Ensure users team access is valid
-            const teamId = request.body.context?.teamId // `context.teamId` is the hash provided in the body context by the client
+            // Ensure users team access is valid. `teamId` is the team hash provided by the
+            // client — in the body context for POST routes (/chat, /mcp/features) or as a
+            // query param for GET routes (/mcp/tools, which has no body).
+            const teamId = request.body?.context?.teamId || request.query?.teamId
             if (!teamId) {
                 return reply.status(404).send({ code: 'not_found', error: 'Not Found' })
             }
@@ -480,6 +482,66 @@ module.exports = async function (app) {
             reply.code(error.response?.status || 500).send({ code: error.response?.data?.code || 'unexpected_error', error: error.response?.data?.error || error.message })
         }
     })
+
+    /**
+     * Retrieve the curated tool catalog for the Expert's human-in-the-loop permissions UI
+     * (#421). The MCP server(s) are static/global (not per-team registered), so unlike
+     * /mcp/features this is a thin read-only proxy: it forwards to the agent service's
+     * /mcp/tools endpoint, which returns friendly catalog entries only (raw MCP identifiers
+     * never leave the backend) plus a `hash` fingerprint of the catalog. Team access +
+     * feature gating are enforced by the shared preHandler above; read/write classification
+     * on each entry is what the client uses to decide which tools a role may enable.
+     */
+    app.get('/mcp/tools', {
+        schema: {
+            hide: true, // dont show in swagger
+            querystring: {
+                type: 'object',
+                properties: {
+                    teamId: { type: 'string', minLength: 10 }
+                },
+                required: ['teamId']
+            },
+            response: {
+                200: {
+                    type: 'object',
+                    properties: {
+                        catalog: {
+                            type: 'array',
+                            items: {
+                                type: 'object',
+                                additionalProperties: true
+                            }
+                        },
+                        hash: {
+                            type: ['string', 'null']
+                        }
+                    }
+                },
+                '4xx': {
+                    $ref: 'APIError'
+                }
+            }
+        }
+    },
+    async (request, reply) => {
+        if (!request.isExpertAssistantEnabled) {
+            return reply.status(404).send({ code: 'not_found', error: 'Not Found' })
+        }
+        try {
+            const toolsUrl = `${app.expert.expertUrl.split('/').slice(0, -1).join('/')}/mcp/tools`
+            const response = await axios.get(toolsUrl, {
+                headers: {
+                    Origin: request.headers.origin,
+                    ...(app.expert.serviceToken ? { Authorization: `Bearer ${app.expert.serviceToken}` } : {})
+                },
+                timeout: app.expert.requestTimeout
+            })
+            reply.send({ catalog: response.data?.catalog || [], hash: response.data?.hash || null })
+        } catch (error) {
+            reply.code(error.response?.status || 500).send({ code: error.response?.data?.code || 'unexpected_error', error: error.response?.data?.error || error.message })
+        }
+    })
 }
 
 /**
diff --git a/frontend/src/api/expert.js b/frontend/src/api/expert.js
index 67ef3ce793..b44925e2a5 100644
--- a/frontend/src/api/expert.js
+++ b/frontend/src/api/expert.js
@@ -48,7 +48,22 @@ const getCapabilities = async (payload) => {
     })
 }
 
+/**
+ * Fetch the curated tool catalog for the human-in-the-loop permissions UI (#421).
+ * Read-only GET — proxied by forge to the agent's /mcp/tools endpoint, which serves
+ * friendly catalog entries only (raw MCP identifiers never leave the backend) plus a
+ * `hash` fingerprint the UI uses to refetch only when the catalog changes.
+ * @param {{ teamId: string }} params
+ * @returns {Promise<{ catalog: Array, hash: string|null }>}
+ */
+const getToolCatalog = async ({ teamId } = {}) => {
+    return client.get('/api/v1/expert/mcp/tools', {
+        params: { teamId }
+    }).then(res => res.data)
+}
+
 export default {
     chat,
-    getCapabilities
+    getCapabilities,
+    getToolCatalog
 }
diff --git a/frontend/src/components/expert/components/ExpertChatInput.vue b/frontend/src/components/expert/components/ExpertChatInput.vue
index 58d5c170e8..457bf11d35 100644
--- a/frontend/src/components/expert/components/ExpertChatInput.vue
+++ b/frontend/src/components/expert/components/ExpertChatInput.vue
@@ -105,6 +105,11 @@
                         data-el="expert-question-cadence"
                     />
                 </div>
+                <div class="expert-settings__group">
+                    <FormHeading>Tool permissions</FormHeading>
+                    <p>Choose which actions the Expert can run, and which need your approval.</p>
+                    <tool-permissions-settings :in-editor="isImmersive" />
+                </div>
             </div>
         </ff-dialog>
     </div>
@@ -118,6 +123,7 @@ import FormHeading from '../../FormHeading.vue'
 import ResizeBar from '../../ResizeBar.vue'
 
 import CapabilitiesSelector from './CapabilitiesSelector.vue'
+import ToolPermissionsSettings from './ToolPermissionsSettings.vue'
 import DefaultChip from './chips/DefaultChip.vue'
 import ContextSelector from './context-selection/index.vue'
 
@@ -135,7 +141,8 @@ export default {
         ContextSelector,
         DefaultChip,
         FormHeading,
-        ResizeBar
+        ResizeBar,
+        ToolPermissionsSettings
     },
     inject: {
         togglePinWithWidth: {
@@ -292,10 +299,14 @@ export default {
             minHeight: 120,
             maxViewportMarginY: 80
         })
+        // Fetch the tool catalog as soon as the Expert panel mounts (not only in the
+        // editor) so the permissions settings can render everywhere. Flow-building
+        // tools are still only usable from an instance editor (see isImmersive below).
+        this.fetchToolCatalog()
     },
     methods: {
         ...mapActions(useProductAssistantStore, ['resetContextSelection']),
-        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'setPendingInput', 'setQuestionCadence', 'setPlanMode']),
+        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'setPendingInput', 'setQuestionCadence', 'setPlanMode', 'fetchToolCatalog']),
         openSettings () {
             this.$refs.settingsDialog.show()
         },
diff --git a/frontend/src/components/expert/components/ToolPermissionsSettings.vue b/frontend/src/components/expert/components/ToolPermissionsSettings.vue
new file mode 100644
index 0000000000..828950ac12
--- /dev/null
+++ b/frontend/src/components/expert/components/ToolPermissionsSettings.vue
@@ -0,0 +1,355 @@
+<template>
+    <div class="tool-permissions" data-el="expert-tool-permissions">
+        <section class="tool-permissions__section">
+            <FormHeading>Flow Building Tools</FormHeading>
+            <p class="tool-permissions__intro">
+                Set a default for each action type, then override individual tools below.
+            </p>
+            <p v-if="!inEditor" class="tool-permissions__notice">
+                Flow-building tools run in an instance editor. Open one to let the Expert use them; you can still set their permissions here.
+            </p>
+            <p v-if="!canUseWriteTools" class="tool-permissions__notice">
+                Your role is read-only, so the Expert can use read-only tools but cannot run actions that change flows.
+            </p>
+
+            <ff-data-table :columns="defaultColumns" :show-search="false">
+                <template #rows>
+                    <ff-data-table-row v-for="cls in classDefaults" :key="cls.key">
+                        <ff-data-table-cell>
+                            <div class="tool-permissions__cell">
+                                <span class="tool-permissions__title">{{ cls.label }}</span>
+                                <span class="tool-permissions__hint">{{ cls.hint }}</span>
+                            </div>
+                        </ff-data-table-cell>
+                        <ff-data-table-cell class="permission-col">
+                            <ff-listbox
+                                class="tool-permissions__control"
+                                selector="expert-tool-permission"
+                                :model-value="toolDefaults[cls.key]"
+                                :options="policyOptions"
+                                :options-min-width="140"
+                                @update:model-value="(value) => setToolClassDefault(cls.key, value)"
+                            />
+                        </ff-data-table-cell>
+                    </ff-data-table-row>
+                </template>
+            </ff-data-table>
+
+            <ff-data-table v-if="resolvedTools.length" :columns="toolColumns" :show-search="false">
+                <template #rows>
+                    <ff-data-table-row v-for="tool in resolvedTools" :key="tool.familyKey">
+                        <ff-data-table-cell>
+                            <div class="tool-permissions__cell">
+                                <span class="tool-permissions__title">{{ tool.displayName }}</span>
+                                <span
+                                    v-if="tool.statusHint"
+                                    class="tool-permissions__hint"
+                                    :class="`is-${tool.status}`"
+                                >{{ tool.statusHint }}</span>
+                            </div>
+                        </ff-data-table-cell>
+                        <ff-data-table-cell>
+                            <span class="tool-permissions__type">{{ scopeLabel(tool.toolClass) }}</span>
+                        </ff-data-table-cell>
+                        <ff-data-table-cell class="permission-col">
+                            <span
+                                v-if="tool.control !== 'toggle'"
+                                class="tool-permissions__static"
+                            >{{ tool.statusLabel }}</span>
+                            <ff-listbox
+                                v-else
+                                class="tool-permissions__control"
+                                selector="expert-tool-permission"
+                                :model-value="toolPolicyFor(tool.activeKey)"
+                                :options="policyOptions"
+                                :options-min-width="140"
+                                @update:model-value="(value) => setFamilyPreference(tool.variantKeys, value)"
+                            />
+                        </ff-data-table-cell>
+                    </ff-data-table-row>
+                </template>
+            </ff-data-table>
+            <p v-else class="tool-permissions__empty">No flow-building tools available yet.</p>
+        </section>
+
+        <!-- TODO(platform-tools): once Steve's platform-tool work is merged into the agent,
+             FlowFuse platform tools arrive in the same catalog. Render them here exactly like
+             the Flow Building Tools section above: a defaults data-table for this group plus the
+             per-tool data-table, filtering the catalog with groupOf(entry) === TOOL_GROUPS.PLATFORM.
+             See groupOf / the toolDefaults TODO in stores/product-assistant.js for namespacing the
+             defaults by group at the same time. -->
+        <section class="tool-permissions__section">
+            <FormHeading>FlowFuse Platform Tools</FormHeading>
+            <p class="tool-permissions__empty">Available soon — added once FlowFuse platform tools ship.</p>
+        </section>
+    </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'pinia'
+import SemVer from 'semver'
+
+import { hasAMinimumTeamRoleOf } from '../../../composables/Permissions.js'
+import FfListbox from '../../../ui-components/components/form/ListBox.vue'
+import { Roles } from '../../../utils/roles.js'
+import FormHeading from '../../FormHeading.vue'
+
+import { useContextStore } from '@/stores/context.js'
+import { TOOL_GROUPS, classOf, groupOf, useProductAssistantStore } from '@/stores/product-assistant.js'
+
+const CLASS_ORDER = ['read', 'write', 'delete']
+const CLASS_LABELS = { read: 'Read', write: 'Write', delete: 'Delete' }
+// Non-breaking hyphen in the product name so "nr-assistant" never wraps across
+// two lines in the narrow hint column (a literal hyphen is a valid break point
+// and CSS can't suppress breaks at real hyphens).
+const NR_ASSISTANT = 'nr‑assistant'
+
+export default {
+    name: 'ToolPermissionsSettings',
+    components: { FfListbox, FormHeading },
+    props: {
+        // Whether the user is in an instance editor, where flow-building tools can
+        // actually run. Outside it the tools are still listed (and configurable) but
+        // shown as usable only once an editor is open.
+        inEditor: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        ...mapState(useProductAssistantStore, ['toolCatalog', 'toolDefaults', 'toolPolicyFor', 'toolAvailabilityFor']),
+        ...mapState(useContextStore, ['teamMembership']),
+        canUseWriteTools () {
+            return hasAMinimumTeamRoleOf(Roles.Member, this.teamMembership)
+        },
+        policyOptions () {
+            return [
+                { label: 'Always allow', value: 'allow' },
+                { label: 'Ask', value: 'ask' },
+                { label: 'Never', value: 'deny' }
+            ]
+        },
+        defaultColumns () {
+            return [
+                { label: 'Action', key: 'action' },
+                { label: 'Permission', key: 'permission', class: 'permission-col' }
+            ]
+        },
+        toolColumns () {
+            return [
+                { label: 'Tool', key: 'tool' },
+                { label: 'Type', key: 'type' },
+                { label: 'Permission', key: 'permission', class: 'permission-col' }
+            ]
+        },
+        classDefaults () {
+            return [
+                { key: 'read', label: 'Read', hint: 'View flows, palette and nodes' },
+                { key: 'write', label: 'Write', hint: 'Add or change nodes, wires and tabs' },
+                { key: 'delete', label: 'Delete', hint: 'Remove nodes, tabs and flows' }
+            ]
+        },
+        resolvedTools () {
+            // Collapse versioned variants (e.g. "Manage Groups v1/v2") into one family,
+            // keyed by stripped display name + class, then resolve each family against
+            // the instance's nr-assistant version into a single displayed row. The flat
+            // list is sorted read -> write -> delete so the table reads scope-first.
+            const families = new Map()
+            for (const entry of this.toolCatalog) {
+                // Only flow-building tools belong in this section; platform tools (once
+                // they exist) render in their own section (see groupOf / the TODO above).
+                if (groupOf(entry) !== TOOL_GROUPS.FLOW_BUILDING) continue
+                const displayName = this.displayName(entry)
+                const cls = classOf(entry)
+                const familyKey = `${cls}::${displayName}`
+                if (!families.has(familyKey)) {
+                    families.set(familyKey, { familyKey, displayName, toolClass: cls, variants: [] })
+                }
+                families.get(familyKey).variants.push(entry)
+            }
+
+            const resolved = []
+            for (const fam of families.values()) {
+                const r = this.resolveFamily(fam.variants)
+                resolved.push({
+                    familyKey: fam.familyKey,
+                    displayName: fam.displayName,
+                    toolClass: fam.toolClass,
+                    status: r.status,
+                    activeKey: r.activeKey,
+                    variantKeys: fam.variants.map(v => v.key),
+                    ...this.describeControl(fam.toolClass, r)
+                })
+            }
+
+            return resolved.sort((a, b) =>
+                CLASS_ORDER.indexOf(a.toolClass) - CLASS_ORDER.indexOf(b.toolClass) ||
+                a.displayName.localeCompare(b.displayName)
+            )
+        }
+    },
+    methods: {
+        ...mapActions(useProductAssistantStore, ['setToolPreference', 'setToolClassDefault']),
+        scopeLabel (cls) {
+            return CLASS_LABELS[cls] || CLASS_LABELS.write
+        },
+        // Hide the internal version suffix (e.g. "Manage Groups v2") from the
+        // user-facing label; versioned variants are reconciled into one family.
+        displayName (tool) {
+            const name = tool.name || tool.key || ''
+            return name.replace(/[ _-]?[vV]\d+$/, '').trim() || name
+        },
+        // A family-wide preference is written to every variant key, so the user's
+        // choice survives a version bump (when the active variant changes v1 -> v2).
+        setFamilyPreference (variantKeys, policy) {
+            for (const key of variantKeys) {
+                this.setToolPreference(key, policy)
+            }
+        },
+        // Resolve a family's variants into the single row to display: the usable
+        // (in-range) variant if any, otherwise the reason it can't be used.
+        resolveFamily (variants) {
+            const withAvail = variants.map(v => ({ v, a: this.toolAvailabilityFor(v) }))
+            const available = withAvail.filter(x => x.a.status === 'available')
+            const hasNewer = withAvail.some(x => x.a.status === 'requires-update')
+            if (available.length) {
+                const chosen = available.sort((a, b) => this.compareMin(a.v, b.v)).pop()
+                return {
+                    status: 'available',
+                    activeKey: chosen.v.key,
+                    // In-range but a newer variant exists (or a max is set) -> nudge an update.
+                    deprecated: chosen.a.deprecated || hasNewer,
+                    requiredVersion: hasNewer ? this.latestRequiredVersion(withAvail) : null
+                }
+            }
+            const needsUpdate = withAvail.filter(x => x.a.status === 'requires-update')
+            if (needsUpdate.length) {
+                return { status: 'requires-update', activeKey: needsUpdate[0].v.key, deprecated: false, requiredVersion: this.latestRequiredVersion(withAvail) }
+            }
+            return { status: 'deprecated', activeKey: variants[0].key, deprecated: true, requiredVersion: null }
+        },
+        // What the right-hand control should be, plus any hint under the tool name.
+        describeControl (toolClass, r) {
+            if (r.status === 'requires-update') {
+                return {
+                    control: 'status',
+                    statusLabel: 'Update required',
+                    statusHint: r.requiredVersion ? `Needs ${NR_ASSISTANT} ${r.requiredVersion}` : `Update ${NR_ASSISTANT} to enable`
+                }
+            }
+            if (r.status === 'deprecated') {
+                return { control: 'status', statusLabel: 'Deprecated', statusHint: `No longer available — update ${NR_ASSISTANT}` }
+            }
+            if (toolClass !== 'read' && !this.canUseWriteTools) {
+                return { control: 'role', statusLabel: 'Unavailable', statusHint: '' }
+            }
+            return {
+                control: 'toggle',
+                statusLabel: '',
+                statusHint: r.deprecated ? `Newer version available — update ${NR_ASSISTANT}` : ''
+            }
+        },
+        compareMin (a, b) {
+            const av = a.minVersion
+            const bv = b.minVersion
+            if (av && bv && SemVer.valid(av) && SemVer.valid(bv)) return SemVer.compare(av, bv)
+            if (av && !bv) return 1
+            if (!av && bv) return -1
+            return 0
+        },
+        // The version the user should update to: the min version of the NEWEST
+        // variant (highest required), not the lowest. Pointing at the lowest would
+        // send them to an older variant that may already be capped (deprecated),
+        // a dead-end; the highest lands them on the current tool.
+        latestRequiredVersion (withAvail) {
+            const reqs = withAvail.map(x => x.a.requiredVersion).filter(v => v && SemVer.valid(v))
+            if (!reqs.length) return null
+            return reqs.sort(SemVer.compare).pop()
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.tool-permissions {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+}
+
+.tool-permissions__section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+}
+
+.tool-permissions__intro {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--ff-color-text-subtle);
+}
+
+.tool-permissions__cell {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.tool-permissions__title {
+    font-weight: 500;
+    color: var(--ff-color-text);
+}
+
+.tool-permissions__hint {
+    font-size: 0.75rem;
+    color: var(--ff-color-text-subtle);
+
+    &.is-requires-update { color: var(--ff-color-status-info-text); }
+    &.is-deprecated { color: var(--ff-color-status-error-text); }
+}
+
+.tool-permissions__type {
+    color: var(--ff-color-text-subtle);
+}
+
+.tool-permissions__static {
+    font-size: 0.8125rem;
+    color: var(--ff-color-text-subtle);
+}
+
+.tool-permissions__notice,
+.tool-permissions__empty {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--ff-color-text-subtle);
+}
+
+// Keep the permission column hugging the right edge so each tool name lines up
+// with its own control across the row border, rather than floating in whitespace.
+:deep(.permission-col) {
+    width: 1px;
+    white-space: nowrap;
+    text-align: right;
+}
+
+// Compact the shared listbox so the control column stays narrow and the menu
+// never sizes itself to the widest option label. The button renders in-place
+// (only the options popup is teleported), so :deep reaches it from this scope.
+:deep(.tool-permissions__control) {
+    min-width: 0;
+    width: 9rem;
+
+    .ff-button {
+        padding: 0.25rem 0.5rem;
+        border-radius: 5px;
+        font-size: 0.8125rem;
+        border-color: var(--ff-color-border-strong);
+
+        .icon svg {
+            width: 1.1rem;
+            height: 1.1rem;
+        }
+    }
+}
+</style>
diff --git a/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue b/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
index 82201c1740..e73ad318cd 100644
--- a/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
+++ b/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
@@ -1,6 +1,6 @@
 <template>
-    <message-bubble ref="messageBubble" type="ai">
-        <answer-badge v-if="!isChatAnswer && !isQuestionsAnswer && !isPlanAnswer" :kind="answer.kind" />
+    <message-bubble ref="messageBubble" type="ai" :bare="hasToolApproval">
+        <answer-badge v-if="!isChatAnswer && !isQuestionsAnswer && !isPlanAnswer && !hasToolApproval" :kind="answer.kind" />
 
         <rich-content
             v-if="shouldShowRichContent"
@@ -92,6 +92,18 @@
             @reject="onPlanReject"
             @streaming-complete="onComponentComplete('plan-list')"
         />
+
+        <tool-approval-card
+            v-if="shouldShowToolApproval"
+            :name="answer.name"
+            :tool-class="answer.toolClass"
+            :params="answer.params"
+            :status="answer.status"
+            @approve="onToolApprove"
+            @allow-always="onToolAllowAlways"
+            @deny="onToolDeny"
+            @streaming-complete="onComponentComplete('tool-approval-card')"
+        />
     </message-bubble>
 </template>
 
@@ -113,6 +125,7 @@ import QuestionsList from './resources/QuestionsList.vue'
 import ResourcesList from './resources/ResourcesList.vue'
 import RichContent from './resources/RichContent.vue'
 import SuggestionsList from './resources/SuggestionsList.vue'
+import ToolApprovalCard from './resources/ToolApprovalCard.vue'
 
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
 import { useProductExpertStore } from '@/stores/product-expert.js'
@@ -131,7 +144,8 @@ export default {
         GuideStepsList,
         MessageBubble,
         GuideHeader,
-        IssuesList
+        IssuesList,
+        ToolApprovalCard
     },
     props: {
         answer: {
@@ -202,6 +216,9 @@ export default {
         hasPlan () {
             return this.isPlanAnswer && typeof this.answer.content === 'string' && this.answer.content.length > 0
         },
+        hasToolApproval () {
+            return this.answer.kind === 'tool-approval' && !!this.answer.id
+        },
         isChatAnswer () {
             return !Object.hasOwnProperty.call(this.answer, 'kind') || this.answer.kind === 'chat'
         },
@@ -285,6 +302,13 @@ export default {
             if (this.componentStreamingOrder.indexOf(key) === 0) return true
             return this.streamedComponents.length >= this.componentStreamingOrder.indexOf(key)
         },
+        shouldShowToolApproval () {
+            const key = 'tool-approval-card'
+            if (!this.componentStreamingOrder.includes(key)) return false
+            if (!this.hasToolApproval) return false
+            if (this.componentStreamingOrder.indexOf(key) === 0) return true
+            return this.streamedComponents.length >= this.componentStreamingOrder.indexOf(key)
+        },
         shouldStream () {
             return !this.answer._streamed
         }
@@ -320,7 +344,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions(useProductExpertStore, ['updateAnswerStreamedState', 'handleQuery', 'setPendingInput', 'requestPlanChange', 'resetComposer', 'setPlanMode']),
+        ...mapActions(useProductExpertStore, ['updateAnswerStreamedState', 'handleQuery', 'setPendingInput', 'requestPlanChange', 'resetComposer', 'setPlanMode', 'resolveToolApproval']),
         buildStreamingOrder () {
             // order matters
             // this is where the decision of the streaming order of components is decided
@@ -335,6 +359,7 @@ export default {
             if (this.hasSuggestions) this.componentStreamingOrder.push('suggestions-list')
             if (this.hasQuestions) this.componentStreamingOrder.push('questions-list')
             if (this.hasPlan) this.componentStreamingOrder.push('plan-list')
+            if (this.hasToolApproval) this.componentStreamingOrder.push('tool-approval-card')
         },
         async onComponentComplete (key) {
             if (!this.shouldStream) await this.waitFor(200)
@@ -373,6 +398,15 @@ export default {
             this.resetComposer()
             this.handleQuery({ query: 'I do not want to proceed with this plan.' })
         },
+        onToolApprove () {
+            this.resolveToolApproval({ id: this.answer.id, approved: true, always: false })
+        },
+        onToolAllowAlways () {
+            this.resolveToolApproval({ id: this.answer.id, approved: true, always: true })
+        },
+        onToolDeny () {
+            this.resolveToolApproval({ id: this.answer.id, approved: false, always: false })
+        },
         handleClick (e) {
             const target = e.target
             // - Must be in the immersive editor
diff --git a/frontend/src/components/expert/components/messages/components/MessageBubble.vue b/frontend/src/components/expert/components/messages/components/MessageBubble.vue
index 2d6de846b3..3751b2ff75 100644
--- a/frontend/src/components/expert/components/messages/components/MessageBubble.vue
+++ b/frontend/src/components/expert/components/messages/components/MessageBubble.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         class="message-bubble flex flex-col gap-1"
-        :class="{'ai-message': isAiMessage, 'human-message': isHumanMessage, 'system-message': isSystemMessage, [`system-${variant}`]: variant}"
+        :class="{'ai-message': isAiMessage, 'human-message': isHumanMessage, 'system-message': isSystemMessage, 'message-bubble--bare': bare, [`system-${variant}`]: variant}"
     >
         <slot />
     </div>
@@ -19,6 +19,14 @@ export default {
             required: false,
             type: String,
             default: null
+        },
+        // Strips the bubble chrome (background + padding) so a self-contained
+        // card (e.g. the tool approval card) renders standalone, not nested
+        // inside an AI bubble.
+        bare: {
+            required: false,
+            type: Boolean,
+            default: false
         }
     },
     computed: {
@@ -49,6 +57,14 @@ export default {
         border-bottom-left-radius: 0.125rem;
     }
 
+    &.message-bubble--bare {
+        padding: 0;
+
+        &.ai-message {
+            background-color: transparent;
+        }
+    }
+
     &.human-message {
         background-color: var(--ff-color-accent);
         color: var(--ff-color-text-on-brand);
diff --git a/frontend/src/components/expert/components/messages/components/resources/JsonViewer.vue b/frontend/src/components/expert/components/messages/components/resources/JsonViewer.vue
new file mode 100644
index 0000000000..4ee8cffeba
--- /dev/null
+++ b/frontend/src/components/expert/components/messages/components/resources/JsonViewer.vue
@@ -0,0 +1,174 @@
+<template>
+    <div class="json-viewer">
+        <div v-if="showHeader" class="json-viewer__header">
+            <ff-button
+                v-if="collapsible"
+                kind="tertiary"
+                size="small"
+                class="json-viewer__collapse-toggle"
+                :title="collapsed ? 'Expand' : 'Collapse'"
+                @click="collapsed = !collapsed"
+            >
+                <template #icon-left>
+                    <ChevronRightIcon
+                        class="json-viewer__caret"
+                        :class="{ 'json-viewer__caret--open': !collapsed }"
+                    />
+                </template>
+                {{ label || 'Payload' }}
+            </ff-button>
+            <span v-else-if="label" class="json-viewer__label">{{ label }}</span>
+            <ff-button
+                v-if="hasLongLines && !collapsed"
+                :kind="wrapped ? 'secondary' : 'tertiary'"
+                size="small"
+                class="json-viewer__wrap-toggle"
+                :title="wrapped ? 'Word wrap on' : 'Word wrap off'"
+                @click="wrapped = !wrapped"
+            >
+                Wrap
+            </ff-button>
+        </div>
+        <div
+            v-show="!collapsed"
+            class="json-viewer__scroll"
+            :class="{ 'json-viewer__scroll--wrap': wrapped }"
+        >
+            <pre class="json-viewer__content">{{ text }}</pre>
+        </div>
+    </div>
+</template>
+
+<script>
+// Single-value JSON viewer with prettify + word-wrap, mirroring the presentation
+// of the snapshot comparison diff panel (SnapshotDiffChangePanel) without its
+// two-sided diff machinery — used for read-only payloads such as the tool
+// approval card's call parameters. The wrap toggle only appears when a line is
+// long enough to overflow horizontally. When collapsible, a header toggle hides
+// or reveals the content at any time; defaultCollapsed seeds its initial state.
+import { ChevronRightIcon } from '@heroicons/vue/20/solid'
+
+const LONG_LINE_THRESHOLD = 50
+
+// Stringify that never throws — if the payload can't be serialised for any
+// reason, show a plain error instead of breaking the surrounding card.
+function safeStringify (value) {
+    try {
+        return JSON.stringify(value, null, 2)
+    } catch (err) {
+        return 'Could not display the payload.'
+    }
+}
+
+export default {
+    name: 'JsonViewer',
+    components: { ChevronRightIcon },
+    props: {
+        value: {
+            type: [Object, Array, String, Number, Boolean],
+            default: undefined
+        },
+        label: {
+            type: String,
+            default: null
+        },
+        collapsible: {
+            type: Boolean,
+            default: false
+        },
+        defaultCollapsed: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            wrapped: false,
+            collapsed: this.defaultCollapsed
+        }
+    },
+    computed: {
+        // Prettified JSON for objects/arrays, plain string for scalars — the same
+        // stringify the snapshot diff panel uses, made crash-proof.
+        text () {
+            const v = this.value
+            if (v === undefined || v === null) return ''
+            if (typeof v === 'object') return safeStringify(v)
+            return String(v)
+        },
+        hasLongLines () {
+            return this.text.split('\n').some(line => line.length > LONG_LINE_THRESHOLD)
+        },
+        showHeader () {
+            return this.collapsible || !!this.label || this.hasLongLines
+        }
+    },
+    watch: {
+        // Let the parent drive collapse on a state change (e.g. a tool decision)
+        // while still leaving the header toggle live for manual expand/collapse.
+        defaultCollapsed (val) {
+            this.collapsed = val
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.json-viewer {
+    border: 1px solid var(--ff-color-border);
+    border-radius: 4px;
+    overflow: hidden;
+    background: var(--ff-color-bg-surface);
+}
+
+.json-viewer__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 2px 8px;
+    background: var(--ff-color-bg-emphasis);
+    border-bottom: 1px solid var(--ff-color-border);
+}
+
+.json-viewer__label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--ff-color-text-subtle);
+}
+
+.json-viewer__collapse-toggle {
+    font-weight: 600;
+    color: var(--ff-color-text-subtle);
+}
+
+.json-viewer__caret {
+    width: 1rem;
+    height: 1rem;
+    transition: transform 0.2s ease;
+
+    &--open {
+        transform: rotate(90deg);
+    }
+}
+
+.json-viewer__wrap-toggle {
+    margin-left: auto;
+}
+
+.json-viewer__scroll {
+    overflow-x: auto;
+}
+
+.json-viewer__content {
+    margin: 0;
+    padding: 8px;
+    font-family: monospace;
+    font-size: 0.8125rem;
+    white-space: pre;
+}
+
+.json-viewer__scroll--wrap .json-viewer__content {
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+</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
new file mode 100644
index 0000000000..acc8f1a654
--- /dev/null
+++ b/frontend/src/components/expert/components/messages/components/resources/ToolApprovalCard.vue
@@ -0,0 +1,147 @@
+<template>
+    <div class="expert-tool-approval" :class="`status-${status}`">
+        <div class="tool-approval-header">
+            <span class="tool-approval-name">{{ name }}</span>
+            <span v-if="toolClass" class="tool-approval-tag" :class="`tag-${toolClass}`">
+                {{ classLabel }}
+            </span>
+        </div>
+        <json-viewer
+            v-if="hasParams"
+            :value="params"
+            collapsible
+            :default-collapsed="payloadCollapsed"
+            class="tool-approval-payload"
+        />
+
+        <div v-if="status === 'pending'" class="tool-approval-actions">
+            <ff-button kind="primary" size="small" :disabled="disabled || decided" @click="decide('approve')">
+                Allow
+            </ff-button>
+            <ff-button
+                kind="secondary"
+                size="small"
+                :disabled="disabled || decided"
+                title="Always allow this tool without asking again"
+                @click="decide('allow-always')"
+            >
+                Always allow
+            </ff-button>
+            <ff-button kind="tertiary" size="small" :disabled="disabled || decided" @click="decide('deny')">
+                Deny
+            </ff-button>
+        </div>
+        <p v-else class="tool-approval-outcome">
+            {{ status === 'approved' ? 'Allowed' : 'Denied' }}
+        </p>
+    </div>
+</template>
+
+<script>
+import JsonViewer from './JsonViewer.vue'
+
+export default {
+    name: 'ToolApprovalCard',
+    components: { JsonViewer },
+    props: {
+        name: {
+            type: String,
+            default: 'this tool'
+        },
+        toolClass: {
+            type: String,
+            default: ''
+        },
+        params: {
+            type: Object,
+            default: () => ({})
+        },
+        status: {
+            type: String,
+            default: 'pending' // 'pending' | 'approved' | 'denied'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['approve', 'allow-always', 'deny', 'streaming-complete'],
+    data () {
+        return {
+            // Optimistically disables the buttons the moment a choice is made, so the
+            // card cannot be clicked twice while the decision round-trips to the agent.
+            decided: false
+        }
+    },
+    computed: {
+        classLabel () {
+            return { read: 'Read', write: 'Write', delete: 'Delete' }[this.toolClass] || 'Write'
+        },
+        hasParams () {
+            return Object.keys(this.params || {}).length > 0
+        },
+        // Collapse the payload once the call is allowed, always-allowed or denied
+        // (locally or via the round-tripped status); the header toggle stays live
+        // so the user can re-expand it at any time.
+        payloadCollapsed () {
+            return this.decided || this.status !== 'pending'
+        }
+    },
+    mounted () {
+        // Interactive card, not streamed text — signal completion so the
+        // AnswerWrapper streaming order can advance.
+        this.$nextTick(() => this.$emit('streaming-complete'))
+    },
+    methods: {
+        decide (action) {
+            if (this.disabled || this.decided) return
+            this.decided = true
+            this.$emit(action)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.expert-tool-approval {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    border: 1px solid var(--ff-color-border);
+    border-radius: 6px;
+    background: var(--ff-color-bg-surface);
+}
+
+.tool-approval-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.tool-approval-name {
+    font-weight: 600;
+}
+
+.tool-approval-tag {
+    font-size: 0.75rem;
+    padding: 1px 6px;
+    border-radius: 4px;
+    &.tag-read { background: var(--ff-color-bg-emphasis); color: var(--ff-color-text-subtle); }
+    &.tag-write { background: var(--ff-color-status-info-bg); color: var(--ff-color-status-info-text); }
+    &.tag-delete { background: var(--ff-color-status-error-bg); color: var(--ff-color-status-error-text); }
+}
+
+.tool-approval-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+
+.tool-approval-outcome {
+    margin: 0;
+    font-weight: 600;
+    color: var(--ff-color-text-subtle);
+}
+</style>
diff --git a/frontend/src/stores/context.js b/frontend/src/stores/context.js
index d22eee5f9f..7185e22eba 100644
--- a/frontend/src/stores/context.js
+++ b/frontend/src/stores/context.js
@@ -1,7 +1,9 @@
 import { defineStore } from 'pinia'
 
 import teamApi from '../api/team.js'
+import { hasAMinimumTeamRoleOf } from '../composables/Permissions.js'
 import product from '../services/product.js'
+import { Roles } from '../utils/roles.js'
 
 import { useAccountAuthStore } from './account-auth.js'
 import { useProductAssistantStore } from './product-assistant.js'
@@ -110,7 +112,12 @@ export const useContextStore = defineStore('context', {
                 selectedNodes,
                 scope,
                 questionCadence: useProductExpertStore().questionCadence,
-                planMode: useProductExpertStore().planMode
+                planMode: useProductExpertStore().planMode,
+                // Human-in-the-loop tool permissions (#421). The agent gates each
+                // flow-building tool call against this map; canUseWriteTools drives
+                // role inheritance (fail-closed) for write/delete tools.
+                toolPermissions: assistantStore.resolvedToolPermissions,
+                canUseWriteTools: hasAMinimumTeamRoleOf(Roles.Member, state.teamMembership)
             }
         }
     },
diff --git a/frontend/src/stores/product-assistant.js b/frontend/src/stores/product-assistant.js
index 0eae819916..d9175a7174 100644
--- a/frontend/src/stores/product-assistant.js
+++ b/frontend/src/stores/product-assistant.js
@@ -6,6 +6,42 @@ import { useContextStore } from '@/stores/context.js'
 
 const MAX_DEBUG_LOG_ENTRIES = 100 // maximum number of debug log entries to keep
 
+// --- Expert tool permissions (human-in-the-loop, #421) -----------------------
+// Pending tool-approval resolvers, keyed by approval id. Kept at module scope
+// (not in store state) so the Map and the Promise resolvers it holds are never
+// wrapped in a reactive proxy, which would break their internals.
+const pendingToolApprovals = new Map()
+
+const TOOL_POLICIES = ['allow', 'ask', 'deny']
+const isToolPolicy = (p) => TOOL_POLICIES.includes(p)
+const TOOL_CLASSES = ['read', 'write', 'delete']
+// Fail-safe default when a class has no configured default: read allows, the rest ask.
+const fallbackForToolClass = (cls) => (cls === 'read' ? 'allow' : 'ask')
+
+// Derive a tool's permission class from its catalog entry. Read tools view only;
+// delete tools are destructive writes; everything else that changes flows is write.
+export const classOf = (entry) => {
+    if (!entry) return 'write'
+    if (entry.toolClass === 'read') return 'read'
+    if (entry.toolClass === 'delete' || entry.destructive === true) return 'delete'
+    return 'write'
+}
+
+// Tool groups partition the catalog into the sections shown in the permissions UI
+// (flow-building vs FlowFuse platform). Each group is meant to carry its own
+// read/write/delete defaults so a default for one never silently applies to the other.
+export const TOOL_GROUPS = { FLOW_BUILDING: 'flow-building', PLATFORM: 'platform' }
+
+// Which group a catalog entry belongs to. Today every tool the agent serves is a
+// flow-building tool, so everything maps to 'flow-building'.
+// TODO(platform-tools): once Steve's platform-tool work is merged into the agent,
+// platform tools arrive in the same catalog. Map them to TOOL_GROUPS.PLATFORM here —
+// e.g. off a `group`/`target` field added to the catalog entry in buildToolCatalog
+// (get_mcp_tools.js) or a tool annotation — so the UI routes them to the FlowFuse
+// Platform Tools section and applies that group's own defaults (see the toolDefaults
+// TODO below for namespacing the defaults by group at the same time).
+export const groupOf = (entry) => entry?.group || TOOL_GROUPS.FLOW_BUILDING
+
 const eventsRegistry = {
     'editor:open': {
         nodeRedEvent: 'editor:open', // this is the Node-RED event
@@ -158,7 +194,18 @@ export const useProductAssistantStore = defineStore('product-assistant', {
         // internally; external consumers should read this.debugLog (the getter).
         debugLogEntries: [],
         editorState: { ...buildInitialEditorState() },
-        pendingRequests: new Map() // key is transactionId, value is { resolve, reject, timeout, timestamp, type, action, params }
+        pendingRequests: new Map(), // key is transactionId, value is { resolve, reject, timeout, timestamp, type, action, params }
+        // Expert tool permissions (HITL, #421). The catalog + hash are refreshed from
+        // the agent; defaults + preferences are the user's choices (persisted below).
+        toolCatalog: [],
+        toolCatalogHash: null,
+        // Standing read/write/delete defaults. Today these are the flow-building tools'
+        // defaults (the only tools that exist).
+        // TODO(platform-tools): when platform tools land (see groupOf), namespace these
+        // by tool group so flow-building and platform actions carry independent defaults,
+        // and migrate the persisted shape from { read, write, delete } accordingly.
+        toolDefaults: { read: 'allow', write: 'ask', delete: 'ask' },
+        toolPreferences: {}
     }),
     getters: {
         isImmersiveInstance: () => {
@@ -260,6 +307,64 @@ export const useProductAssistantStore = defineStore('product-assistant', {
             // NOTE: this is achieved via dynamic event registration for 'flows:loaded' and 'runtime-state' events,
             // which requires nr-assistant version 0.10.1 or later.
             return state.editorState?.flowsLoaded || state.editorState?.runtimeState?.state === 'start'
+        },
+        // --- Expert tool permissions (HITL, #421) ---
+        /** The standing default for a tool class ('read'|'write'|'delete'). */
+        defaultForToolClass: (state) => (cls) => {
+            const d = state.toolDefaults?.[cls]
+            return isToolPolicy(d) ? d : fallbackForToolClass(cls)
+        },
+        /**
+         * Effective policy for a catalog key. An explicit per-tool preference always
+         * wins; otherwise the standing default for the tool's class applies.
+         */
+        toolPolicyFor: (state) => (key) => {
+            const explicit = state.toolPreferences[key]
+            if (isToolPolicy(explicit)) return explicit
+            const entry = state.toolCatalog.find(t => t.key === key)
+            const cls = classOf(entry)
+            const d = state.toolDefaults?.[cls]
+            return isToolPolicy(d) ? d : fallbackForToolClass(cls)
+        },
+        /**
+         * The resolved permission map sent to the agent in the chat context:
+         * { defaults, tools: { [key]: 'allow'|'ask'|'deny' } }.
+         */
+        resolvedToolPermissions: (state) => {
+            const defaults = {}
+            for (const cls of TOOL_CLASSES) {
+                defaults[cls] = isToolPolicy(state.toolDefaults?.[cls]) ? state.toolDefaults[cls] : fallbackForToolClass(cls)
+            }
+            const tools = {}
+            for (const t of state.toolCatalog) {
+                const explicit = state.toolPreferences[t.key]
+                tools[t.key] = isToolPolicy(explicit) ? explicit : defaults[classOf(t)]
+            }
+            return { defaults, tools }
+        },
+        /**
+         * Availability of a tool against the instance's installed nr-assistant version
+         * (from `_meta.assistantMinVersion` / `assistantMaxVersion` on each entry).
+         * Returns { status: 'available'|'requires-update'|'deprecated', deprecated, requiredVersion }.
+         * - requires-update: instance is below the tool's min version (update to enable).
+         * - deprecated: instance is past the tool's max version (a newer variant supersedes it).
+         * - available + deprecated flag: in range, but a max is set so an update will supersede it.
+         */
+        toolAvailabilityFor: (state) => (entry) => {
+            const version = state.version
+            const min = entry?.minVersion || null
+            const max = entry?.maxVersion || null
+            if (!version || !SemVer.valid(version)) {
+                // Without a known instance version we can't gate — treat as usable.
+                return { status: 'available', deprecated: !!max, requiredVersion: min }
+            }
+            if (min && SemVer.valid(min) && SemVer.lt(version, min)) {
+                return { status: 'requires-update', deprecated: false, requiredVersion: min }
+            }
+            if (max && SemVer.valid(max) && SemVer.gt(version, max)) {
+                return { status: 'deprecated', deprecated: true, requiredVersion: null }
+            }
+            return { status: 'available', deprecated: !!max, requiredVersion: null }
         }
     },
     actions: {
@@ -548,6 +653,52 @@ export const useProductAssistantStore = defineStore('product-assistant', {
                 }
             })
         },
+        // --- Expert tool permissions (HITL, #421) ---
+        setToolCatalog (catalog, hash) {
+            this.toolCatalog = Array.isArray(catalog) ? catalog : []
+            if (hash !== undefined) {
+                this.toolCatalogHash = hash || null
+            }
+        },
+        setToolClassDefault (cls, policy) {
+            if (!TOOL_CLASSES.includes(cls) || !isToolPolicy(policy)) return
+            this.toolDefaults = { ...this.toolDefaults, [cls]: policy }
+        },
+        setToolPreference (key, policy) {
+            if (!isToolPolicy(policy)) return
+            this.toolPreferences = { ...this.toolPreferences, [key]: policy }
+        },
+        clearToolPreference (key) {
+            if (!(key in this.toolPreferences)) return
+            const next = { ...this.toolPreferences }
+            delete next[key]
+            this.toolPreferences = next
+        },
+        // Pending approvals (module-level map; see note at top of file).
+        registerPendingApproval (id, resolve, meta = {}) {
+            pendingToolApprovals.set(id, { resolve, meta })
+        },
+        getPendingApproval (id) {
+            return pendingToolApprovals.get(id) || null
+        },
+        resolvePendingApproval (id, approved) {
+            const entry = pendingToolApprovals.get(id)
+            if (!entry) return false
+            pendingToolApprovals.delete(id)
+            entry.resolve(!!approved)
+            return true
+        },
+        hasPendingApprovals () {
+            return pendingToolApprovals.size > 0
+        },
+        // Resolve every open approval as denied — used when the user stops the chat so
+        // the agent's approval wait unblocks instead of hanging on an abandoned prompt.
+        rejectAllPendingApprovals () {
+            for (const entry of pendingToolApprovals.values()) {
+                entry.resolve(false)
+            }
+            pendingToolApprovals.clear()
+        },
         sendMessage (payload) {
             const orchestrator = getAppOrchestrator()
             const contextStore = useContextStore()
@@ -561,5 +712,11 @@ export const useProductAssistantStore = defineStore('product-assistant', {
                 targetOrigin: (contextStore.instance || contextStore.device)?.url
             })
         }
+    },
+    // Only the user's HITL tool-permission choices persist across sessions; the
+    // catalog/hash and all editor/session state are re-derived each session.
+    persist: {
+        pick: ['toolDefaults', 'toolPreferences'],
+        storage: localStorage
     }
 })
diff --git a/frontend/src/stores/product-expert.js b/frontend/src/stores/product-expert.js
index d88bd54b57..27195f40db 100644
--- a/frontend/src/stores/product-expert.js
+++ b/frontend/src/stores/product-expert.js
@@ -301,7 +301,8 @@ export const useProductExpertStore = defineStore('product-expert', {
                         query,
                         context: {
                             ...useContextStore().expert,
-                            agent: this.agentMode
+                            agent: this.agentMode,
+                            ...(contextOverrides || {})
                         }
                     },
                     correlationData: transactionId,
@@ -331,11 +332,38 @@ export const useProductExpertStore = defineStore('product-expert', {
                 onDisconnect: this._onMqttDisconnect
             })
         },
+        async fetchToolCatalog () {
+            // Fetch the tool catalog for the permissions UI (#421) over HTTP
+            // (GET /api/v1/expert/mcp/tools), mirroring the insights `getCapabilities`
+            // pattern. This deliberately does NOT use MQTT — the catalog is needed before
+            // any chat, and we must not open (or keep open) the broker connection on mount.
+            // The agent replies with a curated, friendly catalog (raw tool identifiers
+            // never reach the browser) plus a `hash` we store to detect later drift.
+            // Fetched whenever the Expert panel mounts, not only in the editor: the
+            // permissions UI lists every tool everywhere. Flow-building tools are simply
+            // shown as usable only from an instance editor (gated in the settings UI).
+            const assistantStore = useProductAssistantStore()
+
+            const teamId = useContextStore().expert?.teamId
+            if (!teamId) return
+
+            try {
+                const { catalog, hash } = await expertApi.getToolCatalog({ teamId })
+                assistantStore.setToolCatalog(catalog || [], hash || null)
+            } catch (e) {
+                // Non-fatal: the agent still gates safely with defaults if the catalog
+                // is unavailable; the settings UI simply shows no tools yet.
+            }
+        },
         async handleInFlightRequest ({ topic, message, transactionId, sessionId, chatTransactionId } = {}) {
-            const inFlightRequest = this._inFlightRequests.values().next().value
+            // Match the originating chat request explicitly (not just the first entry) so a
+            // concurrent in-flight request — e.g. an open tool approval — can't shadow it and
+            // cause us to drop a valid in-flight request.
+            const inFlightRequest = Array.from(this._inFlightRequests.values())
+                .find(r => r.transactionId === chatTransactionId)
 
             // dismiss inFlight requests that don't match the existing sessionId or the inFlight message transactionId
-            if (sessionId !== this.sessionId || inFlightRequest?.transactionId !== chatTransactionId) return
+            if (sessionId !== this.sessionId || !inFlightRequest) return
 
             const servicesOrchestrator = getAppOrchestrator()
             const assistantStore = useProductAssistantStore()
@@ -398,6 +426,26 @@ export const useProductExpertStore = defineStore('product-expert', {
                     this._onMqttError(e)
                 }
                 break
+            case parsedTopic.inflightType === 'expert:tool-approval':
+                // Human-in-the-loop approval request (#421). Render the approval card and
+                // wait — with no timeout — for the user's decision, then reply to the agent.
+                try {
+                    const approved = await this.requestToolApproval(payload)
+                    await mqttService.publishMessage(this.mqttConnectionKey, {
+                        qos: 2,
+                        topic: responseTopic,
+                        payload: JSON.stringify({ approved }),
+                        correlationData: transactionId,
+                        userProperties: {
+                            sessionId,
+                            transactionId: chatTransactionId,
+                            origin: window.origin || window.location.origin
+                        }
+                    })
+                } catch (e) {
+                    this._onMqttError(e)
+                }
+                break
             default:
                 // do nothing
             }
@@ -406,11 +454,75 @@ export const useProductExpertStore = defineStore('product-expert', {
             // ignore aborted messages through mqtt
             if (Object.prototype.hasOwnProperty.call(response, 'aborted') && response.aborted === true) return
 
+            // Tool-catalog freshness (#421): the agent stamps a catalog hash on every
+            // response. If it differs from what we hold, the catalog drifted (e.g. a
+            // rolling deploy landed a new tool version) — refetch the full list in the
+            // background. Only the small hash rides on each interaction.
+            const incomingHash = response?.toolCatalogHash
+            if (incomingHash && incomingHash !== useProductAssistantStore().toolCatalogHash) {
+                this.fetchToolCatalog()
+            }
+
             if (response.answer && Array.isArray(response.answer)) {
                 this.addAiMessage(response)
                 this._clearInFlightUpdates()
             }
         },
+        // Render a tool-approval card and return a Promise that resolves to the user's
+        // decision (true/false). The Promise stays open with no timeout (#421); it is
+        // resolved by resolveToolApproval (a card button) or cancelPendingToolApprovals
+        // (the chat stop). The agent holds its tool call paused on the MQTT round-trip.
+        requestToolApproval (payload = {}) {
+            const permStore = useProductAssistantStore()
+            const id = uuidv4()
+            this.addAiMessage({
+                kind: 'tool-approval',
+                answer: [{
+                    kind: 'tool-approval',
+                    id,
+                    toolKey: payload.tool,
+                    name: payload.name,
+                    toolClass: payload.toolClass,
+                    params: payload.params,
+                    status: 'pending'
+                }]
+            })
+            return new Promise((resolve) => {
+                permStore.registerPendingApproval(id, resolve, { toolKey: payload.tool })
+            })
+        },
+        resolveToolApproval ({ id, approved, always } = {}) {
+            const permStore = useProductAssistantStore()
+            const entry = permStore.getPendingApproval(id)
+            if (!entry) return
+            // "Always allow" persists an allow preference for this tool.
+            if (always && approved && entry.meta?.toolKey) {
+                permStore.setToolPreference(entry.meta.toolKey, 'allow')
+            }
+            // Reflect the outcome on the card so its buttons disable.
+            this._setToolApprovalStatus(id, approved ? 'approved' : 'denied')
+            permStore.resolvePendingApproval(id, approved)
+        },
+        // Deny every open approval (used when the user stops the chat) so the agent's
+        // approval wait unblocks instead of hanging on an abandoned prompt.
+        cancelPendingToolApprovals () {
+            const permStore = useProductAssistantStore()
+            if (!permStore.hasPendingApprovals()) return
+            for (const m of this._agentStore.messages) {
+                if (!Array.isArray(m.answer)) continue
+                for (const a of m.answer) {
+                    if (a.kind === 'tool-approval' && a.status === 'pending') a.status = 'denied'
+                }
+            }
+            permStore.rejectAllPendingApprovals()
+        },
+        _setToolApprovalStatus (id, status) {
+            for (const m of this._agentStore.messages) {
+                if (!Array.isArray(m.answer)) continue
+                const ans = m.answer.find(a => a.kind === 'tool-approval' && a.id === id)
+                if (ans) { ans.status = status; return }
+            }
+        },
         async startOver () {
             const agentStore = this._agentStore
             agentStore.sessionId = uuidv4()
@@ -1063,6 +1175,8 @@ export const useProductExpertStore = defineStore('product-expert', {
             this.addPredefinedAiMessage(payload.message, { isError: true, code: payload.code })
         },
         stopInflightChat () {
+            // Deny any open approval prompts first so the agent's paused tool call unblocks.
+            this.cancelPendingToolApprovals()
             if (this.shouldUseMqtt) {
                 const inFlightRequest = this._inFlightRequests.values().next().value
                 const servicesOrchestrator = getAppOrchestrator()