feat(workflows): offer a switch from the sandbox sender

docs/internal/workflows-email-sending-tiers.md

@@ -36,6 +36,8 @@ The managed integration is excluded from project SES tenant migration, identity
 Deploy the schema, recipient restrictions, daily caps, and tenant pause checks first. Configure the shared SES route, then enable `WORKFLOWS_SANDBOX_SENDER_ENABLED` on the worker and CDP API. Enable `workflows-sandbox-sender` last so provisioning and sender selection follow delivery readiness.
 The sandbox sender is available only in workflow email steps and test sends. Broadcasts, destinations, sender rotation, custom From values, and Reply-To overrides are rejected. Unchanged stored sender settings remain editable.
 Saves check the sandbox sender only while `workflows-sandbox-sender` is on for the project, so projects without the flag skip the integration lookup.
+When a project has a verified own sender, a workflow with email steps on the sandbox sender shows a banner that moves all of those steps to the own sender in one click.
+The switch saves as a draft change. An active workflow keeps sending from the sandbox sender until someone publishes.
 
 ### Sending tiers
 

products/workflows/frontend/Workflows/WorkflowSandboxSwitchBanner.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { BindLogic } from 'kea'
+
+import { FEATURE_FLAGS } from 'lib/constants'
+
+import { useStorybookMocks } from '~/mocks/browser'
+import { AccessControlLevel } from '~/types'
+
+import type { HogFlow } from './hogflows/types'
+import { NEW_WORKFLOW, WorkflowLogicProps, workflowLogic } from './workflowLogic'
+import { WorkflowSandboxSwitchBanner } from './WorkflowSandboxSwitchBanner'
+
+const LOGIC_PROPS: WorkflowLogicProps = { id: 'storybook-sandbox-switch-banner' }
+
+const SANDBOX_SENDER = {
+    id: 7,
+    kind: 'email',
+    display_name: 'Acme via PostHog <sandbox@example.com>',
+    config: { provider: 'sandbox', name: 'Acme via PostHog', email: 'sandbox@example.com', verified: true },
+    created_at: '2026-08-18T00:00:00Z',
+}
+
+const OWN_SENDER = {
+    id: 8,
+    kind: 'email',
+    display_name: 'Acme <hello@acme.example.com>',
+    config: {
+        provider: 'ses',
+        name: 'Acme',
+        email: 'hello@acme.example.com',
+        domain: 'acme.example.com',
+        verified: true,
+    },
+    created_at: '2026-08-18T00:00:00Z',
+}
+
+const SECOND_OWN_SENDER = {
+    id: 9,
+    kind: 'email',
+    display_name: 'Acme support <support@acme.example.com>',
+    config: {
+        provider: 'ses',
+        name: 'Acme support',
+        email: 'support@acme.example.com',
+        domain: 'acme.example.com',
+        verified: true,
+    },
+    created_at: '2026-08-18T00:00:00Z',
+}
+
+const SANDBOX_WORKFLOW: HogFlow = {
+    ...NEW_WORKFLOW,
+    id: LOGIC_PROPS.id!,
+    name: 'Welcome email',
+    user_access_level: AccessControlLevel.Editor,
+    actions: [
+        {
+            id: 'trigger',
+            type: 'trigger',
+            name: 'New account created',
+            description: '',
+            config: { type: 'event', filters: {} },
+        },
+        {
+            id: 'email',
+            type: 'function_email',
+            name: 'Send welcome email',
+            description: '',
+            config: {
+                template_id: 'template-email',
+                inputs: {
+                    email: {
+                        value: {
+                            to: { email: '{{ person.properties.email }}', name: '' },
+                            from: { integrationId: SANDBOX_SENDER.id },
+                            subject: 'Welcome aboard',
+                            text: 'Your account is ready.',
+                            html: '<p>Your account is ready.</p>',
+                        },
+                        templating: 'liquid',
+                    },
+                },
+            },
+        },
+        { id: 'exit', type: 'exit', name: 'Exit', description: '', config: { reason: 'Completed' } },
+    ],
+    edges: [
+        { from: 'trigger', to: 'email', type: 'continue' },
+        { from: 'email', to: 'exit', type: 'continue' },
+    ],
+}
+
+type StoryArgs = {
+    ownSenders: (typeof OWN_SENDER)[]
+    narrow?: boolean
+    constrained?: boolean
+}
+
+const meta: Meta<StoryArgs> = {
+    title: 'Products/Workflows/Sandbox switch banner',
+    parameters: {
+        layout: 'padded',
+        viewMode: 'story',
+        featureFlags: [FEATURE_FLAGS.WORKFLOWS_SANDBOX_SENDER],
+        testOptions: { waitForSelector: '[data-attr="workflow-sandbox-switch-sender"]' },
+    },
+}
+export default meta
+
+const Template: StoryFn<StoryArgs> = ({ ownSenders, narrow, constrained }): JSX.Element => {
+    useStorybookMocks({
+        get: {
+            '/api/environments/:team_id/hog_flows/:id/': SANDBOX_WORKFLOW,
+            '/api/projects/:team_id/integrations/': { results: [SANDBOX_SENDER, ...ownSenders] },
+            '/api/projects/:team_id/hog_function_templates': { count: 0, results: [] },
+            '/api/environments/:team_id/messaging_categories': { count: 0, results: [] },
+        },
+    })
+    return (
+        <BindLogic logic={workflowLogic} props={LOGIC_PROPS}>
+            <div className={narrow ? 'w-[520px]' : 'max-w-4xl'}>
+                <div className={constrained ? 'h-[400px] flex flex-col' : undefined}>
+                    <WorkflowSandboxSwitchBanner {...LOGIC_PROPS} />
+                    {constrained && <div className="grow min-h-[400px]" />}
+                </div>
+            </div>
+        </BindLogic>
+    )
+}
+
+export const OneOwnSender = Template.bind({})
+OneOwnSender.args = { ownSenders: [OWN_SENDER] }
+
+export const OneOwnSenderNarrow = Template.bind({})
+OneOwnSenderNarrow.args = { ownSenders: [OWN_SENDER], narrow: true }
+
+export const ConstrainedScene = Template.bind({})
+ConstrainedScene.args = { ownSenders: [OWN_SENDER], constrained: true }
+
+export const ConstrainedSceneNarrow = Template.bind({})
+ConstrainedSceneNarrow.args = { ownSenders: [OWN_SENDER], constrained: true, narrow: true }
+
+export const OneOwnSenderLongAddressNarrow = Template.bind({})
+OneOwnSenderLongAddressNarrow.args = {
+    ownSenders: [
+        {
+            ...OWN_SENDER,
+            display_name: 'Acme notifications <notifications-and-billing@mail.acme.example.com>',
+            config: { ...OWN_SENDER.config, email: 'notifications-and-billing@mail.acme.example.com' },
+        },
+    ],
+    narrow: true,
+}
+
+export const SeveralOwnSenders = Template.bind({})
+SeveralOwnSenders.args = { ownSenders: [OWN_SENDER, SECOND_OWN_SENDER] }
+
+export const SeveralOwnSendersNarrow = Template.bind({})
+SeveralOwnSendersNarrow.args = { ownSenders: [OWN_SENDER, SECOND_OWN_SENDER], narrow: true }

