diff --git a/frontend/src/components/expert/components/ExpertChatInput.vue b/frontend/src/components/expert/components/ExpertChatInput.vue
index 8b955b983f..709fd6dff2 100644
--- a/frontend/src/components/expert/components/ExpertChatInput.vue
+++ b/frontend/src/components/expert/components/ExpertChatInput.vue
@@ -16,6 +16,20 @@
                 Start over
             </button>
             <div class="right-buttons">
+                <default-chip
+                    v-if="!isInsightsAgent"
+                    class="plan-mode-chip"
+                    text="Plan mode"
+                    :modelValue="planMode"
+                    :disabled="isWaitingForResponse"
+                    title="Plan mode: the Expert proposes a plan before making any changes, and acts only once you approve it."
+                    data-el="expert-plan-mode-toggle"
+                    @toggle="setPlanMode(!planMode)"
+                >
+                    <template #icon>
+                        <ff-toggle-switch :modelValue="planMode" size="small" tabindex="-1" />
+                    </template>
+                </default-chip>
                 <capabilities-selector v-if="isInsightsAgent" />
                 <button
                     v-else
@@ -101,6 +115,7 @@ import FormHeading from '../../FormHeading.vue'
 import ResizeBar from '../../ResizeBar.vue'
 
 import CapabilitiesSelector from './CapabilitiesSelector.vue'
+import DefaultChip from './chips/DefaultChip.vue'
 import ContextSelector from './context-selection/index.vue'
 
 import { useResizingHelper } from '@/composables/ResizingHelper.js'
@@ -115,6 +130,7 @@ export default {
         CapabilitiesSelector,
         Cog8ToothIcon,
         ContextSelector,
+        DefaultChip,
         FormHeading,
         ResizeBar
     },
@@ -147,6 +163,8 @@ export default {
             inputText: '',
             includeSelection: true,
             isTextareaFocused: false,
+            // true after "Request changes" on a plan, until the user types or sends; drives the hint placeholder
+            requestingPlanChange: false,
             // The composer auto-sizes to its content via CSS (see .chat-input field-sizing).
             // Only once the user drag-resizes do we pin it to an explicit height.
             userResized: false
@@ -166,7 +184,9 @@ export default {
             'hasMessages',
             'isWaitingForResponse',
             'pendingInput',
-            'questionCadence'
+            'composerCommand',
+            'questionCadence',
+            'planMode'
         ]),
         questionCadenceOptions () {
             return [
@@ -197,6 +217,9 @@ export default {
             if (this.isInsightsAgent && !this.hasSelectedCapabilities) {
                 return 'Select a resource to get started'
             }
+            if (this.requestingPlanChange) {
+                return 'Describe a change to the plan, or paste an edited version'
+            }
             return this.isInsightsAgent
                 ? 'Tell us what you want to know about'
                 : 'Tell us what you need help with'
@@ -214,12 +237,26 @@ export default {
         pendingInput (text) {
             if (text) {
                 this.inputText = text
+                this.requestingPlanChange = false
                 this.setPendingInput('')
-                this.$nextTick(() => {
-                    this.$refs.textarea.focus()
-                    // No manual sizing needed: the textarea auto-grows to fit the loaded content
-                    // (e.g. an edited question) via CSS, capped by its max-height.
-                })
+                this.$nextTick(() => this.$refs.textarea.focus())
+            }
+        },
+        composerCommand (command) {
+            if (!command) return
+            // Plan card actions: focus an empty composer with a change hint, or clear a
+            // plan loaded via "Edit manually" that was approved/rejected without sending.
+            this.inputText = ''
+            this.requestingPlanChange = command === 'request-plan-change'
+            if (this.requestingPlanChange) {
+                this.$nextTick(() => this.$refs.textarea.focus())
+            }
+            this.setComposerCommand(null)
+        },
+        inputText (value) {
+            // Clear the plan-change hint once the user starts typing their own text.
+            if (value && this.requestingPlanChange) {
+                this.requestingPlanChange = false
             }
         }
     },
@@ -233,7 +270,7 @@ export default {
     },
     methods: {
         ...mapActions(useProductAssistantStore, ['resetContextSelection']),
-        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'setPendingInput', 'setQuestionCadence']),
+        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'setPendingInput', 'setComposerCommand', 'setQuestionCadence', 'setPlanMode']),
         openSettings () {
             this.$refs.settingsDialog.show()
         },