products/workflows/frontend/Workflows/WorkflowSandboxSwitchBanner.tsx

@@ -0,0 +1,36 @@
+import { useActions, useValues } from 'kea'
+
+import { LemonBanner } from '@posthog/lemon-ui'
+
+import { WorkflowLogicProps } from './workflowLogic'
+import { workflowSandboxSwitchBannerLogic } from './workflowSandboxSwitchBannerLogic'
+import { WorkflowSandboxSwitchSenderButton } from './WorkflowSandboxSwitchSenderButton'
+
+export function WorkflowSandboxSwitchBanner(props: WorkflowLogicProps): JSX.Element | null {
+    const logic = workflowSandboxSwitchBannerLogic(props)
+    const { bannerVisible, verifiedOwnSenders, switchDisabledReason } = useValues(logic)
+    const { switchToOwnSender } = useActions(logic)
+
+    if (!bannerVisible) {
+        return null
+    }
+
+    return (
+        <LemonBanner type="info" alignItems="start" className="@container shrink-0">
+            <div
+                className="flex flex-col gap-2 @xl:flex-row @xl:items-center"
+                data-attr="workflow-sandbox-switch-banner"
+            >
+                <span className="min-w-0 flex-1">
+                    Your project has a verified email sender. This workflow still sends from the sandbox sender, which
+                    delivers only to verified members of your organization.
+                </span>
+                <WorkflowSandboxSwitchSenderButton
+                    senders={verifiedOwnSenders}
+                    disabledReason={switchDisabledReason}
+                    onSwitch={switchToOwnSender}
+                />
+            </div>
+        </LemonBanner>
+    )
+}

products/workflows/frontend/Workflows/WorkflowSandboxSwitchSenderButton.tsx

@@ -0,0 +1,43 @@
+import { LemonButton, LemonMenu } from '@posthog/lemon-ui'
+
+import { IntegrationType } from '~/types'
+
+export function WorkflowSandboxSwitchSenderButton({
+    senders,
+    disabledReason,
+    onSwitch,
+}: {
+    senders: IntegrationType[]
+    disabledReason: string | null
+    onSwitch: (integrationId: number) => void
+}): JSX.Element {
+    const buttonProps = {
+        type: 'secondary' as const,
+        size: 'small' as const,
+        disabledReason,
+        'data-attr': 'workflow-sandbox-switch-sender',
+        className: 'max-w-full self-start @xl:self-auto',
+    }
+
+    if (senders.length === 1) {
+        const label = `Switch to ${senders[0].config.email}`
+        return (
+            <LemonButton {...buttonProps} truncate tooltip={label} onClick={() => onSwitch(senders[0].id)}>
+                {label}
+            </LemonButton>
+        )
+    }
+
+    return (
+        <LemonMenu
+            items={senders.map((sender) => ({
+                label: sender.display_name,
+                onClick: () => onSwitch(sender.id),
+                'data-attr': 'workflow-sandbox-switch-sender-option',
+            }))}
+            placement="bottom-end"
+        >
+            <LemonButton {...buttonProps}>Switch sender</LemonButton>
+        </LemonMenu>
+    )
+}

products/workflows/frontend/Workflows/WorkflowScene.tsx

@@ -50,6 +50,7 @@
 import { WorkflowLogicProps, workflowLogic } from './workflowLogic'
 import { WorkflowMetrics } from './WorkflowMetrics'
 import { WorkflowRevisions } from './WorkflowRevisions'
+import { WorkflowSandboxSwitchBanner } from './WorkflowSandboxSwitchBanner'
 import { WorkflowSceneHeader } from './WorkflowSceneHeader'
 import { WorkflowSceneLogicProps, WorkflowTab, workflowSceneLogic } from './workflowSceneLogic'
 import { TRIGGER_PREFILL_PARAM } from './workflowTriggerPrefill'
@@ -64,7 +65,7 @@
     productKey: ProductKey.WORKFLOWS,
 }
 
 export function WorkflowScene(props: WorkflowSceneLogicProps): JSX.Element {
     const workflowSceneProps: WorkflowSceneLogicProps = {
         id: props.id || 'new',
         tab: props.tab || 'workflow',
@@ -253,6 +254,7 @@
                 {isSavedWorkflow && <WorkflowImportNotesBanner id={props.id!} />}
                 {isSavedWorkflow && <WorkflowBroadcastMoveBanner id={props.id!} />}
                 {!isSavedWorkflow && <WorkflowAiEmailDraftStatus {...workflowProps} />}
+                <WorkflowSandboxSwitchBanner {...workflowProps} />
                 {suggestionsAvailable && isSavedWorkflow && <WorkflowSuggestionsNotice id={props.id!} />}
                 {/* Only show Logs and Metrics tabs if the workflow has already been created */}
                 {!props.id || props.id === 'new' ? (