@@ -258,6 +295,7 @@ export default {
                 .catch(e => e)
 
             this.inputText = ''
+            this.requestingPlanChange = false
         },
         onStartResize (event) {
             // Seed the drag from the composer's current rendered height (it may have auto-grown to
@@ -321,6 +359,28 @@ export default {
     align-items: center;
 }
 
+// Reuses the shared DefaultChip; only tweaks needed here are neutralising the chip's
+// warning-yellow separator and centring the label around the divider.
+.plan-mode-chip {
+    :deep(.separator),
+    &.active :deep(.separator) {
+        background: var(--ff-color-border);
+    }
+
+    // DefaultChip's .text padding is asymmetric and it adds a 5px flex gap before the
+    // divider; equalise so "Plan mode" sits centred on both sides of the divider cell.
+    :deep(.text) {
+        padding-left: 0.5rem;
+        padding-right: calc(0.5rem - 5px);
+    }
+
+    // The switch is a visual indicator only; the chip handles the click.
+    :deep(.ff-toggle-switch) {
+        pointer-events: none;
+        flex-shrink: 0;
+    }
+}
+
 button {
     padding: 0.5rem 0.75rem; // py-2 px-3
     border-radius: 9999px; // rounded-full
@@ -406,6 +466,10 @@ button {
     flex: 1;
     display: flex;
     flex-direction: column;
+    // min-height: 0 must be on every ancestor in this flex chain, not just .chat-input:
+    // without it this wrapper keeps its content (min-content) height, so a long plan loaded
+    // via "Edit" pushes the whole composer tall instead of letting the textarea scroll.
+    min-height: 0;
     border: 2px solid var(--ff-color-border-strong); // border-2 border-gray-300
     border-radius: 0.5rem; // rounded-lg
     transition: border-color 0.2s ease;
@@ -415,12 +479,12 @@ button {
     }
 
     .chat-input {
-        // field-sizing lets the textarea grow with its content (typed or loaded, e.g. an edited
-        // question) up to the composer's max-height, where it scrolls — no JS measuring needed.
-        // flex-basis auto so it sizes to that content but still fills the box when it's taller
-        // (an empty composer, or after a drag-resize).
+        // field-sizing grows the textarea with its content up to the composer's max-height.
+        // min-height: 0 lets it shrink within the flex box past its content height (loading a
+        // long plan via "Edit manually") so overflow-y scrolls instead of overflowing the chat.
         field-sizing: content;
         flex: 1 1 auto;
+        min-height: 0;
         width: 100%;
         padding: 1rem; // p-4
         box-sizing: border-box;
diff --git a/frontend/src/components/expert/components/chips/DefaultChip.vue b/frontend/src/components/expert/components/chips/DefaultChip.vue
index 057ad81615..5e6df33722 100644
--- a/frontend/src/components/expert/components/chips/DefaultChip.vue
+++ b/frontend/src/components/expert/components/chips/DefaultChip.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="chip" :class="{active: modelValue}" :title="title" @click="$emit('toggle')">
+    <div class="chip" :class="{active: modelValue, disabled}" :title="title" @click="onClick">
         <div class="text">
             <slot name="text">
                 <span>{{ text }}</span>
@@ -9,8 +9,10 @@
         <span class="separator" />
 
         <div class="icon-wrapper">
-            <XMarkIcon v-if="modelValue" class="ff-icon ff-icon-sm" />
-            <PlusIcon v-else class="ff-icon ff-icon-sm" />
+            <slot name="icon" :active="modelValue">
+                <XMarkIcon v-if="modelValue" class="ff-icon ff-icon-sm" />
+                <PlusIcon v-else class="ff-icon ff-icon-sm" />
+            </slot>
         </div>
     </div>
 </template>
@@ -41,11 +43,20 @@ export default {
             type: String,
             required: false,
             default: ''
+        },
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false
         }
     },
     emits: ['toggle'],
     methods: {
-        pluralize
+        pluralize,
+        onClick () {
+            if (this.disabled) return
+            this.$emit('toggle')
+        }
     }
 }
 </script>
@@ -62,6 +73,11 @@ export default {
     transition: 0.3s ease-in-out;
     white-space: nowrap;
 
+    &.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
     &.active {
         background: var(--ff-color-accent-surface);
         border: 1px solid var(--ff-color-accent-light);
diff --git a/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue b/frontend/src/components/expert/components/messages/components/AnswerWrapper.vue
index 8da96c1fcc..2483d0995c 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" :kind="answer.kind" />
+        <answer-badge v-if="!isChatAnswer && !isQuestionsAnswer && !isPlanAnswer" :kind="answer.kind" />
 
         <rich-content
             v-if="shouldShowRichContent"
@@ -77,6 +77,21 @@
             @edit="onQuestionsEdit"
             @streaming-complete="onComponentComplete('questions-list')"
         />
+
+        <plan-card
+            v-if="shouldShowPlanList"
+            :plan="answer.content"
+            :message-uuid="messageUuid"
+            :answer-uuid="answer._uuid"
+            :disabled="interactionDisabled"
+            :should-stream="shouldStream"
+            class="mb-3"
+            @approve="onPlanApprove"
+            @edit-manual="onPlanEditManual"
+            @request-changes="onPlanRequestChanges"
+            @reject="onPlanReject"
+            @streaming-complete="onComponentComplete('plan-list')"
+        />
     </message-bubble>
 </template>
 
@@ -93,6 +108,7 @@ import FlowsList from './resources/FlowsList.vue'
 import GuideStepsList from './resources/GuideStepsList.vue'
 import IssuesList from './resources/IssuesList.vue'
 import PackagesList from './resources/PackagesList.vue'
+import PlanCard from './resources/PlanCard.vue'
 import QuestionsList from './resources/QuestionsList.vue'
 import ResourcesList from './resources/ResourcesList.vue'
 import RichContent from './resources/RichContent.vue'
@@ -107,6 +123,7 @@ export default {
         SuggestionsList,
         RichContent,
         PackagesList,
+        PlanCard,
         FlowsList,
         AnswerBadge,
         ResourcesList,
@@ -145,7 +162,7 @@ export default {
             return msgs.length > 0 && msgs[msgs.length - 1]?._uuid === this.messageUuid
         },
         interactionDisabled () {
-            // Disable the questions card while a response is in flight, and once the turn
+            // Disable the question/plan cards while a response is in flight, and once the turn
             // has passed — i.e. any message has arrived after this one — so a stale card from
             // an earlier turn can no longer be answered.
             return this.isWaitingForResponse || !this.isLatestMessage
@@ -153,7 +170,8 @@ export default {
         hasGuideHeader () {
             // chat answers contain generic titles, they don't need to be displayed.
             // questions answers carry no guide title either.
-            return !!(this.answer.title && !this.isChatAnswer && !this.isQuestionsAnswer)
+            // plan answers carry their heading inside their Markdown content, not a title.
+            return !!(this.answer.title && !this.isChatAnswer && !this.isQuestionsAnswer && !this.isPlanAnswer)
         },
         hasGuideSteps () {
             return Object.hasOwnProperty.call(this.answer, 'steps') && this.answer.steps.length > 0
@@ -174,17 +192,25 @@ export default {
             return this.answer.issues && this.answer.issues.length > 0
         },
         hasPlainContent () {
-            return this.answer.content && this.answer.content.length > 0
+            // A plan keeps its markdown in content, but the PlanCard renders it; do not
+            // also render it as plain rich-content above the card.
+            return !this.isPlanAnswer && this.answer.content && this.answer.content.length > 0
         },
         hasQuestions () {
             return Array.isArray(this.answer.questions) && this.answer.questions.length > 0
         },
+        hasPlan () {
+            return this.isPlanAnswer && typeof this.answer.content === 'string' && this.answer.content.length > 0
+        },
         isChatAnswer () {
             return !Object.hasOwnProperty.call(this.answer, 'kind') || this.answer.kind === 'chat'
         },
         isQuestionsAnswer () {
             return this.answer.kind === 'questions'
         },
+        isPlanAnswer () {
+            return this.answer.kind === 'plan'
+        },
         isEditorContext () {
             // In editor context, the route name includes 'editor'
             return this.$route?.name?.includes('editor') || false
@@ -252,6 +278,13 @@ export default {
             if (this.componentStreamingOrder.indexOf(key) === 0) return true
             return this.streamedComponents.length >= this.componentStreamingOrder.indexOf(key)
         },
+        shouldShowPlanList () {
+            const key = 'plan-list'
+            if (!this.componentStreamingOrder.includes(key)) return false
+            if (!this.hasPlan) return false
+            if (this.componentStreamingOrder.indexOf(key) === 0) return true
+            return this.streamedComponents.length >= this.componentStreamingOrder.indexOf(key)
+        },
         shouldStream () {
             return !this.answer._streamed
         }
@@ -287,7 +320,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions(useProductExpertStore, ['updateAnswerStreamedState', 'handleQuery', 'setPendingInput']),
+        ...mapActions(useProductExpertStore, ['updateAnswerStreamedState', 'handleQuery', 'setPendingInput', 'setComposerCommand', 'setPlanMode']),
         buildStreamingOrder () {
             // order matters
             // this is where the decision of the streaming order of components is decided
@@ -301,6 +334,7 @@ export default {
             if (this.hasIssues) this.componentStreamingOrder.push('issues-list')
             if (this.hasSuggestions) this.componentStreamingOrder.push('suggestions-list')
             if (this.hasQuestions) this.componentStreamingOrder.push('questions-list')
+            if (this.hasPlan) this.componentStreamingOrder.push('plan-list')
         },
         async onComponentComplete (key) {
             if (!this.shouldStream) await this.waitFor(200)
@@ -313,6 +347,24 @@ export default {
         onQuestionsEdit (text) {
             this.setPendingInput(text)
         },
+        onPlanApprove () {
+            // Approving exits read-only plan mode so the build runs as a normal acting turn,
+            // and clears any plan text loaded into the composer via "Edit manually".
+            this.setPlanMode(false)
+            this.setComposerCommand('reset')
+            this.handleQuery({ query: 'Approved. Proceed with the plan.' })
+        },
+        onPlanEditManual () {
+            // Load the plan markdown into the composer to edit and resubmit for a re-proposal.
+            this.setPendingInput(this.answer.content)
+        },
+        onPlanRequestChanges () {
+            this.setComposerCommand('request-plan-change')
+        },
+        onPlanReject () {
+            this.setComposerCommand('reset')
+            this.handleQuery({ query: 'I do not want to proceed with this plan.' })
+        },
         handleClick (e) {
             const target = e.target
             // - Must be in the immersive editor
diff --git a/frontend/src/components/expert/components/messages/components/resources/PlanCard.vue b/frontend/src/components/expert/components/messages/components/resources/PlanCard.vue
new file mode 100644
index 0000000000..f6ef580afc
--- /dev/null
+++ b/frontend/src/components/expert/components/messages/components/resources/PlanCard.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="expert-plan">
+        <rich-content
+            :content="plan"
+            :message-uuid="messageUuid"
+            :answer-uuid="answerUuid"
+            :should-stream="false"
+            class="plan-body"
+        />
+        <div class="plan-actions">
+            <ff-button
+                kind="primary"
+                size="small"
+                :disabled="disabled"
+                @click="$emit('approve')"
+            >
+                Approve
+            </ff-button>
+            <ff-button
+                kind="secondary"
+                size="small"
+                :disabled="disabled"
+                title="Load the plan into the message box to edit it yourself"
+                @click="$emit('edit-manual')"
+            >
+                Edit
+            </ff-button>
+            <ff-button
+                kind="secondary"
+                size="small"
+                :disabled="disabled"
+                title="Tell the Expert what to change and get an updated plan"
+                @click="$emit('request-changes')"
+            >
+                Request changes
+            </ff-button>
+            <ff-button
+                kind="tertiary"
+                size="small"
+                :disabled="disabled"
+                @click="$emit('reject')"
+            >
+                Reject
+            </ff-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import RichContent from './RichContent.vue'
+
+export default {
+    name: 'PlanCard',
+    components: { RichContent },
+    props: {
+        plan: {
+            type: String,
+            required: true
+        },
+        messageUuid: {
+            type: String,
+            required: true
+        },
+        answerUuid: {
+            type: String,
+            required: true
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        shouldStream: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['approve', 'edit-manual', 'request-changes', 'reject', 'streaming-complete'],
+    mounted () {
+        // plan cards are interactive, not streamed text; signal completion
+        // so the AnswerWrapper streaming order can advance.
+        this.$nextTick(() => this.$emit('streaming-complete'))
+    }
+}
+</script>
+
+<style scoped lang="scss">
+// Render like a normal answer: no card border/background, just the plan content
+// followed by the action buttons. The gap spaces the buttons from the content.
+// The plan content inherits the message bubble's font-size, line-height and
+// colour, so the Markdown renders exactly like any other chat answer.
+.expert-plan {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.plan-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+</style>
diff --git a/frontend/src/stores/context.js b/frontend/src/stores/context.js
index 153b6fa7eb..841b55a692 100644
--- a/frontend/src/stores/context.js
+++ b/frontend/src/stores/context.js
@@ -59,7 +59,8 @@ export const useContextStore = defineStore('context', {
                     rawRoute: {},
                     selectedNodes: null,
                     scope: 'ff-app',
-                    questionCadence: useProductExpertStore().questionCadence
+                    questionCadence: useProductExpertStore().questionCadence,
+                    planMode: useProductExpertStore().planMode
                 }
             }
 
@@ -111,7 +112,8 @@ export const useContextStore = defineStore('context', {
                 scope,
                 supportsPlatformAutomation: useAccountSettingsStore().featuresCheck?.isExpertPlatformAutomationFeatureEnabled ?? false,
                 supportsPlatformUIAutomation: useAccountSettingsStore().featuresCheck?.isExpertPlatformAutomationFeatureEnabled ?? false,
-                questionCadence: useProductExpertStore().questionCadence
+                questionCadence: useProductExpertStore().questionCadence,
+                planMode: useProductExpertStore().planMode
             }
         }
     },
diff --git a/frontend/src/stores/product-expert.js b/frontend/src/stores/product-expert.js
index 28bb4119e8..4f848aaa36 100644
--- a/frontend/src/stores/product-expert.js
+++ b/frontend/src/stores/product-expert.js
@@ -30,8 +30,13 @@ export const useProductExpertStore = defineStore('product-expert', {
         loadingVariant: SUPPORT_AGENT,
         shouldWakeUpAssistant: false,
         questionCadence: 'all', // 'all' = ask every clarifying question at once, 'one' = one at a time
+        planMode: false,
         inFlightUpdates: [],
         pendingInput: '',
+        // One-shot chat composer command, consumed and cleared like pendingInput.
+        // 'request-plan-change' focuses an empty composer for the plan card's "Request
+        // changes"; 'reset' clears a plan loaded via "Edit manually" but not sent.
+        composerCommand: null,
         _seenTransactionIds: new Map()
     }),
     getters: {
@@ -181,6 +186,9 @@ export const useProductExpertStore = defineStore('product-expert', {
         setPendingInput (text) {
             this.pendingInput = text
         },
+        setComposerCommand (command) {
+            this.composerCommand = command
+        },
         async handleQuery ({ query }) {
             const agentStore = this._agentStore
 
@@ -572,6 +580,9 @@ export const useProductExpertStore = defineStore('product-expert', {
             if (!['all', 'one'].includes(cadence)) return
             this.questionCadence = cadence
         },
+        setPlanMode (enabled) {
+            this.planMode = !!enabled
+        },
         /**
          * Adds a system message to the application's message store.
          *
diff --git a/frontend/src/ui-components/components/form/ToggleSwitch.vue b/frontend/src/ui-components/components/form/ToggleSwitch.vue
index e3959e617f..aab90f1977 100644
--- a/frontend/src/ui-components/components/form/ToggleSwitch.vue
+++ b/frontend/src/ui-components/components/form/ToggleSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-    <label class="ff-toggle-switch" :disabled="disabled" :class="{'checked': model}">
+    <label class="ff-toggle-switch" :disabled="disabled" :class="[{'checked': model}, `ff-toggle-switch--${size}`]">
         <!-- <input v-model="model" type="checkbox" :value="modelValue" /> -->
         <div class="ff-toggle-switch-slider" @click="toggle">
             <div class="ff-toggle-switch-button">
@@ -18,6 +18,10 @@ export default {
             default: false,
             type: Boolean
         },
+        size: {
+            default: 'normal',
+            type: String // 'normal' | 'small'
+        },
         mode: {
             default: 'sync',
             type: String
diff --git a/frontend/src/ui-components/stylesheets/ff-components.scss b/frontend/src/ui-components/stylesheets/ff-components.scss
index c86362fe00..62db2b0b35 100644
--- a/frontend/src/ui-components/stylesheets/ff-components.scss
+++ b/frontend/src/ui-components/stylesheets/ff-components.scss
@@ -563,6 +563,17 @@ li.ff-kebab-item {
         color: var(--ff-color-text-disabled);
       }
     }
+    &.ff-toggle-switch--small {
+      --ff-toggle-width: 30px;
+      --ff-toggle-translate: 12px;
+      height: 18px;
+      .ff-toggle-switch-button {
+        height: 14px;
+        width: 14px;
+        left: 2px;
+        bottom: 2px;
+      }
+    }
 }
 
 .ff-toggle-switch-slider {